02-CSS基础与进阶-day4__2018-08-31-21-02-19

css
文字阴影(css3)
text-shadow: 水平位置垂直位置模糊距离阴影颜色

层叠性
1 含义多种css样式叠加,浏览器处理冲突的一种能力
2 原则一般情况下，若出现样式冲突，会按照CSS书写的顺序以最后的为准,样式不冲突，不会层叠
继承性
一般文本颜色和字号,font-开头的属性,text-开头的属性、line-开头的,color可以被继承
优先级
id选择器>class选择器>标签选择器
注意特殊情况
* 行内样式优先
* css定义了一个命令!important,该命令赋予最大的优先级
* 继承样式权重为0
* 权重相同,css遵循就近原则，谁靠近元素的样式具有最大的优先级

行内样式优先：style

05css优先级.html

02-CSS基础与进阶-day4__2018-08-31-21-02-19

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       /* 1 0 0*/
       #chijie {
          color: blue;
      }
       
       /*0 0 1*/
      div:first-child {
            color: gray;
      }

     
      /*0 1 0*/
      .chicken {
            color: green;
      }
       
      /*0 0 1*/ 
      div {
            color: purple;
      }



    </style>
</head>
<body>
    <div class="chicken" id="chijie">我爱吃鸡</div>
</body>
</html>

06css权重.html

02-CSS基础与进阶-day4__2018-08-31-21-02-19

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       body {
             color: #ccc;
       }
       /*
         id选择器的数量  class选择器的数量  标签选择器的数量
       */
       /*0 0  2*/
       ul li {
           color: green;
       }
       /*0 0 1*/
       li {
           color: red;
       }
       /*0 0 3*/
       nav ul li {
           color: blue;
       }


       /*0 1 2*/
       .nav-menu ul li {
            color: pink;
       }

        /*0 1 2*/
       ul.navbar li {
             color: yellow;
       }
       
    </style>
</head>
<body>
    <nav class="nav-menu">
        <ul class="navbar">
            <li>首页</li>
            <li>公司产品</li>
            <li>关于我们</li>
        </ul>
    </nav>
</body>
</html>

02-CSS基础与进阶-day4__2018-08-31-21-02-19

相关推荐