CSS 知识点总结

CSS的出现

在css出现之前，HTML的样式一直是使用表现化的标签，如<center>、<font>等，这样的文档结构不够清晰，也难于阅读。因此，CSS作为一个易于使用、样式丰富的样式表，取代这些导致HTML职责混乱的标签也是理所应当的。

使用CSS

内嵌法：style标签；
内联法：元素style属性；
外联法：<link rel="stylesheet" href="./index.css" media="screen and (min-width:400px)">
此外，还有@import url(index.css)指令，该指令被规定必须出现在所有样式之前。

元素

先总结一下HTML中的元素类型：

置换元素：a、img、input等；
块级元素：h1-6、p、section、article、div、li、ul、ol等等；
行内元素：span、strong、em等等。

要改变元素的表现形式，通过改变display属性即可。display属性是没有继承性的。

选择器

CSS的一个核心特性就是可以向文档中的一组元素类型应用某种规则。实现方式就是选择器。

首先分析CSS规则语法：选择器+声明块。

1
2
3

h1{
    color:red;
}

代码中，h1即选择器，定义声明块的作用元素；花括号内是声明块，声明块中可以有多条声明。

CSS中的选择器有:

通配选择器：*
元素选择器：h1、div等；
id选择器：#id；
类选择器：.class。多类并列时：.class1.class2；
属性选择器：[attr]、[attr=value]、[attr~=value]、[attr|=value]等；
后代选择器：root node；
子元素选择器：root>node;
相邻兄弟选择器：node1+node2；
伪类选择器：
- 链接伪类和动态伪类：
  :link、:visited、:focus、:hover和:active，顺序很重要；
  - 第一个子元素伪类：
    :first-child，选择作为第一个子元素的某标签；
  - 语言伪类：
    :lang()，相当于[attr|=value]；

伪元素选择器

首字母：
::first-letter；
首行：
::first-line；

前后伪元素：
::before/after，有一种应用来清除浮动：

.clearfix:after{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;  
}

.clearfix {
    /* 触发 hasLayout */ 
    zoom: 1; 
}

原理就是设置visibility不为visible，触发BFC了。

特殊性、继承和层叠

特殊性指选择器的优先级：!important>内嵌>#id>.class>标签>通配符。
继承，指的是某些样式不仅会应用到指定的元素，还会应用到其后代元素，比如color属性。子元素继承的属性不计算在特殊性的优先级中。
层叠是在某元素有多个相同优先级规则时使用的一种解决方案：

1 2	h1{color:red;} h1{color:blue;}

这时，h1会使用哪种样式呢？
让我们来看看层叠的规则吧：

找出所有相关规则；
按显式权重对这些规则排序：!important读者样式>!important创作者样式>一般创作者样式>一般读者样式>用户代理样式；
按特殊性对声明排序，优先级高的在前；
按出现顺序对声明排序，后出现的样式优先级高。若有@import指令导入的样式，优先级最低。

答案一目了然。

字体

font-family：指定文档中采用的字体，当该字体名含有空格时需要加上引号；
font-weight：指定文字粗细，400对应normal，700对应bold。不同字体的粗细规定并不固定；
font-size: 指定文字大小，可以继承。
font-style：指定文本风格，可选值有italic(斜体)/oblique(倾斜)/normal/inherit；
font-variant: 使字体变形，可设定为small-caps，即小型大写字母；
font-stretch: 拉伸字体，应用不多；
font-adjust: 调整部分字体使其清晰显示，应用不多；
font：以上属性的简写。

文本属性

text-indent: 控制文本首行缩进。
text-align: 控制文本对齐方式，包括left左对齐、right右对齐、center居中和justify两端对齐。
line-height: 指定文本行基线之间的距离，控制行间距。一般可以用来进行单行垂直居中；
vertical-align：用于指定行内元素和表单元格的垂直对齐方式，包括baseline基线对齐、sub下标、super上标、top行框顶端、middle基线上方0.5ex高度对齐、bottom行框底端、text-top行内文本顶端、text-bottom行内文本底端和指定长度，而百分数则相对于当前元素的line-height值。
word-spacing：接收可正可负的长度值，指定单词间距；
letter-spacing：与word-spacing相似，指定字母间距；
text-transform：处理文本大小写，可取值uppercase大写、lowercase小写、capitalize每个单词首字母大写；
text-decoration：对文字进行修饰，比如underline下划线、line-through删除线、overline上划线和blink闪烁文本。该属性不能继承，且装饰线的颜色与文本颜色一致。因此，有一个设置了text-decoration属性的父元素的子元素，应该再次显式声明一次text-decoration属性。
text-shadow：定义文本阴影，该属性可接收4个值，第一个是颜色值，第二个是x方向偏移量，第三个是y方向偏移量，第四个是阴影的模糊半径。模糊半径值越大，阴影越模糊。
white-space：处理源文档中的空格、换行和tab字符。可取值如下：

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

direction：
1. 在块级元素中，影响文本书写方向、表格列表布局方向、内容水平填充方向以及两端对齐的本文最后一行靠左还是靠右；
2. 在行内元素中，只有当unicode-bidi属性设置为embed或bidi-override时才会有作用；
3. 可取值ltr从左到右、rtl从右到左。
unicode-bidi：Unicode处理文本方向的方法，不常用。