饥人谷Wiki

<markdown>
 
[\<\< 返回CSS教程](:document/css)
 
# CSS 简介
 
 
## 什么是 CSS？
CSS(Cascading Style Sheets) 是用来为网页添加样式的代码。
 
```css
p {
  color: red;
  width: 500px;
  border: 1px solid black;
}
```
 
### 选中多种元素
```css
p, li, h1 {
  color: red;
}
```
 
### 不同类型的选择器  
| 选择器 |  🌰 |
| ----- | ----- |
| 元素选择器 Element Selector | `p` 选中所有段落 `<p>` |
| ID 选择器 ID Selector | `#notice` 选中 `<div id="notice">` 或 `<p id="notice">` |
| 类选择器 Class Selector | `.success` 选中 `<div class="success">` 和 `<a class="success">` |
| 属性选择器 Attribute Selector | `[hidden]` 选中 `<div hidden>` 和 `<img hidden>` |
| 伪类选择器 Pseudo class selector | `a:hover` 选中 鼠标悬停所在的 `<a>` |
 
## 盒模型
 
![](https://mdn.mozillademos.org/files/9443/box-model.png)
 
* 内边距（padding）- 围绕着内容的空间（比如围绕段落的空间）
* 边框（border）- 紧接着内边距的实体线段
* 外边距 (margin) - 围绕元素外部的空间
 
## 参考链接
* http://cssreference.io
* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
* https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
 
 
 
 
 
 
</markdown>