在CSS样式中,最基本的属性是用来设置文字和文本的样式。”文字”指的是单个文字或单词,”文本”指的是由文字组成的内容。为字体设置样式主要是设置字、词的样式,对文本设置样式样式主要是对整段文章设置样式。
设置文字样式
CSS对文字样式的设计有文字字体的设置、文字大小、文字粗体、文字斜体以及字间距等样式的设置。
字体设置
在HTML里可以使用来设置文字字体,而在CSS中设置字体所用到的属性是font-family,其语法代码如下:
font-family:"字体1","字体2","字体3",......
在这里,可以为文字设置多个字体,当在运行页面的浏览器中找不到第一种字体的时候,就会使用第二种字体显示;如果也找不到第二种字体,则会以第三种字体显示,以此类推。如果设置的几种字体在浏览器中都无法找到,会自动以浏览器设置的默认字体显示。
为了更好地区分HTML代码和CSS样式代码,所有的CSS样式语句都使用小写字母
设置文字大小
设置文字带下是指为页面中的文字设置绝对大小或相对高度。相对高度是指文字相对于父对象文字尺寸来设置的,包含larger和smaller,使用成比例的em单位计算。绝对高度设置的是固定的大小,包含xx-small、x-small、larger等。
虽然这里可以用英文单词设置绝对大小,但是这些文字在浏览器中的显示效果与浏览器的设置有关,而不是真正绝对不变的。这些表示绝对大小的词就是针对于浏览器设置的字体而定的。
除了使用英文单词表示文字大小之外,还有一种文字大小的设置方式是使用具体的长度值或百分比。以下显示了再CSS样式表中设置文字大小的属性值、含义以及规则。
类型 font-size取值或单位 表示的含义
用英文单词表示绝对大小 xx-small 极小
~ x-small 很小
~ small 小
~ medium 中
~ large 大
~ x-large 很大
~ xx-large 极大
~ larger 较大,一般是比父对象中的字体大一些
~ smaller 较小,一般是比父对象的字体小一些
采用具体的长度值(浮点数+单位) pt 点,1点=1/72英寸
~ px 像素
~ in 英寸
采用百分比 % 相对于父对象中字体的尺寸的比例
设置粗体
在页面中经常会使用加粗的字体表示强调,但是在HTML标记中加粗的程度只有一种,通过CSS样式可以为文字设置不同程度的加粗效果,其语法是:
font-weight:字体的粗度
在这里,字体的粗度可以使用数值表示,也可以使用英文单词表示,其具体的取值及含义如下:
字体粗细取值 取值的含义
100~900 数值越小字体也越细,要求所取的数值是整百的,即只有100、200、300等
normal 正常字体效果
bold 加粗字体,字体的粗细也设置为700基本相同
bolder 特粗字体,就是在加粗字体的基础上再加粗,基本相当于设置为900的效果
lighter 细体字,相对默认字体更细一些
设置文字颜色
CSS样式表中设置文字颜色的属性是color,其语法是:
color:颜色代码/颜色名称
在这里,颜色代码是指颜色的十六进制,颜色名称是颜色的英文名。
设置斜体
在CSS样式表中,也可以将文字设置为斜体显示,而且倾斜的程度有两种,即倾斜字体和编斜体。其设置语法是:
font-style:normal/italic/oblique
在这里,font-style可以取normal(正常字体)、italic(倾斜)和oblique(偏斜体)三种。
综合设置
前面介绍的几种属性都是以font开始的,表示这几种属性都属于同一类别,都是用来设置文字的字体效果。在CSS样式表中,还可以很方便地设置字体属性,即直接使用font属性进行设置,其语法是:
font:字体属性取值
设置文本样式
文本样式的设置是对一段文字整体进行设置。文本样式的设置包含设置阴影效果、大小写转换、文本缩进、文本对齐方式等。
设置阴影效果
CSS2中允许设置文字的阴影,让文字看起来更有立体感。设置阴影所用到的属性为text-shadow,其语法代码为:
text-shadow:none | color | length | length | length | inherit
以上代码的属性值所代表的含义为:
none:不设置阴影
color:阴影的颜色
length:长度值
inherit:继承父级样式
CSS中的阴影有3个length要进行设置,第1个方向是水平方向的距离,可以为负值;第2个方向是垂直方向的距离,可以为负值;第3个方向为模糊半径的长度,不能为负值。如以下代码:
.e {text-shadow:black 0px 0px 5px;}
以下代码为文字设置了阴影,并且阴影在文字的右下方,但是该代码并没有指定阴影的颜色,因此阴影的颜色与文字本身颜色相同。
.e {text-shadow:5px 5px 5px;}
模糊半径也可以省略,如果不指定模糊半径,则阴影不存在模糊效果,如以下代码:
.e{text-shadow:5px 5px;}
阴影还可以设置多组效果,每组效果之间用逗号分隔开来,如以下代码:
.e{text-shadow:back 0px 0px 5px,0px 0px 10px orange,red 5px -5px;}
大小写转换
在CSS里处理大小写都是通过text-transform属性完成的,其语法代码为:
text-transform : capitalize | uppercase | lowercase | none | inherit
以上代码的属性值所代表的含义为:
capitalize:将每个文字的第一个字母大写。
uppercase:将整个文字都变成大写。
lowercase:将整个文字都变成小写。
none:不改变文字的大小写。
inherit:继承父级样式。
文本缩进
在没有使用CSS之前,一段文字的首行缩进都是使用空格来实现的。在有了CSS之后,网页开发者就不再需要在每个段落之前都加上两个空格了。使用CSS中的text-indent属性可以轻易达到缩进的目的。text-indent属性的语法代码如下:
text-indent : length | 百分数 | inherit
以下代码的属性值所代表的含义为:
length:缩进量,可以使用绝对单位值与相对单位值。
百分数:相对于父级元素的百分之多少来缩进。
Inherit:继承父级样式。
文本的水平对齐方式
使用text-align属性可以在CSS样式中设置文本水平对齐属性,包含左对齐、右对齐、居中对齐和两段对齐,其设置语法是:
text-align:left/right/center/justify
文本的垂直对齐方式
文本的垂直对齐属性vertical-align相当于HTML中垂直对齐标记。它用于设置文本和其他元素(一般是上一级元素或者同行的其他元素)的垂直对齐方式,其语法是:
vertical-align:baseline/sub/super/top/bottom/text-top/middle/text-bottom/百分比
这个属性可取的值较多,其含义也各不相同。如图所示:
垂直对齐的含义
纵向对齐取值 具体的含义
baseline 设置文本和上级元素的基线对齐
sub 设置文本显示为上级元素的下标,常在数据中使用
super 设置文本显示为上级元素的上标,常常用于设置某个数值的乘方数
top 使文本元素和同行中最高的元素上端对齐
botton 使文本元素和同行中高度最低的元素向下对齐
text-top 使文本元素和上级元素的文本向上对齐
middle 使文本垂直居中对齐。假如元素的基线与上级元素的x高度的一般相加的值为H,则文本与高度J的中点纵向对齐。其中,x是指字母"x"的高度。
text-bootom 使文本元素和上级元素的文本向下对齐
百分比 是相对于元素行高属性的百分比,它会在上级元素基线上增高指定的百分比。如果取值为正数则表示增加设置的百分比,反之如果取值为负数,则表示减少相应的百分比
设置文本流入方向
CSS里的direction属性可以用来设置文本流入的方向。direction属性的语法代码为:
direction: ltr | rtl | inherit
以上代码的属性值所代表的含义为:
ltr:left to right 的简写,用于设置文本从左到右流入。该值为direction属性的默认值。
rtl: right to left 的简写,用于设置文本从右到左流入。
inherit: 继承父级样式
设置文本修饰
文字修饰一般包括设置文字带有下划线、上划线、删除线等,这些都可以使用text-decoration属性来设置,其语法是:
text-decoration:underline/overline/line-through/blink/none
文字的修饰属性
文本修饰属性值 取值的具体含义
underline 给文字添加下划线效果
overline 给文字添加上划线效果
line-through 给文字添加删除线的效果
blink 给文字添加闪烁效果,只有在Netscape浏览器才能看到效果
none 不设置任何修饰属性
空白与换行
在HTML代码中,通常都会出现很多空格与换行。这些空格与换行,在浏览器中显示时往往不会按照源代码中的出现方式来显示。在CSS可以设置如何处理这些空格与换行。
空格的处理方式
在HTML中,浏览器会自动地将多喝连续空格处理成为一个空格,也可以使用pre元素来让浏览器在显示时不更改源代码里的排版方式。这些在CSS里都可以统一使用white-space属性来完成。white-space属性的语法代码如下:
white-space : normal | pre |nowrap | inherit
以上代码的属性值所代表的含义为:
normal:默认值,浏览器会自动忽略多余的空格,连续多个空格只显示一个
pre:与pre元素类似,浏览器不忽略源代码中的空格。
nowrap:设置文字不自动换行。
inherit:继承父级样式。
字内换行
如果当文本宽度超出浏览器宽度的时候,默认情况下会自动换行,但如果正好是在较长的英文单词中间,那么整个单词都会被移动到下一行显示,这样本行的右侧就有较大的空白,影响美观,使用字内换行属性可以将英文单词打散显示,也可以设置在换行前或换行后整体显示,其设置语法是:
word-break:normal/break-all/keep-all
这里,normal是正常情况下的显示方式,当在单词中需要换行的时候,该单词会在下一行显示,而本行后面保留空白;break-all允许非亚洲语言文本行的任意字内断开;keep-all与所有非亚洲语言额normal想同,对于中文、韩文、日文不允许断开。
设置间距
在CSS中可以定义文字与文字之间的距离,其中包括行间距、字间距与词间距。不同的间距可以控制页面的不同的显示效果。
==行间距 ==
行间距是指文本行与行之间的距离,在CSS里不能直接定义行间距,只能通过line-height属性来定义行高。所谓行高是指上一行的基线,与下一行文字之间的基线之间的距离,行高等于行间距加上文字高度,语法如下:
line-height : normal | number | lenght | 百分数 | inherit
以上代码的属性值所代表的含义为:
normal:默认值,使用的默认行高。
number:在当前文字大小的基础再做增加来设置行高,不能为负值。
length:指定行高数,可以是绝对长度单位,也可以是相对长度单位,不能是负值。
百分数:用百分数指定行高,相当于字体大小的百分之多少。
inherit:继承父级属性。
字间距
在CSS里可以通过letter-spacing属性来设置字间距,对于英文来说,字间距是指每个字母之间的距离,对于中文来说,字间距是每个字之间的距离。letter-spacing属性的语法代码如下所示。
letter-spacing : normal | length | inherit
以下代码的属性值所代表的的含义如下:
normal:默认值,使用默认的字间距。
length:设置字间距,可以是绝对单位值或相对单位值。
inherit:继承父级属性。
词间距
在CSS中可以使用word-spacing来设置词间距,词间距是针对因为而言的。目前,浏览器还不能区分中文的”词”与”字”。word-spacing属性的语法代码如下。
word-spacing : normal | <length> | inherit
以上代码的属性值所代表的含义如下:
normal:默认值,使用默认的词间距。
length:设置词间距的大小,可以是绝对单位值或相对单位值。
inherit:继承父级属性。
