HTML+CSS基础课程(中)

第6章 开始学习CSS，为网页添加样式

1、认识CSS样式
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

如下列代码：
p{
font-size:12px;
color:red;
font-weight:bold;
}
使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

2、CSS样式的优势
为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色设置为红色，这时就 可以通过设置样式来设置，而且只需要编写一条css样式语句。

第一步：把这三个短语用<span></span>括起来。（见右边代码编辑器13行）
第二步：写入下列代码：（见右边代码编辑器7-8行）
span{
color:red;
}
观察结果窗口文字的颜色是否变为红色了。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS样式的优势</title>
<style type="text/css">
span{
   color:blue;
}
</style>
</head>
<body>
    <p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>```

3、CSS代码语法
css 样式由**选择符**和**声明**组成，而**声明**又由**属性**和**值**组成，如下图所示：

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2957076-7e234b5776981b4e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
**选择符：**又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
**声明：**在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:12px;color:red;}
注意：
- 最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
- 为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：
p{ font-size:12px; color:red;}

4、CSS注释代码
就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用<!--注释语句-->)。
p{
   font-size:12px;/*设置文字字号为12px*/
   color:red;/*设置文字颜色为红色*/
}

###第7章 CSS样式基本知识
1、内联式css样式，直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。这一小节先来讲解内联式。
内联式
css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
< p style="color:red">这里文字是红色。< /p>
注意要写在元素的开始标签里，下面这种写法是错误的：
< p>这里文字是红色。< /p style="color:red">
并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：
< p style="color:red;font-size:12px">这里文字是红色。< /p>

2、嵌入式css样式，写在当前的文件中
现在有一任务，把右侧编辑器中的“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短词文字字号修改为18px。
如果用上节课我们学习的内联式css样式的方法进行设置将是一件很头疼的事情（为每一个<span>标签加入sytle="font-size:18px"语句），本小节讲解一种新的方法嵌入式css样式来实现这个任务。
嵌入式css样式，就是可以把css样式代码写在**<style type="text/css"></style>**标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
<style type="text/css">span{color:red;}</style>
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。如右边编辑器中的代码。
```html
<style type="text/css">
span{
   color:blue;
}
</style>```
3、外部式css样式，写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css
”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="**base.css**" rel="stylesheet" type="text/css" />

注意：
- css样式文件名称以有意义的英文字母命名，如 main.css。
- rel="stylesheet" type="text/css" 是固定写法不可修改。
- <link>标签位置一般写在<head>标签之内。

4、三种方法的优先级
有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？在右边编辑器就出现了这种情况
- 使用内联式
CSS设置“超酷的互联网”文字为粉色。
- 然后使用嵌入式
CSS来设置文字为红色。
- 最后又使用外部式
设置文字为蓝色（style.css文件中设置）。
但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的，记住他们的优先级：内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。
其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下，什么是权值呢？在后面的9-2小节中会讲解到。

###第8章 CSS选择器
1、什么是选择器？
每一条css样式声明（定义）由两部分组成，形式如下：
选择器{ 样式;}
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器。

2、标签选择器
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、< body>、< h1>、< p>、< img>。例如下面代码：

p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。

3、类选择器
类选择器在css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。
语法：
**.**类选器名称{css样式代码;}
注意：
- **英文圆点开头**
- 其中**类选器名称**可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span **class="stress"**>胆小如鼠</span>
第三步：设置类选器css样式，如下：
.stress{color:red;}/***类前面要加入一个英文****圆点***/

4、ID选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
- 为标签设置id="ID名称"，而不是class="类名称"。
- ID选择符的前面是井号**（#）**号，而不是英文圆点**（.）**。
右侧代码编辑器中就是一个ID选择符的完整实例。
\#  setGreen{
    color:green;
}
<span id="stress">胆小如鼠</span>

5、类和ID选择器的区别
学习了类选择器和ID选择器，我们会发现他们之间有很多的相似处，是不是两者可以通用呢？我们不要着急先来总结一下他们的相同点和不同点：
**相同点：**可以应用于任何元素**不同点：**
- **ID选择器只能在文档中使用一次**。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
下面代码是正确的：
< p>三年级时，我还是一个<span **class="stress"**>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span **class="stress"**>勇气</span>来回答老师提出的问题。< /p>
而下面代码是错误的：
< p>三年级时，我还是一个<span **id="stress"**>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span **id="stress"**>勇气</span>来回答老师提出的问题。< /p>
- **可以使用类选择器词列表方法为一个元素同时设置多个样式。**我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（**不能使用 ID 词列表）。**
下面的代码是**正确**的(完整代码见右侧代码编辑器)
.stress{    color:red;}.bigsize{    font-size:25px;}< p>到了<span **class="stress bigsize"**>三年级</span>下学期时，我们班上了一节公开课...< /p>
上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。
下面的代码是**不正确**的(完整代码见右侧代码编辑器)
\#stressid{    color:red;}#bigsizeid{    font-size:25px;}< p>到了<span **id="stressid bigsizeid"**>三年级</span>下学期时，我们班上了一节公开课...< /p>
上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。

6、子选择器
还有一个比较有用的选择器**子选择器**，即大于符号(>),用于选择指定标签元素的**第一代子元素。**如右侧代码编辑器中的代码：
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
```html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<h1>食物</h1>
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>
</body>
</html>

7、包含(后代)选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
.first span{color:red;}
这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
.first span{color:red;}

.food li{
    border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/   
}
</style>
</head>
<body>
 <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--下面是本小节任务代码-->
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

