1. 认识css
- css的基本构成：选择符，属性，属性值
例：p{color:#ff0000} - css对大小写不敏感，推荐使用小写
- 属性与属性值之间用:分开，多个属性用;间隔。
- css中注释方式：/* 注释内容 */
2. 放置css的几种方式
- 内联样式（行内引用）
<p style=""></p>
- 内嵌样式（内部引用）
<!doctype html><html><title></title><head><style>p{color:#ff0000;fontsize:15px;}</style></head></html>
- 外联样式（外部引用）
<!doctype html><html><head><link rel="stylesheet" type="text/css" href="css文件地址"></head></html>
3. CSS选择器
(1). 基本选择器
类选择器（class选择器）
- 在css中用.来查找。（类选择器中可以多个属性，用空格分开）
唯一选择器（ID选择器）
- 在css中用#查找。
通配符选择器(*)
- 匹配所有标签
标签选择器
- 根据html中的标签来选择对应的标签名，这个时候该页面的所有该标签都会被选择。
(2). 层级选择器
组合选择器。多个选择器用逗号分开：选择器1，选择器2，选择器3。如：div,p
包含选择器。选择器1 选择器2。表示选择器1包含选择器2。如：div p
子选择器。选择器1>选择器2.表示选择器1的子元素为选择器2.如：div>p
相邻选择器。选择器1+选择器2.表示选择紧贴在选择器1之后的选择器2元素.如：div+p
兄弟选择器。选择器1~选择器2。表示选择器1后面的所有兄弟元素选择器2.如div~p
(3). 属性选择器
属性选择器：就是通过属性名或者属性值来查找某个元素。
名称介绍
- E element 表示元素标签
- ATT attribute 表示属性
- VAL value 表示属性值
标签[属性]
- E[ATT] , 表示匹配所有具备ATT属性的 E元素，不考虑属性值。
- E[ATT=VAL], 匹配所有ATT属性的值等于VAL的E元素。
- E[ATT~=VAL] 匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素。
- E[ATT|=VAL],匹配所有ATT属性具有多个连接分隔符的值，其中一个值以val-开头的E元素，主要用于lang属性。比如：’en-us’,’en-gb’（了解即可）。
- E[ATT^=VAL],属性ATT的值以VAL开头的E元素。
- E[ATT$=VAL],属性ATT的值以VAL结束的E元素。
- E[ATT*=VAL],属性ATT的值包含VAL的E元素。
input[type="text"]{border:1px solid red;}
(4). 结构性伪类选择器
伪元素选择器（不是真正的元素选择）
- E:first-line E元素的第一行
- E:first-letter E元素的第一个字母
- E:before E元素的内容之前
- E:after E元素的内容之后
结构性伪类选择器
（内容待添加）
(5). 状态伪类选择器
- :link 设置超链接a在未被访问前的样式
- :hover 设置元素在鼠标悬浮时候的样式（适用于所有元素，不限于超链接）
- :active 设置超链接被a被激活时的样式（点了鼠标还没放开的时候状态）
- :visited 设置超链接a被访问过的样式
(6). 选择器优先级
- 内联样式，优先级1000
- id选择器，优先级100
- 类和伪类，优先级10
- 元素选择器，优先级1
- 通配符选择器，优先级0
当包含多种选择器时，需要多种选择器的优先级相加后再做比较.选择器的优先级不会超过最大优先级数量级1000，如果选择器的优先级一样，则使用靠后的样式。
并集（组合）选择器的优先级是单独计算。
如果在样式的最后加上 !important,优先级则为最高，超过内联样式。所以在开发中，尽量避免使用。
