ROOT
ROOT
文章目录
  1. css 文字样式
    1. 字体(font-family)
    2. 字号(font-size)
    3. 字体风格(font-style)
    4. 字体加粗(font-weight)
    5. 小写字母转为大写字母(font-variant)
    6. 字体复合属性(font)
    7. 字体颜色(color)
  2. css 段落样式
    1. 单词间隔(word-spacing)
    2. 字符间隔(letter-spacing)
    3. 文本修饰(text-decoration)
    4. 垂直对齐方式(vertical-align)
    5. 水平对齐方式(text-align)
    6. 文本转换(text-transform)
    7. 文本缩进(text-indent)
    8. 文本行高(line-height)
    9. 处理空白(white-spacing)
    10. 文本反排 (unicode-bidi 和direction)

CSS 字体与段落属性

点击属性可跳转到对应的 w3school 手册。

css 文字样式

字体(font-family)

font-family 属性用于指定字体的类型,如宋体、黑体、Times New Roman 等,既在网页中展示字体的不同形状,语法如下。

{font-family: name;}
{font-family: cursive|fantasy|monospace|serif|sans-serif;}

字号(font-size)

通常使用 font-size 设置文字大小。

{font-size: 数值 |inherit|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length;}

字体风格(font-style)

定义字体的风格,即字体的显示样式。

{font-style: normal|italic|oblique|inherit;}

字体加粗(font-weight)

定义字体的粗细程度。

{font-weight: 100-900|bold|bolder|lighter|normal;}

小写字母转为大写字母(font-variant)

属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

{font-variant: normal|small-caps|inherit;}

字体复合属性(font)

可以一次性使用多个属性的属性值定义文本字体。

{font: font-style font-variant font-weight font-size font-family;}

其中 font-size 和 font-family 属性必须按照固定顺序出现,缺一不可。font-family 有多个属性值的话用逗号隔开,前三个属性可以自由调换。

字体颜色(color)

设置字体的颜色。

{color: color_name|hex_number|rgb(r,g,b)|inherit;}

css 段落样式

单词间隔(word-spacing)

设定词与词的间隔。

{word-spacing: nomal|length;}

不能设定于文字间的间隔。

字符间隔(letter-spacing)

设定字符间的距离。

{letter-spacing: normal|length;}

文本修饰(text-decoration)

可以增加文字的下划线、顶划线、删除线等效果。

{text-decoration: none|underline|blink|overline|line-through;}

垂直对齐方式(vertical-align)

设定垂直的对齐方式。

{vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom|%;}

水平对齐方式(text-align)

设定水平方向上的对齐方式。

{text-align: left|right|center|justify|match-parent|inherit;}

文本转换(text-transform)

可以将大写转换为小写,或者将小写转换成大写。

{text-transform: none|capitalize|uppercase|lowercase;}

文本缩进(text-indent)

可以使首行以给定的长度或百分比缩进。

{text-indent: length;}

文本行高(line-height)

设置行间距。

{line-height: normal|length;}

处理空白(white-spacing)

设置对象内的空白字符 (空格,TAB, 换行) 的处理方式。

{white-spacing: normal|pre|nowrap|pre-wrap|pre-line|inherit;}

文本反排 (unicode-bididirection)

可以更改文本的显示方向方向。direction 设定文本流方向。

{unicode-bidi: normal|bidi-override|embed;}
{direction: ltr|rtl|inherit;}
支持一下
扫一扫,支持Netcan
  • 微信扫一扫
  • 支付宝扫一扫