由于Web是HTML文档的集合体,有动态的元素、静态的元素、功能展示的元素,它们的呈现不能够是杂乱无章的,这就需要对各种文字样式进行排版。
排版是对文本样式进行各种操作(例如改变文本的颜色、字符间距、行高、文字对齐方式等,并需实现文本缩进、字体装饰等内容)。
· 文本样式:
一、color
color属性规定文本的颜色。
这个颜色还会应用到元素的所有边框,除非被border-color或另外某个边框颜色属性覆盖。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="文本颜色">
<title>文本颜色</title>
<style type="text/css">
body{
color:#015B00; /*网页字体颜色*/
}
p{
width:250px;
height:20px;
font-size:12px;
}
</style>
</head>
<body>
<p style="color:red">轻轻的我走了,正如我轻轻的来;</p>
<p style="color:#F00">我轻轻的招手,作别西天的云彩。</p>
<p style="color:rgb(33,119,199)">那河畔的金柳,是夕阳中的新娘;</p>
<p style="color:inherit">波光里的艳影,在我的心头荡漾。</p>
</body>
</html>
二、text-indent
text-indent属性规定文本块中首行文本的缩进。
该属性值可以为像素值、百分比或相对值em,也可以为正值或负值,如果使用负值,那么首行会被缩进到左边。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="文本缩进">
<title>文本缩进</title>
<style type="text/css">
body{
color:#015B00;
margin:50px;
}
p{
width:250px;
height:20px;
font-size:12px;
}
</style>
</head>
<body>
<p style="text-indent:24px;">轻轻的我走了,正如我轻轻的来;</p>
<!--当前段落字体大小的3倍-->
<p style="text-indent:3em;">我轻轻的招手,作别西天的云彩。</p>
<p style="text-indent:3%;">那河畔的金柳,是夕阳中的新娘;</p>
<p style="text-indent:-24px;">波光里的艳影,在我的心头荡漾。</p>
</body>
</html>
三、line-height
line-height属性用来设置行间的距离(行高)。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="行高">
<title>行高</title>
<style type="text/css">
p {
width:200px;
height:100%;
margin:0 auto;
font-size:12px;
}
.p1 {
line-height:22px;
background:#0CF;
}
.p2 {
line-height:4;
background:#C9F;
}
.p3 {
line-height:250%;
background:#F93;
}
.p4 {
line-height: normal;
background:#ccc;
}
</style>
</head>
<body>
<p class="p1">轻轻的我走了,正如我轻轻的来;</p>
<p class="p2">我轻轻的招手,作别西天的云彩。</p>
<p class="p3">那河畔的金柳,是夕阳中的新娘;</p>
<p class="p4">波光里的艳影,在我的心头荡漾。</p>
</body>
</html>
四、letter-spacing
letter-spacing属性用来定义字符间的空白大小(字符间距)。
该属性定义了在文本字符框之间插入多少空间,由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔,normal就相当于值为0。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="字母间隔">
<title>字母间隔</title>
<style type="text/css">
p {
width:400px;
height:100%;
font-size:12px;
}
.p1 {
letter-spacing:normal;
}
.p2 {
letter-spacing:1px;
}
.p3 {
letter-spacing:3px;
}
</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>
<h3>再别康桥</h3>
<p class="p1">我轻轻的招手,作别西天的云彩。</p>
<p class="p2">那河畔的金柳,是夕阳中的新娘;</p>
<p class="p3">波光里的艳影,在我的心头荡漾。</p>
</body>
</html>
五、text-align
text-align属性规定元素中文本的水平对齐方式。
该属性通过指定行框与某点对齐,来设置块级元素内文本的水平对齐方式。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="水平对齐">
<title>水平对齐</title>
<style type="text/css">
p {
width:200px;
height:100%;
line-height:18px;
margin:0 auto;
font-size:12px;
}
.p1 {
text-align:left;
}
.p2 {
text-align:center;
}
.p3 {
text-align:right;
}
</style>
</head>
<body>
<p class="p1">轻轻的我走了,正如我轻轻的来;</p>
<p class="p2">我轻轻的招手,作别西天的云彩。</p>
<p class="p3">那河畔的金柳,是夕阳中的新娘;</p>
<p>波光里的艳影,在我的心头荡漾。</p>
</body>
</html>
六、text-decoration
text-decoration属性规定添加到文本的修饰,修饰的颜色由“color”属性设置。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="水平对齐">
<title>文字装饰</title>
<style type="text/css">
p {
width:200px;
height:100%;
line-height:22px;
font-size:12px;
}
.p1 {
text-decoration:underline;
}
.p2 {
text-decoration:overline;
}
.p3 {
text-decoration:line-through;
}
.p4 {
text-decoration:blink;
}
</style>
</head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了,正如我轻轻的来;</p>
<p class="p2">我轻轻的招手,作别西天的云彩。</p>
<p class="p3">那河畔的金柳,是夕阳中的新娘;</p>
<p class="p4">波光里的艳影,在我的心头荡漾。</p>
</body>
</html>
七、text-transform
text-transform属性用来对文本的大小写进行转换处理。 该属性会改变元素中的字母大小写,而不管源文本的大小写。 如果值为capitalize,则要对某些字母大写,但是并没有明确定义如何确定哪些字母要大写,这取决于浏览器如何识别出各个“词”。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="字符转换">
<title>字符转换</title>
<style type="text/css">
p {
width:400px;
height:100%;
font-size:12px;
}
.p1 {
text-transform:uppercase;
}
.p2 {
text-transform:lowercase;
}
.p3 {
text-transform:capitalize;
}
</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>
</body>
</html>
八、white-space
white-space属性设置如何处理元素内的空白。 该属性声明建立布局过程中如何处理元素中的空白符,其中值pre-wrap和pre-line是CSS2.1中新增的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="元素空白处理">
<title>元素空白处理</title>
<style type="text/css">
p {
width:150px;
height:100%;
line-height:22px;
font-size:12px;
}
.p1 {
white-space: nowrap;
}
.p2 {
white-space: pre-wrap;
}
.p3 {
white-space: pre-line;
}
</style>
</head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了, 正如我轻轻<br>的来;</p>
<p class="p2">我轻轻的招手, 作别西天的云彩 。</p>
<p class="p3">那河畔的金柳, 是夕阳中的新娘;</p>
</body>
</html>
九、word-spacing
word-spacing属性用来增加或减少单词(英文)间的空白(即字间隔)。 针对这个属性,“字”定义为由空白符包围的一个字符串。如果指定为长度值,会调整字之间的通常间隔,normal就等同于设置为0,允许指定负长度值,这会让字之间挤得更紧。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="文字间隔">
<title>文字间隔</title>
<style type="text/css">
p {
width:400px;
height:100%;
font-size:12px;
}
.p1 {
word-spacing:normal;
}
.p2 {
word-spacing:2px;
}
.p3 {
word-spacing:6px;
}
</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>
<h3>再别康桥</h3>
<p class="p1">我轻轻的招手,作别西天的云彩。</p>
<p class="p2">那河畔的金柳,是夕阳中的新娘;</p>
<p class="p3">波光里的艳影,在我的心头荡漾。</p>
</body>
</html>
十、first-letter
first-letter属性用来实现文本首字下沉效果,此伪对象仅作用于块对象。 :first-letter选择器用来指定元素第一个字母的样式。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="首字下沉">
<title>首字下沉</title>
<style type="text/css">
p {
width:200px;
height:200px;
font-size:12px;
}
p:first-letter {
color:red;
font-size:24px;
float:left;
}
</style>
</head>
<body>
<p>轻轻的我走了,正如我轻轻的来;我轻轻的招手,作别西天的云彩。那河畔的金柳,是夕阳中的新娘;波光里的艳影,在我的心头荡漾。</p>
</body>
</html>
· 字体样式
一、font-family
font-family规定元素的字体系列。
font-family可以把多个字体名称作为一个“回退”机制。
在CSS中,有两种不同类型的字体系列。 通用字体系列:拥有相似外观的字体系统组合 。
特定字体系列:具体的字体系列(如黑体、微软雅黑等)。
除了各种特定的字体系列外,CSS定义了5种通用字体系列,分别是Serif字体、Sans-serif字体、Monospace字体、Cursive字体、Fantasy字体。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="字体系列">
<title>字体系列</title>
<style type="text/css">
p {
width:400px;
height:100%;
line-height:22px;
font-size:12px;
}
.p1 {
font-family: "宋体";
}
.p2 {
font-family: "微软雅黑";
}
.p3 {
font-family: "黑体";
}
.p4 {
font-family:"微软雅黑", "宋体";
}
.p5 {
font-family:"Arial Black";
}
.p6 {
font-family:Georgia;
}
.p7 {
font-family: "Microsoft YaHei UI", "Arial Unicode MS", Calibri;
}
</style>
</head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了,正如我轻轻的来;</p>
<p class="p2">我轻轻的招手,作别西天的云彩。</p>
<p class="p3">那河畔的金柳,是夕阳中的新娘;</p>
<p class="p4">波光里的艳影,在我的心头荡漾。</p>
<h3>see you again</h3>
<p class="p5">It's been a long day without you my friend</p>
<p class="p6">It's been a long day without you my friend</p>
<p class="p7">It's been a long day without you my friend</p>
</body>
</html>
二、font-size
font-size属性用来定义文本的大小。
该属性值可以为绝对值或相对值。 绝对值是将文本设置为指定的大小,此时不允许用户在所有浏览器中改变文本大小(不利于可用性),绝对大小在确定了输出的物理尺寸时很有用。 相对值是相对于周围的元素来设置大小,允许用户在浏览器改变文本大小。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="字体大小">
<title>字体大小</title>
<style type="text/css">
body {
font-size:12px;
}
p {
width:400px;
height:100%;
line-height:22px;
}
.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>
<!--相对于父容器中的字体大小的180%-->
<p class="p4">波光里的艳影,在我的心头荡漾。</p>
</body>
</html>
三、font-weight
font-weight属性用来定义字体的粗细。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="字体加粗">
<title>字体加粗</title>
<style type="text/css">
body {
font-size:12px;
font-weight:bold;
}
p {
width:400px;
height:100%;
line-height:22px;
}
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>
四、font-style
font-style属性用来定义字体的风格,该属性值有三种:normal、italic、oblique。
normal:默认值,对文本不做任何改动。
italic:定义文本斜体显示。斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。
oblique:定义文本倾斜显示。倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="字体风格">
<title>字体风格</title>
<style type="text/css">
body {
font-style:oblique;
}
p {
width:400px;
height:100%;
line-height:22px;
}
.p1 {
font-style:normal;
}
.p2 {
font-style:italic;
}
.p3 {
font-style:inherit;
}
</style>
</head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了,正如我轻轻的来;</p>
<p class="p2">我轻轻的招手,作别西天的云彩。</p>
<p class="p3">那河畔的金柳,是夕阳中的新娘;</p>
<p class="p4">波光里的艳影,在我的心头荡漾。</p>
</body>
</html>