Tag Archives: css

CSS的文本样式控制

● 1.文本颜色 (color)

  特性 color 可以改变文本的颜色。这个特性的可能取值有:颜色名称(如red);十六进制RGB代码,HTML中最常用的颜色值(如#F53B0A);十进制的RGB代码,每种颜色份量的值从0到255(如 rgb(211,0,255));百分比RGB代码,用十进制的百分数代替十进制数(如 rgb(45%,23.4%,95%))。下面是一些具体的例子:
    font : red ;
    font : #FF0000 ;
    font : rgb(255,0,0) ;
    font : rgb(100%,0%,0%) ;
  当然文本颜色的改变还需背景颜色的配合,这样文本才更易读。背景颜色的改变可通过 background-color 特性来完成。该特性的取值和 color 特性的取值一样。从原理上将,背景也可以是一个图形文件。该方面的特性将在下面的课程中讨论。

 ● 2.字距和词距 (letter-spacing 和 word-spacing)

  每种字体都有自己的缺省字距和词距。在CSS中,这些缺省值的修改可通过特性 letter-spacing 和 word-spacing 来实现。这些特性的取值(绝对、相对或百分比)更改相对于缺省设置的间距大小。所取值正负均可,正值使间距增大,负值使间距变小。这些特性还可取值为“normal”,意为间距重为缺省大小。相对值和百分比值总是相对于字体大小计算。
  缺省的字距是每一种字体精心选择的,保证了最大程度的可读性。因此,对字距值作大的改动时必须谨慎从事。一些系统对字距的可能负值有一个最大限制,若小于这个值,字距将不再缩小。Letter-spacing 的长度值可以采用任一受支持的长度单位。指定字距后,ligatures(印刷连字)将不能再使用,浏览器也不能再调整字距以撑满文本。但关键字 normal 则允许浏览器支持 ligatures 或按需要来调整字距。
  而一般说来,词距是一个“橡皮值”——也就是说,它可以由浏览器调整。例如,如果文本左对齐或右对齐,浏览器将不考虑该特性。该特性不允许百分比值。撑满文本也会影响缺省词距,因为文本的撑满需要调节(通常是增加)单词之间的距离。如果文本已撑满,word-spacing 还可能调整文本间的平均词距。

 ● 3.文本的水平对齐方式 (text-align)

  Text-align 指定块单元内文本的对齐方式。这个特性可以取四个值:
    text-align : left (right) (center) (justify)
其中,left使文本左对齐(文本右边参差不齐),right使文本右对齐(文本左边参差不齐),justify使文本撑满排列(文本两端对齐),center使文本居中排列。若文本要求撑满排列,但有些浏览器不支持这种对齐方式,因此它们把文本左对齐后右对齐(视文档语言而定)。

 ● 4.文本的垂直对齐方式 (vertical-align)

  通过对 vertical-align 特性的不同取值可以指定一单元与其父单元的竖直对齐方式。下面这些值定义相对于父单元的竖直对齐方式: 

top:单元的顶与其所在行最高单元的顶对齐。 
bottom:单元的底与其所在行最低单元的底对齐。 
baseline:单元文本基线与其父单元文本的基线对齐。如果该单元没有基线(如img单元),该单元的底边与其父单元的基线对齐。 
middle:单元的竖直中心与其父单元的中线(middle)对齐。对文本来说,中线位于基线的上方,与基线的距离为x高的一半。 
sub:单元作为父单元的下标。 
super:单元作为父单元的上标。 
text-top:单元的顶与其父单元文本的顶(top)对齐。对文本来说,“顶”被定义为所用字体最大上距的顶部。 
text-bottom:单元的底与其父单元文本的底(bottom)对齐。对文本来说,“底”被定义为所用字体最大下距的底部。 
  最后,对齐方式也可以通过百分比的形式来指定。百分比值根据行高来计算,说明如下:
    xxx% 按指定的值从父单元的基线向上移动单元。xxx%是当前单元行高的百分比。若为负,单元向下移动。

 ● 5.文本缩进 (text-indent)

  Text-indent 定义块单元内首行文本的缩进量,其值既可以是绝对长度或相对长度,也可以是一个百分数。相对长度根据单元所用字体的大小而定。百分比值相对于其父单元的宽度而定。缩进量可以是正值,也可以是负值。负值产生“悬挂”缩进,使首行文本超出单元框。
  缩进的方向取决于文本的方向。对于英文和法文来说,文本的方向是从左向右的,因此文本向右缩进。而对于阿拉伯文和希伯来文来说,文本向左缩进。可当前的浏览器并不知道这些,它们总是把文本向右缩进。当然,若文本居中排列,缩进就没有多大意义。
  该特性是可继承(或可级联)的。

 ● 6.行高 (line-height)

  行与行之间的距离最常用的称呼是行距,而当网页设计者们发现他们能够控制行距时最常用的称呼是“Weee!”行高简直是上帝发给人间的福音。利用行高我们可以随心所欲地控制行与行之间的垂直距离。
  特性 line-height 定义块单元内文本的行高。同其它与文本有关的特性一样,line-height 也可以继承父单元的特性值,但继承规则却有所不同。
  Line-height 所用的参数就是相邻两行的基准线(基准线就是英文小写字母如 x,a 的下阶线,但不包括诸如 y,g 等字母超过下阶线的部分)之间的垂直距离。注意你所设定的参数将完全代替浏览器的缺省参数。Netscape Communitor和Internet Explorer在行之前加入行高参数。所以如果你将参数设为10px,浏览器将把文字的第1行以10px的高度显示。
  行高属性可以接受一个控制文本基线之间的间隔的值,这个值可以是一个采用绝对或相对单位的长度值,也可以是一个百分比值。百分比值相对于字体大小来计算。注意:相对单元或百分比值常常是较为理想的选择。除了这些值以外,还可以取值“normal”。“normal”指定行高为缺省值。缺省值与所用字体有关,也会与浏览器有关。
  当值为数字时,浏览器将利用字号来确定行距:行高由元素字体大小的量与该数字相乘所得。你还可以用小数设定参数值。(你应该知道IE 3 不支持数字参数值,在IE 3 中使用数字参数将出现大片文字的互相重叠。)设定行高的另一种方法就是利用先前学过的长度单位(em及pt是最常用的单位),你既可以轻松地将行距缩小也可以将行距放大。
  百分比的值相对于元素字体的大小而定。不允许使用负值。
  (Communicator和Internet Explorer对行高的诠释有所不同。 Communicator将只是将文字的上半部分重叠一点,而IE则将其全部重叠。)如果你计划将你的网页中的某些内容重叠显示,行高设置还不是最佳的选择,因为不同的浏览器对其的支持有差别。
  在继承方面上,数字值不通于百分比值:若使用百分比值,子单元继承父单元的实际行高;若使用数字值,子单元继承父单元的数字值(比率),而非具体的行高。

 ● 7.文本修饰 (text-decoration)

  特性 text-decoration 可特别格式化文本,用于控制文本元素所用的效果,特别适用于引人注意的说明,警告等文本效果。在CSS中,它的可能取值为:none,无文本修饰,缺省设置;underline,下划线;overline,上划线;line-through,删除线;blink,闪烁。
  同一语句中可以组合多个关键字。

 ● 8.大小写转换 (text-transform)

  特性 text-transform 可转换英文字母的大小写。这个特性允许作者对同一单元内的所有文本的大小写进行控制:全为大写(使用值 uppercase);全为小写(使用值 lowercase)或仅首字母大写(使用值 capitalize)。这一特性的缺省值是 none,即不进行任何转换。
  特性 text-transform 和 font-variant 连用可以产生 small-caps 变体的大写字符串。这对于诸如NACS和NATO的缩写词和简写词都很有用。尽管大写只是为了表明这些词为缩写,但全尺寸的大写字母看起来有些不舒服。使用 text-transform:lowercase 把字符串转换为小写,再使用 font-variant:samll-caps 把小写的字符串变为小的大写字母,最终结果就是 small-caps 变体的大写字符串。这样的字符串在计算机的显示器上看起来不是很好,但在印刷中效果很好。通常这种转换最好用于大块文本中(如书的一页),而在计算机显示中少用。

 ● 9.空白符 (white-space)

  多数情况下,浏览器忽略文本中多余的空格、制表符、回车或换行,并将它们转换为一个词距。但有时,作者希望保留这些空白符。如PRE单元的文本采用 monospace 字体,且保留空白符以竖直对齐文本或结构化文本。
  CSS特性 white-space 可让作者控制浏览器对空白符的处理。该特性有三个可能的取值。其中值 normal 要求浏览器以通常的方式处理空白符——也即,把所有空白符转换为一个词距仅在有必要时换行;值 pre 要求浏览器保留所有的空白符;值 nowrap 要求浏览器转换空白符,如没有用BR单元明确指定不会换行。