为文本添加样式

---

title: 为文本添加样式
date: 2019-08-03 19:44:37
tags: [css]
categories: [css]

---

描述：使用css可以修改文本的字体、大小、粗细、倾斜、行高、前景和背景颜色、间距和对齐方式，可以决定是否为文本添加下划线或删除线，可以将文本转化为全部使用大写字母、全部使用小写字母或使用小型大写字母。而且，短短几行代码就可以让这些样式应用于整篇文档或整个网站。

---

选择字体系列

如何定义单个字体？

设置字体的方法

font-family:name;

font-family属性是继承的，但是有几个元素不会继承元素的字体设置，其中有表单的select、textarea和input元素。不过，可以强制它们继承父元素的字体设置，代码为

input，select，textarea{
font-family:inherit;
}

注意：如果选择了访问者系统中没有的字体，他们的浏览器中就会显示默认字体。（Windows中的默认字体是Times New Roman）

---

指定替代字体

有些字体不一定在每个系统上都能够显示出来，所以我们需要替代字体，来替代不能显示的字体，因此，我们可以在font-family属性中列举一种以上的字体。例如：

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif
}

如果系统上没有第一种字体，就用第二种字体，没有第一种和第二种字体就用第三种字体…这样往下替换。

目标：指定尽可能接近的字体。

字体列表称为字体栈。通常字体栈至少包括三个字体：希望使用的字体，一个或几个替代字体，以及一个表示类属性的标准字体（如果其他的字体都不可用，就用这个）。

系统通常都具有下列表示类属的字体名称对应的字体：serif、sans-serif、cursive、fantasy和monospace。

---

创建斜体

浏览器通常让一些HTML元素（如cite、em和i）默认以斜体显示，因此，不必在CSS中对这些元素设置斜体。

在CSS中font-style属性可以让任何元素中的文本以斜体显示。

创建斜体

/* 创建斜体文本 */
    font-style: italic;
    /*创建倾斜文本*/
    font-style: oblique;

注意：99%的情况下都选择italic。所有情况下，都很难察觉到使用italic和oblique的差异。

取消斜体

font-style: normal;

---

应用粗体格式

粗体格式可能是让文本突出显示的最常见、最有效的方法。

应用粗体格式

浏览器通常默认为h1~h2添加粗体格式。

CSS中添加粗体和取消粗体使用font-weight属性：

/*粗体*/
    /*方法一*/
    /*让文本显示为具有平均加粗值的粗体，适用于大多数情况*/
    font-weight: bold;
    /*方法二*/
    /*输入100~900之间的100的倍数，400代表正常粗细，700代表粗体*/
    font-weight: 700;
    /*方法三*/
    /*bolder:更粗，lighter：更粗。设置相对当前粗细的值*/
    font-weight: bolder;
    font-weight: lighter;

取消粗体

font-weight: normal;

注意：

1. 有些web字体服务，如Google Fonts,要求使用font-weight: 400;

2. 有的字体没有设计粗体字母。对于这种字体，如果声明font-weight: bold;，浏览器会显示伪粗体。

3. 任何自动添加了粗体格式的元素（strong、h1~h2和b），以及继承了父元素粗体格式的元素是有可能需要取消粗体的。

4. font-weight是继承的。

---

设置字体的大小

为网页的文本设置字体大小有两种方式：

方法一：直接使用像素

font-size: 75px;

方法二：使用百分号、em或者rem指定相对父元素文本的大小。

font-size: 100%;/*16px*/
    font-size: 2em;/*(16*2)px建议使用这个*/
    font-size: 2rem;

理解em和百分数字体大小

说明:使用这种方法时，最好在body上建立一个基准。

body{
    font-size: 100%;
}

即大多数系统的默认字体大小。

确定em的值或（百分比）：

要指定的字体大小/父元素的字体大小=值

注意：

1. 1em应该始终等于父元素的字体大小。

2. 在大多数情况下，100%的body font-size等于16px。不过有一种例外，就是用户对浏览器的设置覆盖了该默认值。

使用rem设置字体大小

以根元素为参照物设置其他元素的字体大小。例如：

html{
    font-size: 100%;/*通常是16px*/
}
intro p{
    font-size: 17px;/*可选*/
    font-size: 1.0625rem;/*17px/16px*/
}
intro a{
    font-size: 1px;/*可选*/
    font-size: 1rem;/*是0,941176em*/
}

根元素是html元素，简化了字体大小的设置，因为html元素的字体大小通常不会变。

注意：IE9才开始支持它。

---

指定行高

行高指的是段落的行距，即段落内每行之间的距离。

设置行高的步骤：

方法一：输入n,n是一个数字，它与元素的字体大小相乘，得到行高。(最常用的方法)

line-height: n;

方法二：输入a，a是以em、像素或磅（打印中使用）为单位的值。

line-height: a;

方法三：输入p%，字体大小的百分比。

ine-height: p%;

注意：

1. 如果使用数字设定行高，那么所有子元素都会继承这个因子。如果父元素是16px,行高为1.5则，该元素的行高就是24px(1.5*16),如果子元素的字体大小为10px,则子元素的行高为15px(10*1.5)。

2. 如果使用百分数或em值，那么只会继承产生的行高（即计算出来的值）。如果父元素是16px,行高为1.5则，该元素的行高就是24px，不管子元素的行高是多少，行高都是24px。

---

同时设置所有字体值

可以使用font简写属性同时设置字体样式、粗细、变体、大小、行高和字体系列。

使用font简写属性不要求指定所有字体属性，但至少应该包含字体大小和字体系列属性。

例1：

font: 100% Geneva, Tahoma, sans-serif;

例2：这个例子包含了所有可能的属性。

/*字型 粗细 取消或设置小型大写字母 字体大小/行高 字体系列（逗号分隔）*/
.example{
    font: italic small-caps bold .875em/1.3 "Palation Linotype", Palation, serif;
}

注意：

1. 必须始终显式的声明字体大小和字体系列属性：先是字体大小，再是字体系列。
2. 行高是可选项，如果要出现，必须紧跟在字体大小和斜杠后面。
3. 字型、粗细、取消或设置小型大写字母的属性是可以按任意顺序排列，也可以忽略，如果忽略，就自动设置为normal。

---

设置颜色

可以修改网页中文本的颜色。

样式表可以包含颜色名称、十六进制、RGB、HSL、RGBA和HSLA值的任意组合来定义颜色。

/*输入颜色名称*/
    color: red;
    /*十六进制:#rrggbb*/
    color: #aa11bb;/*可简写为#a1b*/
    /*rgb(r,g,b):r,g,b为0~255之间的整数*/
    color: 255,182,193;
    /*rgb(r%,g%,b%):红、绿、蓝的百分数*/
    color: 45%,34%,56%;
    /*hsl(h,s,l):h是0~360之间的数值,色相；s和l是百分数，表示饱和度和亮度*/
    color: 90,34%,78%;
    /*rgba(r,g,b,a):a表示透明度,0~1之间的小数*/
    color: 255,182,193,0.5;
    /*hsla(h,s,l,a)*/
    color: 90,34%,78%,0,3;

注意：

1. IE9之前不支持HSL、RGAB和HSLA。
2. 除了link元素，其他元素都会继承body元素中的color属性。开发人员必须显式设置link元素的color属性。

---

设置背景

几乎可以对所有元素应用背景样式。

修改文本的背景颜色

transparent：表示允许透过父元素的背景颜色

background-color: transparent;/*（或color）*/

使用背景图像作为背景

none:不使用图片。

background-image: none;/*或者url(image.png)*/

重复背景图像

direction:可以取四个值，repeat、repeat-x、repeat-y、no-repeat,分别代表同时横向和纵向重复图像、只横向重复图像、只纵向重复图像、不重复图像。

忽略background-repeat，相当于默认为repeat。

background-repeat: direction;

控制背景图像是否随页面滚动

fixed：背景图像会附着在浏览器窗口上（即使访问者滚动页面，图像任会继续显示，背景图像固定不动）。

scroll：访问者滚动页面时背景图像会移动，相对于元素固定。

local：只有访问者滚动背景图像所在的元素（而不是整个页面）时，背景图像才移动。相对于元素内容固定。