</body>
</html>```

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2957076-1837179f36ff5278.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

8、通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
\* {color:red;}

<style type="text/css">
\* {color:red;
font-size:20px;
}
</style>

9、伪类选择符
更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入**鼠标滑过**字体颜色变为红色特效。
**关于伪选择符：**
    关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
a:hover{
    color:red;
    font-size:20px;
}
10、分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}
它相当于下面两行代码：
h1{color:red;}
span{color:red;}
```html
**1、把右边代码编辑器中的第一段全部文字颜色设置为绿色同时把第二段文字中的“简单”文字颜色设置为绿色**
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分组选择符</title>
<style type="text/css">
.first,span{color:green;}

</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    ![](http://upload-images.jianshu.io/upload_images/2957076-3018af513fd7a1cb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</body>
</html>

第9章 CSS的继承、层叠和特殊性

1、继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
p{color:red;}< p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。< /p>
可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;
p{border:1px solid red;}< p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。< /p>
在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。

2、特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：
p{color:red;}.first{color:green;}<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
下面是权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /权值为1/p span{color:green;} /权值为1+1=2/.warning{color:white;} /权值为10/p span.warning{color:purple;} /权值为1+1+10=12/#footer .note p{color:yellow;} /权值为100+10+1=111/**
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

3、层叠
我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
如下面代码:
p{color:red;}p{color:green;}<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。
所以前面的css样式优先级就不难理解了：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

4、重要性
我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
如下代码：
p{color:red!important;}p{color:green;}<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意：!important要写在分号的前面
这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

第10章 CSS格式化排版

1、文字排版--字体
我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。
body{font-family:"宋体";}
这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）现在一般网页喜欢设置“微软雅黑”，如下代码：
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微软雅黑";}
注意：第一种方法比第二种方法兼容性更好一些。
因为这种字体即美观又可以在客户端安全的显示出来（用户本地一般都是默认安装的）。

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

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

我来试一试：为第一段中的“胆小如鼠”设置字号为：20px，字体颜色为：red。
<!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;}
body .stress{color:red;font-size:20px;}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的<span>问题</span>，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>```

3、文字排版--粗体
我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，可以使用下面代码实现设置文字以粗体样式显示出来。
p span{font-weight:bold;}
在这里大家可以看到，如果想为文字设置粗体是有单独的css样式来实现的，再不用为了实现粗体样式而使用h1-h6或strong标签了。

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

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

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

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

<body><span>三年级</span>
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p> 
</body>
</html>```

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2957076-8cc06aa5471fbf35.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

6、文字排版--删除线
 .oldPrice{text-decoration:line-through;}
```html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>删除样式</title>
<style type="text/css">
.oldPrice{text-decoration:line-through;}
</style>
</head>
<body>
<p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> 
</body>
</html>```

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2957076-be5a1c3d185eea38.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

7、段落排版--缩进
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：

p{text-indent:2em;}
< p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。< /p>

注意：2em的意思就是文字的2倍大小。
```html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>缩进样式</title>
<style type="text/css">
p{text-indent:2em;}
</style>
</head>
<body>
    <h1>了不起的盖茨比</h1>
    <p>1922年的春天，一个想要成名名叫尼克?卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>    
    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>```

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2957076-46c02d19019a31fa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

8、段落排版--行间距（行高）
这一小节我们来学习一下另一个在段落排版中起重要作用的行间距（行高）属性（line-height），如下代码实现设置段落行间距为1.5倍。

p{line-height:1.5em;}
< p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。< /p>
```html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>行间距</title>
<style type="text/css">
p{line-height:2em;}
</style>
</head>
<body>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>```

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2957076-36c0bd9485bd2221.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

9、段落排版--中文字间距、字母间距
**中文字间隔、字母间隔设置：**
如果想在网页排版中设置**文字间隔**或者**字母间隔**就可以使用    **letter-spacing **来实现，如下面代码：
h1{ letter-spacing:50px;}...< h1>了不起的盖茨比< /h1>
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
**单词间距设置**：
如果我想设置英文单词之间的间距呢？可以使用 **word-spacing **来实现。如下代码：
h1{ word-spacing:50px;}...< h1>welcome to imooc!< /h1>
```html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>字间距</title>
<style type="text/css">
h1{letter-spacing:20px;}
</style>
</head>
<body>
<h1>hello world!你好！</h1>
</body>
</html>```

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2957076-c7a0da29642abfb9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

10、段落排版--对齐
想为**块状元素**中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。(那么什么是块状元素呢？在后面的11-1、11-2小节中会讲到。)
h1{ text-align:center;}< h1>了不起的盖茨比< /h1>
同样可以设置居左：
h1{ text-align:left;}< h1>了不起的盖茨比< /h1>
还可以设置居右：
h1{ text-align:right;}< h1>了不起的盖茨比< /h1>
```html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>对齐</title>
<style type="text/css">
div{text-align:center;}
</style>
</head>
<body>
<div>![](http://upload-images.jianshu.io/upload_images/2957076-3018af513fd7a1cb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</div>
</body>
</html>
Paste_Image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容

  • CSS 基础
    CSS基础 本文包括CSS基础知识选择器（重要！！！）继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,043评论 0赞 40
  • HTML+CSS摘要
    本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,174评论 0赞 5
  • Html&CSS（二）
    本文主要是起笔记的作用，内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,599评论 0赞 30
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1赞 92
  • 我的梦是你不可触碰的脸
    我伸手在云间 大地在海角的末端 群星跳跃在指尖 星云的罗带缠绕在耳畔 我伸手在海边 蓝天在天涯的末端 渔船游曳在指...
    慕容锦瑟阅读 264评论 0赞 2