饥人谷Wiki

<markdown>
 
[\<\< 返回CSS教程](:document/css)
 
  # CSS 语法
 
```css
#beijing, .tour.xiamen, .tour li:first-child {
  background-color: #eee;
}
```
 
 
## CSS 语句
[@charset](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@charset)
```css
@charset "utf-8";
```
 
[@import](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@import)
```css
@import 'custom.css';
```
[@media](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media)
```css
@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}
```
[@font-face](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face)
 
[@support](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports)
 
[@document](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@document)
 
## CSS 风格
### 空格
```css
body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}
 
@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}
 
div p, #id:first-line {
  background-color: red;
  background-style: none;
}
```
 
### 注释
```css
/* 
  从 https://stackoverflow.com/questions/12686065/set-line-height-as-a-percentage-relative-to-the-parent-element
  复制过来的，有人可以告诉我什么原理吗？🤔
*/
.block::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
```
### 缩写
```css
padding: 10px 15px 15px 5px;
```
等价于
```css
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
```
 
## 参考链接
* https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Syntax
* https://discourse.wicg.io/t/is-css-import-still-considered-as-an-anti-pattern/1967
 
 
 
 
 
 
</markdown>