您的位置：首页 > Web前端 > CSS

CSS：设置文本与字体样式

2016-09-21 18:14 731 查看

应用基本的文本样式

文本对齐方式：text-align

该属性用于控制“行内块元素”或“块元素”内“行内元素”（文本元素）的居中方式的，包含三个值：

left：居左对齐；

center：居中对齐；

right：居右对齐；

空白处理：white-space

空白在HTML文档中通常是被压缩或者直接忽略掉。这允许你将HTML文档的布局跟页面的外观分离。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset="UTF-8">
<title>Example</title>
<style type="text/css">

p {
width: 700px;
margin: 5px;
padding: 5px;
border: medium double black;
background-color: lightgrey;
}

</style>
</head>

<body>

<p>

My father was a self-taught mandolin player. He was one of the best string instrument players in our town. He could not read music, but if he heard a tune a few times, he could play it. When he was younger, he was a member of        a small country music            band. They would play at local dances and on a few occasions would play for the local radio station.                                     He often told us how he had auditioned and earned a position in a band that featured Patsy Cline as their lead singer. He told the family that after he was hired he never went back. Dad was a very religious man. He stated
that there was a lot          of drinking and cursing the day of his audition and he did not want to be around that type of environment.

Occasionally, Dad would get out his mandolin and            play for the family. We three children: Trisha, Monte and I, George Jr., would often             sing along. Songs such as the Tennessee Waltz, Harbor Lights and around Christmas time, the well-known                 rendition of Silver Bells. "Silver Bells, Silver Bells, its Christmas time       in the city" would ring throughout the house. One of Dad's favorite hymns was "The Old Rugged Cross". We learned the words to the hymn when we were very young, and would sing it with Dad when he would play and sing. Another song that was often shared in our house was a song that accompanied     the Walt Disney series: Davey Crockett. Dad only had to hear the song
twice before he learned              it well enough to play it. "Davey, Davey Crockett, King of the Wild Frontier" was a favorite song for the family. He knew we enjoyed the song and the program and would often get out the mandolin after the program was over. I could never get over how he could play the songs so well after only hearing them a few times. I loved to sing, but I never learned how to play the mandolin. This is                   something I regret to this day.

</p>

</body>

</html>


在上面的代码中，文本包含了一些空格、制表符和换行符。浏览器遇到多个空格时，会将他们压缩为一个空格，而换行符等其他空白符则会直接被忽略。浏览器会自动处理文本换行，以便各行都能适应元素边界。浏览器的这种处理方式并不是我们想要的，有时候我们就像在HTML源文档中保留文本中的空白，这是，可以使用whitespace属性控制浏览器对空白字符的处理方式，这个属性的值总结如下：

值说明
normal默认值，空白符被压缩，文本自动换行
nowrap空白符被压缩，文本行不换行
pre空白符被保留，文本只在遇到换行符的时候换行，这个pre元素的效果一样
pre-line空白符被压缩，文本只会在一行排满或遇到换行符时换行
pre-wrap空白符被保留，文本会在一行排满或遇到换行符时换行

段落首行缩进：text-indent

该属性是用于“行内元素”设置每个段落首行缩进数量值的属性，CSS字体大小（font-size）可以设置的数值和单位在该属性的值中都可以使用（除了百分比）。如果是用于中文布局，一般会使用“2em”的数值和单位来为每个段落的首行缩进“两个字符”。

文本装饰线：text-decoration

该属性是为文本上添加一根装饰线，带”href”属性的 
<a>
标签默认会带有一根下划线，就是由该属性的值“underline”设置的。“text-decoration”属性有以下值：

none：（默认）不显示任何装饰线；

underline：在文本下方显示装饰线；

overline：在文本上方显示装饰线；

line-through：在文本中间显示装饰线，相当于删除线；

英文字母的大小写转换：text-transform

该属性能将“行内元素”中的英文文本进行大小写转换，以满足网站对规范性的要求。特别在一些对项目产品细节要求至严的跨国企业或合资企业，他们对网站或应用中的文本格式也有相当高的要求，当网站中的绝大部分英文文本都是由其它地方整理粘贴而来的时候，如果要逐一去修改这些文本，不仅时间成本大大地增加，也容易出现一些难以一时发现的疏漏，这个时候“text-transform”属性就有它的“用武之地”了。该属性有以下属性值：

none：（默认）保持文本中英文单词的默认大小写

capitalize：每个英文单词首字母为大写字母，其它为小写字母

uppercase：将所有英文单词转换为大写字母

lowercase：将所有英文单词转换为小写字母

指定文本方向：direction

direction有两个值，分别如下：

ltr：从左至右；

rtl：从右至左；

提示：direction属性已经从相关CSS模块的最新草案中移除了，不过也没给出具体的原因，说不定在模块最终完善之前还能恢复。

制定单词、字母、行之间的间距

可以告诉浏览器单词与单词、字母与字母、行与行之间的间距。相关属性列在下表中：

属性说明值
letter-spacing设置字母之间的间距normal<长度值>
word-spacing设置单词之间的间距normal<长度值>
line-height设置行高normal/<数值>/<长度值><%>

文本的阴影：text-shadow

属性说明值
text-shadow为文本块应用阴影h-shadow,v-shadow,blur,color
h-shadow和v-shadow值分别指定阴影的水平偏移和垂直偏移。它们的值用长度值（px）表示，允许负值。h-shadow值，“0”表示维持原位，正数为向右偏移，负数为向左偏移；v-shadow值，“0”表示维持原位，正数为向下偏移，负数为向上偏移。blur值也是一个长度值，定义了阴影的模糊程度，该值可选，距离越大模糊程度越高。color值指定阴影的颜色，支持Web技术中的常用颜色模式：“颜色英文单词”“HEX”、“RGBa”、“HSLa”。

字体样式

我们可以对文本进行许多改变，其中最基本的一项就是改变用来显示字符的字体。下方列表中描述了字体相关属性。

字体基本设置

属性说明值
font-family指定文本块采用的字体名称中文或英文字体名:“宋体”“Arial”
font-size指定文本块的字体大小单位：px/em/%/pt/ex/pc/mm/cm/in）
font-style指定字体样式normal(普通)/italic（斜体）/oblique（倾斜字体）
font-weight设置字体粗细normal/bold/bolder/lighter

字体的组合写法

除了为“font”的具体分支属性设置样式，我们还能将“font”的多个值组合起来写，如我们要设置一个风格为正常的粗体，字号为20像素的“微软雅黑”和一个风格为斜体的正常粗细，字号为22像素的“宋体”，我们可以这样写：

<article>
<p class="setFont_1">正常风格加粗20像素的微软雅黑字体</p>
<p class="setFont_2">斜体风格正常粗细22像素的宋体字体</p>
</article>


对应的CSS代码如下：

.setFont_1 {
font: normal bold 20px "微软雅黑";
}
.setFont_2 {
font: italic normal 22px "宋体";
}


由于字体风格和字体粗细，具有一定的相似性，如他们都有一个“normal”值，所以在写“font”属性组合值的时候可以省略二者之一，以辨识到的值进行设置，另外一个自动为“normal”，甚至还能省略掉第前两个值，只保留“font-size”和“font-family”。如下所示：

.setFont {20px "微软雅黑"}

等价于

.setFont {normal 20px "微软雅黑"}

等价于

.setFont {normal normal 20px "微软雅黑"}


但有一点需要强调的是，在“font”组合值的写法中，只有“font-size”和“font-family”这两个的值是不能省略的，而且是缺一不可，否则浏览器会不认识该值，对该组合值进行报错。

字体颜色 color

在目前的浏览器标准中，要想改变浏览器默认字体的颜色（#000000）唯一的途径就是通过CSS的“color”属性进行设置。颜色属性可以设置4种类型的值，有以下类型：

1、颜色英文单词

可以通过颜色的英文单词直接设置文本的颜色，如“red”、“orange”、“yellow”、“green”、“cyan”、“blue”、“purple”、“pink”、“gray”、“black”和“white”等等。

2、HEX（16进制颜色）

通过“#”+16进制表示颜色，有“#”+“三位”和“#”+“六位”的形式。若是“三位”的形式，第一位表示“红”，第二位表示“绿”，第三位表示“蓝”，通过取值区间“0-9”,“a-f”(10-16)的组合，如“#26f”，共计能表达4,096个颜色。若是“六位”的形式，可以表示的颜色数更加细致，第一二为表示“红”，第三四位表示“绿”，第四五位表示“蓝”，同样也是通过取值区间“0-9”,“a-f”的组合，如“#2369fd”，共计能表达16,777,216个颜色。

3、RGBa/ARGB（Alpha的三原色）

和“HEX”表示三原色一样，该模式同样也是采用三元色的值来表现色彩，不过“RGBa”颜色模式采用的是10进制的值，格式如“rgb(34, 102, 255)”，值之间用英文逗号“,”进行分割，第一个值表示“红”，第二个值表示“绿”，第三个值表示“蓝”，每个值的区间为“0-255”（256个色阶），共计同样也能表示16,777,216个颜色。除此之外，该模式还支持对不透明度的设置，也就是“RGBa”里面的这个“a”（alpha），它表示不透明度，取值区间是“0到1”之间的浮点数（可保留到两位小数），“0”表示完全透明，“1”表示完全不透明，写法如“rgba(34, 102, 255, 0.55)”、“rgba(34, 102, 255, .9)”或“rgb(34, 102, 255)”。

4、HSLa（Alpha的Hue、Saturation、Lightness）

该模式通过设置“色调”（Hue）、“饱和度”（Saturation）、“亮度”（Lightness）和“不透明度”（Alpha）来表现色彩的，不透明度的表示和“RGBa”一样，我们主要来看下面三个值的意义：

色调：除开“黑色”和“白色”从纯红色过度到纯蓝色再过度到纯红色这一过程的颜色轴的区间，共计360个色调；

饱和度：从该色调的纯黑到该色调的纯色区间，越接近黑色，饱和度越低，越接近纯色，饱和度越高；

亮度：从“纯黑”到“纯白”这一过程的表示，越接近黑色亮度越低，越接近白色亮度越高。

如例：

这是一个色调为316，饱和度75%，亮度56%，不透明度0.9的颜色–HSLa(316, 75%, 56%, 0.9)

这是一个色调为76，饱和度35%，亮度45%，不透明的颜色–HSL(76, 35%, 45%)

5、Transparent（透明）

只要设置该值，那文本的内容将变为完全透明，即无论背景为什么颜色或图片，都会完全看不到设置的文字元素，只是起到了一个占位作用，除非文本被选中，如下例：

这是一段一般人根本不会发现的文字。

需要补充的是，“IE 8”浏览器及以下的版本不支持“RGBa”、“HSLa”模式及“Transparent”值，即不支持透明度部分的值，对常规“RGB”和“HSL”模式仍能正常支持。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 文本样式
相关文章推荐
新的分享
章节导航