一、简介：中文名为层贴样式表，就是给HTML的标签添加各种样式的。
二、注释：
1、形式：
/*单行注释*/ /* 多行注释1 多行注释2 */
2、用途：因为css文件内容很多，不易查看，所以一般都用注释来备注某部分样式语句的作用范围。
/*以下是区域1的样式*/ /*样式语句1*/ /*样式语句1*/ /*样式语句1*/ /*以下是区域2的样式*/ /*样式语句2*/ /*样式语句2*/ /*样式语句2*/ /*以下是区域3的样式*/ /*样式语句3*/ /*样式语句3*/ /*样式语句3*/
三、CSS语句基本语法：选择器 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}
四、引用CSS的三种方式：
1、在HTML文件的style标签内直接书写CSS语句。
<style> b { color: red; } </style>
2、在HTML文件的link标签中链接外部的CSS文件。
<link rel="stylesheet" href="mycss.css">
3、行内式：在标签内直接定义style属性。
<i style="color: blue">我是蓝色的</i>
五、CSS使用的原则：先通过选择器找到标签，再按照设计的样式式执行。
六、CSS选择器的分类：
1、基本选择器：
<p id="d1">我的id是d1，蓝色</p> <p class="c1">我的class是c1，绿色</p> <p class="c1 c2">我的class是c1，绿色，我class还有c2</p> <b>我是b标签1，红色</b> <b>我是b标签2，红色</b>
#d1 { /*id选择器，即查找id为d1的标签*/ color: blue; } .c1 { /*class选择器，即查找所有class为c1的标签*/ color: green; } b { /*标签(元素)选择器，即查找所有b标签*/ color: red; }
* { /*全体(通用)选择器，对象是所有标签*/ color: black; }
2、组合选择器：关系选择器。
<style> div span { /*后代选择器，只要某个span在某个div的嵌套中，不管是第几层，就会被选中，被选中span的嵌套也会被选中*/ color: blue; } </style> <!--头结束--> </head> <body> <!--正文开始--> <div>(div1) <span>(span1,在div1的第1层嵌套) <u>(u1,在span1的第1层嵌套)</u> </span> <p>(p1,在div1的第1层嵌套) <span>(span2,在div1的第2层嵌套)</span> </p> </div>
<style> div>span { /*儿子选择器，某个span在某个div的第1层嵌套，才会被选中，被选中span的嵌套也会被选中*/ color: blue; } </style> <!--头结束--> </head> <body> <!--正文开始--> <div>(div1) <span>(span1,在div1的第1层嵌套) <u>(u1,在span1的第1层嵌套)</u> </span> <p>(p1,在div1的第1层嵌套) <span>(span2,在div1的第2层嵌套)</span> </p> </div>
<style> div+span { /*毗邻选择器，某个span在某个div的同级紧挨下一个，才会被选中，被选中span的嵌套也会被选中*/ color: blue; } </style> <!--头结束--> </head> <body> <!--正文开始--> <div>(div1) </div> <span>(span1,同级紧挨div1的下一个) <u>(u1,span1的嵌套第1层)</u> </span> <span>(sap2,同级div1的下下个)</span>
<style> div~span { /*弟弟选择器，某个span在某个div的同级后面，不管是否紧挨，都会被选中，被选中span的嵌套也会被选中*/ color: blue; } </style> <!--头结束--> </head> <body> <!--正文开始--> <div>(div1) </div> <span>(span1,同级紧挨div1的下一个) <u>(u1,span1的嵌套第1层)</u> </span> <span>(sap2,同级div1的下下个)</span>
3、属性选择器
<style> [title] { /*有title属性的所有标签*/ color: green; } </style> <!--头结束--> <p title="111">有title属性,且title="111"的p标签</p> <p title="222">有title属性,且title="222"的p标签</p> <span title="111">有title属性,且title="111"的span标签</span> <p>没有title属性的p标签</p>
<style> [title='111'] { /*有title属性,且属性值为'111'的所有标签*/ color: green; } </style> <!--头结束--> <p title="111">有title属性,且title="111"的p标签</p> <p title="222">有title属性,且title="222"的p标签</p> <span title="111">有title属性,且title="111"的span标签</span> <p>没有title属性的p标签</p>
<style> p[title='111'] { /*有title属性,且属性值为'111'的p标签*/ color: green; } </style> <!--头结束--> <p title="111">有title属性,且title="111"的p标签</p> <p title="222">有title属性,且title="222"的p标签</p> <span title="111">有title属性,且title="111"的span标签</span> <p>没有title属性的p标签</p>
