006 HTML+CSS(Class036 - 050)
[A] CSS文字样式
font-family：文字类型
只针对英文起作用的字体：Arial, "Times New Roman"...
中英文均可识别的字体：微软雅黑，宋体...
衬线体与非衬线体
字体有衬线体与非衬线体之别，衬线体字体有棱有角，笔画粗细有变化；而非衬线体比较圆滑，笔画粗细相同
通常情况下，字体样式设置为多种，以防计算机中不存在某种字体。
font-size：字体大小
属性值：数值(px) / 单词(small,large......)
font-weight: 字体粗细模式
属性值：
1. 单词设置 normal(正常) bold(加粗)
2. 数值设置 (100，200，......900，其中100-500为正常，600-900为加粗效果)
font-style：字体样式
属性值：normal(正常) italic(斜体，只能操作具备倾斜字体属性的字体)，oblique(斜体，较少用，可以操作任何字体)
color：颜色
[B] CSS段落样式
1. text-decoration: 文本修饰
可选值：underline 下划线
overline 上划线
linethrough 删除线
none 不添加任何装饰
【注】上划线，下划线，删除线可同时设置，中间用空格隔开即可
2. text-transform：文本大小写(只针对英文段落)
可选值：lowercase 全部改为小写
uppercase 全部改为大写
capitalize 首字母改为大写
3. text-indent：首行缩进
可选值：20px 像素值，若缩进值与字体大小值相同，则缩进一个字。以此类推
em单位 相对值，一个em永远跟字体大小相同，1em则缩进一个字，2em缩进两个字，以此类推
4. text-align：文本对齐方式
可选值：left(左对齐)，right(右对齐), center(居中对齐), justfy(两端对齐)
line-height：定义行高，即一行文字的高度，默认上边距和下边距相同，行高根据字体大小而变化
可选值：
20px 像素值大小
5. letter-spacing：10px 定义字之间的间距
6. word-spacing: 10px 定义词之间的间距(只针对英文)
7. 英文和数字的折行问题：
1. word-break： break-all 非常强烈的折行，即一个长单词会被这段，一定不会超出边界
2. word-wrap: break-word 并不那么强烈的折行，单词不会被折断，若某个单词过长，可能会超出边界
[C] CSS复合样式
一个CSS属性控制一种形式，叫做单一样式；
一个CSS属性控制多种形式，叫做复合样式；
background， border，font......
[D] CSS选择器
1. ID选择器 # + id号，如 #id001{......}
【注】id在页面中事为唯一值，不能重复
2. class选择器 预设elem{......} 调用时 class = "elem"
3. 标签选择器 标签名{.....} 如：div{......}, span{......}......
4. 层次选择器
后代 M N{......} 定义标签 M 内部的 儿子标签 N 的样式，并往内部深入，即包含 标签N 内部的所有N样式
父子 M > N{......} 定义标签 M 内部的 儿子标签 N 的样式，不在深入，即不包含 标签N 内部的所有N样式
兄弟 M ~ N{......} 定义标签 M 下面的 兄弟标签 N 的样式，上面的不管
相邻 M + N{......} 定义标签 M 下面的一个相邻的 N 样式，上面的不管，下下面的也不管
5. 属性选择器
div[class]{......} 定义div中带有class属性的标签的样式
div[class = "abs"]{......} 定义div中类别名为abs的标签的样式
【注】div[class *= "abs"]{......}定义div中类别名为 包含字符串 abs 的标签的样式
= 表示完全匹配
*= 表示部分匹配
^= 表示开始匹配
￥= 表示结束匹配
div[class][id] 组合匹配，定义既有 class 属性，也有 id 属性的标签的样式
6. 伪类选择器 div:伪类{......}
CSS伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加。
1. 通过伪类添加样式
: link 访问前的样式 (只能添加给 a 标签)
: visited 访问后的样式 (只能添加给 a 标签)
: hover 鼠标移入时的样式，可以添加给任何标签
: active 鼠标按下时的样式，可以添加给任何标签
【注】后面三个伪类里面的属性中重复的会覆盖之前的，没有的，保持原样不变。
【注】网站一般只设置两个伪类，即 a{......} 和 a: hover{......}
2. 通过伪类添加一段文本内容，并给该段文本内容设置好样式
M:after{content: "文本内容"；color：red} 在标签 M 内部内容的尾部添加文本内容，并可以设置样式
M:before{content: "文本内容"；color：red} 在标签 M 内部内容的头部添加文本内容，并可以设置样式
3. 表单相关伪类
M: checked{......} 当表单的属性，如复选框被选后时的样式
M: disabled{......} 当表单的属性，如复选框未被选后时的样式
M: focus{......} 当表单的属性，如输入框被选中时的样式
7. 结构性伪类选择器
li: nth-of-type(){......} li: nth-child(){......}
可选值：数值 如 2 表示定义第二个类型为 li 的标签的样式 可选值：数值 如 2 表示在 存在 li 的这个层次中的第二个标签，即往下数第二个
n的表达式，如 2n 表示偶数项(注：n 的取值从 0 到正无穷) n的表达式 如 2n 表示偶数项(注：n 的取值从 0 到正无穷)
li: first-of-type(){......}
可选值：数值 和 n 的表达式，表示定义在 li 标签存在的该层的第一个 li 标签的样式
li: last-of-type(){......}
可选值：数值 和 n 的表达式，表示定义在 li 标签存在的该层的最后一个 li 标签的样式
li: only-of-type(){......}
可选值：数值 和 n 的表达式，表示定义在 li 标签存在的该层的唯一的一个 li 标签的样式，当该层存在多个 li 标签时不起作用
【注】伪类还有很多，继续探索
