font-weightfont-styletext-decorationcursorfont-weight 字重font-weight CSS 属性指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。
语法:
font-weight = <font-weight-absolute> | bolder | lighter
<font-weight-absolute> = [normal | bold | <number [1,1000]>]
如果一个字体只有 normal 和 bold 两种粗细值选择,指定粗细值为 100-500 时,实际渲染时将使用 normal,指定粗细值为 501-900 时,实际渲染时将使用 bold 。
normal400 等值。bold700 等值。lighterbolder<number> 类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。一些常用的数值对应于通用的字体重量名称,如章节常见粗细值名称和数值对应所描述。100 到 900 之间的数值大致对应如下的常见粗细值名称:
| 数值 | 粗细值名称 |
|---|---|
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
指定的是相对粗细值 lighter 或 bolder 时,将使用如下图表来决定元素渲染时的绝对粗细值:
| Inherited value (w) | bolder | lighter |
|---|---|---|
| w < 100 | 400 | No change |
| 100 ≤ w < 350 | 400 | 100 |
| 350 ≤ w < 550 | 700 | 100 |
| 550 ≤ w < 750 | 900 | 400 |
| 750 ≤ w < 900 | 900 | 700 |
| 900 ≤ w | No change | 700 |
font-style 斜体font-style CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。font-style = normal | italic | oblique <angle [-90deg,90deg]>?font-style 属性被指定为从下面的取值列表中的单独一个关键字,如果关键字是 oblique,则可附加一个可选的角度。| 值 | 描述 |
|---|---|
normal |
选择 font-family 的常规字体。 |
italic |
选择斜体,如果当前字体没有可用的斜体版本,会选用倾斜体 (oblique) 替代。 |
oblique |
选择倾斜体,如果当前字体没有可用的倾斜体版本,会选用斜体 (italic) 替代。 |
text-decoration 下划线text-decoration 简写 CSS 属性设置文本上的装饰性线条的外观。它是 text-decoration-line、text-decoration-color、text-decoration-style 和较新的 text-decoration-thickness 属性的缩写。
文本装饰会覆盖子孙文本元素。这意味着如果一个元素指定了文本装饰,那么子元素无法去除这个装饰。
<p>This text has <em>some emphasized words</em> in it.</p> 中,样式规则 p { text-decoration: underline; } 会导致整个段落被下划线划掉。样式规则 em { text-decoration: none; } 不会有任何变化;整个段落仍然会被下划线划掉。em { text-decoration: overline; } 会导致 "some emphasized words" 上出现第二个装饰。语法:
text-decoration = <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
text-decoration-line = none | [ underline || overline || line-through || blink ]
text-decoration-style = solid | double | dotted | dashed | wavy
text-decoration-color = <color>
text-decoration-line 用于设置元素中的文本的修饰类型。text-decoration 简写属性会比分别写多个属性更方便。| 值 | 描述 |
|---|---|
none |
默认。定义标准的文本。 |
underline |
定义文本下的一条线。 |
overline |
定义文本上的一条线。 |
line-through |
定义穿过文本下的一条线。 |
blink |
定义闪烁的文本。 |
text-decoration-style 用于设置由 text-decoration-line 设定的线的样式。线的样式会应用到所有被 text-decoration-line 设定的线,不能为其中的每条线设置不同的样式。text-decoration 简写属性会比分别写多个属性更方便。| 值 | 描述 |
|---|---|
solid |
默认。定义一条实线。 |
double |
定义双线。 |
dotted |
定义点线。 |
dashed |
定义虚线。 |
wavy |
定义波浪线。 |
text-decoration-color 用于设置文本修饰线的颜色,文本修饰线是通过 text-decoration-line 属性指定的。| 值 | 描述 |
|---|---|
<color> |
定义修饰线的颜色。 |
cursor 指针cursor CSS 属性设置光标的类型(如果有),在鼠标指针悬停在元素上时显示相应样式。
语法:
cursor =
[ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]
<url> =
url( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )
cursor 属性为零个或多个 <url> 值,它们之间用逗号分隔,最后必填一个关键字值。每个 <url> 指向一个图像文件。浏览器将尝试加载指定的第一个图像,如果无法加载则返回下一个图像,如果无法加载图像或未指定图像,则使用关键字值代表的指针类型。
每个 <url> 后面都可选跟一对空格分隔的数字 <x><y> 表示偏移。它们用来设置指针的热点 (即自定义图标的实际点击位置),位置相对于图标的左上角。
下面的例子使用 <url> 值指定两个图像,为第二个图像提供 <x><y> 坐标,如果两个图像都无法加载,则返回 progress 关键字值:
cursor: url(one.svg), url(two.svg) 5 5, progress;