一、字体属性
字号
font-size: <len-%> | small | medium | large | ...;
/* <len-%> = <length> | <%> */
- 默认值为
medium；常用<len-%>值。
- 常用单位有
px、em、%，后两者以父元素为参照物。
字体
font-family: [ <name> | <generic> ]#;
-
<generic>表示通用字体，包括serif、sans-serif、monospace等。
-
<name>是特定字体，比如times、arial、Microsoft YaHei等。
- 如果字体名称包含空格，那么它必须加上引号。
- 可以有多个字体系列，以便在浏览器不支持第一个字体时自动使用下一个字体。
- 建议英文字体在前、中文字体在后、通用字体在最后。
粗细
font-weight: normal | bold | bolder | lighter | 100 | ... | 900;
- 字体有9级粗细，从100到900，每百位为一级。
- 默认值为
normal，相当于400；常用值bold，相当于700。
风格
font-style: normal | italic | oblique;
- 默认值为
normal，即正常字体；常用值italic，即斜体。
-
italic和oblique的区别：大部分字体都有设计斜体（italic），其字母的结构有一些小改动；少部分没有斜体的字体用oblique使其倾斜，是正常竖直文本的一个倾斜版本。
行距
line-height: normal | <num> | <len-%>;
属性简写
font: [[ <font-style> || <font-variant> || <font-weight> || <font-stretch> ]? <font-size> [ /<line-height> ]? <font-family> ]
| caption | small-caption | icon | menu | message-box | status-bar;
/* 常规写法： */
font: [ <font-style> || <font-weight> ]? <font-size> [ /<line-height> ]? <font-family>;
-
font-size和font-family是必需的。
- 如果同时有
font-size和line-height值，就要在中间加上反斜杠（/）以示区分。
二、基础文本属性
颜色
color: <color> | transparent;
-
<color>可以是颜色的英文名称、16进制数、rgb值或rgba值，默认为黑色。
-
rgba中的a代表透明度（alpha），值范围为0~1；0表示完全透明（相当于transparent），1表示完全不透明。
- 常见颜色值（不区分大小写）：
| 颜色 |
英文名 |
十六进制 |
RGB |
| 黑色 |
black |
#000000或#000 |
rgb(0,0,0) |
| 白色 |
white |
#FFFFFF或#FFF |
rgb(255,255,255) |
| 红色 |
red |
#FF0000或#F00 |
rgb(255,0,0) |
| 绿色 |
green |
#00FF00或#0F0 |
rgb(0,255,0) |
| 蓝色 |
blue |
#0000FF或#00F |
rgb(0,0,255) |
| 黄色 |
yellow |
#FFFF00或#FF0 |
rgb(255,255,0) |
| 橙色 |
orange |
#FFA500 |
rgb(255,165,0) |
| 粉色 |
pink |
#FFC0CB |
rgb(255,192,203) |
| 灰色 |
orange |
#808080 |
rgb(80,80,80) |
| 淡灰 |
|
#EEEEEE或#EEE |
rgb(238,238,238) |
对齐
首行缩进
text-indent: <len-%>;
- 默认值为0，允许为负值。
- 设置较大的负值，能实现悬挂缩进的效果，如
text-indent:-5px;。
- 设置足够小的负值，既能隐藏文本又能使文本被搜索引擎搜到，如
text-indent:-999px;。
三、文本格式化
大小写
text-transform: none | capitalize | uppercase | lowercase;
- 默认值为
none，表示不做任何大小写变换。
-
capitalize表示首字母大写，各浏览器辨别一个单词的起始位置的方式不一样。
字间距
word-spacing: <length> | normal;
- 默认值为
normal，相当于0；允许为负值。
- “字（word）”：由非空白字符组成，被空白字符包围。
字符间距
letter-spacing: <length> | normal;
- 默认值为
normal，相当于0；允许为负值。
- 定义字符或字母间的空白大小。
处理空白符
white-space: normal | nowrap | pre | pre-wrap | pre-line;
- 空白符：换行、空格、Tab。
- 单个单词不换行。
- 各属性值对比：
| 属性值 |
换行符 |
空格符 |
Tab符 |
自动换行 |
备注 |
| normal |
忽略 |
合并 |
合并 |
是 |
默认值，忽略所有空白符 |
| nowrap |
忽略 |
合并 |
合并 |
否 |
遇到<br>元素才换行 |
| pre |
保留 |
保留 |
保留 |
否 |
参考<pre>元素 |
| pre-wrap |
保留 |
保留 |
保留 |
是 |
注意换行、缩进等操作 |
| pre-line |
保留 |
合并 |
合并 |
是 |
合并为一个空格 |
处理长单词
word-wrap: normal | break-word;
- CSS3属性，定义是否允许在长英文单词或url地址内部换行，防止溢出。
- 默认值为
normal，即仅在浏览器允许的断字点换行。
- 当一行中的空间不足时，若长单词不满一行，就先将其挪到下一行，否则在单词内部换行。
非中日韩文字换行
word-break: normal | break-all | keep-all;
- CSS3属性，定义在何处换行，节省空间。
- 默认值为
normal，即使用浏览器默认的换行规则。
-
break-all表示允许在文本任意位置换行（长单词内部换行，不会被挪到下一行去）。
-
keep-all表示只能在半角空格或连字符处换行。
四、修饰性属性
装饰
text-decoration: none | [ underline || overline || line-through || blink ];
- 普通文本的默认值为
none，表示不要装饰。
- 超链接文本通常带下划线。
阴影
text-shadow: none | [ <x-offset> <y-offset> <blur>? <color>? ]#;
- 默认值为
none，即无阴影。
-
<x-offset>和<y-offset>分别是水平阴影偏移量和垂直阴影偏移量，负值表示向左/上偏移。
-
<blur>是模糊半径，默认值为0，不可为负值。
-
<color>是阴影的颜色，默认为文本颜色。
- CSS3属性，IE9-不支持；可应用于
::first-letter和::first-line。
溢出
text-overflow: [ clip | ellipsis | <string> ]{1,2};
光标
cursor: [<uri>,]*[ auto | default | none | move | pointer | text | help | zoom-in | zoom-out | ... ];
- 默认值为
auto，由浏览器设置。
-
default表示默认光标，通常为一个箭头。
-
<uri>表示一个自定义图标的地址；若浏览器无法读取该图标，则自动读取下一个值。
网友评论