CSS 简介
...大约 3 分钟
CSS 简介
CSS(Cascading Style Sheets)层叠式样式表，是一种样式表语言，用来描述HTML文档的呈现。 HTML标记语言用来描述文档的内容，而CSS用来制定大概文档的样式。 在文档中使用css样式。
<head>
<link rel="stylesheet" href="path/to/demo.css">
</head>
浏览器展示文档的过程：
- 将HTML和CSS转化为DOM(Document Object Model)文档对象模型。
- 浏览器把DOM内容展示出来。
DOM是一个树形结构，每一个元素可以看成树结构的一个节点。
层叠与继承
样式有多种来源：
- 浏览器对HTML定义的默认样式。
- 用户定义格式。
- 开发者定义样式。
开发者定义样式又有多种：
- 外链样式：外部文件。
- 内联样式：页面头部定义，本页面有效。
- 行内样式：用于特定元素，常用作测试，维护性差。
优先级也是就近原则。可通过!important 来使自定义样式覆盖开发者定义样式。
继承：子节点会继承父节点的样式。
选择器 selector
CSS的基本格式：
<选择器> {
<属性>: <值>;
<更多属性...>
}
上面代表一条规则(rule)。
- 选择器 代表在DOM中哪些元素使用该规则。
- 声明：花括号内为声明，包括一组属性键值对。
类选择器 (class selector)
HTML文档中，设置元素的class属性。 在css文档中，类选择器使用英文句号开头。
// html
<p class="title"></p>
// css
.title {
color: red;
}
ID选择器 (ID selector)
设置元素的id属性，ID选择器使用#开头。
// html
<p id="login-title"></p>
// css
#login-title {
color: red;
}
CSS中，拥有更高确定度的选择器，优先级越高。所以，标签选择器 < 类选择器 < ID选择器。
伪类选择器（pseudo class selector）
CSS伪类是加在选择器后面的用来指定元素状态的关键字。
selector:pseudo-class {
property: value;
}
常用的伪类列表：
:link
:hover
:first-child
:nth-child
基于关系的选择器
| header 1 | header 2 |
|---|---|
| row 1 col 1 | row 1 col 2 |
| row 2 col 1 | row 2 col 2 |
| 选择器 | 选择的元素 |
|---|---|
| A E | 元素A的任一后代元素E(后代节点指A的子节点，子节点的子节点) |
| A > E | 元素A的任一子元素E(也就是直系后代) |
| E:first-child | 任一是其父母结点的第一个子节点的元素E |
| B + E | 元素B的任一下一个兄弟元素E |
| B ~ E | B元素后面的拥有共同父元素的兄弟元素E |
文本样式
可以使用简写属性font。
p {font: italic 75%/125% "Comic Sans MS", cursive;}
- 字体
为了避免用户没有某些字体，通常在字体列表最后放上系统自带字体，作为替代。
font-family: serif,sans-serif;
- 字号 font-size
- 行高
line-height 指定文本的行间距。 - 装饰
text-decoration 指定文本风格，如underline - font-style: italic
- font-weight: blod
颜色
- color 颜色
- background-color: 背景色
Powered by Waline v3.0.0-alpha.9
预览: