文本颜色 color
颜色属性被用来设置文字的颜色。
CSS的颜色指定:详情见CSS 数据类型 -
注意:
对于W3C标准的CSS:如果你定义了颜色属性,你还必须定义背景色属性。
文本对齐 text-align
定义行内内容(例如文字)如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐。
语法:
text-align =
start |
end |
left |
right |
center |
justify |
match-parent |
justify-all
取值释义:
start
:
如果内容方向是左至右,则等于left,反之则为right。end
:
如果内容方向是左至右,则等于right,反之则为left。left
:
行内内容向左侧边对齐。right
:
行内内容向右侧边对齐。center
:
行内内容居中。
:
第一个出现的该(单字符)字符串被用来对齐。跟随的关键字定义对齐的方向。例如,可用于让数字值根据小数点对齐。justify
:
文字向两侧对齐,对最后一行无效。justify-all
:
和 justify 一致,但是强制使最后一行两端对齐。match-parent
:
和inherit类似,区别在于start和end的值根据父元素的direction确定,并被替换为恰当的left或right。
示例:
/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;
/* 块对齐值(非标准语法)*/
text-align: -moz-center;
text-align: -webkit-center;
/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;
文本最后一行的对齐 text-align-last
语法:
text-align-last =
auto |
start |
end |
left |
right |
center |
justify |
match-parent
取值:
auto
:每一行的对齐规则由text-align
的值来确定,当text-align
的值是justify
,text-align-last
的表现和设置了start
的表现是一样的,即如果文本的展示方向是从左到右,则最后一行左侧对齐与内容盒子。start
:与direction
的设置有关。 如果文本展示方向是从左到右,起点在左侧,则是左对齐; 如果文本展示方向是从右到左,起点在右侧,则是右对齐。 如果没有设置direction
,则按照浏览器文本的默认显示方向来确定。end
:与 direction 的设置有关。 如果文本展示方向是从左到右,末尾在右侧,则是右对齐; 如果文本展示方向是从右到左,末尾在左侧,则是左对齐。 如果没有设置 direction ,则按照浏览器文本的默认显示方向来确定。left
:最后一行文字与内容盒子的左侧对齐right
:最后一行文字与内容盒子的右侧对齐center
:最后一行文字与内容盒子居中对齐justify
:最后一行文字的开头与内容盒子的左侧对齐,末尾与右侧对齐。
文本修饰线 text-decoration
用于设置文本的修饰线外观的(下划线、上划线、贯穿线/删除线 或 闪烁)。
语法:
text-decoration =
<'text-decoration-line'> ||
<'text-decoration-style'> ||
<'text-decoration-color'> ||
<'text-decoration-thickness'>
它是 text-decoration-line
, text-decoration-color
, text-decoration-style
, 和新出现的 text-decoration-thickness
属性的缩写。
位置 text-decoration-line
取值:
none
:表示没有文本修饰效果。underline
:在文本的下方有一条修饰线。overline
:在文本的上方有一条修饰线。line-through
:有一条贯穿文本中间的修饰线。blink
: 已弃用。
文本闪烁(文本交替处于显示与隐藏状态)。客户代理都一致没有实现文本闪烁效果。考虑到为了支持使用 CSS 动画,该值也不宜使用。
颜色 text-decoration-color
用于设置文本修饰线的颜色。
样式 text-decoration-style
如波浪线wavy
、实线solid
、虚线dashed
。
用于设置由 text-decoration-line
设定的线的样式。
取值:
solid
:画一条实线。double
:画一条双实线。dotted
:画一条点划线。dashed
:画一条虚线。wavy
:画一条波浪线。
如果设定的修饰效果具有特定的语义,例如删除线的意味着某些文本被删除了,开发者最好使用有语义的 HTML 标签来表达,比如
或
标签,因为浏览器有时可能会屏蔽某些样式,但语义化的标签则不会出现这样的问题。
粗细 text-decoration-thickness
:
语法:
text-decoration-thickness = auto | from-font | | ]
下划线的排版位置 text-underline-position
当 text-decoration
属性的值设置为 underline
之后,可以用text-underline-position
属性为其设置下划线的位置。
语法:
text-underline-position =
auto |
[ under || [ left | right ] ]
语法示例:
/* 只设置一个属性值 */
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;
/* 设置多个属性值 */
text-underline-position: under left;
text-underline-position: right under;
/* 全局属性值 */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: unset;
取值:
auto
:用户代理 会根据自己的算法来确认下划线是放在字母基线上还是 放在字母基线下方。under
:强制下划线的位置为字母基线的下方,在这个位置,下划线不会穿过任何字母。
这样能确保数学方程式或者化学式的下标不会被下划线阻挡。left
:在垂直排版模式下,使下划线的位置在文字的左侧,在水平排版模式下,和under
相同。right
:在垂直排版模式下,使下划线的位置在文字的右侧,在水平排版模式下,和under
相同。auto-pos
:弃用。auto
的同义词,应使用auto
。above
: 弃用。强制下划线放置于文本上面。当使用东亚文字时,此效果和使用auto
相同。below
: 弃用。强制下划线放置于文本下面。当使用字母文字的时候,此效果和使用auto
相同。
由于
text-underline-position
属性可以继承,且无法用text-decoration
简写属性重置,所以应当在全局级别设置其值。比如,under
值对一篇包括大量使用下标的数学或者化学公式的文档是非常有用的。
文本修饰线 - text-decoration-skip
属性定义了元素哪些部分的内容需要被文本修饰所跳过。它可以控制所有该元素或该元素的祖先所绘制的文本修饰线。
取值:
none
:没有任何内容被跳过。因此,文本修饰会为所有文本内容和行内元素进行绘制。objects
:拥有完整盒模型的原子行内元素会被跳过,例如图片和行内块元素。spaces
:所有的空格
会被跳过,包括:所有的Unicode 空白字符
和所有的分词符
,以及任意相邻的letter-spacing
或word-spacing
。leading-spaces
:除了只跳过开始的空格外,与spaces
相同。trailing-spaces
:除了只跳过结尾的空格外,与spaces
相同。edges
:文本修饰的开始与结束会比原有的装饰范围向内收缩(例如半个线宽)。这样,相邻的元素的下划线就可以分开。(这对于中文很重要,因为在中文中,下划线也是一种形式的标点符号。)box-decoration
:文本修饰会跳过盒模型的内边距、边框、外边距。这只会影响到祖先元素定义的修饰;修饰的盒不会渲染本身的盒修饰。
文本修饰线 - 上升与下降 text-decoration-skip-ink
属性指定了上划线和下划线经过字形上升和下降时的绘制方式。
语法:
text-decoration-skip-ink =
auto |
none |
all
取值:
none
下划线和下划线绘制在文本内容的整个长度上,包括跨越字形下降和上升的部分。auto
默认值——浏览器可能会中断下划线和下划线,以便它们不会触摸或接近字形。也就是说,它们被打断了,否则它们会交叉在字形上。all
浏览器必须中断下划线和下划线,以便它们不会触摸或接近字形。这可能对某些中文、日语或韩语(CJK)字体有所帮助,在这些字体中,auto
行为可能不会造成中断。
大小写 text-transform
属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写,也可单独对每一个单词进行操作。
语法:
text-transform =
none |
[ capitalize | uppercase | lowercase ] || full-width || full-size-kana |
math-auto |
math-bold |
math-italic |
math-bold-italic |
math-double-struck |
math-bold-fraktur |
math-script |
math-bold-script |
math-fraktur |
math-sans-serif |
math-bold-sans-serif |
math-sans-serif-italic |
math-sans-serif-bold-italic |
math-monospace |
math-initial |
math-tailed |
math-looped |
math-stretched
取值:
capitalize
:强制 每个单词的首字母 转换为 大写。其他的字符 保留不变。uppercase
:强制 所有字符 转换为 大写。lowercase
:强制 所有字符 转换为 小写 。none
:阻止 所有字符 的 大小写被 转换。
示例:
p.uppercase {text-transform:uppercase;} // 全部大写
p.lowercase {text-transform:lowercase;} // 全部小写
p.capitalize {text-transform:capitalize;} // 每个单词首字母大写
效果:
首行缩紧 text-indent
定义一个块元素首行文本内容之前的缩进量。
语法:
text-indent =
[ ] &&
hanging? &&
each-line?
=
|
取值:
:使用固定的值来指定文本的缩进。允许使用负值。
:使用包含块宽度的百分比作为缩进。each-line
: 实验性; 文本缩进会影响第一行,以及使用
强制断行后的第一行。hanging
: 实验性; 该值会对所有的行进行反转缩进:除了第一行之外的所有的行都会被缩进,看起来就像第一行设置了一个负的缩进值。
示例:
p.indent{
text-indent: 20px;
}
效果:
字符间距 letter-spacing
用于设置文本字符的间距表现。
语法:
letter-spacing =
normal |
取值:
normal
:此间距是按照当前字体的正常间距确定的。和0
不同的是,用户代理根据此属性来确定文字的默认对齐方式。
:指定文字间的间距以替代默认间距。可以是负值,但有可能会出现 implementation 限制。用户代理不会在此基础上进一步增加或缩减间距来对齐文字。
示例:
p.letter-big{
letter-spacing: 10px;
}
p.letter-small{
letter-spacing: -3px;
}
效果:
行间距 line-height
属性用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。对于非替代的inline
元素,它用于计算行盒(line box)的高度。
语法:
line-height =
normal |
|
=
|
取值:
normal
:取决于用户端。
桌面浏览器(包括 Firefox)使用默认值,约为1.2,这取决于元素的font-family
。
:无单位 数字 乘以 该元素的字体大小。计算值与指定值相同。
大多数情况下,这是设置line-height
的推荐方法,不会在继承时产生不确定的结果。
:指定
用于计算 line box 的高度。
以 em 为单位的值可能会产生不确定的结果。
:与元素自身的字体大小有关。
计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果。-moz-block-height
: 非标准;将行高设置为当前块的内容区域高度。
示例:
p.line-height-big{
line-height: 200%;
}
p.line-height-small{
line-height: 70%;
}
效果:
注意:推荐在设置 line-height 时使用无单位数值
方向 direction
用来设置文本、表列水平溢出的方向。
属性不会从表列继承到表单元格,因为 CSS 继承遵从文档流,而表单元格位于行内部,但不在列内部。
direction
属性和 unicode-bidi
属性不受 all
属性影响。
注意:
此属性
不是设置文本传统意义上的书写方向!!
不是设置文本传统意义上的书写方向!!
不是设置文本传统意义上的书写方向!!
文本传统意义上的方向 是通过 HTML属性dir
来设置。
语法:
direction = ltr | rtl
取值:
ltr
:默认属性。可设置 文本和其他元素的 默认方向是从左到右。rtl
:可设置 文本和其他元素的 默认方向是从右到左。
示例:
p{
direction: rtl;
}
html
hello world
#hello world~
#hello world!~
XL#hello world!~XL
$XL#hello world!~XL¥
效果:
双向文本 unicode-bidi
CSS unicode-bidi
属性,和 direction
属性,决定如何处理文档中的双书写方向文本(bidirectional text)。
比如,如果一块内容同时包含有从左到右书写和从右到左书写的文本,那么用户代理(the user-agent)会使用复杂的 Unicode 算法来决定如何显示文本。unicode-bidi
属性会覆盖此算法,允许开发人员控制文本嵌入(text embedding)。
direction
属性和 unicode-bidi
属性不受 all
属性影响。
感兴趣的可以看看这篇文章,解释的很详细:
Unicode双向算法(bidi算法)详解(一)、
bidi(双向文字)与RTL布局总结
语法:
unicode-bidi =
normal |
embed |
isolate |
bidi-override |
isolate-override |
plaintext
取值:
normal
:
对双向算法,此元素不提供额外的嵌入级别。对于内联元素,隐式的重新排序在元素的边界上起作用。embed
:
对于内联元素,该值会为双向算法打开一个额外的嵌入级别。嵌入级别的方向是由 direction 属性给出的。bidi-override
:
对于内联元素,该值会创建一个覆盖;对于块容器元素,该值将为不在另一个块容器元素内的内联级别的后代创建一个覆盖。这意味着在元素内部,根据 direction 属性,重新排序是严格按照顺序排列的;双向算法的隐式部分被忽略。isolate
:
这个关键字表示计算元素容器的方向时,不考虑这个元素的内容。因此,这个元素就从它的兄弟姐妹中分离出来了。当应用它的双向分辨算法的时候,它的容器元素将其视为一个或多个 U+FFFC Object Replacement Character,即像 image 一样。isolate-override
:
这个关键字将 isolate 关键字的隔离行为应用于周围的内容,并将 bidi-override 关键字的覆盖行为应用于内部内容。plaintext
:
这个关键字在计算元素方向的时候,不考虑父元素的双向状态,也不考虑 direction 属性的值。它是使用 Unicode 双向算法的 P2 和 P3 规则计算的。 这个值允许按照 Unicode 双向算法显示已经格式化的数据。
示例:
p.direction-rtl{
direction: rtl;
unicode-bidi: bidi-override;
}
目前估计用不到,等以后在慢慢拓展,不再做过多的叙述。
单词间距 word-spacing
用于声明标签和单词直接的间距行为。
语法:
word-spacing =
normal |
取值:
- `normal`:
正常的单词间距,由当前字体和/或浏览器定义。
- ``:
通过指定具体的额外间距来增加字体的单词间距。查看 了解可用单位。
- ``:
通过指定受影响字符的宽度的百分比的方式来增加的间距。
示例:
.html
This is some text
我的 妈妈
.css
p.word-space-en{
word-spacing: 20px;
}
p.word-space-cn{
word-spacing: 20px;
}
元素空白 white-space
用来设置如何处理元素中的 空白。
语法:
white-space =
normal |
pre |
nowrap |
pre-wrap |
pre-line |
break-spaces
取值:
normal
:连续的空白符会被合并,换行符会被当作空白符来处理。nowrap
:禁止自动换行。
和 normal 一样,连续的空白符会被合并。但文本内的换行无效。pre
:连续的空白符会被保留。在遇到换行符或者
元素时才会换行。pre-wrap
:连续的空白符会被保留。在遇到换行符或者
元素,或者需要为了填充「行框盒子 (line boxes)」时才会换行。pre-line
:连续的空白符会被合并。在遇到换行符或者
元素,或者需要为了填充「行框盒子 (line boxes)」时会换行。break-spaces
: 与 pre-wrap的行为相同,除了:
任何保留的空白序列总是占用空间,包括在行尾。
每个保留的空格字符后都存在换行机会,包括空格字符之间。
这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)。
下面的表格总结了各种 white-space 值的行为:
换行符 | 空格和制表符 | 文字换行 | 行尾空格 | |
---|---|---|---|---|
normal |
合并 | 合并 | 换行 | 删除 |
nowrap |
合并 | 合并 | 不换行 | 删除 |
pre |
保留 | 保留 | 不换行 | 保留 |
pre-wrap |
保留 | 保留 | 换行 | 挂起 |
pre-line |
保留 | 合并 | 换行 | 删除 |
break-spaces |
保留 | 保留 | 换行 | 换行 |
垂直对齐 vertical-align
用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。
vertical-align 属性可被用于两种环境:
使行内元素盒模型与其行内元素容器垂直对齐。例如,用于垂直对齐一行文本内的图片
垂直对齐表格单元内容:
注意:
vertical-align
只对行内元素、行内块元素和表格单元格元素生效:不能用它垂直对齐 块级元素。
语法:
vertical-align =
baseline |
sub |
super |
text-top |
text-bottom |
middle |
top |
bottom |
|
取值:
1、相对父元素的值,这些值使元素相对其父元素垂直对齐:
baseline
:使元素的基线与父元素的基线对齐。
HTML 规范没有详细说明部分可替换元素的基线,如sub
:使元素的基线与父元素的下标基线对齐。super
:使元素的基线与父元素的上标基线对齐。text-top
:使元素的顶部与父元素的字体顶部对齐。text-bottom
:使元素的底部与父元素的字体底部对齐。middle
:使元素的中部与父元素的基线加上父元素 x-height(译注:x 高度)的一半对齐。
:使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
:使元素的基线对齐到父元素的基线之上的给定百分比,该百分比是line-height属性的百分比。可以是负数。
2、相对行的值,下列值使元素相对整行垂直对齐:
top
:使元素及其后代元素的顶部与整行的顶部对齐。bottom
:使元素及其后代元素的底部与整行的底部对齐。
没有基线的元素,使用外边距的下边缘替代。
3 、表格单元格的值,可以是负数。
baseline
: (以及 sub, super, text-top, text-bottom,, )
使单元格的基线,与该行中所有以基线对齐的其它单元格的基线对齐。top
:使单元格内边距的上边缘与该行顶部对齐。middle
:使单元格内边距盒模型在该行内居中对齐。bottom
:使单元格内边距的下边缘与该行底部对齐。
示例:
.html
一个默认对齐的图像。
一个 text-top 对齐的图像。
一个 text-bottom 对齐的图像。
.css
img.top{
vertical-align: text-top;
}
img.bottom{
vertical-align: text-bottom;
}
文本阴影 text-shadow
为文字添加阴影。可以为 文字 与 decoration
添加 多个阴影,阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。
当所给的阴影大于一个时,阴影应用的顺序为从前到后,第一个指定的阴影在顶部
语法:
text-shadow = none | [ ? && {2,3} ]#
取值:
:可选。阴影的颜色。
可以在偏移量之前或之后指定。如果没有指定颜色,则使用用户代理自行选择的颜色,因此需要跨浏览器的一致性时,应该明确定义它。
:必选。这些值指定阴影相对文字的偏移量。
指定水平偏移量,若是负值则阴影位于文字左侧。
指定垂直偏移量,若是负值则阴影位于文字上方。
如果两者均为 0,则阴影位于文字正后方,如果设置了则会产生模糊效果。
:可选。阴影模糊半径。
这是
值。如果没有指定,则默认为 0。值越大,模糊半径越大,阴影也就越大越淡(wider and lighter)。
.html
This is some text
.css
p.shadow{
text-shadow: 3px 3px red 10px;
}
效果:
文本渲染 text-rendering
定义浏览器渲染引擎如何渲染字体。浏览器会在 速度、清晰度、几何精度 之间进行权衡。
该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko(Firefox)和 Webkit(Chrome、Safari)内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。
语法:
text-rendering =
auto |
optimizeSpeed |
optimizeLegibility |
geometricPrecision
语法示例:
/* Keyword values */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
/* Global values */
text-rendering: inherit;
text-rendering: initial;
text-rendering: unset;
取值
auto
:
浏览器依照某些根据去推测在绘制文本时,何时该优化速度,易读性或者几何精度。对于该值在不同浏览器中解释的差异,请看兼容性表。optimizeSpeed
:重考虑渲染速度。它会使字间距和连字无效。optimizeLegibility
:着重考虑易读性。它会使字间距和连字有效。该属性值在移动设备上会造成比较明显的性能问题。geometricPrecision
:着重考虑几何精度。字体的某些方面—比如字间距—不再线性缩放,所以该值可以使使用某些字体的文本看起来不错。
< 20px启用连字
optimizeLegibility
关键字为某些字体启用小于20px的文本连字。如Calibri或DéjàVu。