CSS - 内容区域 - 文本 Text

文本颜色 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的值是 justifytext-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-spacingword-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 规范没有详细说明部分可替换元素的基线,如