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,优先级则为最高，超过内联样式。所以在开发中，尽量避免使用。
4. CSS的基本属性
(1). 字体属性
- color：字体颜色
- font-style：字体的样式（正常或者斜体）（斜体：font-style:italic;）
- font-size：字体的大小
- font-family：字体族科（使用哪种字体，必须客户端存在的字体）
- font-weight：指定字体的粗细（font-weight:bold;值也可以是数字，最大为900）
- font-variant：设置字体为小型的大写字母（font-variant:small-caps;）
- font 简写属性：斜体/小型大写字母/粗体/(字体/行高)/族科
- letter-spacing：设置字的间距
- word-spacing：设置单词的词间距（对中文无效）
- opacity：设置颜色的透明度（值从0-1，数字越小越透明）
- overflow | overflow-x | overflow-y 当内容溢出元素框时隐藏|自动|显示混动条
- text-overflow 让溢出的文字以省略号显示
- white-space 设置文字是否在同一行显示
(2).文本属性
- text-align:元素内容对齐方式（值：默认：left，center，right）
- text-decoration:指定文本是否有修饰，默认为none
- underline：下划线
- overline：上划线
- line-through：删除线，中间划线
- text-indent：文本首行缩进
- text-wrap：设置当前行超过指定容器的边界时是否换行。
- vertical-align：设置对象内容垂直的对齐方式。
- line-height：设置对象的行高（当字体的行高和容器高度相同的时候，文本就会居中显示）
(3).背景属性
- background-color：背景颜色 默认值：transparent透明的
- background-image：背景图片（background-image:url(‘./img/123.jpg’);）
- background-repeat:背景图片是否重复。
- 默认值：repeat：背景图默认向水平和锤子方向重复。
- repeat-x:背景图水平方向重复铺平。
- repeat-y：背景图片垂直方向重复铺平。
- no-repeat：不会重复
- inherit：属性设置从父元素继承。
- background-size：设置背景图片大小（background-size:80px 60px;）
- background-position：设置背景图片相对于外层容器的位置。
- background-attachment：背景图片是否随内容滚动。
- background 背景属性简写
background: #00ff00 url('smiley.gif') no-repeat fixed center;
