css入门知识

来源：互联网发布：手机淘宝店招尺寸多少编辑：程序博客网时间：2024/05/15 07:08
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style type="text/css">        #price{      /*选择器（即修饰对象）*/            color: red;            font-size: 40px;            text-decoration: underline;        }        li{     /*标签选择器  作用于当前页面的所有匹配标签*/            color: blue;        }        .red{     /*类选择器   作用于当前页面的所有class值为red的标签*/            color: red;        }        /*ID选择器  id只在当前页面具有唯一性*/        #ddl{            color: aqua;        }    </style>    <link rel="stylesheet" href="../../css/005css.css"/>    <title>css入门</title></head><body><h1 style="text-align: center">css样式</h1><!--css的写法 分三类--><!--行内样式优先级比内部样式高--><!--内部样式优先级比外部样式高--><!--以上效果实现要符合‘就近原则’--><!--按照读取顺序，如果id相同，相同的样式会被覆盖--><hr/><!--1。行内样式 只有当前标签可用，写法比较繁琐，在各种写法极力避免--><p style="text-align: center">    电脑 <span style="color: aqua;font-size: 40px">1</span>元起</p><!--2.内部样式  只在当前页面可用，比行内写法要好，缺点：多个页面无法公用一个样式--><p style="text-align: center">    电脑<span id="price">1</span>元起</p><!--3.外部样式  推荐写法！样式可以复用，做到了样式和文件的分离。--><!--<link rel="stylesheet" href="../../css/005css.css"/>--><p style="text-align: center">    电脑<span id="price2">1</span>元起</p><ul>    <li>家用电器</li>    <li class="red">各类书籍</li>    <li>手机数码</li>    <li class="red">日用百货</li></ul><ol>    <li>111</li>    <li>222</li>    <li id="ddl">333</li>    <li>444</li></ol><hr/></body></html>
0 0