From 888cf1292d2156bbc852fdcd76d7f2b6e2e93c0c Mon Sep 17 00:00:00 2001 From: ruanyf Date: Sat, 9 Nov 2019 22:07:13 +0800 Subject: [PATCH 1/6] docs: add print --- docs/advance/print.md | 150 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 docs/advance/print.md diff --git a/docs/advance/print.md b/docs/advance/print.md new file mode 100644 index 0000000..1fda1e4 --- /dev/null +++ b/docs/advance/print.md @@ -0,0 +1,150 @@ +# 打印样式 + +## 基本用法 + +`@media print`命令可以设置打印样式,即用户选择打印当前网页时,生效的 CSS 规则。 + +```css +@media print { + h1 { font-size: 16pt; } +} +``` + +上面代码设置的`h1`样式,对屏幕浏览不产生效果,只有用户打印网页时才会生效。 + +`@media print`命令可以与正常样式规则混合使用。 + +```css +p { margin: 1em 0; } + +@media print { + .related-articles { display: none; } +} +``` + +上面代码中,`p`元素的样式对屏幕浏览和打印都有效,`.related-articles`的样式只对打印有效。 + +如果要设置某些规则只对屏幕浏览有效,可以像下面这样写。 + +```css +@media screen { + /* 只对屏幕浏览有效 */ +} + +@media print { + /* 只对打印有效 */ +} +``` + +## 分页符 + +分页符属性用来设置页面的分页(即另起一页),共有三个相关属性。 + +- page-break-before:元素之前分页 +- page-break-after:元素之后分页 +- page-break-inside:元素内部分页 + +这三个属性的值都是两个:`always`(生效)和`avoid`(避免)。 + +```css +h1 { + /* 总是在 h1 元素之前分页 */ + page-break-before: always; +} + +section.city-map { + /* 在元素之前和之后分页,即该元素单独占据一页 */ + page-break-before: always; + page-break-after: always; +} + +table { + /* 表格尽可能不要分页 */ + page-break-inside: avoid; +} +``` + +## orphans 属性,widow 属性 + +`orphans`属性和`widow`属性设置某个元素如何跨页拆分。 + +`orphans`属性设置跨页前的行数少于多少行时,所有行都移到下一页打印。 + +```css +p { + orphans: 3; +} +``` + +上面代码设置,如果某个段落出现在上一页的结尾少于3行(比如只有两行),那么该段落全部移到下一页显示。 + +`widow`属性设置出现在新页面的行数,最少应该有几行。 + +```css +p { + widow: 2; +} +``` + +上面代码设置,如果某个段落出现在新页面的开头少于两行(比如只有一行),那么该段落全部移到上一页显示。 + +## @page 命令 + +`@page`命令主要用来定义页面距。 + +```css +@page { + margin: 2cm; +} +``` + +此外,还可以用`:first`、`:last`、`:left`、`:right`和`:blank`选择器,选中特殊页面。 + +```css +@page:first { + margin: 0; +} +``` + +上面代码设置第一页的页边距为`0`。 + +## 技巧 + +### 重复表格的表头 + +如果希望打印表格的时候,每一页都出现表头,只需要使用``元素定义表头,``元素定义表的数据部分即可。 + +```html + + + + + + + + + + + + +
CityPopulation
Sydney4.627 million (2018)
+``` + +上面代码中,如果表格跨页,表头的`City`和`Population`字段会在每一页都打印出来。 + +### 打印链接的网址 + +如果希望打印出链接的网址,可以使用`:after`伪元素。 + +```css +@media print { + a[href]:after { + content: "(" attr(href) ")"; + } +} +``` + +## 参考链接 + +- [Print CSS basics in 10 minutes](https://www.paperplane.app/blog/print-css-basics/), Paperplay + From 36f1f2b589175c1eae3861e6db23c8868a5399b0 Mon Sep 17 00:00:00 2001 From: ruanyf Date: 2019年11月14日 00:27:21 +0800 Subject: [PATCH 2/6] docs: edit pseudo-class --- docs/selectors/pseudo-class.md | 33 +++++++++++++++++++++------------ 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/docs/selectors/pseudo-class.md b/docs/selectors/pseudo-class.md index 1e6b363..a807684 100644 --- a/docs/selectors/pseudo-class.md +++ b/docs/selectors/pseudo-class.md @@ -2,7 +2,7 @@ 伪元素(pseudo-element)是 HTML 中并不存在的元素。例如,定义第一个字母或第一行文字时,并未在HTML中作相应的标记。 -伪类(pseudo-class)则应用于一组 HTML 元素,而你无需在 HTML 代码中用类标记它们。例如,使用:first-child可以选择某元素的第一个子元素,你就不用写成class="first-child"。更多关于伪类的内容。 +伪类(pseudo-class)是浏览器根据网页元素的状态,自动提供的 CSS 类,无需在 HTML 代码显式标记这些类。例如,使用:first-child可以选择某元素的第一个子元素,你就不用写成class="first-child"。更多关于伪类的内容。 伪元素有四个。 @@ -23,8 +23,6 @@ 新的、未访问的链接显示为红色;访问过的链接变为橙色; - - ## 概述 CSS 2.1非常有限,只提供了三个伪类。 @@ -124,7 +122,7 @@ p:last-of-type { ## :nth-child(),:nth-last-child() -`:nth-child()`选中本类之中指定位置的元素。`:nth-last-child()`选中本类之中指定的倒数位置的元素。 +`:nth-child()`选中指定位置的子元素。`:nth-last-child()`选中指定的倒数位置的子元素。 ```css p:nth-child(2) { @@ -132,7 +130,18 @@ p:nth-child(2) { } ``` -上面代码中,`:nth-child()`选中第二个`p`元素。 +上面代码中,`:nth-child()`选中所有第二个子元素位置的`p`元素。 + +注意,如果元素名与`:nth-child()`之间有没有空格,含义是不一样的。没有空格时,表示匹配该种子元素;有空格时,表示匹配该元素的子元素。 + + +```css +p :nth-child(2) { + color: red; +} +``` + +上面代码表示,匹配`p`元素内部的第二个子元素,而不是匹配`p`元素本身。 `:nth-child()`和`:nth-last-child()`可以使用通配符作为参数,参见`:nth-of-type()`部分的说明。 @@ -144,19 +153,19 @@ ul li:nth-child(3n+3) { 上面代码选中3、6、9等位置的`li`元素,`n`表示整数序列0、1、2、3......。 -这里还有一个技巧,如果要选中前三个元素,可以在`n`前面使用负数符号`-`。 +这里还有一个技巧,如果要选中前三个元素,可以在`n`前面使用负数符号1`-`。 ```css -ul li:nth-child(-n+3) { +ul li:nth-child(-n + 3) { color: #ccc; } ``` -上面代码只会选中前三个`li`,因为当`n`大于等于`3`时,`-n+3`会小于等于0,而`li`的序号是从`1`开始的。 +上面代码只会选中前三个`li`,因为当`n`大于等于`3`时,`-n + 3`会小于等于0,而`li`的序号是从`1`开始的。 相应的,`:nth-last-child(-n + 3)`就会选中最后三个元素,而`:nth-last-child(n + 4)`会选中除了最后三个以外的其他元素。 -除了使用`an+b`这种形式的表达式指定位置,还可以使用`odd`或`even`关键字,分别表示奇数位置或偶数位置的元素。 +除了使用`An + B`这种形式的表达式指定位置,还可以使用`odd`或`even`关键字,分别表示奇数位置或偶数位置的元素。 ```css ul li:nth-child(odd) { @@ -166,7 +175,7 @@ ul li:nth-child(odd) { ## :nth-of-type(),:nth-last-of-type() -`:nth-of-type()`选中指定类型和指定位置的元素,`:nth-last-of-type()`选中倒数位置的指定类型和指定位置的元素。 +`:nth-of-type()`匹配指定类型和位置的元素,`:nth-last-of-type()`匹配倒数位置的指定类型和位置的元素。 ```css p:nth-of-type(2) { @@ -174,9 +183,9 @@ p:nth-of-type(2) { } ``` -`:nth-of-type`选中子元素之中的第二个`p`元素。 +上面代码中,`p:nth-of-type(2)`匹配第二个`p`元素。 -通配符用法。 +下面是通配符用法。 ```css li:nth-of-type(2n) { From 6f15d75ea545c7f15fad73d83e8b5ee2993bd70e Mon Sep 17 00:00:00 2001 From: ruanyf Date: 2019年11月27日 15:58:31 +0800 Subject: [PATCH 3/6] docs: property --- docs/position.md | 169 +++++++++++++++++++++++++++++++++++++++++-- docs/properties.md | 175 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 340 insertions(+), 4 deletions(-) diff --git a/docs/position.md b/docs/position.md index b114db1..2404f4c 100644 --- a/docs/position.md +++ b/docs/position.md @@ -1,12 +1,173 @@ # position -`static`是`position`属性的默认值,表示元素在文档布局里面的正常位置。静态元素不能指定`top`、`left`等表示位置的属性。 +`position`属性用来指定一个元素在网页上的位置,一共有5种定位方式,即`position`属性主要有五个值。 -`absolute`表示当前元素相对于它的容器元素的绝对位置。它独立于其他元素,不再是正常内容布局的一部分。绝对定位元素的容器元素,是它最近一层不是`static`布局的元素,如果没有的话,就是相对于`document`元素的布局。 +> - `static` +> - `relative` +> - `fixed` +> - `absolute` +> - `sticky` -`fixed`表示元素位置相对于浏览器窗口是固定的。这个元素总是可见,而且不会随着页面滚动而滚动。固定定位的元素,独立于其他元素,不是正常内容布局的一部分。 +下面就依次介绍这五个值。 -`relative`表示元素的位置是相对于它的正常位置。它依然属于内容布局的一部分,周边元素不受它的位置改变的影响。 +## static 属性值 + +`static`是`position`属性的默认值。如果省略`position`属性,浏览器就认为该元素是`static`定位。 + +这时,浏览器会按照源码的顺序,决定每个元素的位置,这称为"正常的页面流"(normal flow)。每个块级元素占据自己的区块(block),元素与元素之间不产生重叠,这个位置就是元素的默认位置。 + +![](https://www.wangbase.com/blogimg/asset/201911/bg2019111720.jpg) + +注意,`static`定位所导致的元素位置,是浏览器自主决定的,所以这时`top`、`bottom`、`left`、`right`这四个属性无效。 + +## relative,absolute,fixed + +`relative`、`absolute`、`fixed`这三个属性值有一个共同点,都是相对于某个基点的定位,不同之处仅仅在于基点不同。所以,只要理解了它们的基点是什么,就很容易掌握这三个属性值。 + +这三种定位都不会对其他元素的位置产生影响,即不管有没有这个元素,其他元素的位置不变,因此元素之间可能产生重叠。 + +### relative 属性值 + +`relative`表示,相对于默认位置(即`static`时的位置)进行偏移,即定位基点是元素的默认位置。 + +![](https://www.wangbase.com/blogimg/asset/201911/bg2019111721.jpg) + +![](https://www.wangbase.com/blogimg/asset/201911/bg2019111722.jpg) + +它必须搭配`top`、`bottom`、`left`、`right`这四个属性一起使用,用来指定偏移的方向和距离。 + +![](https://www.wangbase.com/blogimg/asset/201911/bg2019111723.jpg) + +```css +div { + position: relative; + top: 20px; +} +``` + +上面代码中,`div`元素从默认位置向下偏移`20px`(即距离顶部`20px`)。 + +### absolute 属性值 + +`absolute`表示,相对于祖先元素(一般是父元素)进行偏移,即定位基点通常是父元素。 + +它有一个重要的限制条件:父元素不能是`static`定位,否则定位基点会移到最近一个非`static`定位的祖先元素。如果所有祖先元素都是`static`定位,定位基点就变成整个网页的根元素`html`。另外,`absolute`定位也必须搭配`top`、`bottom`、`left`、`right`这四个属性一起使用。 + +![](https://www.wangbase.com/blogimg/asset/201911/bg2019111801.jpg) + +```css +/* + HTML 代码如下 +
+ +
+*/ + +#father { + positon: relative; +} +#son { + position: absolute; + top: 20px; +} +``` + +上面代码中,父元素是`relative`定位,子元素是`absolute`定位,所以子元素的定位基点是父元素,相对于父元素的顶部向下偏移`20px`。如果父元素是`static`定位,上例的子元素就是距离网页的顶部向下偏移`20px`。 + +注意,`absolute`定位的元素会被"正常页面流"忽略,即在"正常页面流"中,该元素所占空间为零,周边元素不受影响。 + +### fixed 属性值 + +`fixed`表示,相对于视口(viewport,浏览器窗口)进行偏移,即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样。 + +![](https://www.wangbase.com/blogimg/asset/201911/bg2019111802.jpg) + +它如果搭配`top`、`bottom`、`left`、`right`这四个属性一起使用,表示元素的初始位置是基于视口计算的,否则初始位置就是元素的默认位置。 + +```css +div { + position: fixed; + top: 0; +} +``` + +上面代码中,`div`元素始终在视口顶部,不随网页滚动而变化。 + +## 四、sticky 属性值 + +`sticky`跟前面四个属性值都不一样,它会产生动态效果,很像`relative`和`fixed`的结合:一些时候是`relative`定位(定位基点是自身默认位置),另一些时候自动变成`fixed`定位(定位基点是视口)。 + +因此,它能够形成"动态固定"的效果。比如,网页的搜索工具栏,初始加载时在自己的默认位置(`relative`定位)。 + +![](https://www.wangbase.com/blogimg/asset/201911/bg2019111604.jpg) + +页面向下滚动时,工具栏变成固定位置,始终停留在页面头部(`fixed`定位)。 + +![](https://www.wangbase.com/blogimg/asset/201911/bg2019111605.jpg) + +等到页面重新向上滚动回到原位,工具栏也会回到默认位置。 + +`sticky`生效的前提是,必须搭配`top`、`bottom`、`left`、`right`这四个属性一起使用,不能省略,否则等同于`relative`定位,不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离",浏览器把它当作`sticky`的生效门槛。 + +它的具体规则是,当页面滚动,父元素开始脱离视口时(即部分不可见),只要与`sticky`元素的距离达到生效门槛,`relative`定位自动切换为`fixed`定位;等到父元素完全脱离视口时(即完全不可见),`fixed`定位自动切换回`relative`定位。 + +请看下面的示例代码。(注意,除了已被淘汰的 IE 以外,其他浏览器目前都支持`sticky`。但是,Safari 浏览器需要加上浏览器前缀`-webkit-`。) + +```css +#toolbar { + position: -webkit-sticky; /* safari 浏览器 */ + position: sticky; /* 其他浏览器 */ + top: 20px; +} +``` + +上面代码中,页面向下滚动时,`#toolbar`的父元素开始脱离视口,一旦视口的顶部与`#toolbar`的距离小于`20px`(门槛值),`#toolbar`就自动变为`fixed`定位,保持与视口顶部`20px`的距离。页面继续向下滚动,父元素彻底离开视口(即整个父元素完全不可见),`#toolbar`恢复成`relative`定位。 + +## 五、 sticky 的应用 + +`sticky`定位可以实现一些很有用的效果。除了上面提到"动态固定"效果,这里再介绍两个。 + +## 5.1 堆叠效果 + +堆叠效果(stacking)指的是页面滚动时,下方的元素覆盖上方的元素。下面是一个图片堆叠的例子,下方的图片会随着页面滚动,覆盖上方的图片(查看 [demo](https://jsbin.com/fegiqoquki/edit?html,css,output))。 + +![](https://www.wangbase.com/blogimg/asset/201911/bg2019111609.jpg) + +HTML 代码就是几张图片。 + +```html + + + +``` + +CSS 代码极其简单,只要两行。 + +```css +div { + position: sticky; + top: 0; +} +``` + +它的原理是页面向下滚动时,每张图片都会变成`fixed`定位,导致后一张图片重叠在前一张图片上面。详细解释可以看[这里](https://dev.to/vinceumo/slide-stacking-effect-using-position-sticky-91f)。 + +### 5.2 表格的表头锁定 + +大型表格滚动的时候,表头始终固定,也可以用`sticky`实现(查看 [demo](https://jsbin.com/decemanohe/edit?html,css,output))。 + +![](https://www.wangbase.com/blogimg/asset/201911/bg2019111610.jpg) + +CSS 代码也很简单。 + +```css +th { + position: sticky; + top: 0; +} +``` + +需要注意的是,`sticky`必须设在``元素上面,不能设在``和``元素,因为这两个元素没有`relative`定位,也就无法产生`sticky`效果。详细解释可以看[这里](https://css-tricks.com/position-sticky-and-table-headers/)。 ## z-index diff --git a/docs/properties.md b/docs/properties.md index 7cb68eb..346e114 100644 --- a/docs/properties.md +++ b/docs/properties.md @@ -1,5 +1,180 @@ # CSS 属性 +## `inherit`属性值 + +CSS 的许多属性可以继承,即子元素默认继承父元素的属性。比如,`body`元素的字体样式,可以被页面的所有元素继承。 + +```css +body { + font-family: Arial, Helvetica, sans-serif; +} +``` + +上面代码中,`body`设置了`font-family`了,它的后代元素就不用设置这个属性了,除非需要改变字体。 + +根据标准,以下 CSS 属性可以继承。 + +1. `azimuth` +2. `border-collapse` +3. `border-spacing` +4. `caption-side` +5. `color` +6. `cursor` +7. `direction` +8. `elevation` +9. `empty-cells` +10. `font-family` +11. `font-size` +12. `font-style` +13. `font-variant` +14. `font-weight` +15. `font` +16. `letter-spacing` +17. `line-height` +18. `list-style-image` +19. `list-style-position` +20. `list-style-type` +21. `list-style` +22. `orphans` +23. `pitch-range` +24. `pitch` +25. `quotes` +26. `richness` +27. `speak-header` +28. `speak-numeral` +29. `speak-punctuation` +30. `speak` +31. `speech-rate` +32. `stress` +33. `text-align` +34. `text-indent` +35. `text-transform` +36. `visibility` +37. `voice-family` +38. `volume` +39. `white-space` +40. `widows` +41. `word-spacing` + +其他属性默认不能继承,比如`border`属性。父元素设置了`border`以后,子元素如果要有边框,必须重新设一遍。 + +```css +.main-list { + border: 1rem solid #000; + color: red; + font-family: Verdana +} + +.sub-list { + border: 1rem solid #000; +} +``` + +上面代码中,`.sum-list`是`.main-list`的子元素,两者的边框必须各自设置。 + +CSS 提供了`inherit`属性值,如果要让子元素继承父元素的属性,可以使用这个属性值。 + +```css +.main-list { + border: 1rem solid #000; + color: red; + font-family: Verdana; +} + +.sub-list { + border: inherit; +} +``` + +上面代码中,`.sub-list`的`border`属性,就继承了`.main-list`,从而两者的边框都一样。它的好处是,如果要修改边框,只要修改一处即可。 + +## initial 属性值 + +`initial`属性值可以将 CSS 属性设回初始值。它的主要用处是,让那些默认继承父元素的 CSS 属性不再继承,回到初始值。 + +```css +.berries { + border: 1rem solid #000; + color: red; + font-family: Verdana; + margin-bottom: 10px; +} + +.berries h1 { + color: initial; +} +``` + +上面代码中,`.berries`是`h1`的父元素,而`color`属性是可以继承的,如果不设置`h1`的颜色,`h1`就会是红色的。现在`h1`的`color`设为`initial`,就不再继承父元素的颜色,而是回到浏览器给予`h1`的默认颜色,即黑色。 + +## unset 属性值 + +`unset`属性值的作用是,如果存在继承,则继承父元素的值(等同于`inherit`),如果不存在继承,则重置为初始值(等同于`initial`)。`unset`的意思,就是去除当前样式表对该元素的样式设置。 + +```css +h1 { + color: blue; +} + +div { + border: 1rem solid #000; + color: red; + font-family: Verdana; + margin-bottom: 10px; +} + +.berries h1 { + color: unset; +} +``` + +上面代码中,`div`是`h1`的父元素,如果不设置`.berries h1`的`color`属性,`h1`会显示为蓝色,设成`color: unset`以后,`h1`继承了父元素的`color`,显示为红色。 + +`unset`与`inherit`的区别在于,如果不设置`div`的`color`,那么`.berries h1`将显示为浏览器赋予的默认颜色(黑色),而不是红色。 + +```css +h1 { + color: blue; +} + +div { + border: 1rem solid #000; + font-family: Verdana; + margin-bottom: 10px; +} + +.berries h1 { + color: unset; +} +``` + +上面代码中,父元素`div`没有设置颜色,这时子元素`.berries h1`将显示为浏览器默认颜色(黑色),而不是蓝色。 + +## revert 属性值 + +`revert`属性值用于消除当前样式表对该元素设置的样式,这也是它名字的含义(`还原`),基本等同于`unset`。具体来说,如果存在继承,该元素会显示继承的属性值,如果不存在继承,则分成以下两种情况。 + +- `revert`用在网站提供的样式表:则显示用户演示表设置的值。如果不存在用户样式表,则浏览器赋予的默认值。 +- `revert`用在用户提供的样式表:显示浏览器赋予的默认值。 + +我们知道,样式表可以分成三层:用户提供的样式表,可以覆盖网站提供的样式表;网站提供的样式表,又可以覆盖浏览器的默认样式表。`revert`主要针对的就是多层样式表同时存在的情况,然后用于去除本层样式表对元素的影响。 + +大多数情况下,`revert`与`unset`是一样的,主要差异是 CSS 属性的初始值与浏览器的默认值可能有差异。 + +```html +

hello

+

hello

+``` + +上面代码中,`font-weight: unset`会回到`font-weight`的初始值,即`normal`。而``会回到浏览器对`h3`的`font-weight`默认值,一般是粗体。 + +如果想要清除当前样式表对该元素的所有设置,可以使用`all: revert`。 + +```html +

hello

+``` + + ## background-blend-mode background-blend-mode属性指定背景的颜色混合模式,共有16个值可取:normal(默认值,即不混合), multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity(显示单色效果)。 From 1d705442c93daea176367367b6f59043e7c61303 Mon Sep 17 00:00:00 2001 From: Ruan YiFeng Date: Sat, 4 Sep 2021 19:14:05 +0800 Subject: [PATCH 4/6] docs: add counter --- docs/feature/counter.md | 148 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 docs/feature/counter.md diff --git a/docs/feature/counter.md b/docs/feature/counter.md new file mode 100644 index 0000000..7270531 --- /dev/null +++ b/docs/feature/counter.md @@ -0,0 +1,148 @@ +# CSS 计数器 + +## 简介 + +- counter-reset:新建或重置一个计数器。 +- counter-increment:指定计数器的值加1。 +- counter():取出指定计数器的值。 + +```css +counter-reset:counterName; +counter-increment: counterName; +counter(counterName); +``` + +下面是一个例子。 + +```css +ul{ + counter-reset: section; +} +li{ + list-style-type: none; + counter-increment: section; +} +li:before{ + content: counters(section, '-') '.'; +} +``` + +## counter-reset + +`counter-reset`属性新建或重置计数器。计数器的值默认为`0`。 + +可以使用第二个参数,修改计数器的默认值。 + +```css +counter-reset: count -1; +``` + +上面示例将计数器的默认值设为`-1`。 + +可以在一条语句里面,同时新建多个计数器。 + +```css +counter-reset: counter1 1 counter2 4; +counter-reset: chapter section 1 page; +``` + +上面示例,第一行新建了两个计数器,第二行新建了三个计数器,并且计数器`section`的默认值设为`1`。 + +如果这个属性的值设为`none`,则表示不重置计数器,可以用来取消上层规则的设置。 + +## counter-increment + +`counter-increment`属性默认将计数器的值加`1`,但也可以使用第二个值,指定变化的幅度。 + +```css +counter-increment: counter-name -1; +``` + +上面示例表示将计数器的值减`1`。 + +可以在一条`counter-increment`语句里面,同时改变多个计数器。 + +```css +counter-increment: counter1 1 counter2 -4; + +counter-increment: chapter section 2 page; +``` + +上面示例的第一行,计数器`counter1`增加`1`,计数器`counter2`减去`4`。第二行,计数器`chapter`和`page`增加`1`,计数器`section`增加2。 + +如果这个属性设为`none`,表示不改变计数器的值。 + +## counter() + +`counter()`还有可选的第二个参数,设置计数器的值样式,默认是阿拉伯数字。 + +```css +counter(countername, upper-roman); +``` + +上面示例将计数器的值样式设为大写的罗马数字。 + +常用的样式值如下。 + +- decimal-leading-zero:数字带有前导0。 +- lower-roman:小写的罗马数字。 +- upper-roman:大写的罗马数字。 +- lower-alpha:小写的英文字母。 +- upper-alpha:大写的英文字母。 + +也可以使用`@counter-style`定义自己的规则。 + +```css +@counter-style winners-list { + system: fixed; + symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg); + suffix: " "; +} +``` + +上面示例是金牌、银牌、铜牌的计数符号。 + +```css +@counter-style thumbs { + system: cyclic; + symbols: "1円F44D"; + suffix: " "; +} + +ul { + list-style: thumbs; +} +``` + +上面示例是将列表符号变成点赞。 + +```css +@counter-style circled-alpha { + system: fixed; + symbols: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z; + suffix: " "; +} + +.items { + list-style: circled-alpha; +} +``` + +上面示例将列表符号变成带圈的英文字母。 + +## counters() + +`counters()`用来取出计数器的值,并且指定多重计数器之间的连接字符。 + +```css +counters(name, strings, style); +``` + +它与`counter()`的不同是多了一个`strings`参数,表示子序号的连接字符串。 + +```css +counters(countername, '-'); +counters(countername, '.', upper-roman); +``` + +上面示例第一行中,计数器与子计数器的连接符号为`-`。第二行为小数点。 From e4a0ce0468f380bb5b50acf077715730520903b6 Mon Sep 17 00:00:00 2001 From: vegeta Date: 2022年6月22日 16:35:00 +0800 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=E6=A0=87=E9=A2=98=E5=86=99=E9=94=99?= =?UTF-8?q?=E4=BA=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/layout/flexbox.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/layout/flexbox.md b/docs/layout/flexbox.md index 7fcde37..6cb436c 100644 --- a/docs/layout/flexbox.md +++ b/docs/layout/flexbox.md @@ -208,7 +208,7 @@ div { > - `space-around`:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 > - `stretch`(默认值):轴线占满整个交叉轴。 -### 四、容器的属性 +## 四、项目的属性 以下6个属性设置在项目上。 From bb85991b5d1c6ea90a7169077569b18264bc206b Mon Sep 17 00:00:00 2001 From: ruanyf Date: Sun, 1 Oct 2023 10:57:10 +0800 Subject: [PATCH 6/6] docs(feature/form): add form-sizing --- docs/feature/form.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 docs/feature/form.md diff --git a/docs/feature/form.md b/docs/feature/form.md new file mode 100644 index 0000000..5e9c7ab --- /dev/null +++ b/docs/feature/form.md @@ -0,0 +1,18 @@ +# 表单的 CSS 设置 + +## textarea + +文本框(textarea)用于让用户输入大量文本。它的高度通常是固定的,如果用户输入的文本多于文本框的高度,文本框就会出现滚动条,只有拖动滚动条,才能看见文本的其余部分。 + +`form-sizing`属性让文本框具有自适应高度,随着用户输入的文本增加,而增加文本框的高度。 + +```css +textarea { + form-sizing: normal; +} +``` + +## 参考链接 + +- [Textareas with auto-increasing height using CSS](https://www.amitmerchant.com/textarea-auto-increase-height/) +

AltStyle によって変換されたページ (->オリジナル) /