006 HTML+CSS(Class36-50)

标签：line   根据   字体   默认   作用   nbsp   唯一值   对齐   定义   

[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. 结构性伪类选择器

　　【注】伪类还有很多，继续探索

006 HTML+CSS(Class36-50)

标签：line   根据   字体   默认   作用   nbsp   唯一值   对齐   定义   

原文地址：https://www.cnblogs.com/carreyBlog/p/12983939.html