├── README.md ├── docs ├── images │ └── grid-concept.png ├── transform.md ├── responsive.md ├── feature │ ├── form.md │ └── counter.md ├── image.md ├── function.md ├── feature.md ├── selectors │ ├── attribute.md │ ├── basic.md │ └── pseudo-class.md ├── media-query.md ├── component.md ├── display.md ├── background.md ├── color.md ├── layout │ ├── float.md │ ├── column.md │ ├── table.md │ ├── grid.md │ └── flexbox.md ├── operation.md ├── block.md ├── text │ ├── text-decoration.md │ ├── text.md │ └── white-space.md ├── advance │ └── print.md ├── font.md ├── intro.md ├── unit.md ├── animation.md ├── advanced.md ├── position.md └── properties.md └── Release.key /README.md: -------------------------------------------------------------------------------- 1 | CSS 教程 2 | -------------------------------------------------------------------------------- /docs/images/grid-concept.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangdoc/css-tutorial/HEAD/docs/images/grid-concept.png -------------------------------------------------------------------------------- /docs/transform.md: -------------------------------------------------------------------------------- 1 | # 变形 2 | 3 | `transform`命令用于元素的变形，它有多种设置。 4 | 5 | ```css 6 | transform: scaleX(-1); 7 | ``` 8 | 9 | 上面命令设置元素的`x`坐标沿水平轴翻转，`y`坐标不变。`scaleX(-1)`会起到水平翻转的效果。 10 | -------------------------------------------------------------------------------- /docs/responsive.md: -------------------------------------------------------------------------------- 1 | # 响应式布局 2 | 3 | 图片自适应各种屏幕的写法。 4 | 5 | ```css 6 | img { 7 | width: 100%; 8 | height: auto; 9 | } 10 | ``` 11 | 12 | 如果使用``或``元素的`srcset`属性，上面这样的写法就够了。但是，对于普通的``元素，还要加上`max-width: 100%;`，这是为了防止图片大于容器宽度的情况。 13 | -------------------------------------------------------------------------------- /docs/feature/form.md: -------------------------------------------------------------------------------- 1 | # 表单的 CSS 设置 2 | 3 | ## textarea 4 | 5 | 文本框（textarea）用于让用户输入大量文本。它的高度通常是固定的，如果用户输入的文本多于文本框的高度，文本框就会出现滚动条，只有拖动滚动条，才能看见文本的其余部分。 6 | 7 | `form-sizing`属性让文本框具有自适应高度，随着用户输入的文本增加，而增加文本框的高度。 8 | 9 | ```css 10 | textarea { 11 | form-sizing: normal; 12 | } 13 | ``` 14 | 15 | ## 参考链接 16 | 17 | - [Textareas with auto-increasing height using CSS](https://www.amitmerchant.com/textarea-auto-increase-height/) 18 | 19 | -------------------------------------------------------------------------------- /docs/image.md: -------------------------------------------------------------------------------- 1 | # 图像处理 2 | 3 | ## filter 4 | 5 | `filter`命令支持以下函数。 6 | 7 | - url()：使用svg滤镜 8 | - blur()：高斯模糊 9 | - brightness()：亮度 10 | - contrast()：对比度 11 | - drop-shadow()：阴影 12 | - grayscale()：灰度 13 | - hue-rotate()：色调旋转 14 | - invert()：色调分离 15 | - opacity()：透明 16 | - saturate()：饱和度 17 | - sepia()：加入褐色色调 18 | 19 | ```css 20 | filter: saturate(200%); 21 | filter: sepia(100%); 22 | filter: opacity(50%); 23 | filter: url(resources.svg#c1); 24 | filter: blur(5px); 25 | filter: invert(100%); 26 | filter: hue-rotate(90deg); 27 | filter: brightness(0.5); 28 | filter: contrast(200%); 29 | filter: grayscale(50%); 30 | filter: grayscale(0.5) blur(10px); 31 | filter: drop-shadow(16px 16px 10px black); 32 | ``` 33 | -------------------------------------------------------------------------------- /docs/function.md: -------------------------------------------------------------------------------- 1 | # 函数 2 | 3 | CSS 提供一些函数，方便操作。 4 | 5 | ## minmax 6 | 7 | `minmax`提供一个长度范围，不小于较小值，不大于较大值。 8 | 9 | ```css 10 | minmax( min, max ) 11 | ``` 12 | 13 | 如果第二个参数`max`小于第一个参数`min`，那么`max`会被忽略，等同于将长度设置为`min`。 14 | 15 | ```css 16 | minmax(400px, 50%) 17 | minmax(30%, 300px) 18 | ``` 19 | 20 | 网格布局中，`max`也允许设置为比例因子`fr`，但`min`不能设置为`fr`。 21 | 22 | ```css 23 | minmax(200px, 1fr) 24 | ``` 25 | 26 | 网格布局中，还可以使用关键字`max-content`和`min-content`，分别表示最大的和最小的可分配宽度。 27 | 28 | ```css 29 | minmax(100px, max-content) 30 | minmax(min-content, 400px) 31 | ``` 32 | 33 | 关键字`auto`在`max`位置等同于`max-content`，在`min`位置等同于`min-content`。 34 | 35 | ```css 36 | minmax(max-content, auto) 37 | minmax(auto, 300px) 38 | minmax(min-content, auto) 39 | ``` 40 | 41 | ## image-set() 42 | 43 | `image-set()`用来选取符合响应式条件的图片。 44 | 45 | ```css 46 | background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x); 47 | ``` 48 | -------------------------------------------------------------------------------- /docs/feature.md: -------------------------------------------------------------------------------- 1 | # 常用功能 2 | 3 | ## 置中 4 | 5 | `transform`方法。 6 | 7 | 容器设置相对定位。 8 | 9 | ```css 10 | .container { 11 | position: relative; 12 | width: 200px; 13 | height: 200px; 14 | overflow: hidden; 15 | } 16 | ``` 17 | 18 | 元素的左上角先定位在容器中央，然后向西北方向移动自身的`50%`。 19 | 20 | ```css 21 | .container div { 22 | position: absolute; 23 | left: 50%; 24 | top: 50%; 25 | -webkit-transform: translate(-50%,-50%); 26 | -ms-transform: translate(-50%,-50%); 27 | transform: translate(-50%,-50%); 28 | } 29 | ``` 30 | 31 | ## 隐藏元素 32 | 33 | 彻底隐藏一个元素。 34 | 35 | ```css 36 | [hidden] { 37 | display: none; 38 | } 39 | ``` 40 | 41 | 在视觉上隐藏一个元素。 42 | 43 | ```css 44 | .visuallyhidden { 45 | position: absolute; 46 | 47 | width: 1px; 48 | height: 1px; 49 | margin: -1px; 50 | border: 0; 51 | padding: 0; 52 | 53 | clip-path: inset(100%); 54 | clip: rect(0 0 0 0); 55 | overflow: hidden; 56 | } 57 | ``` 58 | 59 | ## 参考链接 60 | 61 | - [Hiding DOM elements](https://allyjs.io/tutorials/hiding-elements.html) 62 | 63 | -------------------------------------------------------------------------------- /docs/selectors/attribute.md: -------------------------------------------------------------------------------- 1 | # 属性选择器 2 | 3 | - `[attribute]` 匹配指定属性，不论具体值是什么 4 | - `[attribute="value"]` 完全匹配指定属性值 5 | - `[attribute~="value"]` 属性值是以空格分隔的多个单词，其中有一个完全匹配指定值 6 | - `[attribute|="value"]` 属性值以value-打头 7 | - `[attribute^="value"]` 属性值以value开头，value为完整的单词或单词的一部分 8 | - `[attribute$="value"]` 属性值以value结尾，value为完整的单词或单词的一部分 9 | - `[attribute*="value"]` 属性值为指定值的子字符串 10 | 11 | ## 修饰符 12 | 13 | 属性修饰器支持`i`修饰符，表示不区分大小写。 14 | 15 | ```css 16 | [class=foo i] { 17 | color: red; 18 | } 19 | ``` 20 | 21 | 上面代码中，属性名`foo`后面的`i`，表示不区分`foo`的大小写，所以下面几个 class 都会匹配。 22 | 23 | ```html 24 |
...
25 |
...
26 |
...
27 | ``` 28 | 29 | 这个修饰符对于匹配用户的输入，非常有用。 30 | 31 | ```css 32 | /** 33 | * 匹配： 34 | * 35 | * 36 | * 37 | * ... 38 | */ 39 | [value="hello world" i] { /* ... */ } 40 | ``` 41 | 42 | ## 参考链接 43 | 44 | - [The CSS attribute selector has a case-insensitive mode](https://www.stefanjudis.com/today-i-learned/the-css-attribute-selector-has-a-case-insensitive-mode/) 45 | -------------------------------------------------------------------------------- /Release.key: -------------------------------------------------------------------------------- 1 | -----BEGIN PGP PUBLIC KEY BLOCK----- 2 | Version: GnuPG v1.4.5 (GNU/Linux) 3 | 4 | mQENBFJUIeUBCADc62ZBGiIY3OWWSs7hj4TWrHARq43mjxuwqN9XLi/bdDXLDpfZ 5 | NAH+8CcgB0eSDjBuNkZcCk17nCuVru3XJp/CEpJoK0MvsJg/nGM5BaDqeXpgat36 6 | llvqSvs9u3C1vgEbR9Ct+aQa73WNP6WQsDVuPDw1T5F9iMo3PhoeBYA5FCmp+Y/Z 7 | 6kP4HUrXZcu7PWwwRkQzvvGjodfH6j2d7oYBJvXqkaiDlKc8qrTZOSqMSqeWz6QB 8 | s/y1MNszh490vatbirieEroRaNINHewjcXvBJQfoO/Nl/hDjWD7XrJWPpi34dH58 9 | 9IGXLS9Qb6GYnisAjwhCyhCXa4Rsse4jo1cXABEBAAG0OHNoZWxsczpmaXNoIE9C 10 | UyBQcm9qZWN0IDxzaGVsbHM6ZmlzaEBidWlsZC5vcGVuc3VzZS5vcmc+iQE8BBMB 11 | AgAmBQJWc0bNAhsDBQkIPdToBgsJCAcDAgQVAggDBBYCAwECHgECF4AACgkQLOKs 12 | CNiAyORluAf8DACeNuq4ZXEcxVhQGKtwndDEiqycue2oQt9d+K6DEov8Il6iYU89 13 | LuhWh9pFoU069+0Gd4QsugEB6elfVttvBKuTMkK37T8ILE/SbNi9kSCjiH0M3J9b 14 | bk0TyaPvfTKyvZegB/PPNq5CXiYKC9V/2BiW7AZeTH0QL/b+d6Ea0FQTmvR4iPw1 15 | l5vcnmVWdtF+PKCl6xa4V89jNK3UiGGhktWPSjuBR+olq+vwh4b2/0S7ZhtY5+E2 16 | tx5/w1Pjwvl54mD0eyrpnyyQqJR4Y9w2v5OR2aWKoWdm9tXSgT6dj/zG9vVpm8FN 17 | AlX/Hen+SI9DFyV34CGm0BoZjit0OeCBdYhGBBMRAgAGBQJSVCHlAAoJEDswEbdr 18 | nWUjYg4An0xyb6ofXvNifTCINq/aE4ArH1XgAKCgjoMJ2Wjo8RVSgkSOaQvK6uPq 19 | eQ== 20 | =E8go 21 | -----END PGP PUBLIC KEY BLOCK----- 22 | -------------------------------------------------------------------------------- /docs/media-query.md: -------------------------------------------------------------------------------- 1 | # 响应式布局：media query 2 | 3 | 响应式布局（responsive）的含义是，网页会根据不同的媒介，自动采用不同的 CSS 规则。它主要通过 media 命令实现。 4 | 5 | `media`命令用来规定 CSS 规则生效的媒介。`@media`命令后面使用关键词，指定生效的条件。 6 | 7 | ```css 8 | @media print { 9 | … 10 | } 11 | 12 | @media screen { 13 | … 14 | } 15 | ``` 16 | 17 | 上面代码中，打印和显示屏分别使用不同的 CSS 规则。 18 | 19 | 媒介名称之前，还可以使用`not`和`only`关键字。 20 | 21 | ```css 22 | @media not screen { 23 | … 24 | } 25 | 26 | @media only screen { 27 | … 28 | } 29 | ``` 30 | 31 | `@media`还允许使用表达式，指定 CSS 生效的条件。表达式可以放在圆括号之中。 32 | 33 | ```css 34 | @media (min-width: 800px) { 35 | p { 36 | font-size: 18px; 37 | } 38 | } 39 | ``` 40 | 41 | 上面代码中，`media`命令规定，只有在屏幕宽度大于等于`800px`时，`p`元素的大小才等于`18px`。 42 | 43 | 如果同时需要满足多个条件，可以使用`and`关键字。下面的例子是为不同的设备指定不同的背景图片。 44 | 45 | ```css 46 | /* default is desktop image */ 47 | .someElement { background-image: url(sunset.jpg); } 48 | 49 | @media only screen and (max-width : 1024px) { 50 | .someElement { background-image: url(sunset-small.jpg); } 51 | } 52 | ``` 53 | 54 | 下面是另一个例子。 55 | 56 | ```css 57 | .component__header { 58 | font-size: 2rem; 59 | @media (min-width: 1200px) { 60 | font-size: 3rem 61 | } 62 | } 63 | 64 | @media only screen 65 | and (max-width : 603px) 66 | and (max-height : 966px) { 67 | /* Styles here */ 68 | } 69 | ``` 70 | -------------------------------------------------------------------------------- /docs/component.md: -------------------------------------------------------------------------------- 1 | # 常用组件 2 | 3 | ## 对话框 4 | 5 | 显示屏幕居中的对话框。 6 | 7 | ```html 8 |
9 |

