四章通过控制字体教程.pptx

第四章通过CSS控制字体样式;“文本编辑”在网页设计中占了很大的比重，因为网页是用来传递信息的，而最经典最直接的信息传递方式就是文字。

通过CSS的本文编辑的标记语言，我们能设置文字的样式、颜色和粗细等属性，在这个章节里，我们将讲述如下的重点：

CSS控制文字样式的方法

CSS控制边距与段落的方法

通过CSS定义样式表的方法;4.1通过CSS控制文本样式

文字是网页设计里不可缺少的元素，但如果把大段文字不加任何修饰就堆积到网页上，那么会让人产生枯燥的感觉，换句话说，如果我们通过CSS样式代码把网页上的文字装饰得美轮美奂，就能很好地留住访问者。;4.1.1定义文字颜色

在HTML页面里，为了定义文字的颜色，首先要用HTML标签（tag）把文字包含起来，如下样式：

b这是一个粗体/b

我们知道，任何HTML标签（比如b）都可以做为CSS的选择器，所以，我们可以把定义文字颜色的代码写到修饰文字的CSS选择器里，就像下面一样。

bstyle=”color:rgb(0,0,255)”这是一个蓝色的粗体文字/b

这里是用CSS把文字定义成蓝色，由于是作用在b这个标签里的，所以文字同时会加粗，效果如下图所示。;4.1.2通过CSS设置字体

字体是指字的各种不同的形状，也可以理解成笔画的姿态。

我们可以通过如下的语法，定义字体的样式。

{

font:font-stylefont-variantfont-weightfont-sizefont-family

}

其中在font后面，是定义字体样式的诸多属性，其中，有两个属性和“CSS字体控制”有关。;4.1.3字体粗细与斜体

通过设置字体的粗细程度，我们能让文字有不同的外观，我们可以通过font-weight属性来设置字体的粗细程度，具体的语法是：

{

font-weight:100-900|bold|bolder|lighter|normal;

}

在设置字体的粗细时，可以直接输入粗细数值，取值范围从100~900，浏览器默认的字体粗细为400，另外也可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗些。;4.1.4定义字体大小和行高

在一个网站里，文字的大小往往会影响访问者浏览的进度，同时，如果合理地设置行高，也能提升文字的整体外观。下面我们就来依次说明一下定义文字大小和行高的语法。;1.???义字体大小

我们可以通过font-size的属性来定义字体的大小，具体的语法是：

{

font-size:数值|inherit|medium|large|larger|x-large|xx-large|small|smaller|x-small|xx-small

}

其中，可以通过数值和其它一些参数来定义字体的大小，在诸多参数里，small相对于large是小的，相对于x-small而言则是大字体。;xx-small：用这个参数定义的字体，是所有相对大小取值中最小的。

x-small：用这个参数定义的字体，仅大于xx-small的字体。

small：用这个参数定义的字体，在文字大小的相对大小值中默认为小字体。

medium：默认值。也是７种字体大小中的中字体。

large：用这个参数定义的字体，在大小值中默认为大字体。

x-large：用这个参数定义的字体，在相对大小值中仅小于xx-large的字体。

xx-large：用这个参数定义的字体，是所有相对大小值中最大的字体。

用上述参数设置出的字体大小之间是有固定比例的，比如x-small是xx-small的1.5倍，small是x-small的1.5倍，medium是small的1.5倍，large又是medium的1.5倍。依此类推就可以。;2.定义行高

在CSS里，是通过如下的语法来定义行高：

{

line-height:数值|normal;

}

在这里，可以用数值来设定行高，也能通过把参数值设置为“normal”，指定行高是“默认数值”。

在实际的应用里，“行高”这个CSS样式的使用频率还是比较多的;4.1.5下划线、顶划线、删除线

在文本编辑中有的需要突出重点，这时往往就会添加下划线，此外，针对文字，还会有顶划线和删除线效果，要为文本添加下划线、删除线与顶划线，可以通过如下的语法实现：

{

text-decoration:inherit|none|underline|overline|line-through|blink

}

其中，CSS里的text-decoration属性是用于控制文本的“下划线等”的效果。;4.2用CSS控制字间距和对齐方式

文本间的间距虽然不起眼，但如果不好好设置，就会出现“过于紧密”或者是“过于松散”的外观。

“对齐方式”也是比较重要的，通过