CSS——文本相关属性

一.   文字

    1.   字体设置

    在  HTML  语言中，文字的字体是通过  来设置，而在  CSS  中字体总通过  font-family  属性进行控制。代码如下:

    

    以上语句声明了  HTML  页面中 P 标记的字体名称，并且同时声明了两个字体名称，分别是 SimSun (宋体)和Microsoft YaHei (微软雅黑)，含义是告诉浏览器首先在访问者的计算机中寻找  SimSun 字体，若没有SimSun字体，则寻找Microsoft YaHei 字体，如果两种字体都没有，则使用浏览器的默认字体显示。font-family 属性可以同时声明多种字体，字体之间用过号分隔开。

【注】不要输入中文(全角)的双引号，而要使用英文(半角)的双引号。

2.  设置文字大小

    在网页中通过文字的大小来突出主题是很常用的方法，CSS 是通过 font-size  属性来控制文字大小的。该属性的值可以使用很多种长度单位。
    (1)   长度单位 px

    px   是一个长度单位，表示在浏览器上 1 个像素的大小。因为不同的显示器的分辨率不同，而且每个像象的实际大小也不同，所以 px  被称为相对单位，也就是相对于 1 个像素的比例。

    在 css 中。还可以使用绝对长度单位，它们不会随显示器的变化而变化。各个单位的含义下表所示：

绝对单位及其含义

长度单位	说明
in	inch，英寸
cm	centimeter，厘米
mm	millimeter，毫米
pt	point，印刷的点数，1pt = 1/72 inch
pc	pica，1pc = 12 pt

    (2)   长度单位em和ex

    1 em 表示的长度是其父元素中字母 m 的标准宽度。1 ex 则表字母 x 的标准高度。当父元素的文字大小变化时，使用这两个单位的子无素的大小会同比例变化。

    例如，对

标签设置  firstLetter 样式，然后编与CSS样式代码，代码如下：

    .firstLetter{
        font-size:  3em;
        float:left;
    }

  此时，首字母就变为标准大小的3倍，并且因为设管了向左浮动而实现下沉显示。

2.  设置文字颜色

    在 HTML项面中，颜色统一采用  RGB 格式，每种颜色都由“红绿蓝”三种颜色的不同比重组成，分为0到255档。当红绿蓝3个分最都设置为255时就是白色，例如，rgb(100%,100%,100%)和#FFFFFF 都指白色，其中“#FFFFFF”为十六进制的表示方法，前两位为红色分量，中间两位是绿色分量，最后两位是蓝色分量。"FF”即为16 进制中的 255。

    CSS 中文字颜色是通过 color 属性设置的。代码如下：

    h3{color : blue; }
    h3{color : #0000ff; }
    h3{color : #00f; }
    h3{color : rgb(0,0,255); }
    h3{color : rgb(0%,0%,100%); }

    第 1 种方式使用颜色的英文名称作为属性值。

    第 2 种方式是最常用的十六进数值表示。

    第 3 种方式是第 2 种方式的简写方式，形如 #aabbcc 的颜色值，就可以简写为 #abc。

    第 4 种方式是分别给出红绿蓝 3 个颜色分量的十进制数值。

    第 5 种方式是分别给出红绿蓝 3 个颜色分量的百分比。

4.   设置文字的水平对齐方式

    在CSS中，文字的水平对齐通过属性  text-align 来控制，它的值可以设置为左、右和两端对齐 ( jusify) 等。

    h1{ text-align:  center  |  left  |  right  | jusify  }

5.   段首缩进设置

    在  CSS  中，段首缩进是通过  text-indent  属性设置的，直接将缩进距离作为数值即可。

    p{ text-indent:  2em}

二.   文本

    1.   文本自动换行

    当  HTML 元素不足以显示它里面的所有文本时，浏览器会自动换行显示它里面的所有文本。浏览器默认换行规则对于西方文字来说，浏览器只会在半角空格、连字符的地方进行换行，不会在单词中间换行；对于中文来说，浏览器可以在任何一个中文字符后换行。
    有些时候，希望让浏览器可以在西方文字的单词中间换行，此时可借助于  word-break 属性。如果把  word-break  属性设为break-all，即可让浏览器在单词中间换行。

强制不换行：

p { white-space:nowrap; }

自动换行：

p { word-wrap:break-word; }

word-break : normal|break-all|keep-all;

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

2.   设置超链接样式

    能够设置超链接样式的  CSS  属件有很多种 (如 color、font-family、background  等)。超链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

    超链接有以下 4 种状态：

•     a:link:    普通的、未被访问的链接。
•     a:visited:    用户已访问的链接。
•     a:hover:     鼠标指针位于链接的上方。
•     a:active:    链接被单击的时刻。

 在CSS中，为超链接的这 4 种状态提供了对应的伪类选择器，用于为超链接的不同状态设置不同的样式。