第四章 ???初始CSS

一.引入样式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.12.使用<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; ???????}