一、CSS介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
二、CSS语法
2.1CSS实例
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
三、css的几种引入方式
3.1 行内样式
<span style="color:red;">行内样式</span>
3.2内部样式
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ color: red; } </style> </head> <body> <p>内部样式</p> </body>
3.3外部样式
<link href="css文件目录" rel="stylesheet" type="text/css"/>
四、css选择器
4.1基本选择器
元素选择器
p{color:red;}
ID选择器
#a{color:red;}
类选择器
.a{color:red;}
通用选择器
*{color:red}
4.2组合选择器
后代选择器
选中div内部所有p标签 span a{color:red;}
儿子选择器
选择的是父级div元素中所有p元素
div>p{color:red;}
毗邻选择器
选择的是紧接着div元素后的p元素
div+p{}
弟弟选择器
选择的是li后面的所有兄弟p标签
li~p{}
4.3属性选择器
/*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; }
4.4分组和嵌套
分组
多个元素的一起设置样式
div, p { color: red; }
嵌套
多种选择器一起设置样式
.c1 p { color: red; }
4.5伪类选择器
/* 未访问的链接 */ a:link { color: red } /* 鼠标移动到链接上 */ a:hover { color: green } /* 选定的链接 */ a:active { color: blue } /* 已访问的链接 */ a:visited { color: black } /*input输入框获取焦点时样式*/ input:focus { outline: none; background-color: #eee; }
4.6伪类元素选择器
常用的给首字母设置特殊样式： p:first-letter { font-size: 48px; color: red; } before在每个<p>元素之前插入内容 p:before { content:"*"; color:red; } after在每个<p>元素之后插入内容 p:after { content:"[?]"; color:blue; }
4.7选择器的优先级
内联样式>id选择器>类选择器>元素选择器