- 字体
- 改变字号
- 改变字体
- 加粗字体
- 倾斜字体
- 更改行距
- font shorthand
- 改变文字颜色
- 对齐方式
- 文字居中
- 文本垂直对齐
- 文本缩进
- 格式处理
- 保留空格格式
- 文字换行
- 文本装饰
- 文字阴影
- 文本装饰（下划线等）
- 高级设置
- 省略字符
- 更换鼠标形状
- 强制继承
文本
字体
改变字号
font-size:
-
-
div
font-size 12px
p#sample0
font-size 16px
p#sample1
font-size 2em
p#sample2
font-size 200%
NOTE：以上两值在开发中并不常用。2em 与 200% 都为父元素默认大小的两倍（参照物为父元素的字体大小 12px）。
改变字体
font-family: [
- serif
- sans-serif
- cursive
- fantasy
- monospace
font-family: arial, Verdana, sans-serif;
NOTE：优先使用靠前的字体
加粗字体
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-weight: normal;
font-weight: bold;
倾斜字体
font-style: normal | italic | oblique | inherit
italic 使用字体中的斜体，而 oblique 在没有斜体字体时强制倾斜字体。
更改行距
line-height: normal |
normal 值为浏览器决定，在1.1至1.2之间（通常设置值为1.14左右）
/* length 类型 */
line-height: 40px;
line-height: 3em;
/* percentage 类型 */
line-height: 300%;
/* number 类型 */
line-height: 3;
NOTE：当line-height为 number 类型时，子类直接继承其数值（不计算直接继承）。
而当为 percentage 类型时，子类则会先计算再显示（先计算后继承）。
字间距（字母间距）
letter-spacing: normal |
其用于设置字间距或者字母间距，此属性适用于中文或西文中的字母。
如果需要设置西文中词与词的间距或标签直接的距离则需要使用 word-spacing。
word-spacing: normal |
font shorthand
font: [ [ <‘font-style’> ||
font: 30px/2 "Consolas", monospace;
font: italic bold 20px/1.5 arial, serif;
font: 20px arial, serif;
NOTE：当其他值为空时，均被设置为默认值。
改变文字颜色
color:
element { color: red; }
element { color: #f00; }
element { color: #ff0000; }
element { color: rgb(255,0,0); }
element { color: rgb(100%, 0%, 0%); }
element { color: hsl(0, 100%, 50%); }
/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5); }
element { color: hsla(0, 100%, 50%, 0.5); }
/* 全透明 */
element { color: transparent' }
element { color: rgba(0, 0, 0, 0); }
对齐方式
文字居中
text-align: start | end | left | right | center | justify | match-parent | start end
NOTE：默认为文本左对齐。
文本垂直对齐
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom |
NOTE：line-height
文本缩进
text-indent:
NOTE：缩进两个字可使用 text-indent: 2em;
格式处理
保留空格格式
white-space: normal | pre | nowrap | pre-wrap | pre-line
pre 行为同 一致。
| New lines | Spaces and tabs | Text wrapping | |
|---|---|---|---|
| normal | Collapse | Collapse | Wrap |
| nowrap | Collapse | Collapse | No wrap |
| pre | Preserve | Preserve | No wrap |
| pre-wrap | Preserve | Preserve | Wrap |
| pre-line | Preserve | Collapse | Wrap |
文字换行
word-wrap: normal | break-word
NOTE：允许长单词自动换行。
word-break: normal | break-all | keep-all
NOTE：break-all 单词中的任意字母间都可以换行。
文本装饰
文字阴影
text-shadow:none | 或 text-shadow:none | [
p {
text-shadow: 1px 1px 1px #000,
3px 3px 5px blue;
}
- value = The X-coordinate X 轴偏移像素
- value = The Y-coordinate Y 轴偏移像素
- value = The blur radius 阴影模糊半径
- value = The color of the shadow 阴影颜色（默认为文字颜色）
文本装饰（下划线等）
text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
h1.under {
text-decoration: underline;
}
h1.over {
text-decoration: overline;
}
p.line {
text-decoration: line-through;
}
p.blink {
text-decoration: blink;
}
a.none {
text-decoration: none;
}
p.underover {
text-decoration: underline overline;
}
高级设置
省略字符
text-overflow: [ clip | ellipsis |
/* 常用配合 */
text-overflow: ellipsis;
overflow: hidden; /* 溢出截取 */
white-space: nowrap; /* 禁止换行 */
更换鼠标形状
cursor: [[
常用属性
cursor: [
-
-
-
-
cursor: pointer;
cursor: url(image-name.cur), pointer;
/* 当 uri 失效时或者则会起作用 */
强制继承
inherit 会强制继承父元素的属性值。
font-size: inherit;
font-family: inherit;
font-weight: inherit;
...
word-wrap: inherit;
work-break: inherit
text-showdow: inherit
NOTE：具体在使用时可查询文档