初始CSS3

一.引入样式

　　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;
　　　　　　}