scroll和local的区别：对于可以滚动的元素（设置为overflow:scroll的元素）, 当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。设置为local时，则背景会随内容的滚动而滚动。

系统默认为scroll。

background-attachment: scroll;

指定元素背景图像的位置

x和y表示为距离左上角的绝对距离或百分数，如下面例子所示。
也可以用left、center、right表示x，用top，center、bottom表示y。

如果两个值都用关键字表示，那么顺序无关紧要。

background-position:20px 147px;

注意：可以在background-position属性中使用负数，使用负数的部分显示不出来。

在一条声明中设置所有背景属性

可接受任何background的值，值的排列顺序没有要求

background:( );

注意：在简记法中，任何没有指定的属性都将设置为默认值，这有可能会覆盖先前定义的样式。

---

控制间距

可以增加或减少单词之间或字母之间的距离，前者称为字间距（tracking），后者称为字偶距（kerning）。

指定字间距

word-spacing: length;

指定字偶距

letter-spacing: length;

length：一个带单位的数字，如0.4em或5px.

注意：

1. 都可以使用负数。
2. 值可能会受到字体系列或所选的对齐方式影响。
3. 如果使用em值，那么只有结果大小会被继承。例如父元素字体大小为16px,额外的单词间距为0.1em，则每个单词的额外间距也有1.6px,同时，所有子元素的额外间距也是1.6px。如果要覆盖继承的值，可以显式的为子元素设置间距。

---

增加缩进

text-indent:可以指定段落第一行前面应该空出多大的空间。

增加缩进的方法

text-indent:length;

length：一个带单位的数字，如0.4em或5px.

注意：

1. 可以为其他元素应用text-indent属性，而不仅是段落元素。但默认情况下对em、strong、cite等内联元素没有效果。可以将它们设置为display：block；或display：inline-block;，就可以强制为其应用text-indent属性。
2. 使用负数会产生悬挂缩进。使用悬挂缩进，可能需要增加文字框周围的内边距或外边距。
3. text-indent属性是继承的。
4. 如果要使用百分数或者em，那么只有生成的值的大小会被继承。
5. 要忽略继承的缩进，用0。

---

对齐文本

text-align: 让文本对齐。
left：让文本左对齐。
right：让文本右对齐。
center：让文本居中。
justify：让文本两端对齐。

注意：

1. 如果选择两端对齐，要注意单词间距和字母间距有可能受到严重的影响。
2. 适用于盒模型的元素（如p,h1~h6等，单独成行的），但对短语内容元素（如em、strong、cite等，显示在行内的）不起作用，除非将它们改成块级。

---

修改文本的大小写

text-transform:可以为样式定义文本的大小写。

capitalize：每个单词的首字母大写。
uppercase:所有字母大写。
lowercase：所有字母小写。
none：让文本保持原来的样子（可以用来取消继承的值）。

---

使用小型大写字母

很多字体都有对应的小型大写字母变体，其中一些字母是大写的，但是缩小到了小写字母的大小。

font-variant:调用小型大写字母变体。

使用小型大写字母的方法

font-variant: small-caps;

例：

<body>
    Park Guell
    <p>Park Guell</p>
</body>

body{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
p{
    font-variant: small-caps; 

}

结果：

取消小型大写字母的方法

font-variant:none;

注意：

1. 并非所有的字体都有对应的小型大写字母设计。
2. 小型大写字母在不同浏览器的效果稍有不同。

---

装饰文本

text-decoration:装饰文本，如添加下划线或者其他类型的线条。

值

underline：    添加下划线。
overline：     添加上划线。
line-through:  添加删除线。
none:          取消文本装饰。

注意：

1. 除了a元素以外，可以为其他元素应用text-decoration属性。
2. 对于正常情况下有装饰的元素（如a、del、ins）以及从父元素继承了装饰样式的元素，可以取消它们的装饰。

---

设置空白属性

默认情况下，HTML文档里的多个空格和回车会显示为一个空格，或者被忽略。

white-space:让浏览器显示这些额外的空格。

值

per:显示所有空格和回车。
nowrap:文本全部显示在一行。（可以用br元素手动创建换行，但是避免使用br,因为这样做会在HTML中混合表现，而不是让CSS控制它）
normal:正常方式处理空格。