文字样式
2.文字样式
本篇主要内容如下：
- 文本颜色：color
- 缩进：text-indent
- 行高：line-height
- 字母间隔：letter-spacing
- 水平对齐：text-align
- 文本装饰：text-decoration
- 字体大小：font-size
- 字体加粗：font-weight
- 文本溢出：text-overflow
- 文字阴影：text-shadow
- 文本换行
文本颜色：color
color 属性规定文本的颜色，该属性设置了一个元素的前景色（在HTML表现中，就是元素文本的颜色）。颜色通常有如下的表达方式，背景颜色 background-color 的用法与文本颜色 color 相同。
color_name 规定颜色值 为颜色名称的颜色(比如red)
hex_number 规定颜色值为十六进制值的颜色(比如#000000)
rgb_number 规定颜色值为rgb代码的颜色(比如rgb(255,0,0))
rgb_alpha 规定颜色的值为 rgb和透明度(比如rgba(255,0,0,0.5))
inherit 规定应该从父元素继承颜色（默认）案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>color</title> <style> .p1 { color: red; }.p2 { color: #ff0000; } .p3 { color: rgb(255, 0, 0); } .p4 { color: rgba(255, 0, 0, 0.5); } </style>
</head>
<body>
<p class="p1">red 红色</p>
<p class="p2">#ff0000 十六进制的红色</p>
<p class="p3">rgb(255,0,0) rgb的红色</p>
<p class="p4">rgb(255,0,0,0.5) rgb的红色且透明度为0.5的颜色</p>
</body>
</html>
注意：像 #ff0000 这种层叠的样式可以简写为 #f00，#e30000 不能简写为 #e300。
缩进：text-indent
text-indent 属性规定文本块中首行文本的缩进。该属性值可以为像素值（px）、百分比或相对值 em，可以为正值或负值，如果使用负值，那么首行会被缩进到左边。
text-indent: 30px;em 是一个相对的大小，我们可以这样来设置1 em，0.5 em，1.5 em 等，而且 em 还可以指定到小数点后三位，比如“1.365em”。
而其中“相对”的意思是指相对于元素父元素的 font-size。比如：
如果在一个<div>设置字体大小为“16px”，此时这个<div>的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”；
使用 em 布局是希望在父节点中修改字体大小时，整个网站的页面字体都跟随变化。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-indent</title>
<style>
body {
font-size: 20px;
}.p1 { text-indent: 10px; } .p2 { text-indent: 10%; } .p3 { text-indent: 2em; } .p4 { text-indent: 40px; } </style>
</head>
<body>
<p class="p1">text-indent</p>
<p class="p2">text-indent</p>
<p class="p3">text-indent</p>
<p class="p4">text-indent</p>
</body>
</html>
行高：line-height
line-height 属性用来设置行间的距离(行高)，该属性会影响行框的布局，在应用到一个块级元素时，其定义了该元素中基线之间的最小距离，属性值下所示。
normal 默认值。设置合理的行间距
number 设置数字，此数字会与当前字体尺寸相乘来设置行间距（line-height:2）
length 设置固定的行间距(如12px)
% 基于当前字体尺寸的百分比设置行间距
inherit 规定应该从父元素继承line-height属性的值
通常在开发中，经常使用行高大小与父级元素大小相同，达到竖直居中效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>line-height</title>
<style>
* {
margin: 0;
}body { font-size: 20px; } .p1 { line-height: 2; background-color: aqua; } .p2 { line-height: 40px; background-color: aqua; } </style></head>
<body>
<p class="p1">line-height</p>
<div class="p2">line-height</div>
</body>
</html>
注意：* {
margin: 0;
} 是为了清除 p 和 body 标签默认的外边距 margin。
字母间隔：letter-spacing
letter-spacing 属性用来定义增加或减少字符间的空白(字符间距)。
normal 默认，规定字符间没有额外的空间
length 定义字符间的固定空间(允许使用负值 10px)
inherit 规定应该从父元素继承letter-spacing属性的值该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔，normal 就相当于值为0。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>letter-spacing</title>
<style>
.p1 {
letter-spacing: 10px;
}
</style>
</head>
<body>
<p class="p1">letter-spacing</p>
</body>
</html>水平对齐：text-align
text-align 属性规定元素中文本的水平对齐方式，该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。
left 左对齐，把文本排列到左边，默认值:由浏览器决定
right 右对齐，把文本排列到右边
center 居中对齐，把文本排列到中间
justify 实现两端对齐文本效果
inherit 规定应该从父元素继承text-align属性的值值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后调整单词和字母间的间隔，使各行的长度恰好相等。两端对齐在实际开发中很少使用。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-align</title>
<style>
.p1 {
text-align: left;
}
.p2{
text-align: right;
}
.p3{
text-align: center;
}
.p4{
text-align: justify;
}
</style>
</head>
<body>
<p class="p1">text-align</p>
<p class="p2">text-align</p>
<p class="p3">text-align</p>
<p class="p4">text-align</p>
</body>
</html>文本装饰：text-decoration
text-decoration 属性规定添加到文本的修饰。通常在开发中使用 text-decoration 清除或更换 a 标签的默认样式。
none 默认，定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本的一条线
blink 定义闪烁的文本，注释: IE、 Chrome或Safari不支持"blink" 属性值案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-decoration</title>
<style>
a {
text-decoration: none;
}.p1 { text-decoration: underline; } .p2 { text-decoration: overline; } .p3 { text-decoration: line-through; } </style></head>
<body>
<a href="#">我是a标签</a>
<p class="p1">我是</p>
<p class="p2">我是</p>
<p class="p3">我是</p>
</body>
</html>
练习：按照设计图编写代码
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>再别康桥</title>
<style>
body {
font-size: 20px;
}.content { width: 420px; margin: 0 auto; } p, h1 { text-align: center; } .author { text-indent: 220px; text-decoration: underline; } .p1 { color: red; } .p2 { color: green; } .p3 { color: blue; } .p4 { color: orange; } </style>
</head>
<body>
<div class="content">
<h1>再别康桥</h1>
<p class="author">徐志摩</p>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩；</p>
<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</div>
</body>
</html>
字体大小：font-size
font-size 属性用来定义文本的大小。属性值可以为绝对值或相对值。绝对值是将文本设置为指定的大小，此时不允许用户在所有浏览器中改变文本大小(不利于可用性)，绝对大小在确定了输出的物理尺寸时很有用。相对值是相对于周围的元素来设置大小，允许用户在浏览器中改变文本大小。
W3C 推荐使用相对值 em 来定义文本大小。1em 等于当前的字体尺寸，如果一个元素的 font-size 为 12 像素，那么对于该元素，1em 就等于12 像素。在设置字体大小时，em 的值会相对于父元素的字体大小的变化而改变。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体大小</title>
<style>
body {
font-size:12px;
}
.p1 {
font-size:12px;
}
.p2 {
font-size:14px;
}
.p3 {
font-size:1.5em;
}
.p4 {
font-size:180%;
}
</style>
</head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩。</p>
<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>
字体加粗：font-weight
font-weight 属性用来定义字体的粗细。属性值下所示。
nomal 默认值，定义标准的字符
bold 定义粗体字符
lighter 定义更细的字符
100-900 定义由粗到细的字符，400 等同于normal,而700等同于bold
inherit 规定应该从父元素继承字体的粗细案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体加粗</title>
<style>
body {
font-size:12px;
font-weight:bold;
}
h3 {
font-weight:normal;
}
.p1 {
font-weight:bold;
}
.p2 {
font-weight:inherit;
}
.p3 {
font-weight:100;
}
.p4 {
font-weight:600;
}
</style>
</head>
<body>
<h3>see you again</h3>
<p class="p1">It's been a long day without you my friend</p>
<p class="p2">It's been a long day without you my friend</p>
<p class="p3">It's been a long day without you my friend</p>
<p class="p4">It's been a long day without you my friend</p>
</body>
</html>文本溢出：text-overflow
在网页开发过程中，可能会遇到内容溢出而导致网页变形的问题。通常会通过 JavaScript 截取字符串或网站后台程序截取一定的字符串，将超出宽度的内容以省略号.... 显示，但这两种方法都有其不足之处，如中英文计算字符长度的问题，会导致截取字符串长度无法控制，从而降低程序的通用性。CSS3 新增了 text-overflow 属性，使用该属性可快速地解决上述问题。text-overflow 属性规定当文本溢出包含元素时发生的事情，text-overflow 在使用时父元素必须加 overflow:hidden; 并且强制文本不换行 white-space:nowrap；具体如下所示。
clip 修剪文本（默认）
ellipsis 显示省略符号来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本（只支持火狐浏览器）案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本溢出</title>
<style>
body {
font-size: 12px;
}p { width: 150px; height: 22px; line-height: 22px; overflow: hidden; white-space: nowrap; } .p2 { text-overflow: clip; } .p3 { text-overflow: ellipsis; } .p4 { text-overflow: "~~~"; } </style>
</head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩。</p>
<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>
文字阴影：text-shadow
text-shadow 属性用来给页面上的文字添加阴影效果，属性值如下所示。
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊的距离
color 可选，阴影的颜色案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字阴影</title>
<style>
body {
text-align: center;
}.p1 { font-size: 30px; color: #f30; text-shadow: 10px 10px; } .p2 { font-size: 30px; color: #f30; text-shadow: 10px 10px 5px; } .p3 { font-size: 30px; color: #f30; text-shadow: 10px 10px 5px #222; } .p4 { font-size: 30px; color: #f0c; text-shadow: 10px 10px 3px #ffff00, 20px 20px 6px #66ff66, 30px 30px 9px #00ccff; } </style>
</head>
<body>
<h1>再别康桥</h1>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩。</p>
<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>
文本换行
浏览器自身具有让文本自动换行的功能。在浏览器中显示文本的时候，会让文本在浏览器或 div 元素的右端自动实现换行。对于西方文字来说，浏览器会在半角空格或连字符的地方自动换行，而不会在单词中间突然换行，因此，浏览器不能够给较长的单词自动换行。当浏览器窗口比较窄(如手机屏幕)，而单词内容比较长(如 URL )窗口就会出现横向滚动条。对于中文来说，浏览器可以在任何一个中文文字后面进行换行。
在 CSS3 中，word-wrap 属性可以指定实现长单词与 URL 地址的自动换行。该属性值有两种：normal 和 break-word 默认值 normal 表示只允许在断字点换行，break-word 则强制指定长单词或 URL 地址在超出位置换行。
在 CSS3 中，word-break 属性可以让浏览器实现在任意位置的换行。该属性值有三种：normal、keep-all 和 break-word 默认值 normal 使用浏览器默认的换行规则；break-all 允许在单词内换行；keep-all
只能在半角空格或连字符处换行。
案例一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本换行</title>
<style>
body {
font-size: 12px;
}p { width: 150px; line-height: 16px; } .p1 { word-wrap: normal; color: #06c; } .p2 { word-wrap: break-word; color: #f00; } </style></head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩。</p>
<h3>URL</h3>
<p class="p1">http://code.web.51xueweb.cn/04/4-02.html</p>
<p class="p2">http://code.web.51xueweb.cn/04/4-02.html</p>
</body>
</html>
案例二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>词内换行</title>
<style>
body {
font-size: 12px;
}p { width: 150px; line-height: 16px; } .p1 { word-break: normal; color: #06c; } .p2 { word-break: break-all; color: #f00; } .p3 { word-break: keep-all; } </style>
</head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩。</p>
<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
<h3>see you again</h3>
<p class="p1">Quietly I go, as quietly as I came;</p>
<p class="p2">I gently wave goodbye to the clouds in the western sky.</p>
<p class="p3">The golden willows by the riverside are brides in the setting sun;</p>
</body>
</html>
章节练习：
1.按照如下设计图完成文字排版，素材下载
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>念奴娇·赤壁怀古</title>
<style>
body{
font-family: "方正行楷简体";
}
.ancientBook {
width: 500px;
height: 300px;
margin: 0 auto;
background-image: url("book.jpg");
background-repeat: no-repeat;
}
.poemTitle {
width: 20px;
line-height: 25px;
font-size: 20px;
float: right;
margin-top: 50px;
margin-right: 2px;
color: brown;
text-shadow: 1px 1px black;
}
.author {
margin-right: 10px;
margin-top: 120px;
float: right;
font-size: 17px;
width: 17px;
text-decoration: underline;
}
p {
margin-top: 25px;
float: right;
font-size: 17px;
width: 17px;
}
.line1 {
margin-right: 15px;
color: rgb(255, 0, 0);
}
.line2 {
margin-right: 15px;
color: rgb(255, 100, 0);
}
.line3 {
margin-right: 15px;
color: rgb(255, 125, 0);
}
.line4 {
margin-right: 13px;
color: rgb(255, 225, 0);
}
.line5 {
margin-right: 15px;
color: rgb(255, 255, 0);
}
.line6 {
margin-right: 15px;
color: rgb(200, 255, 0);
}
.line7 {
margin-right: 13px;
color: rgb(0, 255, 0);
}
.line8 {
margin-right: 13px;
color: rgb(0, 127, 127);
}
.line9 {
margin-right: 13px;
color: rgb(0, 127, 255);
}
.line10 {
margin-right: 15px;
color: rgb(0, 100, 255);
}
.line11 {
margin-right: 15px;
color: rgb(0, 0, 255);
}
.line12 {
margin-right: 15px;
color: rgb(69, 0, 255);
}
.line13 {
margin-right: 15px;
color: rgb(139, 0, 255);
}
.line14 {
margin-right: 13px;
color: rgb(139, 0, 190);
}
</style>
</head>
<body>
<div class="ancientBook">
<h1 class="poemTitle">念奴娇·赤壁怀古</h1>
<h4 class="author">苏轼</h4>
<p class="line1">大江东去 ，浪淘尽 ，千古</p>
<p class="line2">风流人物 。</p>
<p class="line3">故垒西边 ，人道是 ，三国</p>
<p class="line4">周郎赤壁。</p>
<p class="line5">乱石穿空 ，惊涛拍岸 ，</p>
<p class="line6">卷起千堆雪 。</p>
<p class="line7">江山如画，一时多少豪杰</p>
<p class="line8">遥想公瑾当年 ，小乔初嫁</p>
<p class="line9">了 ,雄姿英发 。</p>
<p class="line10">羽扇纶巾 ，谈笑间 ，樯橹</p>
<p class="line11">灰飞烟灭</p>
<p class="line12">故国神游 ，多情应笑我 ，</p>
<p class="line13">早生华发 。</p>
<p class="line14">人生如梦 ，一尊还酹江月 。</p>
</div>
</body>
</html>
浙公网安备 33010602011771号