初始CSS3小知识【99%人不知道的小技巧】

一.引入样式    1.行内样式表   <h1 style="color: red;font-size: 18px;">10-30</h1>     2.内部样式表(在head标签里面,title标签下面)   <style type="text/css">    h2{     color: yellow;     font-size: 20px;    }   </style>   优点    方便在同页面中修改样式   缺点    不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

 3.外部样式表   嵌入式    <link href="../css/index.css" rel="stylesheet" type="text/css"/>   导入式    <style type="text/css">     @import "../css/index.css";    </style>   嵌入式和导入式的区别：    1.<link/>标签属于XHTML，@import是属于CSS2.1    2.使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示    3.使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中    4.@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的      4.样式优先级   行内>内部>外部   就近原则   

二.基本选择器    1.标签选择器(通过标签名称定位)   h2{             color: red;         }     2.类选择器(通过标签中class属性的值定位，值可以重复，不能以数字开头)   .class01{             color:yellow;         }   <h2 class="class01">10-30</h2>   <h1 class="class01">10-31</h1>     3.ID选择器(通过标签中id属性的值定位，值不可以重复，不能以数字开头)    #id01{             color: red;         }   <h2 id="id01">10-30</h2>   <h1 id="id02">10-31</h1>     4.基本选择器的优先级   不遵循就近原则，无论哪一种样式表的导入，都遵循：id选择器>类选择器>标签选择器    三.高级选择器    1.层次选择器    /*后代选择器*/         li p{             background-color: yellow;         }         /*子选择器*/         body>p{             background-color: aqua;         }         /*相邻兄弟*/         .class01+p{             background-color: red;         }         /*通用选择器*/         .class01~p{             background-color: blue;         }    2.结构伪类选择器     ul li:first-child{             background-color: yellow;         }         ul li:last-child{               background-color: red;         }         ul li:nth-child(even){             background-color: blue;         }   /*匹配元素类型*/         p:first-of-type{             background-color: pink;         }         p:last-of-type{             background-color: green;         }         p:nth-of-type(3){             background-color: aqua;         }    3.属性选择器   /*包含id属性*/   a[id]{             background-color: red;         }   /*包含target属性，并且值为_blank*/         a[target=_blank]{             background-color: yellow;         }   /*包含title属性，并且值以we开头*/         a[title^=we]{             background-color: aqua;         }   /*包含title属性，并且值以e结尾*/         a[title$=e]{             background-color: black;         }   /*包含class属性，并且值包含it*/         a[class*=it]{             background-color: blue;         }