叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
特点:
1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠
2.使数据和显示分开
3.降低网络流量
4.使整个网站视觉效果一致
5.使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）
CSS优先级 : id选择器 > 类选择器 > 元素选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
body{ color:gray; font-size: 12px; } /*标签选择器*/ p{ color: red; font-size: 20px; } span{ color: yellow; } 所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开
<style> .lv{ color: green; } .big{ font-size: 40px; } .line{ text-decoration: underline; } </style> <body> <!-- 公共类 共有的属性 --> <div> <p class="lv big">段落1</p> <p class="lv line">段落2</p> <p class="line big">段落3</p> </div> </body>同一个页面中id不能重复。
任何的标签都可以设置id ，id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
<style> #box{ background:green; } #s1{ color: red; } #s2{ font-size: 30px; } </style> <body> <div id="box">娃哈哈</div> <div id="s1">爽歪歪</div> <div id="s2">QQ星</div> </body> 使用 空格 表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
<style> /*后代选择器 使用 '空格' 表示后代选择器 */ div span { color: peachpuff; } </style> <body> <!--后代选择器 使用 空格 表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子） --> <div>父选择器 <span>子代选择器</span> <div> <p> <span>重孙代选择器</span> </p> <span>孙代选择器</span> </div> </div> </body> 使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
<style> /*子代选择器 > 号, 只找子代div标签的span儿子标签 */ div>span{ color: darkorange; } </style> <body> <!--子代选择器 > 号,找到div下的所有的子标签 --> <div> <span>div-->span 子标签</span> <p> <span>span 子标签</span> </p> <div> <span>div-->span 子标签</span> </div> </div> </body> 多个选择器之间使用 逗号 隔开.表示选中的页面中的多个标签.一些共性的元素,可以使用并集选择器
<style> /* 并集选择器 逗号分隔,所有的标签都应用样式 */ ul,ol,span{ background-color: darkturquoise; } </style> <body> <!--并集选择器(组合选择器) 逗号分隔 , 所有的标签都应用样式 --> <ul> <li>u-li1</li> <ul> <li>u-li2</li> </ul> </ul> <ol> <li>o-li</li> </ol> <div> <div> <span>span标签</span></div> </div> <span>123 <br> <span>span标签</span></span> </body>使用 . 表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.box1.box2那么它表示两者选中之后元素共有的特性。
<style> /*交集选择器*/ div.box1.box2{ background-color: red; width: 200px; height: 200px; } div.box1{ background-color: green; width: 200px; height: 200px; } </style> <body> <!--交集选择器 点( . ) , 应用符合div标签的类选择器的标签 --> <div class="box1 box2">box1box2</div> <div class="box2">box1</div> <div>aaa <div class="box1">这是嵌套的div</div> </div> <span class="box1 ">span标签</span> </body>伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte
<style> a:link{ /* 没有浏览过,应用此颜色 */ color: cornflowerblue; } a:visited{ /* 浏览过后,应用此颜色*/ color: chartreuse; } a:active{ /* 鼠标点击事件 */ color: rebeccapurple; } a:hover{ /* 鼠标悬浮事件*/ color: firebrick; } input:focus{ /* 点击聚焦事件*/ background-color: fuchsia; } div{ width: 100px; height: 100px; background-color: lightgray; } div:hover{ /* div标签 鼠标悬浮事件 */ background-color: pink; } </style> <body> <!--#### 伪类选择器 a : link visited active input: focus 通用: hover --> <a href="http://www.xiaohuar.com">这是应用了伪类选择器</a> <input type="text"> <div></div> </body>W3C更多~~更全
<style> /* 伪元素选择器 */ p:first-letter{ /* 在文本的最开头用于第一个字 */ color: greenyellow; } div:before{ /* 在文本的最开头添加content 内容,并应用样式 */ content: '$$$'; color: pink; } span:after{ /* 在文本的最末尾添加content 内容,并应用样式 */ content: 'abc'; color: aqua; } </style> <body> <!--#### 伪元素选择器 标签:first-letter 在文本的最开头用于第一个字 标签:before 在文本的最开头添加content 内容,并应用样式 标签:after 在文本的最末尾添加content 内容,并应用样式 --> <p>你好啊~~,今天吃了吗1</p> <div>你好啊~~,今天吃了吗2</div> <span>你好啊~~,今天吃了吗3</span> </body>属性选择器，字面意思就是根据标签中的属性，选中当前的标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 属性选择器 语法:属性选择器 [属性]/[属性='值'] # 单个属性 : input[type='text'] # 多个属性 : input[type='password'][id='in'] */ input[type='text']{ background-color: mediumspringgreen; } input[type='password'][id='in']{ background-color: gold; } </style> </head> <body> <div> <input type="text"> <input type="password" id="in"> </div> </body> </html>转载于:https://www.cnblogs.com/dengl/p/11324001.html
