CSS-美化网页元素-字体和文本属性
使用CSS样式美化网页文本具有如下意义。
1. 有效的传递页面信息
2. 使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户
3. 可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
4. 具有良好的用户体验
一、字体属性
1. 字体设置
CSS使用font-family属性定义文本的字体系列，字体可以使用英文字体,也可以使用多个字体，各种字体之间必须使用英文状态下的逗号隔开；
注意事项：
一般情况下，如果有空格隔开的多个单词组成的字体，加引号；
尽量使用系统默认自带的字体，保证在任何用户的浏览器中都能正确显示；
最常见的几个字体：body{font-family： 'MicrosoftYaHei',tahoma,arial,'Hiragino Sans GB';}
使用多个字体的好处是：系统按顺序检测浏览器是否有这个字体，如果不存在，就会转向下一个字体，如果存在，就优先使用；
实际开发中，字体设置常用于<body>标签，按照团队约定来设置字体。
<style>h2 {font-family: '微软雅黑';}.songti {font-family: '宋体';}#kaiti {font-family: '楷体'}* {font-family: '黑体';}</style></head><body><!-- CSS使用font-family属性定义文本的字体系列 --><h2>泰戈尔经典语录</h2><p class="songti">世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》</p><p id="kaiti">纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p><p>寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。</p><p>生如夏花之灿烂，死如秋叶之静美。</p><p>不要着急，最好的总会在最不经意的时候出现。</p></body>
2. 字体大小和粗细
CSS使用font-size属性定义字体大小
如：p {
font-size: 20px;
}
注意：
px（像素）大小是网页最常用的单位；
谷歌浏览器默认文字大小是16px；
不同浏览器可能默认的文字大小不一致，我们尽量给一个明确值大小，不要默认大小，可以给body指定字体大小；
标题标签比较特殊，，需要单独指定文字大小；
CSS使用font-width设置文字粗细
参数：normal 正常的字体 相当于number为400，声明此值将取消之前的任何设置
bold：粗体相当于number为700，也相当于b对象的作用
bolder：特粗体 lighter 细体
<style>body {font-size: 16px;}/* 标题标签比较特殊，，需要单独指定文字大小 */h2 {font-size: 16px;}.bold {font-weight: bold ;/* fong-werght: 700; *//* 这个700的后面不跟单位，等价于bold，都是加粗的效果 实际开发中，我们提倡使用数字，来表示粗体或细体*/}/* 也可以用不让字体变粗，如标题： */h2 {font-weight: 400;/* font-weight: normal; */}</style></head><body><h2>泰戈尔经典语录</h2><p class="songti">世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》</p><p id="kaiti">纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p><p class="bold">寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。</p><p>生如夏花之灿烂，死如秋叶之静美。</p><p>不要着急，最好的总会在最不经意的时候出现。</p></body>
3.字体文字样式
CSS使用font-style属性设置文本样式
参数：normal:默认值，浏览器会显示标准的字体样式
italic：浏览器会显示斜体的字体样式
<style>h2 {font-style: italic;}em {font-style: normal;}</style></head><body><h2>泰戈尔经典语录</h2><em>泰戈尔</em>
4. 字体属性-复合属性
所谓
复合属性：就是前几种属性的简写的方式
一般情况下，想要设置div文字变倾斜 加粗 字号设置为16像素，并且是微软雅黑 ，写法如下
div {
font-size: 16px;
font-family: "Microsoft Yahei";
font-weight: 700;
font-style: italic;
}
但这样写比较麻烦，代码行过多，所以我们可以使用复合属性
格式：
font: font-style font-weight font-size/line-height font-family;
注意： 不能更改顺序，且各个属性之间以空格隔开；
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性不起作用。
<style>font: italic 700 16px 'Micorsoft Yahei';</style></head><body><div>三生三世十里桃花，一心一意百行代码</div></body>
可以产生同样的效果。
二、文本属性
1.文本颜色
CSS文本属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
color属性用于定义文本颜色：
方式：1.预定义的颜色值：red green blue 等；
2.十六进制： #FF0000，#FF6600,#29D794等；
3.RGB代码：rgb（255,0）或rgb（100%，0%，0%） r-red g-green b-blue；
<style>h2 {color: deeppink;}p {color: #41c526;}#a {color: rgb(228, 37, 37);}</style></head><body><h2>泰戈尔经典语录</h2><p id="a">世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》</p><p>纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p></body>
2.对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
左对齐 left（默认） 居中对齐 center 右对齐right
<style>h2 {/* 本质是让h2盒子里的文字水平居中对齐 */text-align: center;}</style></head><body><h2>泰戈尔经典语录</h2></body>
3.文本缩进
text-indent 属性用来制定文本的第一行的缩进，通常是将段落的首行缩进；
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以为负值；
特别地：em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小
<style>p {text-indent: 20px;}.two {/* 此时写了2em，则是缩进当前元素两个文字大小的距离 */text-indent: 2em;}</style></head><body><h2>泰戈尔经典语录</h2><p>纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。生如夏花之灿烂，死如秋叶之静美。</p><p>不要着急，最好的总会在最不经意的时候出现。</p><p class="two">纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。生如夏花之灿烂，死如秋叶之静美。</p></body>
4.装饰文本
text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线
参数：
none（默认）没有装饰线 最常用
underline 下划线 链接a自带下划线 常用
overline 上划线 几乎不用
line-through 删除线 不常用
<style>.underline {text-decoration: underline;}.overline {text-decoration: overline;}.line-throug {text-decoration: line-through;}/* 可以取消链接a默认的下划线 */a {text-decoration: none;}</style></head><body><h2>泰戈尔经典语录</h2><p class="underline">世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》</p><p class="overline">纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p><p class="line-through">寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。</p><a href="#">泰戈尔经典语录</a></body>
5.行间距
line-height属性用来设置行间距，可以控制文字行与行之间的距离
行间距=上间距+文本高度+下间距
测量行高工具推荐：FastStone Capture
测量方法：一行文字的最下端到下一行文字的最下端的距离等同于行间距
<style>div {line-height: 26px;}</style></head><body><div>泰戈尔经典语录</div><p>纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。世界上最遥远的距离，不是生与死，而是我就站在你面前，你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》。。</p></body>