I am the dialog's content

10 | 11 |
12 | ``` 13 | 14 | ```css 15 | #dialog { 16 | position: fixed; 17 | top: 50%; 18 | left: 50%; 19 | width: 400px; 20 | height: 200px; 21 | transform: translate3d(-50%,-50%,0); 22 | background: white; 23 | border: 100% solid rgba(0, 0, 0, 2.5); 24 | } 25 | 26 | #dialog:before { 27 | content: ""; 28 | position: fixed; 29 | top: 0; 30 | right: 0; 31 | bottom: 0; 32 | left: 0; 33 | background: rgba(0, 0, 0, 0.25); 34 | z-index: 999; 35 | 36 | /* fade in */ 37 | transition: opacity 0.2s ease-in-out; 38 | } 39 | 40 | #dialog[hidden] { 41 | /* 42 | [hidden] usually sets display:none, which we 43 | need to revert in order to allow animations 44 | */ 45 | display: block; 46 | /* 47 | actually hide the element, 48 | making its contents unaccessible 49 | */ 50 | visibility: hidden; 51 | /* 52 | make sure the element is out of viewport 53 | */ 54 | transform: translate3d(0px, -1px, 0px) scale(0); 55 | /* 56 | delay transform until animations are done 57 | */ 58 | transition: 59 | visibility 0s linear 0.2s, 60 | transform 0s linear 0.2s; 61 | } 62 | ``` 63 | 64 | ## 参考链接 65 | 66 | - [Accessible dialog tutorial](https://allyjs.io/tutorials/accessible-dialog.html) 67 | -------------------------------------------------------------------------------- /docs/display.md: -------------------------------------------------------------------------------- 1 | # display 属性 2 | 3 | `display: none;`会从文档流移除该元素及其子元素，仿佛它们是不存在的。它们占据的空间会释放出来。 4 | 5 | `display: inline;`产生行内元素，没有自己的高度和宽度，由容器决定，前后不会产生换行。 6 | 7 | `display: block;`产生块级元素，会占据一行，占满容器的宽度。 8 | 9 | `display: list-item;`将元素渲染为一个列表项，行首产生一个列表标记，可以用`list-style`定制样式。 10 | 11 | `display: inline-block;`产生行内的块级元素，有自己的高和宽，但是前后不会产生换行。 12 | 13 | ## 表格相关的设置 14 | 15 | - `table` 对应``元素 16 | - `table-header-group` 对应`` 17 | - `table-row` 对应`` 18 | - `table-cell` 对应`` 20 | - `table-footer-group` 对应`` 21 | - `table-column-group` 对应`` 22 | - `table-column` 对应`` 23 | - `table-caption` 对应``元素定义表头，``元素定义表的数据部分即可。 116 | 117 | ```html 118 |
` 19 | - `table-row-group` 对应`
` 24 | - `inline-table` 将一个表格渲染具有`inline-block`的形式 25 | 26 | ## 表格显示 27 | 28 | ```css 29 | div { 30 | display: table; 31 | display: table-cell; 32 | display: table-column; 33 | display: table-colgroup; 34 | display: table-header-group; 35 | display: table-row-group; 36 | display: table-footer-group; 37 | display: table-row; 38 | display: table-caption; 39 | } 40 | ``` 41 | 42 | ## flexbox 43 | 44 | `display: flexbox;`是一维布局，定义沿着一根直线的布局。这根直线可以折行。 45 | 46 | ## grid 47 | 48 | `display: grid;`是二维布局。 49 | 50 | ## direction 51 | 52 | `direction`命令指定元素的排列方向，默认是从左到右`ltr`，可以设置为从右到左`rtl`。 53 | 54 | ```css 55 | direction: rtl; 56 | ``` 57 | 58 | ## 参考链接 59 | 60 | - [How well do you know CSS display?](https://www.chenhuijing.com/blog/how-well-do-you-know-display/), by Chen Hui Jing 61 | -------------------------------------------------------------------------------- /docs/background.md: -------------------------------------------------------------------------------- 1 | # 背景 2 | 3 | 如果不定义背景图片或者背景色，一个网页元素的背景就是透明的。 4 | 5 | ## opaque 6 | 7 | `opaque`的值在0到100之间。默认值是100，表示百分之百不透明，而0表示百分之百透明。 8 | 9 | ## background-attachment 10 | 11 | `background-attachment`属性设置背景图案的位置，是否在视口里面是固定的，也就是说，是否随着滚动条一起滚动。由于存在两种滚动条——视口的滚动条和区块的滚动条——因此`background-attachment`的行为有三种模式，对应三个属性值。 12 | 13 | - `scroll`：这个是默认值，表示背景图片绑定区块的内容，会随着视口滚动条滚动，但不会随着区块滚动条滚动。 14 | - `fixed`：背景图片绑定视口，不会随着视口滚动条和区块滚动条滚动。 15 | - `local`：背景图片会随着视口滚动条和区块滚动条滚动。 16 | 17 | ## background-repeat 18 | 19 | `background-repeat`指定当背景图片小于容器时的平铺方式。 20 | 21 | ```css 22 | html { 23 | background-image: url(logo.png); 24 | background-repeat: repeat-x; 25 | } 26 | ``` 27 | 28 | 它可以取以下值。 29 | 30 | - repeat：背景图片沿容器的X轴和Y轴平铺，将会平铺满整个容器，可能会造成背景图片显示不全。 31 | - repeat-x： 背景图片沿容器的X轴平铺。 32 | - repeat-y：背景图片沿容器的Y轴平铺。 33 | - no-repeat：背景图片不做任何平铺。 34 | - round：背景图片沿容器的X轴和Y轴平铺，将会铺满整个容器。如果有多余空间，会升缩背景图片适应容器大小，不会造成图片显示不全。 35 | - space：背景图片沿容器的X轴和Y轴平铺，将会铺满整个容器。如果有多余空间，不会改变背景图片的大小，而是平均分配相邻图片之间的空间，不会造成图片显示不全。 36 | 37 | `background-repeat`可以设置两个值，分别表示 X 轴和 Y 轴的重复方式。 38 | 39 | ```css 40 | .element { 41 | /* background-repeat: horizontal vertical */ 42 | background-repeat: repeat space; 43 | background-repeat: repeat repeat; 44 | background-repeat: round space; 45 | } 46 | ``` 47 | 48 | `background-repeat`只设置一个值的时候，其实是下面方式的简写。 49 | 50 | - `repeat`：相当于`repeat repeat` 51 | - `repeat-x`：相当于`repeat-x no-repeat` 52 | - `repeat-y`：相当于`no-repeat repeat` 53 | - `no-repeat`：相当于`no-repeat no-repeat` 54 | - `space`：相当于`space space` 55 | - `round`：相当于`round round` 56 | 57 | ## 参考链接 58 | 59 | - [单聊background-repeat](http://www.w3cplus.com/css3/css3-background-repeat-space-round.html)，by 大漠 60 | 61 | -------------------------------------------------------------------------------- /docs/color.md: -------------------------------------------------------------------------------- 1 | # 颜色 2 | 3 | ## 颜色关键字 4 | 5 | CSS 允许使用关键字表示颜色，CSS2.1 设置了16个基本的颜色，CSS 3 又增加了131个。 6 | 7 | ## 六位颜色表示法 8 | 9 | 六位颜色表示法又称为 RGB 表示，分别使用两位十六进制数表示红色（R）、绿色（G）、蓝色（B），组合在一起就是六位，然后加上`#`前缀，比如`#59007F`。 10 | 11 | 每种颜色使用0～255表示浓度，0表示没有，255表示浓度最深。 12 | 13 | 如果一个十六进制颜色是由三对重复的数字组成的，如`#ff3344`，可以缩写为`#f34`。 14 | 15 | ## 八位颜色表示法 16 | 17 | Chrome 浏览器支持八位的颜色表示法`RRGGBBAA`，前六位是红、绿、蓝颜色值，后两位表示透明度（alpha transparency）。比如，`#ffffff80`相当于`rgba(255, 255, 255, .5)`。 18 | 19 | alpha设置越接近0，颜色就越透明。如果设为0，就是完全透明的，就像没有设置任何颜色。类似地，1表示完全不透明。 20 | 21 | ## HSL 和 HSLA 表示法 22 | 23 | HSL 代表色相（hue）、饱和度（saturation）和亮度（lightness），其中色相的取值范围为0～360，饱和度和亮度的取值均为百分数，范围为0～100%。 24 | 25 | - 红色为hsl(0,100%,50%); 26 | - 黄色为hsl(60,100%,50%); 27 | - 绿色为hsl(120,100%,50%); 28 | - 青色为hsl(180,100%,50%); 29 | - 蓝色为hsl(240,100%,50%); 30 | - 紫红色为hsl(300,100%,50%); 31 | 32 | 用HSLA指定alpha透明度的方法与RGBA是一致的。 33 | 34 | ## currentColor 35 | 36 | `currentColor`是一个属性值，代表当前元素的`color`属性的值。 37 | 38 | ```css 39 | .box { 40 | color: red; 41 | border: 1px solid currentColor; 42 | box-shadow: 0 0 2px 2px currentColor; 43 | } 44 | ``` 45 | 46 | 上面代码，`border`和`box-shadow`的颜色都与`color`保持一致。这种写法的好处是，如果要修改`color`，只要修改一处就可以了，不用修改三个地方。 47 | 48 | `currentColor`的另一个用处，是让衍生类都继承基类的颜色。 49 | 50 | ```css 51 | .box { 52 | color: red; 53 | } 54 | .box .child-1 { 55 | background: currentColor; 56 | } 57 | .box .child-2 { 58 | color: currentColor; 59 | border 1px solid currentColor; 60 | } 61 | ``` 62 | 63 | 伪元素也可以使用`currentColor`。 64 | 65 | ```css 66 | .box { 67 | color: red; 68 | } 69 | .box:before { 70 | color: currentColor; 71 | border: 1px solid currentColor; 72 | } 73 | ``` 74 | 75 | ## 参考链接 76 | 77 | - [使用 currentColor 属性写出更好的 CSS 代码](http://www.qcyoung.com/2016/09/28/%E3%80%90%E8%AF%91%E3%80%91%E4%BD%BF%E7%94%A8%20currentColor%20%E5%B1%9E%E6%80%A7%E5%86%99%E5%87%BA%E6%9B%B4%E5%A5%BD%E7%9A%84%20CSS%20%E4%BB%A3%E7%A0%81/) 78 | -------------------------------------------------------------------------------- /docs/layout/float.md: -------------------------------------------------------------------------------- 1 | # float 2 | 3 | ## 简介 4 | 5 | `float`属性指定某个元素定位在容器的左侧或右侧，文字和其他行内元素紧挨在它的旁边。 6 | 7 | ```css 8 | h4 { 9 | float: left; 10 | } 11 | ``` 12 | 13 | 如果对行内元素指定`float`属性，就相当于将这个行内元素变成块级元素。 14 | 15 | `float`属性可以取三个值。 16 | 17 | - `left`：定位在容器的左侧 18 | - `right`：定位在容器的右侧 19 | - `none`：不采用浮动定位（默认值） 20 | 21 | ## 清理浮动 22 | 23 | 设置`float`属性以后，容器里面的行内元素（通常是文字）会紧贴浮动元素的边缘，进行布局。如果文字的长度小于浮动元素的高度，就会出现布局问题。 24 | 25 | 下面是一段 HTML 代码。 26 | 27 | ```html 28 |
29 |

