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

太过爱你忘了你带给我的痛 2022-01-05 11:43 145阅读 0赞

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

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

行内样式优先：style

![1603260-20190618190829810-572758202.png][]

05css优先级.html

![1603260-20190618191838887-957666934.png][]

<!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

![1603260-20190618192025022-1569462611.png][]

<!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>

转载于:https://www.cnblogs.com/HiJackykun/p/11047114.html

[1603260-20190618190829810-572758202.png]: /images/20211229/f0139869f09f4abb86650a6e030fb357.png
[1603260-20190618191838887-957666934.png]: /images/20211229/a8e38fa0c5a049d8b4dd107da8c9997e.png
[1603260-20190618192025022-1569462611.png]: /images/20211229/8481beb9a59448998e1109c2cd8860ae.png