从零开始学习html（十）CSS格式化排版—

一、文字排版--字体

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>认识html标签</title>
 <style type="text/css">
 
 </style>
 </head>
 <body>
     <h1>勇气</h1>
     <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
     <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
 </body>
 </html>

文字排版--字体

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。

下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。

body{font-family:"宋体";}

这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，

就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）

现在一般网页喜欢设置“微软雅黑”，如下代码：

body{font-family:"Microsoft Yahei";}

或

body{font-family:"微软雅黑";}

注意：第一种方法比第二种方法兼容性更好一些。

因为这种字体即美观又可以在客户端安全的显示出来（用户本地一般都是默认安装的）。

来试试，为段落文字设置字体为“微软雅黑”

在编辑器的第7行，输入：

body{font-family:"Microsoft Yahei";}

"Mcrosoft Yahei"必须首字母大写

二、文字排版--字号、颜色

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>字号、颜色</title>
 <style type="text/css">
 body{font-size:12px;color:#666;}
 
 </style>
 </head>
 <body>
     <h1>勇气</h1>
     <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
     <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的<span>问题</span>，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
 </body>
 </html>

文字排版--字号、颜色

可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：

body{font-size:12px;color:#666}

来试一试：为第一段中的“胆小如鼠”设置字号为：20px，字体颜色为：red。

你是否输入像下面的代码：

.stress{font-size:20px;color:red;}

三、文字排版--粗体

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>粗体签</title>
 <style type="text/css">
 p span{font-weight:bold;}
 
 </style>
 </head>
 <body>
     <h1>勇气</h1>
     <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会<a href="http://www.imooc.com">批评</a>我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
     <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
 </body>
 </html>

文字排版--粗体

我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，

可以使用下面代码实现设置文字以粗体样式显示出来。

p span{font-weight:bold;}

在这里大家可以看到，如果想为文字设置粗体是有单独的css样式来实现的，

再不用为了实现粗体样式而使用h1-h6或strong标签了。

来试试，为a标签设置粗体样式

1.在编辑器的第8行，输入：

a{font-weight:bold;}

四、文字排版--斜体

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>斜体样式</title>
 <style type="text/css">
 a {
     font-style:italic;
 }
 
 </style>
 </head>
 
 <body>
 <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>
 </body>
 </html>

文字排版--斜体

以下代码可以实现文字以斜体样式在浏览器中显示：

p a{font-style:italic;}
 
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>
 
来试试，把段落中的文字全部设置为斜体样式

你是否在第9行输入像下面一样的代码：

p{font-style:italic;}


font-style:normal/oblique/italic/inherit

五、文字排版--下划线

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <title>下划线样式</title>
 <style type="text/css">
 a {
     text-decoration:underline;
 }
 
 </style>
 </head>
 
 <body>
 <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>
 </body>
 </html>

文字排版--下划线

有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字，可以使用下面代码来实现：

p a{text-decoration:underline;}
 
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

来试试，为第一段中的“三年级”文字设置为下划线样式

1、在代码编辑器的第14行插入下面span标签代码：

<span>三年级</span>

2、在代码编辑器的第10行输入下面代码：

span{text-decoration:underline;}

none;默认无效果

underline; 底部横线
overline;顶部横线
line-through;中间横线
blink;文字闪烁（有的浏览器不支持）
inherit;（和父节点一致）

【复习】
Css的字体属性常用的有：
font-family: 字体系列
font-size: 字体尺寸
font-style: 字体样式
font-weight: 字体粗细

font-weight是字体粗细，有可用值normal(默认)、bold(粗)、bolder(更粗)、lighter(更细)，

甚至可以用数值来表示粗细（normal=400）。
注意：这里是有“细”的，“weight”并不是“粗”的意思！！！

font-style中的可用值：italic(斜体)、oblique(倾斜)

所以粗体和斜体只是不同字体属性的某个可用值。

font-family:设置字体；
font-size:字体大小；
font-weight:bold：设置为粗体样式；
font-style:italic：设置为斜体样式；
text-decoration:underline：文字设置下划线；
text-decoration:line-through：删除线；
text-indent:2em：缩进；（注意：2em的意思就是文字的2倍大小。）
line-height:2em：行高；
word-spacing:50px：单词间距；
letter-spacing:20px:字母间距；
text-align:center：水平居中对齐；

a:hover{font-weight:bold;color:red;}//鼠标移到后变红色
 
ext-decoration:none; 加段这个代码就可以去掉下划线了