标题一

30 | Hello World 31 |
32 |

标题二

33 | ``` 34 | 35 | 其中的“标题一”是浮动的。 36 | 37 | ```css 38 | h2 { 39 | height: 200px; 40 | float: left; 41 | } 42 | ``` 43 | 44 | 由于`Hello World`的高度小于“标题一”的高度，导致紧跟在后面的“标题二”，不是出现在“标题一”的下方，而是在“标题一”的右侧。这时就需要清理浮动。 45 | 46 | ```css 47 | h3 { 48 | clear: both; 49 | } 50 | ``` 51 | 52 | `clear`属性可以取四个值。 53 | 54 | - `left`：左侧不能有浮动元素 55 | - `right`：右侧不能有浮动元素 56 | - `both`：两侧不能有浮动元素 57 | - `none`：默认值，不需要清理浮动 58 | 59 | 另一种情况是，容器内部的文本不希望紧贴浮动的元素，这时也可以使用`clear`属性进行清理浮动。 60 | 61 | ## 对容器的影响 62 | 63 | 如果一个容器里面所有子元素都是浮动的，就会导致这个容器变成一个空容器，高度缩为`0`。因为布局的时候，浮动的所有子元素是脱离父容器计算位置的，这导致渲染引擎认为这个容器是空元素。 64 | 65 | 解决这个问题，有三种方法。 66 | 67 | （1）父容器也进行浮动。 68 | 69 | ```css 70 | .container-with-float{ 71 | float: left; 72 | width: 100%; 73 | } 74 | ``` 75 | 76 | （2）父容器添加`overflow: hidden` 77 | 78 | ```css 79 | .container-with-overflow{ 80 | overflow: hidden; 81 | } 82 | ``` 83 | 84 | 添加`overflow: hidden`以后，容器计算高度的时候，就会自动将浮动的子元素考虑在内。 85 | 86 | （3）CSS 生成内容 87 | 88 | CSS 生成内容以后，就不会被渲染引擎当成是一个空元素。 89 | 90 | ```css 91 | .container-with-generated-content:after{ 92 | content: "."; 93 | display: block; 94 | height: 0; 95 | clear: both; 96 | visibility: hidden; 97 | } 98 | ``` 99 | 100 | 还有另一种写法。 101 | 102 | ```css 103 | .grid:after { 104 | content: ""; 105 | display: table; 106 | clear: both; 107 | } 108 | ``` 109 | 110 | -------------------------------------------------------------------------------- /docs/layout/column.md: -------------------------------------------------------------------------------- 1 | # 多栏式布局 2 | 3 | 多栏式布局是 CSS 原生提供的一种内容分栏显示的解决方案。 4 | 5 | ## 基本用法 6 | 7 | `column-count`属性指定`div`的子元素分成四栏。 8 | 9 | ```css 10 | div { 11 | column-count:4; 12 | } 13 | ``` 14 | 15 | `column-width`属性指定每一栏的宽度。 16 | 17 | ```css 18 | div { 19 | column-width:100px; 20 | } 21 | ``` 22 | 23 | 上面代码中，`column-width`属性指定每一栏的宽度是100像素。如果`div`元素的宽度是800像素，那么内容就将分成8栏。 24 | 25 | 注意，`column-count`与`column-width`不应同时使用，它们之中同时只能有一个属性生效。另外，设定`position: fixed`和`position: absolute`子元素，将不纳入多栏式布局的栏计算。 26 | 27 | ## 间隔 28 | 29 | 多栏式布局对栏与栏之间的间隔，提供了如下属性。 30 | 31 | - column-gap：间隔宽度 32 | - column-rule-color：间隔线的颜色 33 | - column-rule-style：间隔线的样式，比如`dashed`、`dotted`等，默认是`solid` 34 | - column-rule-width：间隔线本身的宽度 35 | - column-rule：`column-rule-color`、`column-rule-style`、`column-rule-width`这三个属性的快捷形式。 36 | 37 | ```css 38 | div { 39 | column-gap: 20px; 40 | column-rule: 2px solid #33c; 41 | } 42 | ``` 43 | 44 | 上面代码指定栏与栏之间的间隔是`20px`，间隔线的样式是`2px solid #33c`。 45 | 46 | ## column-span 47 | 48 | `column-span`属性指定某个子元素可以占据多栏的宽度，比如标题。它只能设两个值`all`和`none`。 49 | 50 | ```css 51 | h2 { 52 | column-span: all; 53 | } 54 | ``` 55 | 56 | ## column-fill 57 | 58 | `column-fill`属性指定内容如何在多栏之间分配。 59 | 60 | 默认值`balance`表示栏与栏是等高的，`auto`表示只占据内容所需的空间。 61 | 62 | ## 内容的断点 63 | 64 | 浏览器会自己决定，内容在栏与栏之间如何断点。下面的三个属性可以调整这个行为。 65 | 66 | `break-inside`属性决定子元素内部如何断点。它可以取以下值。 67 | 68 | - auto：默认值，表示子元素内部可以插入断点 69 | - avoid：避免在子元素内部插入所有类型（page、column、region）的断点 70 | - avoid-column：避免子元素内部插入栏与栏的断点 71 | 72 | `break-before`属性决定子元素前方如何断点。它可以取以下值。 73 | 74 | - auto：默认值，子元素前方可以插入断点 75 | - avoid：避免在子元素前方插入所有类型（page、column、region）的断点 76 | - avoid-column：避免在子元素前方插入栏与栏的断点 77 | - column：子元素前方强制插入一个栏断点 78 | 79 | `break-after`属性决定子元素后方如何断点。它可以取以下值。 80 | 81 | - auto：默认值，子元素后方可以插入断点 82 | - avoid：避免在子元素后方插入所有类型（page、column、region）的断点 83 | - avoid-column：避免在子元素后方插入栏与栏的断点 84 | - column：子元素后方强制插入一个栏断点 85 | 86 | ## 参考链接 87 | 88 | - Molly E. Holzschlag, [CSS3 Multi-Column Layout](https://dev.opera.com/articles/css3-multi-column-layout/) 89 | -------------------------------------------------------------------------------- /docs/operation.md: -------------------------------------------------------------------------------- 1 | # 基本操作 2 | 3 | ## 垂直置中 4 | 5 | （1）方法一 6 | 7 | 原理：子元素的 top, right, bottom, left, margin, and padding属性，针对的是父元素的维度；transform针对的子元素本身的维度。 8 | 9 | 父元素、子元素需有明确高度，不能是auto。 10 | 11 | ```css 12 | 13 | .children{ 14 | background: #ffdb4c; 15 | height: 300px; 16 | position: relative; 17 | top: 50%; 18 | transform: translateY(-50%); 19 | } 20 | 21 | ``` 22 | 23 | （2）方法二 24 | 25 | ```css 26 | 27 | .parent { position: relative; } 28 | 29 | .child { 30 | position: absolute; 31 | 32 | left: 50%; 33 | top: 50%; 34 | 35 | -webkit-transform: translate(-50%, -50%); 36 | -moz-transform: translate(-50%, -50%); 37 | -ms-transform: translate(-50%, -50%); 38 | -o-transform: translate(-50%, -50%); 39 | transform: translate(-50%, -50%); 40 | } 41 | 42 | ``` 43 | 44 | （3）方法三 45 | 46 | ```css 47 | .parent { display: table; } 48 | 49 | .child { 50 | display: table-cell; 51 | vertical-align: middle; 52 | } 53 | ``` 54 | 55 | （5）行内置中 56 | 57 | ```css 58 | .parent { line-height: 500px; } 59 | 60 | .child { 61 | display: inline-block; 62 | vertical-align: middle; 63 | } 64 | ``` 65 | 66 | （6）方法四（只对图片有效） 67 | 68 | ```css 69 | .thumb { 70 | background-image: url(my-img.jpg); 71 | background-position: center; 72 | /* is this supported by IE8? I don't know */ 73 | background-size: cover; 74 | 75 | height: 0; 76 | overflow: hidden; 77 | padding-bottom: 50%; 78 | width: 50%; 79 | } 80 | ``` 81 | 82 | （7）方法五 83 | 84 | ```css 85 | .children { 86 | margin-top: calc(50% - 12.5%); 87 | } 88 | ``` 89 | 90 | （8）方法六 91 | 92 | ```css 93 | .container { 94 | display: flex; 95 | justify-content: center; 96 | align-items: center; 97 | } 98 | ``` 99 | 100 | （9）参考链接 101 | 102 | - [Alignment and sizing in CSS](https://github.com/timseverien/timseverien.github.io/blob/master/_posts/2013-11-25-css-alignment-and-sizing.md) 103 | 104 | ## 清理浮动 105 | 106 | ```css 107 | 108 | .clearfix:after{ 109 | visibility:hidden; 110 | display:block; 111 | font-size:0; 112 | content:" "; 113 | clear:both; 114 | height:0; 115 | } 116 | 117 | .clearfix{ 118 | zoom:1; /* for IE6 IE7 */ 119 | } 120 | 121 | ``` 122 | 123 | -------------------------------------------------------------------------------- /docs/block.md: -------------------------------------------------------------------------------- 1 | # 盒状模型 2 | 3 | ## width 4 | 5 | `width: auto`表示父元素提供的所有宽度（100%）。 6 | 7 | ## max-width 8 | 9 | `max-width`设为`none`，可以让元素占满父元素的整个宽度。 10 | 11 | ## overflow 12 | 13 | `overflow`属性指定如果元素的大小超出容器时的行为。 14 | 15 | - `visible`：默认值，表示溢出的部分可见 16 | - `hidden`：表示溢出的部分不可见 17 | - `scroll`：表示发生溢出时，会显示滚动条，用户可以拖动滚动条，看到溢出的部分 18 | 19 | ## clip 20 | 21 | `clip`规则指定元素超出容器大小时，具体显示哪个部分。它只对绝对定位（absolute）和固定定位（fixed）的元素有效。 22 | 23 | ```css 24 | clip: rect(0px, 100px, 100px, 0px); 25 | ``` 26 | 27 | `react`函数四个参数的含义如下。 28 | 29 | - 第一个参数：剪切后的顶边距离容器的顶边的距离 30 | - 第二个参数：剪切后的右边界距离容器的左边界的距离 31 | - 第三个参数：剪切后的底边距离容器的顶边的距离 32 | - 第四个参数：剪切后的左边界距离容器的左边界的距离 33 | 34 | ```css 35 | clip: rect(auto 100px auto auto); 36 | ``` 37 | 38 | 该规则已经被废除，但是浏览器还是普遍支持。 39 | 40 | ## clip-path 41 | 42 | `clip-path`是`clip`规则的继承者，用来剪切元素的大小。它对所有定位方式都适用。 43 | 44 | ```css 45 | clip: rect(110px, 160px, 170px, 60px); 46 | /* 等同于 */ 47 | clip-path: inset(10px 20px 30px 40px); 48 | ``` 49 | 50 | `clip-path`支持多种路径定义方式。 51 | 52 | ```css 53 | .clip-me { 54 | 55 | /* referencing path from an inline SVG */ 56 | clip-path: url(#c1); 57 | 58 | /* referencing path from external SVG */ 59 | clip-path: url(path.svg#c1); 60 | 61 | /* polygon */ 62 | clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); 63 | 64 | /* circle */ 65 | clip-path: circle(30px at 35px 35px); 66 | 67 | /* ellipse */ 68 | clip-path: ellipse(65px 30px at 125px 40px); 69 | 70 | /* inset-rectangle() may replace inset() ? */ 71 | /* rectangle() coming in SVG 2 */ 72 | 73 | /* rounded corners... not sure if a thing anymore */ 74 | clip-path: inset(10% 10% 10% 10% round 20%, 20%); 75 | 76 | } 77 | ``` 78 | 79 | ## box-sizing 80 | 81 | `box-sizing`指定盒状模型的宽度范围。 82 | 83 | - `border-box`：宽度包括padding和border 84 | - `content-box`：默认值，只包括内容区的宽度，不包括padding和border 85 | 86 | ```css 87 | *, *:after, *:before { 88 | -webkit-box-sizing: border-box; 89 | -moz-box-sizing: border-box; 90 | box-sizing: border-box; 91 | } 92 | ``` 93 | 94 | ## object-fit 95 | 96 | `object-fit`命令指定一个元素的大小应该如何适应它的容器，主要用于图像。它可以取以下的值。 97 | 98 | - fill：容器的宽度和高度就是元素的宽度和高度，会截去溢出的部分。 99 | - contain：元素会填满容器，不会改变长宽比，可能会有溢出。 100 | - cover：元素会填满容器，可能会改变长宽比，但不会有溢出。 101 | - none：元素不会改变的大小，具体的展示效果由默认算法决定 102 | - scale-down：展示效果会选择`none`或`contain`之中，对象尺寸较小的一个 103 | - inherit：使用父元素的值 104 | - initial：使用浏览器的默认值 105 | - unset：这个属性是`inherit`和`initial`的结合，如果该元素继承父元素，就采用`inherit`，否则采用`initial` 106 | -------------------------------------------------------------------------------- /docs/text/text-decoration.md: -------------------------------------------------------------------------------- 1 | # text-decoration 2 | 3 | 文本可以附加装饰线（比如下划线），以下属性用来设置装饰线。 4 | 5 | ## text-decoration 6 | 7 | `text-decoration`设置文本采用哪一种装饰线，主要有下划线（underline）、上划线（overline）和删除线（line-through）等类型。 8 | 9 | ```css 10 | h3 { 11 | text-decoration: underline; 12 | } 13 | ``` 14 | 15 | 该属性可以取以下值。 16 | 17 | - none：没有任何修饰 18 | - underline：下划线，默认线宽`1px` 19 | - overline：上划线，默认线宽`1px` 20 | - line-through：删除线，默认线宽`1px` 21 | - inherit：继承父元素的设置 22 | 23 | 多种装饰线可以同时存在。 24 | 25 | ```css 26 | .multiple { 27 | text-decoration: underline overline line-through; 28 | } 29 | ``` 30 | 31 | 默认情况下，装饰线的颜色与文本的`color`属性一致。`text-decoration-color`属性可以修改颜色。 32 | 33 | `text-decoration`属性还可以用作`text-decoration-style`和`text-decoration-color`的简写形式。 34 | 35 | ```css 36 | .fancy-underline { 37 | text-decoration-line: underline; 38 | text-decoration-style: wavy; 39 | text-decoration-color: red; 40 | 41 | /* 等同于 */ 42 | text-decoration: underline wavy red; 43 | } 44 | ``` 45 | 46 | ## text-decoration-color 47 | 48 | `text-decoration-color`设置文本的装饰线的颜色。 49 | 50 | ```css 51 | a { 52 | text-decoration-color: #E18728; 53 | } 54 | ``` 55 | 56 | ## text-decoration-style 57 | 58 | `text-decoration-style`设置文本的下划线（underline）、上划线（overline）和删除线（line-through）的样式。 59 | 60 | ```css 61 | a { 62 | text-decoration-style: solid; 63 | } 64 | ``` 65 | 66 | 该属性支持以下样式。 67 | 68 | - solid：单条直线 69 | - double：双条直线 70 | - dotted：多个点组成的直线 71 | - dashed：多个短划线组成的直线 72 | - wavy：波浪线 73 | 74 | ## text-decoration-line 75 | 76 | `text-decoration-line`设置文本采用何种装饰线，与`text-decoration`单个值的写法相同。建议采用后者，因为浏览器的支持度更好。 77 | 78 | ```css 79 | p { 80 | text-decoration-line: underline; 81 | } 82 | ``` 83 | 84 | 它的取值参考`text-decoration`。 85 | 86 | ## text-decoration-skip 87 | 88 | `text-decoration-skip`设置文本的装饰线应该在哪里中断，主要用于改善文本被装饰以后的可读性。 89 | 90 | ```css 91 | a { 92 | text-decoration-skip: ink; 93 | } 94 | ``` 95 | 96 | 上面代码中，下划线遇到英语字母`y`和`p`会中断，让它们较长的下划会更清晰地显示出来。 97 | 98 | 该属性可以取以下值。 99 | 100 | - objects：默认值，装饰线遇到图片或其他`inline-block`对象时中断。 101 | - none：装饰线不会有任何中断，包括遇到行内对象。 102 | - spaces：装饰线在空格、断词处中断。 103 | - ink：装饰线遇到有笔画下降或上升的字母时中断。 104 | - edges：装饰线在内容开始后和结束前都收缩一点，主要用于多个连续的装饰线，可以看上去连成一条。 105 | - box-decoration：装饰线在继承的 margin、border 和 padding 处中断。 106 | 107 | ## 参考链接 108 | 109 | - [text-decoration](https://css-tricks.com/almanac/properties/t/text-decoration/), by Sara Cope 110 | - [text-decoration-skip](https://css-tricks.com/almanac/properties/t/text-decoration-skip/), by Marie Mosley 111 | 112 | -------------------------------------------------------------------------------- /docs/advance/print.md: -------------------------------------------------------------------------------- 1 | # 打印样式 2 | 3 | ## 基本用法 4 | 5 | `@media print`命令可以设置打印样式，即用户选择打印当前网页时，生效的 CSS 规则。 6 | 7 | ```css 8 | @media print { 9 | h1 { font-size: 16pt; } 10 | } 11 | ``` 12 | 13 | 上面代码设置的`h1`样式，对屏幕浏览不产生效果，只有用户打印网页时才会生效。 14 | 15 | `@media print`命令可以与正常样式规则混合使用。 16 | 17 | ```css 18 | p { margin: 1em 0; } 19 | 20 | @media print { 21 | .related-articles { display: none; } 22 | } 23 | ``` 24 | 25 | 上面代码中，`p`元素的样式对屏幕浏览和打印都有效，`.related-articles`的样式只对打印有效。 26 | 27 | 如果要设置某些规则只对屏幕浏览有效，可以像下面这样写。 28 | 29 | ```css 30 | @media screen { 31 | /* 只对屏幕浏览有效 */ 32 | } 33 | 34 | @media print { 35 | /* 只对打印有效 */ 36 | } 37 | ``` 38 | 39 | ## 分页符 40 | 41 | 分页符属性用来设置页面的分页（即另起一页），共有三个相关属性。 42 | 43 | - page-break-before：元素之前分页 44 | - page-break-after：元素之后分页 45 | - page-break-inside：元素内部分页 46 | 47 | 这三个属性的值都是两个：`always`（生效）和`avoid`（避免）。 48 | 49 | ```css 50 | h1 { 51 | /* 总是在 h1 元素之前分页 */ 52 | page-break-before: always; 53 | } 54 | 55 | section.city-map { 56 | /* 在元素之前和之后分页，即该元素单独占据一页 */ 57 | page-break-before: always; 58 | page-break-after: always; 59 | } 60 | 61 | table { 62 | /* 表格尽可能不要分页 */ 63 | page-break-inside: avoid; 64 | } 65 | ``` 66 | 67 | ## orphans 属性，widow 属性 68 | 69 | `orphans`属性和`widow`属性设置某个元素如何跨页拆分。 70 | 71 | `orphans`属性设置跨页前的行数少于多少行时，所有行都移到下一页打印。 72 | 73 | ```css 74 | p { 75 | orphans: 3; 76 | } 77 | ``` 78 | 79 | 上面代码设置，如果某个段落出现在上一页的结尾少于3行（比如只有两行），那么该段落全部移到下一页显示。 80 | 81 | `widow`属性设置出现在新页面的行数，最少应该有几行。 82 | 83 | ```css 84 | p { 85 | widow: 2; 86 | } 87 | ``` 88 | 89 | 上面代码设置，如果某个段落出现在新页面的开头少于两行（比如只有一行），那么该段落全部移到上一页显示。 90 | 91 | ## @page 命令 92 | 93 | `@page`命令主要用来定义页面距。 94 | 95 | ```css 96 | @page { 97 | margin: 2cm; 98 | } 99 | ``` 100 | 101 | 此外，还可以用`:first`、`:last`、`:left`、`:right`和`:blank`选择器，选中特殊页面。 102 | 103 | ```css 104 | @page:first { 105 | margin: 0; 106 | } 107 | ``` 108 | 109 | 上面代码设置第一页的页边距为`0`。 110 | 111 | ## 技巧 112 | 113 | ### 重复表格的表头 114 | 115 | 如果希望打印表格的时候，每一页都出现表头，只需要使用`
119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 |
CityPopulation
Sydney4.627 million (2018)
131 | ``` 132 | 133 | 上面代码中，如果表格跨页，表头的`City`和`Population`字段会在每一页都打印出来。 134 | 135 | ### 打印链接的网址 136 | 137 | 如果希望打印出链接的网址，可以使用`:after`伪元素。 138 | 139 | ```css 140 | @media print { 141 | a[href]:after { 142 | content: "(" attr(href) ")"; 143 | } 144 | } 145 | ``` 146 | 147 | ## 参考链接 148 | 149 | - [Print CSS basics in 10 minutes](https://www.paperplane.app/blog/print-css-basics/), Paperplay 150 | 151 | -------------------------------------------------------------------------------- /docs/layout/table.md: -------------------------------------------------------------------------------- 1 | # Table 布局 2 | 3 | CSS 可以让 HTML 元素像表格那样排列。 4 | 5 | 下面是表格的各个 HTML 标签，所对应的布局模式。 6 | 7 | - table { display: table } 8 | - tr { display: table-row } 9 | - thead { display: table-header-group } 10 | - tbody { display: table-row-group } 11 | - tfoot { display: table-footer-group } 12 | - col { display: table-column } 13 | - colgroup { display: table-column-group } 14 | - td, th { display: table-cell } 15 | - caption { display: table-caption } 16 | 17 | 表格布局可以很简单地做到垂直居中。 18 | 19 | ```css 20 | div { 21 | height: 200px; 22 | display:table-cell; 23 | vertical-align: middle; 24 | } 25 | ``` 26 | 27 | 这种写法相比下面的写法，更容易理解。 28 | 29 | ```css 30 | div { 31 | height: 200px; 32 | position: relative; 33 | top: 50%; 34 | transform: translateY(-50%); 35 | } 36 | ``` 37 | 38 | 表格布局的另一个用途是，让页尾总是显示在浏览器的最低部，即使页面高度不足一页。 39 | 40 | ```css 41 | /* 42 | HTML 代码如下 43 | 44 |
45 |
46 | 47 | */ 48 | 49 | body { 50 | display: table; 51 | width: 100%; 52 | } 53 | 54 | .main { 55 | min-height: 100%; 56 | } 57 | 58 | .footer { 59 | display: table-row; 60 | height:1px; 61 | } 62 | ``` 63 | 64 | 基于上面这种底部固定的技巧，可以使用表格布局，完成圣杯布局，即页面从上到下分成页首 + 内容 + 页尾三部分，其中内容部分又分成左边栏和右边栏。 65 | 66 | ```css 67 | /* 68 | HTML 代码如下 69 |
70 |
HEADER
71 |
72 |
Left-sidebar
73 |
Main Content
74 |
Right-sidebar
75 |
76 |
FOOTER
77 |
78 | */ 79 | 80 | .wrapper { 81 | min-height: 100%; 82 | display: table; 83 | width: 100%; 84 | text-align: center; 85 | } 86 | 87 | .header { 88 | display: table-row; 89 | height: 1px; 90 | } 91 | 92 | .main { 93 | min-height: 100%; 94 | display: table; 95 | width: 100%; 96 | } 97 | 98 | .box { 99 | display: table-cell; 100 | } 101 | 102 | .sidebar { 103 | width: 100px; 104 | } 105 | 106 | .footer { 107 | display: table-row; 108 | height:1px; 109 | } 110 | ``` 111 | 112 | 利用表格的不同性质的行，可以调整行的显示位置。 113 | 114 | - `display:table-caption`使得该行显示在表格的最顶部。 115 | - `display:table-header-group`使得该行显示在表格的头部，但是位置低于`table-caption`的行。 116 | - `display:table-footer-group`使得该行显示在表格的底部。 117 | 118 | ## 参考链接 119 | 120 | - Colin Toh, [The Anti-hero of CSS Layout - "display:table"](https://colintoh.com/blog/display-table-anti-hero) 121 | - Ian Devlin, [CSS stacking with display:table](https://iandevlin.com/blog/2013/06/css/css-stacking-with-display-table/) 122 | - Ben Frain, [CSS performance test: Flexbox v CSS Table](https://benfrain.com/css-performance-test-flexbox-v-css-table-fight/) 123 | -------------------------------------------------------------------------------- /docs/text/text.md: -------------------------------------------------------------------------------- 1 | # 文本 2 | 3 | ## direction 4 | 5 | `direction`属性设置块级元素内部的文本阅读方向。 6 | 7 | 它的默认值是`ltr`（从左到右），适用于大部分语言。它还可以设成`rtl`（从右到左）。 8 | 9 | ```css 10 | blockquote { 11 | direction: rtl; 12 | } 13 | ``` 14 | 15 | 一般采用 HTML 语言的`dir`属性控制文本阅读方向，而不是使用这个属性。 16 | 17 | ## text-align 18 | 19 | `text-align`属性设置块级元素内部的文本对齐方式。 20 | 21 | 它可以取以下值。 22 | 23 | - left：默认值，文本向左对齐 24 | - right：右对齐 25 | - center：居中对齐 26 | - justify：两端对齐，除了最后一行是左对齐。 27 | - inherit：继承父元素的值 28 | - start：`direction`属性为从左到右时，为左对齐；从右到左时，为右对齐 29 | - end：`direction`属性为从左到右时，为右对齐；从右到左时，为左对齐 30 | 31 | ## vertical-align 32 | 33 | `vertical-align`设置一个元素与在同一条水平线上的其他元素如何对齐。这些元素需要都是`inline`。它可以取以下值。 34 | 35 | - baseline：对齐父元素的基线，默认值 36 | - length: 升高或降低特定的长度，可使用负值 37 | - %：升高或降低`line-height`的百分比，不允许负值 38 | - sub：设为下标 39 | - super：设为上标 40 | - top: 当前元素的顶部对齐最高元素的顶边 41 | - text-top：当前元素的顶部对齐父元素字体的顶部 42 | - middle：元素位于父元素的垂直中部 43 | - bottom：当前元素的底部对齐本行最低元素的底部 44 | - text-bottom：当前元素的底部，对齐父元素字体的底部 45 | - initial：设置为默认值 46 | - inherit：继承父元素的值 47 | 48 | 这个属性通常用于同一行的图标与文字的对齐。 49 | 50 | ```css 51 | vertical-align: middle; 52 | ``` 53 | 54 | 这个命令对设为`display: table-cell`的元素也有效，可以控制元素在单元格之中的垂直对齐方式。这时，一般使用`top`、`middle`和`bottom`等值。 55 | 56 | ## tab-size 57 | 58 | `tab-size`属性设置 Tab 键的宽度，可以设置为整数（表示多少个空格），也可以设置为具体的长度单位。 59 | 60 | ```css 61 | /* 整数植 */ 62 | tab-size: 4; 63 | tab-size: 0; 64 | 65 | /* 长度单位 */ 66 | tab-size: 10px; 67 | tab-size: 2em; 68 | ``` 69 | 70 | 该属性常用于`
`标签之中。
 71 | 
 72 | ```css
 73 | pre {-moz-tab-size: 16;} /* Code for Firefox */
 74 | pre {-o-tab-size: 16;} /* Code for Opera 10.6-12.1 */
 75 | pre {tab-size: 16;}
 76 | ```
 77 | 
 78 | ## word-wrap
 79 | 
 80 | `word-wrap`的正式名称是`overflow-wrap`，用于规定是否可以在一个词内部断行，避免溢出容器。
 81 | 
 82 | 它可以取两个值。
 83 | 
 84 | - normal：只在可以断行的地方断行。
 85 | - break-word：可以在任意点断行，避免某个词过长，发生溢出。
 86 | 
 87 | ## word-break
 88 | 
 89 | `word-break`用于规定是否可以在词内断行。
 90 | 
 91 | 它可以取三个值。
 92 | 
 93 | - normal：使用浏览器默认的断行规则
 94 | - break-all：对于非 CJK 字符，可以任意字符之间断行。
 95 | - keep-all：对于 CJK 字符不允许换行。非 CJK 字符与`normal`相同。
 96 | 
 97 | ## hyphens
 98 | 
 99 | 浏览器打开连字号功能，需要两个步骤。第一个步骤是设置文本的语言。这将告诉浏览器使用哪个连字词典，正确的自动连字需要一个适合文本语言的连字词典。如果浏览器不知道文本的语言，即使打开 CSS 设置也不会自动连词。
100 | 
101 | 设置网页语言，应该使用``标签的`lang`属性。
102 | 
103 | ```html
104 | 
105 | ```
106 | 
107 | CSS 里面使用自动连词，要开启`hyphens`属性。`hyphens`属性控制块级元素之中，文本是否显示连词线。
108 | 
109 | ```css
110 | hyphens: auto;
111 | ```
112 | 
113 | `hyphens`属性可以取以下三个值。
114 | 
115 | （1） none
116 | 
117 | `none`表示一个词不会在断行处被拆开，即断行处不会有连词线。
118 | 
119 | （2）manual
120 | 
121 | `manual`表示只有在一个词内部的字符表示可以有连词线时，才会在断行处拆开。断行处，会有连词线。
122 | 
123 | 两个字符可以表示此处可以断行，并显示连词线，一个是`-`(U+2010)，表示此处可以有一个可见的断行，即使不在此处断行，这里也会有连词线显示；另一个是`U+00AD`，表示不可见的断行，HTML 文档里面可以用`­`插入。
124 | 
125 | （3）auto
126 | 
127 | `auto`表示浏览器决定一个词是否可以在断行处拆开，以及是否会有连词线。
128 | 
129 | ## 参考链接
130 | 
131 | - [All you need to know about hyphenation in CSS](http://clagnut.com/blog/2395), Richard Rutter
132 | 


--------------------------------------------------------------------------------
/docs/feature/counter.md:
--------------------------------------------------------------------------------
  1 | # CSS 计数器
  2 | 
  3 | ## 简介
  4 | 
  5 | - counter-reset：新建或重置一个计数器。
  6 | - counter-increment：指定计数器的值加1。
  7 | - counter()：取出指定计数器的值。
  8 | 
  9 | ```css
 10 | counter-reset：counterName;
 11 | counter-increment: counterName;
 12 | counter(counterName);
 13 | ```
 14 | 
 15 | 下面是一个例子。
 16 | 
 17 | ```css
 18 | ul{
 19 |   counter-reset: section;
 20 | }
 21 | li{
 22 |   list-style-type: none;
 23 |   counter-increment: section;
 24 | }
 25 | li:before{
 26 |   content: counters(section, '-') '.';
 27 | }
 28 | ```
 29 | 
 30 | ## counter-reset
 31 | 
 32 | `counter-reset`属性新建或重置计数器。计数器的值默认为`0`。
 33 | 
 34 | 可以使用第二个参数，修改计数器的默认值。
 35 | 
 36 | ```css
 37 | counter-reset: count -1;
 38 | ```
 39 | 
 40 | 上面示例将计数器的默认值设为`-1`。
 41 | 
 42 | 可以在一条语句里面，同时新建多个计数器。
 43 | 
 44 | ```css
 45 | counter-reset: counter1 1 counter2 4;
 46 | counter-reset: chapter section 1 page;
 47 | ```
 48 | 
 49 | 上面示例，第一行新建了两个计数器，第二行新建了三个计数器，并且计数器`section`的默认值设为`1`。
 50 | 
 51 | 如果这个属性的值设为`none`，则表示不重置计数器，可以用来取消上层规则的设置。
 52 | 
 53 | ## counter-increment
 54 | 
 55 | `counter-increment`属性默认将计数器的值加`1`，但也可以使用第二个值，指定变化的幅度。
 56 | 
 57 | ```css
 58 | counter-increment: counter-name -1;
 59 | ```
 60 | 
 61 | 上面示例表示将计数器的值减`1`。
 62 | 
 63 | 可以在一条`counter-increment`语句里面，同时改变多个计数器。
 64 | 
 65 | ```css
 66 | counter-increment: counter1 1 counter2 -4;
 67 | 
 68 | counter-increment: chapter section 2 page;
 69 | ```
 70 | 
 71 | 上面示例的第一行，计数器`counter1`增加`1`，计数器`counter2`减去`4`。第二行，计数器`chapter`和`page`增加`1`，计数器`section`增加2。
 72 | 
 73 | 如果这个属性设为`none`，表示不改变计数器的值。
 74 | 
 75 | ## counter()
 76 | 
 77 | `counter()`还有可选的第二个参数，设置计数器的值样式，默认是阿拉伯数字。
 78 | 
 79 | ```css
 80 | counter(countername, upper-roman)；
 81 | ```
 82 | 
 83 | 上面示例将计数器的值样式设为大写的罗马数字。
 84 | 
 85 | 常用的样式值如下。
 86 | 
 87 | - decimal-leading-zero：数字带有前导0。
 88 | - lower-roman：小写的罗马数字。
 89 | - upper-roman：大写的罗马数字。
 90 | - lower-alpha：小写的英文字母。
 91 | - upper-alpha：大写的英文字母。
 92 | 
 93 | 也可以使用`@counter-style`定义自己的规则。
 94 | 
 95 | ```css
 96 | @counter-style winners-list {
 97 |   system: fixed;
 98 |   symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
 99 |   suffix: " ";
100 | }
101 | ```
102 | 
103 | 上面示例是金牌、银牌、铜牌的计数符号。
104 | 
105 | ```css
106 | @counter-style thumbs {
107 |   system: cyclic;
108 |   symbols: "\1F44D";
109 |   suffix: " ";
110 | }
111 | 
112 | ul {
113 |   list-style: thumbs;
114 | }
115 | ```
116 | 
117 | 上面示例是将列表符号变成点赞。
118 | 
119 | ```css
120 | @counter-style circled-alpha {
121 |   system: fixed;
122 |   symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
123 |   suffix: " ";
124 | }
125 | 
126 | .items {
127 |   list-style: circled-alpha;
128 | }
129 | ```
130 | 
131 | 上面示例将列表符号变成带圈的英文字母。
132 | 
133 | ## counters()
134 | 
135 | `counters()`用来取出计数器的值，并且指定多重计数器之间的连接字符。
136 | 
137 | ```css
138 | counters(name, strings, style);
139 | ```
140 | 
141 | 它与`counter()`的不同是多了一个`strings`参数，表示子序号的连接字符串。
142 | 
143 | ```css
144 | counters(countername, '-');
145 | counters(countername, '.', upper-roman);
146 | ```
147 | 
148 | 上面示例第一行中，计数器与子计数器的连接符号为`-`。第二行为小数点。
149 | 


--------------------------------------------------------------------------------
/docs/text/white-space.md:
--------------------------------------------------------------------------------
  1 | # 空格
  2 | 
  3 | ## 一、基本规则
  4 | 
  5 | HTML 代码的空格通常会被浏览器忽略。
  6 | 
  7 | ![](https://www.wangbase.com/blogimg/asset/201807/bg2018073106.jpg)
  8 | 
  9 | ```html
 10 | 
◡◡hello◡◡world◡◡

 11 | ```
 12 | 
 13 | 上面是一行 HTML 代码，文字的前部、内部和后部各有两个空格。为了便于识别，这里使用半圆形符号`◡`表示空格。
 14 | 
 15 | 浏览器的输出结果如下。
 16 | 
 17 | ```html
 18 | hello world
 19 | ```
 20 | 
 21 | 可以看到，文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。
 22 | 
 23 | 如果希望空格原样输出，可以使用`
`标签。
 24 | 
 25 | ```html
 26 | 
◡◡hello◡◡world◡◡

 27 | ```
 28 | 
 29 | 另一种方法是，改用 HTML 实体` `表示空格。
 30 | 
 31 | ```html
 32 | 
  hello  world  

 33 | ```
 34 | 
 35 | ## 二、空格字符
 36 | 
 37 | HTML 处理空格的规则，适用于多种字符。除了普通的空格键，还包括制表符（`\t`）和换行符（`\r`和`\n`）。
 38 | 
 39 | 浏览器会自动把这些符号转成普通的空格键。
 40 | 
 41 | ```html
 42 | 
hello
 43 | world

 44 | ```
 45 | 
 46 | 上面代码中，文本内部包含了一个换行符，浏览器视同为空格，输出结果如下。
 47 | 
 48 | ```html
 49 | hello world
 50 | ```
 51 | 
 52 | 所以，文本内部的换行是无效的（除非文本放在`
`标签内）。
 53 | 
 54 | ```html
 55 | 
hello
world

 56 | ```
 57 | 
 58 | 上面代码使用`
`标签显式表示换行。
 59 | 
 60 | ## 三、CSS 的 white-space 属性
 61 | 
 62 | HTML 语言的空格处理，基本上就是直接过滤。这样的处理过于粗糙，完全忽视了原始文本内部的空格可能是有意义的。
 63 | 
 64 | CSS 提供了一个 white-space 属性，可以提供更精确一点的空格处理方式。该属性共有六个值，除了一个通用的`inherit`（继承父元素），下面依次介绍剩下的五个值。
 65 | 
 66 | ### 3.1 white-space: normal
 67 | 
 68 | `white-space`属性的默认值为`normal`，表示浏览器以正常方式处理空格。
 69 | 
 70 | ```html
 71 | 
◡◡hellohellohello◡hello
 72 | world
 73 | 

 74 | ```
 75 | 
 76 | 上面代码中，文本前部有两个空格，内部有一个长单词和一个换行符。
 77 | 
 78 | 然后，容器`
`指定一个比较小的宽度。为了便于识别，背景色设为红色。
 79 | 
 80 | ```css
 81 | p {
 82 |   width: 100px;
 83 |   background: red;
 84 | }
 85 | ```
 86 | 
 87 | 显示效果如下图。
 88 | 
 89 | ![](https://www.wangbase.com/blogimg/asset/201807/bg2018073101.png)
 90 | 
 91 | 可以看到，文首的空格被忽略。由于容器太窄，第一个单词溢出容器，然后在后面一个空格处换行。文本内部的换行符自动转成了空格。
 92 | 
 93 | ### 3.2 white-space: nowrap
 94 | 
 95 | `white-space`属性为`nowrap`时，不会因为超出容器宽度而发生换行。
 96 | 
 97 | ```css
 98 | p {
 99 |   white-space: nowrap;
100 | }
101 | ```
102 | 
103 | 显示效果如下图。
104 | 
105 | ![](https://www.wangbase.com/blogimg/asset/201807/bg2018073102.png)
106 | 
107 | 所有文本显示为一行，不会换行。
108 | 
109 | ### 3.3 white-space: pre
110 | 
111 | `white-space`属性为`pre`时，就按照`
`标签的方式处理。
112 | 
113 | ```css
114 | p {
115 |   white-space: pre;
116 | }
117 | ```
118 | 
119 | 显示效果如下图。
120 | 
121 | ![](https://www.wangbase.com/blogimg/asset/201807/bg2018073103.png)
122 | 
123 | 上面结果与原始文本完全一致，所有空格和换行符都保留了。
124 | 
125 | ### 3.4 white-space: pre-wrap
126 | 
127 | `white-space`属性为`pre-wrap`时，基本还是按照`
`标签的方式处理，唯一区别是超出容器宽度时，会发生换行。
128 | 
129 | ```css
130 | p {
131 |   white-space: pre-wrap;
132 | }
133 | ```
134 | 
135 | 显示效果如下图。
136 | 
137 | ![](https://www.wangbase.com/blogimg/asset/201807/bg2018073104.png)
138 | 
139 | 文首的空格、内部的空格和换行符都保留了，超出容器的地方发生了折行。
140 | 
141 | ### 3.5 white-space: pre-line
142 | 
143 | `white-space`属性为`pre-line`时，意为保留换行符。除了换行符会原样输出，其他都与`white-space:normal`规则一致。
144 | 
145 | ```css
146 | p {
147 |   white-space: pre-line;
148 | }
149 | ```
150 | 
151 | 显示效果如下图。
152 | 
153 | ![](https://www.wangbase.com/blogimg/asset/201807/bg2018073105.png)
154 | 
155 | 除了文本内部的换行符没有转成空格，其他都与`normal`的处理规则一致。这对于诗歌类型的文本很有用。
156 | 
157 | ## 四、参考链接
158 | 
159 | - [When does white space matter in HTML?](https://medium.com/@patrickbrosset/when-does-white-space-matter-in-html-b90e8a7cdd33)，by Patrick Brosset
160 | - [white-space](https://css-tricks.com/almanac/properties/w/whitespace/)，by Sara Cope 
161 | 
162 | 


--------------------------------------------------------------------------------
/docs/font.md:
--------------------------------------------------------------------------------
  1 | # 字体
  2 | 
  3 | ## 字体文件类型
  4 | 
  5 | 内嵌OpenType（Embedded OpenType，.eot）。在使用@font-face时，Internet Explorer 8及之前的版本仅支持内嵌OpenType。内嵌OpenType是Microsoft的一项专有格式，它使用数字版权管理技术防止在未经许可的情况下使用字体。
  6 | 
  7 | TrueType（.ttf）和OpenType（.otf），台式机使用的标准字体文件类型。TrueType和OpenType得到了Mozilla Firefox（3.5及之后的版本）、Opera（10及之后的版本）、Safari（3.1及之后的版本）、Mobile Safari（iOS 4.2及之后的版本）、Google Chrome（4.0及之后的版本）及Internet Explorer（9及之后的版本）的广泛支持。这些格式不使用数字版权管理。
  8 | 
  9 | Web开放字体格式（Web Open Font Format，.woff）。这种较新的标准是专为Web字体设计的。Web开放字体格式的字体是经压缩的TrueType字体或OpenType字体。WOFF格式还允许在文件上附加额外的元数据。字体设计人员或厂商可以利用这些元数据，在原字体信息的基础上，添加额外的许可证或其他信息。这些元数据不会以任何方式影响字体的表现，但经用户请求，这些元数据可以呈现出来。Mozilla Firefox（3.6及之后的版本）、Opera（11.1及之后的版本）、Safari（5.1及之后的版本）、Google Chrome（6.0及之后的版本）及Internet Explorer（9及之后的版本）均支持Web开放字体格式。
 10 | 
 11 | 可缩放矢量图形（Scalable Vector Graphics，.svg）。简言之，应避免对Web字体文件使用SVG。它更多地用于早期Web字体，因为它是iOS 4.1上移动Safari唯一支持的格式（还有可能引起一些崩溃的情况）。从iOS 4.2（于2011年初即被广泛使用）起，移动Safari开始支持TrueType。
 12 | 
 13 | ## font-size
 14 | 
 15 | `font-size`属性用于设置网页的字体大小。
 16 | 
 17 | 下面是设置网页根字体大小的例子。
 18 | 
 19 | ```css
 20 | :root {
 21 |   font-size: 16px;
 22 | }
 23 | 
 24 | /* 也可以针对 html 元素设置
 25 | html {
 26 |   font-size: 16px;
 27 | }
 28 | ```
 29 | 
 30 | 然后，每个一级区块的`font-size`采用`rem`单位，内部属性使用`em`单位。这时，`em`的大小是基于`rem`设置的。
 31 | 
 32 | ```css
 33 | button {
 34 |     font-size: 0.875rem;
 35 |     // All the internal/external value use in 'em'
 36 |     // This value use of your "font-size" as the basic font size
 37 |     // And you will not have any problem with the font size of the container ( Example bottom )
 38 |     padding: .5em 1em;
 39 |     border: .125em solid #e3e3e3;
 40 |     @media (min-width: 48rem){ // min-width: 768px
 41 |       font-size: 1.125rem;
 42 |     }
 43 |     @media (min-width: 62rem){ // min-width: 992px
 44 |       font-size: 1.375rem;
 45 |     }
 46 | }
 47 | ```
 48 | 
 49 | ## font-smoothing
 50 | 
 51 | `font-smooth`属性主要用于控制浏览器对字体的渲染。比如，下面的设置可以减少字体渲染出现锯齿。
 52 | 
 53 | ```css
 54 | body {
 55 |   -webkit-font-smoothing: antialiased;
 56 |   -moz-osx-font-smoothing: grayscale;
 57 | }
 58 | ```
 59 | 
 60 | ## font-display
 61 | 
 62 | 有时，样式表指定的字体需要下载（称为 web font），`font-display`属性用于控制浏览器在下载字体时的渲染行为。
 63 | 
 64 | ```css
 65 | @font-face {
 66 |   font-family: 'my-font';
 67 |   font-display: optional;
 68 |   src: url(my-font.woff2) format('woff2');
 69 | }
 70 | ```
 71 | 
 72 | 这里需要理解，浏览器对于下载字体的处理过程。
 73 | 
 74 | 首先，浏览器发现样式表指定的字体，是一种需要下载的字体，会去检查缓存里面是否存在这种字体，如果不存在就开始从网上下载。这时，网页上使用这种字体的文字，会显示不出来，而展现一片空白。这段时间称为”阻塞期“（block），每种浏览器的”阻塞期“时间长度不尽相同，Chrome、Firefox 和 Safari 都是3秒，即文字会有3秒钟显示不出来，而 IE 是0秒，即没有阻塞期。
 75 | 
 76 | 然后，阻塞期结束，如果字体已经下载完成，浏览器就会采用下载的字体进行渲染，文字就会显示出来。如果下载还没有结束，浏览器就会采用替代字体进行渲染，文字也会显示出来，但是与最终状态不一样，这段时间称为”替换期“（swap）。此时，浏览器其实还在下载字体。
 77 | 
 78 | 最后，等到字体下载成功，这时浏览器会用下载的字体，替换现有的字体，这时网页会一闪。如果字体下载失败了，这时浏览器就会继续使用现有的字体，因此网页不会发生变化。
 79 | 
 80 | `font-display`可以取以下值。
 81 | 
 82 | （1）`font-display: block`
 83 | 
 84 | 这是浏览器的默认行为，即打开阻塞期。
 85 | 
 86 | （2）`font-display: swap`
 87 | 
 88 | 这个值会关闭阻塞期，直接进入替换期，即浏览器不会出现文字显示不出来的情况。
 89 | 
 90 | （3）`font-display: fallback`
 91 | 
 92 | 这个值设置阻塞期的长度是100毫秒，即文字有100毫秒显示不出来，然后立即进入替换期。等到字体下载结束，再使用下载的字体渲染。
 93 | 
 94 | （4）`font-display: optional`
 95 | 
 96 | 这个值设置阻塞期也是100毫秒。然后，等到100毫秒结束，浏览器发现字体已经下载完成，就使用下载的字体渲染，否则就不再下载，永久性使用替代字体渲染。它主要用于网速较慢的环境，不让用户长时间等到字体下载。
 97 | 
 98 | 一般来说，正常情况下都推荐使用`font-display:optional`。如果是图标字体等没有替代字体的情况下，可以使用`font-display: block`。
 99 | 
100 | ## 参考链接
101 | 
102 | - [Font-display](https://font-display.glitch.me/), by Monica Dinculescu
103 | 


--------------------------------------------------------------------------------
/docs/intro.md:
--------------------------------------------------------------------------------
  1 | # CSS 概述
  2 | 
  3 | ## 简介
  4 | 
  5 | CSS 用于定义网页的样式，比如每个网页元素的位置、大小、颜色等等。
  6 | 
  7 | CSS 随着网页的诞生而诞生。1996年12月，CSS 1.0 标准问世，目前广泛使用的是2000年4月发布的 CSS 3 标准。
  8 | 
  9 | CSS 3 采用模块化结构，每个模块都是独立定义的，定义完成以后，再加入 CSS 标准。截止2017年，CSS 共有88个模块，下面是其中一次主要模块。
 10 | 
 11 | > - Display
 12 | > - Box alignment
 13 | > - Flexible box
 14 | > - CSS Grid
 15 | > - Inline Layout
 16 | > - Position Layout
 17 | > - CSS Shapes
 18 | > - CSS Transforms
 19 | 
 20 | CSS 样式表就是一个文本文件，定义每个网页元素的样式规则。
 21 | 
 22 | ## 样式规则
 23 | 
 24 | CSS 样式表由大量样式规则组成。每条样式规则分成两个部分：选择器（selector）和声明块（declaration block）。
 25 | 
 26 | 选择器指明本条规则对哪些网页元素生效，声明块描述样式规则的具体内容。
 27 | 
 28 | ```css
 29 | h1 {
 30 |   color: red;
 31 | }
 32 | ```
 33 | 
 34 | 上面代码是一条样式规则，其中`h1`是选择器，大括号的部分就是声明块。这个规则的意思是，`h1`元素的颜色为红色。
 35 | 
 36 | 声明块的内容，放在一对大括号里面。大括号之中是一个或多个键值对，每个键值对用分号结尾，给出一条样式描述。键值对的顺序并不重要。
 37 | 
 38 | ```css
 39 | h1 {
 40 |   background-color: yellow;
 41 |   color: red;
 42 | }
 43 | ```
 44 | 
 45 | 上面代码中，声明块里面包含两条样式描述，它们的顺序不重要，完全可以对调位置。
 46 | 
 47 | 声明块可以写成多行，也可以写成一行。缩进和换行只是为了增加可读性，CSS 引擎会忽略它们。
 48 | 
 49 | ```css
 50 | h1 { color: red; }
 51 | ```
 52 | 
 53 | 上面代码中，声明块写成了一行。它与写成多行的效果是一样的。
 54 | 
 55 | CSS 允许重复声明某个样式，这时最后声明的键值对会覆盖前面的键值对。
 56 | 
 57 | ```css
 58 | h1 {
 59 |   color: red;
 60 |   color: black;
 61 | }
 62 | ```
 63 | 
 64 | 上面代码中，颜色属性申明了两次。后面声明的黑色，会覆盖前面声明的红色。
 65 | 
 66 | 声明块里面的键值对，由键名和键值组成。键名称为 CSS 属性（property），由 CSS 标准给出，键值是该属性允许被赋予的一个值。
 67 | 
 68 | 学习 CSS，主要就是学习各种各样的 CSS 属性。
 69 | 
 70 | ## CSS 注释
 71 | 
 72 | CSS 使用`/* ... */`表示注释，可以是单行，也可以是多行。
 73 | 
 74 | ```css
 75 | h1 { /* 这是单行注释 */
 76 |   color: red;
 77 | }
 78 | 
 79 | /* 这是多行注释
 80 | h1 {
 81 |   color: red;
 82 | }
 83 | */
 84 | ```
 85 | 
 86 | 上面代码中，多行注释包含整个`h1`的样式规则，这意味着这个样式规则不会生效。
 87 | 
 88 | 注意：注释不能嵌套。
 89 | 
 90 | ## CSS 的继承
 91 | 
 92 | 某些 CSS 属性不仅影响网页元素本身，还会影响该元素的后代元素，这称为 CSS 的继承。
 93 | 
 94 | 最典型的例子就是字体属性`font-family`，网页根元素`html`设置了字体以后，该网页的所有元素都会默认使用指定的字体。
 95 | 
 96 | 以下是常见的可以继承的 CSS 属性。
 97 | 
 98 | > 文本
 99 | > - color（颜色，a元素除外）
100 | > - direction（方向）
101 | > - font（字体）
102 | > - font-family（字体系列）
103 | > - font-size（字体大小）
104 | > - font-style（用于设置斜体）
105 | > - font-variant（用于设置小型大写字母）
106 | > - font-weight（用于设置粗体）
107 | > - letter-spacing（字母间距）
108 | > - line-height（行高）
109 | > - text-align（用于设置对齐方式）
110 | > - text-indent（用于设置首行缩进）
111 | > - text-transform（用于修改大小写）
112 | > - visibility（可见性）
113 | > - white-space（用于指定如何处理空格）
114 | > - word-spacing（字间距）
115 | >
116 | > 列表
117 | > - list-style（列表样式）
118 | > - list-style-image（用于为列表指定定制的标记）
119 | > - list-style-position（用于确定列表标记的位置）
120 | > - list-style-type（用于设置列表的标记）
121 | >
122 | > 表格
123 | > - border-collapse（用于控制表格相邻单元格的边框是否合并为单一边框）
124 | > - border-spacing（用于指定表格边框之间的空隙大小）
125 | > - caption-side（用于设置表格标题的位置）
126 | > - empty-cells（用于设置是否显示表格中的空单元格）
127 | >
128 | > 页面设置（对于印刷物）
129 | > - orphans（用于设置当元素内部发生分页时在页面底部需要保留的最少行数）
130 | > - page-break-inside（用于设置元素内部的分页方式）
131 | > - widows（用于设置当元素内部发生分页时在页面顶部需要保留的最少行数）
132 | >
133 | > 其他
134 | > - cursor（鼠标指针）
135 | > - quotes（用于指定引号样式）
136 | 
137 | ## 样式的优先级
138 | 
139 | 如果多条规则都对同一个网页元素指定样式，只要 CSS 属性不发生冲突，那么这些规则都是有效的。
140 | 
141 | 如果 CSS 属性发生冲突，那就存在一个优先级的问题：哪一条规则优先生效？
142 | 
143 | CSS 采用以下规则，决定样式规则的优先级。
144 | 
145 | - 特殊性（specificity）
146 | - 顺序（order）
147 | - 重要性（importance）
148 | 
149 | 特殊性指的是选择器的具体程度，选择器越特殊，规则就越强。遇到冲突时，优先应用特殊性强的规则。特殊性最低的是元素名本身，然后是元素的`class`属性，特殊性最高的是`id`属性。建议在样式表中多使用`class`选择器，避免使用`id`选择器，这样的灵活性最好。
150 | 
151 | 规则指的是，同样特殊性的规则，晚出现的优先级高。
152 | 
153 | 重要性指的是，特别注明某条规则的重要程度要比其他所有规则高，方法是在声明的末尾加上`!important`。由于可维护性很差，一旦出现问题，很难排查，除非是殊情况，否则不推荐使用这种方法。
154 | 
155 | ```html
156 | p {
157 |   color: orange !important;
158 | }
159 | ```
160 | 
161 | ## 样式表嵌入网页的方法
162 | 
163 | HTML 网页采用``标签将 CSS 样式表嵌入网页。
164 | 
165 | ```html
166 | 
167 | 
168 | 
169 |     
170 |     Demo
171 |     
172 | 
173 | 
174 |   ... ...
175 | 
176 | 
177 | ```
178 | 
179 | 上面代码中，``标签放在``内部，`rel="stylesheet"`指明这是样式表，`href`属性给出样式表文件的网址。浏览器解析到这一行代码，就会去加载样式表。
180 | 
181 | 上例的样式表文件是`style.css`。样式表的后缀名通常是`.css`，但也可以是其他后缀名。
182 | 
183 | 网页也可以使用`
196 | 
197 | 
198 |   ... ...
199 | 
200 | 
201 | ```
202 | 
203 | 上面代码中，``内部的`