《网页设计》课件-3-5文本样式设置

文本样式设置目录◎设置CSS的字体属性◎文本属性1设置CSS的字体属性1.字体设置—font-family字体族科实际上就是CSS中设置的字体，用于改变HTML标签或元素的字体。语法：

font-family:"字体1","字体2","字体3";浏览器不支持第一个字体时，会采用第二个字体；前两个字体都不支持，则采用第三个字体，以此类推。浏览器不支持定义的所有字体，则会采用系统的默认字体。注意中文字体需要加英文状态下的引号，各字体之间必须使用英文状态下的逗号隔开。英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或者双引号，例如font-family:"arialblack";。2.字号大小—font-size字号大小属性用作修改字体显示的大小。语法：

font-size:大小取值；取值范围：绝对大小：xx-small|x-small|small|medium|large|x-large|xx-large；相对大小：larger|smaller；长度值或百分比。注意绝对大小根据对象字体进行调节。绝对大小的单位有px（像素）、in（英寸）、cm（厘米）、mm（毫米）、pt（点），推荐使用px。相对大小则是相对于父对象中字体尺寸进行相对调节，使用em的较多。百分比取值基于父对象中字体的尺寸。3.字体风格—font-style字体风格就是字体样式，主要是设置字体是否为斜体。语法：

font-style:样式的取值；取值范围：normal|italic|oblique。normal(缺省值)是以正常的方式显示；italic则是以斜体显示文字；oblique属于其中间状态，以偏斜体显示。4.字体加粗—font-weight字体加粗用于设置字体的粗细，实现对一些字体的加粗显示。语法：

font-weight:字体粗度值；取值范围：normal|bold|bolder|lighter|number。normal(缺省值)表示正常粗细；bold表示粗体；bolder表示特粗体；lighter表示特细体；number表示font-weight还可以取数值，其范围是100-900，实际项目开发中主要使用normal和bold。5.小型的大写字母—font-variant小型的大写字母用来设置英文字体是否显示为小型的大写字母。语法：

font-variant：取值；取值范围：normal|small-caps。normal(缺省值)表示正常的字体，small-caps表示英文显示为小型的大写字母字体。6.复合属性：字体—fontfont属性是复合属性，用作对不同字体属性的略写。语法：

font:字体取值；取值：字体风格、小型的大写字母、文本的粗细、字体大小、行高、字体族科之间使用空格相连接。注意font复合属性要按照固定的font-style、font-variant、font-weight、font-size/line-height、font-family的顺序编写，不需要的可以不写，但要保证顺序正确。举例演示【实例5-1】font字体设置。2文本属性1.颜色属性—colorcolor属性用来表示文本的颜色。

语法：

color:颜色代码注意颜色取值可以是颜色关键字，如red，blue，green，yellow等。颜色取值也可以十六进制来表示，例如#FF0000。颜色取值还可以使用RGB代码来表示。rgb（x,x,x）其中，x是基于0~255之间的整数，例如rgb（255，0，0）。使用rgb（y%，y%，y%）表示，y是一个介于0到100之间整数，例如rgb（100%，0%，0%）。这表示为红色，当值为0时百分号不能省略。2.文本行高—line-height行高属性用于控制文本基线之间的间隔值，或者说是行与行之间的距离。语法：

line-height:行高值；行高值通常使用像素px，相对值em和百分比%，实际开发中使用最多的是像素px。3.单词间隔—word-spacing单词间隔用来定义英文单词之间的间隔，对中文无效。语法：

word-spacing:取值；取值范围：normal|<长度>。normal是指正常的间隔，是默认选项；长度是设定单词间隔的数值及单位，允许使用负值。4.字符间隔—letter-spacing字符间隔和单词间隔类似，不同的是字符间隔用于设置字符的间隔数。语法：

letter-spacing:取值;5.文字修饰—text-decoration文字修饰属性主要是用于对文本进行修饰，如设置下划线、上划线、删除线等。语法：

text-decoration:修饰值；取值范围：none|［underline|overline|line-through］。none表示不对文本进行修饰，这是默认属性值；underline表示对文字添加下划线；overline表示对文本添加上划线；line-through表示对文本添加删除线。取值范围：normal|<长度>。normal是指正常的间隔，是默认选项；长度是设定单词间隔的数值及单位，允许使用负值。注意：text-decoration可以赋多个值。例如：text-decoration:underlineoverline;6.文本转换—text-transform文本转换属性仅被用于表达某种格式的要求，是用来转换英文文字的大小写的。语法：

text-transform:转换值;7.文本缩进—text-indent文本缩进属性用于定义HTML中块级元素（如p，hl等）的第一行可以接受的缩进数量，常用于设置段落的首行缩进。语法：

text-indent:缩进值；文本的缩进值必须是一个长度或一个百分比。若设定为百分比，则以上级元素的宽度而定，通常使用em为单位。取值范围：none|capitalize|uppercase|lowercase。取值中，none表示使用原始值；capitalize使每个字的第一个字母大写；uppercase使每个单词的所有字母大写；lowercase则使每个字的所有字母小写。8.文本水平对齐—text-align文本水平对齐用来设置文本水平对齐方式。语法：

text-align:排列值;9.处理空白—white-spacewhite-space属性用于设置页面对象内空白（包括空格和换行等）的处理方式。默认情况下，HTML中的连续多个空格会被合并成一个，而使用这一可以设置成其他的处理方式。语法：

white-space：值；取值范围：normal|pre|nowrap。其中，normal是默认属性，即将连续的多个空格合并；pre会导致源中的空格和换行符被保留；nowrap则表示强制在同一行内显示所有文本，直到文本结束或者遇到<br>对象。取值范围：left|right|center。其中，left为左对齐；right为右对齐；center为居中对齐。10.垂直对齐—vertical-alignvertical-align表示垂直对齐方式，用于设置一个行内元素的纵向位置，相对于它的上级元素或相对于元素行。行内元素是没有行在其前和后断开的元素，例如，在HTML中A和IMG。它主要用于对图像的纵向排列。语法：

vertical-align:排列取值；取值范围：baseline|sub|super|top|text-top|middle|bottom|text-bottom|<百分比>。baseline使元素和上级元素的基线对齐；sub为下标；super为上标；top为使元素和行中最多的元素向上对齐；text-top使元素和上级元素的字体向上对齐；middle是纵向对齐元素基线加上上级元素的x高度的一半的中点，其中x高度是字母“x”的高度；text-bottom使元素和上级元素的字体向下对齐。注意：百分比是一个相对于元素行高属性的百分比，它会在上级基线上增高元素基线的指定数量。这里允许使用负值，负值表示减少相应的数量。;11.阴影效果—text-shadowtext-shadow属性可以为页面中的文本添加阴影效果。语法：

text-shadow：h-shadow值v-shadow值blur值color;12.对象内溢出文本—text-overflowtext-overflow属性用于标示对象内溢出的文本。语法：

text-overflow：clip|ellipsis；其中，clip表示修剪溢出文本，不显示省略标记“…”；ellipsis：用省略标记“...”标示被修剪文本，