由于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>

· 文本效果

Web开发——文字样式相关推荐

列举在移动Web开发中经常会设置的特殊样式！
在实际开发中,移动Web页面的设计风格更接近App(手机应用),而不是传统的网页.为了有更好的用户体验,我们可以给移动Web页面设置一些特殊样式.下面为列举在移动Web开发中经常会设置的特殊样式,具体 ...
Web开发day3：CSS样式补充
目录 1. hover 2. after 3. position 4. border 进度来源:最新Python的web开发全家桶(django+前端+数据库) 网址:最新Python的web开发全家 ...
轻松掌握移动端web开发【尺寸适配】常用解决方案
本文主要针对初学移动端web开发的读者,笔者也是初学者,文中有众多用词不当之处望读者指正. 前言从开始做web app开发到现在,一直对移动端的尺寸适配有一种模糊的概念.能说得上来'媒体查询','栅 ...
静态Web开发 JQuery
静态Web开发 JQuery 伍章 JQuery 1节介绍JQuery和顶级对象 <<锋利的JQuery>> JQuery官网: http://jquery.com (下载j ...
CoffeeScript和Sass提高Web开发效率
CoffeeScript和Sass提高Web开发效率如果您是一位每天都要编写JavaScript和Css的Web前端开发人员,可能您已经开始感觉到JavaScript的关键字 var, functi ...
Python学习笔记：web开发2
前言最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...
浅谈移动Web开发：深入概念
转载自http://kb.cnblogs.com/page/508655/ 如果你是一个开始接触移动Web开发的前端工程师,那么你或许也遇到了和我曾经遇到的过问题:有太多新的概念需要掌握,太多相似的概 ...
Web开发融会贯通：深入浅出告别浮云
如果你是一个Web开发初学者,那么你难免会在网上搜索HTML,CSS,XML,JS(Javascript),DOM,XSL等等这些词的意思,然而,随着学习的深入.当你把他们搅在一起,你又糊涂了,你会不 ...
初学web开发需要掌握哪些方面？
初学者如何学习web开发,需要掌握哪些方面?这里我写下我的一些的建议,仅供参考.高手可以飘过. 第一步:学习HTML和CSS HTML(超文本标记语言)是网页的核心,学好HTML是成为Web开发人员的 ...

Web开发——文字样式