HTML学习

最新推荐文章于 2025-12-01 06:30:00 发布

原创最新推荐文章于 2025-12-01 06:30:00 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

开发工具专栏收录该内容

9 篇文章

订阅专栏

本文介绍了HTML的基本结构和常用标签，详细解析了CSS的各种选择器、样式设置方法以及盒模型等核心概念。

HTML学习网站

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type"content="text/html;charset=utf-8">
        <title>只做我的第一个网页</title>
    </head>
    <body>
        <h1></h1>
    </body>
</html>

```<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>制作我的第一个网页</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

html标签	功能
`<em></em>`	斜体
`<strong></strong>`	粗体
`<span></span>`	指定格式需先在style{span{color:red}}定义
`<q></q>`	定义引用
`<blockquote></blockquote>`	长文本引用
`<address></address>`	定义地址
`<code></code>`	定义单行代码
`<pr></pr>`	定义多行代码
`<ul><li>`	添加无序表
`<ol><li></li></ol>`	添加有序列表
`<div id="ID Name"></div>`	分出单独模块
`<table summary="表格简介文本"></table>`	摘要内容不会再浏览器中显示出来，它的作用是郑家表格的可读性，使搜索引擎能更好的读懂表格，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容
`<tbody></tbody>`	当表格内容非常多时，表格会下载一点显示一点，如果加上此标签，这个个表格就要等到表格内容完全下载完才会显示
`<tr></tr>`	表格的一行
`<td></td>`	表格的一个单元格
`<th></th>`	表格表头
`<a hred="目标网址" title="鼠标滑过显示的文本"`>	链接到另一个页面，title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。
`<a href="目标网站" target="_blank">click</a>`	在新的窗口打开目标

查看邮件信息
查看实例

功能	关键字	功能详解
邮箱地址	mailto:	邮件会自动跳用默认的客户端电子邮件程序，并在收件人框中填上收件的人的地址
抄送地址	cc=	在收件人地址后用cc=地址,可以填写抄送地址
密件抄送地址	bcc=	收件人地址后用bcc=地址，可填上密件抄送地址
多个收件人，抄送，密件抄送人	;	用分号分隔开多个收件人地址，可以实现给多个收件人发送邮件功能
邮件主题	subject	用subject=添加邮件主题
邮件内容	body=	用body=添加邮件内容

html标签（空标签）	功能
	换行
&nbsp	空格
	分隔行
	插入图片

使用表单标签，与用户交互

网站是怎样与用户交互？答案是使用HTML表单，表单是可以吧浏览者输入的数据传送到服务器端，这样，服务器端程序就可以处理表单传过来的数据。
语法:

讲解：

:成对出现的。
action：浏览器输入的数据被传送到的地方，比如一个PHP页面
methed：数据传输的方式(get/post)



<input type="text" name="username"/>

<label for="pass">密码:</label>

<input type="password" name="pass" />

</from>

注意：
1.所有的表单控件(文本框，文本域，按钮，单选框，复选框等)都必须放在标签之间。（否则用户输入的信息提交不到服务器上）。
2.methed:

文本框，密码输入框

当用户要在表单中输入字母，数字等内容时，就会用到文本输入框，文本框可以转化为密码输入框。

语法:

<from>
<input type="text/password" name="名称" value="文本"
></from>

1.type：当type="text"时，输入为文本框。
当type="password"时收入为密码框。
2.name：为文本框命名，以被后台asp，php使用。
3.value：为文本输入框设置默认值（一般起到提示作用）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本输入框、密码输入框</title>
</head>
<body>
<form  method="post" action="save.php">
    账户: 
	<input type="text" name="myname" />
	<br>
	密码: 
    <input type="password" name="pass" />

</form> 
</body>
</html>

文本域，支持多行文本输入

当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法:

<textarea rows="行数" cols="列数">文本</textarea>

1.clos:多行输入与的列数。
2.rows多行输入域的行数。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本域</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>个人简介：</label>
    <textarea cols="10" rows="10">在这里输入内容...</textarea>
    <input type="submit" value="确定"  name="submit" />
    <input type="reset" value="重置"  name="reset" />
</form> 
</body>
</html>

使用单选框，复选框让用户选择

在使用表单设计调查表时为了减少用户操作，使用选这款更是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中的选项，用户可以任意选择多项，甚至全选。

语法：

<input type="radio/checkbox" value="值" name="名称" checked="ckecked" />

1.type:

当type="radio"时，控件为单选框。

当type="checkbox"时，控件为复选框。
2.value：提交数据到服务器的值(后台程序PHP使用)
3.name:位控件命名，以备后台ASP，PHP使用。
4.checked：当设置checked="ckecked"时，该选项没默认选中。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>单选框、复选框</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender" />
    <label>女</label>
    <input type="radio" value="2"  name="gender" />
</form>
</body>
</html>

使用下拉列表框，节省空间。

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选，又可以复选。
参考代码：

讲解：
1.value:
！
2.selected=“selected”:
设置selected="selected"属性，则该选项就被默认选中。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉列表框</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>
</body>
</html>

使用下拉列表框进行多选

下拉列表也可以进行多选，在标签中设置multiple="multiple"属性，就可以实现多选功能，在windows操作系统下，进行多选时，按下Ctrl同时单击可以多选。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用下拉列表框进行多选</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select multiple="multiple">
      <option value="看书" >看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>
</body>
</html>

使用提交按钮

在表单中有两种按钮可以使用，分别是：提交按钮，重置。当用户需要提交表单信息到服务器时，需要用到提交按钮。
语法:

<input type="submit"  value="提交">

type:只有当type值设置为submit时，按钮才有提交作用。
value:按钮上现实的文字。

使用重置按钮，重置表单信息

当用户需要设置表单信息到初始状态时，比如用户输入"用户名"后，发现书写有误，可以使用重置按钮，使用输入款刚恢复到初始状态。只要把type设置为"reset"就可以。
语法:

type:只有当type值设置为reset时，按钮才有重置作用。
value:按钮上显示的文字。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>重置按钮</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
    <input type="submit" value="确定"  />
    <input type="reset" value="重置"  />
</form>
</body>
</html>

form表单中的label标签

label标签不会像用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性，当你咋ilabel标签内点击文本就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关联的表单控件上）

语法:

<label for id="控件id名称">

注意：标签的for属性中的值应当和控件相关的id属性值要相同。
例子：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form中的lable标签</title>
</head>

<body>
<form>
   <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <br />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
  <p>你对什么运动感兴趣:</p>
  <label for="慢跑">慢跑</label>
  <input type="radio" name="慢跑" id="慢跑" />
  <br />
   <label for="登山">登山</label>
  <input type="radio" name="登山" id="登山" />
  <br />
   <label for="篮球">篮球</label>
  <input type="radio" name="篮球" id="篮球" />
  <br />
</form>

</body>
</html>

认识CSS样式

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

如下列代码:

p{  
    font-size:12px;
    color:red;
    font-weight:bold;
}

使用CSS样式的一个好处是通过定义某个样式，可以让不同的网页位置的文字有着统一的字体，字号或者颜色等。

CSS语法代码

CSS样式由选择符和声明组成，而声明又有属性和值组成，如下图所示:

选择符：又称选择器，指明网页中要应用样式规则的元素，例如本例的网页中所有的段§的文字将变成蓝色，而其他元素无影响。
声明：在英文大括号"{}“中的就是声明，属性和值之间用英文冒号”:“分隔。当有多条声明时，中间可以用分号”;"分隔。
如:

p{font-size:12px;color:red}

注意：
1.最后一条生命可以没有分号，但是为了以后修改方便，已满也加上分号。
2.为了使样式更像易读，可以将每条代码写在一个新行内，如下所示:

p{
    font-size:12px;
    color:red
}

CSS注释代码

就像在HTML的注释一样，在CSS中也有注释语句：用/注释语句/来标明(HTML中使用 )

CSS样式

内嵌式CSS样式：

红色文字

嵌入式样式:

<style type="text/css">
span{
color:red;
}
</style>

嵌入式样式必须在之间，并且一般情况下嵌入式CSS样式写下之间。
外部CSS样式，写在一个单独的文件中，这个CSS样式以.css为扩展名，在内(不是在

嵌入式css样式

慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！

```

span{
   color:red;
   font-size:20px;
   
}

内联式优先级>嵌入式优先级>外部式优先级

选择器

每条CSS样式声明(定义)由两部分构成，形式如下:

选择器{
    样式;
    }

{}之前的部分就是选择器，选择器指明了{}中的样式的作用对象，也就是样式作用于网页中的哪些元素。比如下面代码编辑器中的第7行代码中的"body"就是选择器

<!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:red;	
}
</style>
</head>
<body>
<p>慕课网（IMOOC）是学习编程最简单的免费平台。慕课网提供了丰富的移动端开发、php开发、web前端、html5教程以及css3视频教程等课程资源。它富有交互性及趣味性，并且你可以和朋友一起编程。</p>
</body>
</html>

给标题设置格式为不加粗的正常字体，颜色为红色

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
h1{font-weight:normal;color:red;}



</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>

类选择器

类选择器在CSS样式编码中是最常用到的。语法如下：

.类选择器名称{CSS样式代码;}
1.胆小如鼠
2.shi使用class="类选择器名称"为标签设置一个类，如下:

胆小如鼠
3.设置类选择器CSS样式,如下:

.stress{color:red;} /类前面要加上一个英文原点。

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

ID选择器

在很多方面，ID选择器豆类食欲类选择器，但也有些重要区别。
1.位标签设置id=“ID 名称”，而不是class=“类名称”。
2.ID选择符的前面是#,而不是英文.。

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

</body>
</html>

类和ID选择器的区别

相同点:可以用于任何元素。
不同点:

ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可使用多次。
可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一和元素同时设置多个样式，可以用类选择器方法实现，ID选择器是不可以的。

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

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

子选择器

还有一个比较有用的选择器是子选择器，即大于号(>)，用于指定票钱元素的第一代子元素。
.food>li{border:1px slid red;}

<!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>

包含选择器

包含选择器，即加入空格，用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码。
.first span{color:red;}
选择器与子选择器的区别:

清注意这个选择器与子选择器的区别，子选择器仅仅是指他的直接后代，或者你可以你结尾作用于子元素的第一代后代。而后代选择器是作用于所有后代元素。后代选择器通过空格来进行选择，而子选择器通过>进行选择。

总结:>作用于元素的第一代后代，空格作用于元素的所有后代。

<!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>

通用选择器

通用选择器是功能强大的选择器，它使用一个(*)指定，它的作用是匹配html页面中的所有标签元素。

* {color:red}

将所有的标签元素字体设置为红色。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>* 选择符</title>
<style type="text/css">
* {color:red;}
* {font-size:20px;}


</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>

伪类选择符

伪类选择符可以允许给html不存在的标签设置样式。比如给html中一个标签元素的鼠标滑过状态设置字符颜色。

a:hover{color:red;}
上面一行代码就是为a标签鼠标划过的装袋设置字体颜色变红。
关于伪选择符：

关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

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

分组选择符

当你想为html中多个标签元素设置同一样式时，可以使用分组选择符(,)，如下代码中的h1,span标签同时设置字体颜色为红色:
h1,span{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{color:red;}
.first,#second span{color:green;}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>

继承

css中的某些样式具有继承性，继承是一种规则，它允许样式不仅应用于特定HTML标签元素，而且应用于其后代。比如下面的代码：某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用p标签中的所有子元素文本，这里子元素为span标签。
``p{color:red;}

三年级时，我还是一个胆小如鼠的小女孩。

`` p标签中的所有元素都设置为了红色。 ``` 继承

勇气

三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。

到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。

··· ## 特殊性有时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式？ ``` p{color:red;} .fisrt{color:green;}

三年级时，我是一个胆小如鼠的人

``` p和.first都匹配到了这个标签上，那么会显示什么颜色呢？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*/

层叠

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

css样式优先级：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

重要性

我们在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值，这时候我们可以用!important来解决。

注意：!important要写在分号的前面

这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式

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

文字排版

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。

body{font-family:“宋体”;}
这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，如下代码：

body{font-family:“Microsoft Yahei”;}
或

body{font-family:“微软雅黑”;}
注意：第一种方法比第二种方法兼容性更好一些。

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
body{font-family:"Microsoft Yahei";}

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

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

<!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;}
a{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>

斜体

<!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;    
}
p{font-style:italic;}
</style>
</head>

<body>
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p> 
</body>
</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>
<p><span>三年级</span>时，我还是一个<a>胆小如鼠</a>的小女孩。</p> 
</body>
</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>

缩进

中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现

p{text-indent:2em;}

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

注意：2em的意思就是文字的2倍大小; ``` 缩进样式

菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。

··· ## 中文字间距，字母间距如果想在网页排版中设置文字间隔或者字母间隔就可以使用letter-spacing 来实现。 >>h1{ letter-spacing:50px; } ...

了不起的盖茨比

注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
单词间距设置:
如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现

h1{
word-spacing:50px;
}
…

welcome to imooc!

<!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>

对齐

想为块状元素中的文本，图片，设置居中样式？可以用text-align样式代码，如下代码可以实现文本居中显示。

h1{
text-align:center;
}

了不起的盖茨比

<!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><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div>
</body>
</html>

元素分类

在CSS中，html中的标签大致分为三种不同的类型：块状元素，内联元素，内联块状元素。
常用的块状元素有:

...

,
,
,
,, ,`,,. 常用的内联元素有：`

、、
、、、、、、、、

常用的内联块状元素有：

、

元素分类–块级元素

在html中

、

、、
和
就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{dislpay:block;}
块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>内联块状元素</title>
<style type="text/css">
div,p{background:pink;}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<p>段落1段落1段落1段落1段落1</p>
</body>
</html>

内联元素

在html中，、、、和就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

div{
display:inline;
}

…

我要变成内联元素

内联元素的特点： 1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的 wiki 中有介绍，感兴趣的小伙伴可以去查看。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行内元素标签</title>
<style type="text/css">
a,span,em{
	background:pink;/*设置a、span、em标签背景颜色都为粉色*/
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
<span>33333</span>
<span>44444</span><em>555555</em>
</body>
</html>

内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

提示：下一小节是用视频动画来讲解css中的盒模型。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内联块状元素</title>
<style type="text/css">
a{
    display:inline-block;
	width:20px;/*在默认情况下宽度不起作用*/
	height:20px;/*在默认情况下高度不起作用*/
	background:pink;/*设置背景颜色为粉色*/
	text-align:center; /*设置文本居中显示*/
}
</style>
</head>
<body>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</body>
</html>

边框

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：

div{
border:2px solid red;
}
上面是 border 代码的缩写形式，可以分开写：

div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用象素（px）。

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

如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：

div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边(上、右、左)边框的设置：

border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>边框</title>
<style type="text/css">
li{
  border-bottom:1px dotted #ccc;  
}
</style>
</head>
<body>
<ul>
    <li>别让不会说话害了你</li>
    <li>二十七八岁就应该有的见识</li>
    <li>别让不好意思害了你</li>
</ul>
</body>
</html>

宽度和高度

和模型和高度与我们平时所得物体的宽度和高度不一样，css内定义的宽和高指的是填充里面的范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素的高度也是同理。

比如：

css代码：

div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
html代码：

文本内容

元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图： ![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5tdWtld2FuZy5jb20vNTQzYjRjYWUwMDAxYjM0MzA0MzAwMzUwLmpwZw) li是块状元素，块状元素有一个特点之一：在不设置宽度的情况下，显示为父容器的100%。 ``` 宽度和高度

别让不会说话害了你
二十七八岁就应该有的见识
别让不好意思害了你

``` ## 填充元素内容与边框之间是可以设置距离的，称为填充。填充可以分为上，右，下，左（顺时针）。如下代码 div{padding:20px 10px 15px 30px;} 也可以分开写： div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px; } 如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：

div{padding:10px 20px;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
    width:100px;
    height:100px;
    padding:10px;
    border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
</body>
</html>

边界

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：

div{margin:20px 10px 15px 30px;}
也可以分开写：

div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的边界都为10px;可以这么写：

div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：

div{ margin:10px 20px;}
总结一下：padding和margin的区别，padding在边框里，margin在边框外。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>边距</title>
<style type="text/css">
div{
    width:300px;
    height:300px;
	border:1px solid red;	
}
#box1{margin-bottom:30px;}

</style>
</head>
<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>   
</body>
</html>

css布局模型

清楚了CSS 盒模型的基本概念、盒模型类型，我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

流动模型

先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
#box1{
    width:300px;
    height:100px;
}
div,h1,p{
    border:1px solid red;
}
</style>
</head>
<body>
    <div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
    <h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
    <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
    
    <div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
</body>
</html>

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">

</style>
</head>
<body>
    <a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>
    <strong>强调</strong>
</body>
</html>

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

当然你也可以同时设置两个元素右浮动也可以实现一行显示

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

又有小伙伴问了，设置两个元素一左一右可以实现一行显示吗？当然可以：

层模型

什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。

如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

绝对位置

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

我来试一试:设置div标签相对于浏览器，（相对于以前位置右上角）向左移动100象素，向下移动20象素。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>absolute样式</title>
<style type="text/css">
div{
    width:200px;
    height:200px;
	border:2px red solid;
    position:absolute;
    
    
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

什么叫做“偏移前的位置保留不动”呢？

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
#div1{
    width:200px;
    height:200px;
	border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
	
    
    
}

</style>
</head>
<body>
	<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移的位置</span>
</body>
</html>

固定定位

fixed：表示固定定位，与absolute定位类型相似，但他的相对移动坐标是视图（屏幕内网页窗口）本身。由于视图本身是固定的，他不会随浏览器窗口的滚动条而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或者改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内的某个位置，不会受到文档流动影响，这与backgroud-attatchment fixed属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
#div1{
    width:200px;
    height:200px;
	border:2px red solid;
	position:fixed;
    bottom:0;
    right:0;
    
}

</style>
</head>
<body>
	<div id="div1"></div>
	<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
</body>
</html>

Relative与Absolute组合使用

小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

相对参照元素进行定位

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

#box1{
width:200px;
height:200px;
position:relative;
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{
position:absolute;
top:20px;
left:30px;
}

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

颜色值的缩写
关于颜色值的css样式是可以所写的，当你设置的颜色是16紧致的色彩值时，如果每两位的值相同，可以缩写一半。
例子：
p{color:#000000;}可以缩写为p{color:#000;}P{color:#336699}可以缩写为p{color:#369;}

字体缩写

网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：

body{font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:"宋体",sans-serif;
    
}

或者可以缩写为

body{font:italic small-cap cold 12px/1.5em "宋体",sans-serif}

这里的间歇方式你至少要指定font-size和font-family属性其他的属性（如font-style，font-weight，font-varient，line-height）如未指定将自动使用默认值。
在缩写时font-size和line-height中要加入‘/’斜杠。
一般情况下对于中文网站，英文还是比较少的，所以下面的缩写比较常用：

body{font:12px/1.5em "宋体",sans-serif;}

自已偶只好，行间距，中文字体，英文字体设置。

颜色值

在网页中的颜色设置时非常重要的，有字体颜色，背景颜色，边框颜色，设置颜色的方法有多种。

英文命令颜色
P{color:red;}
RGB颜色，这与Photoshop中的RGB颜色是一致的。P{color:rgb(133,45,200);}
每一项的值可以是0-255之间的整数，也可以是0%~100%放入百分数。如：
P{color:rgb(20%,33%,25%);}
十六进制的颜色
这种颜色设置方法实现比较普遍的使用方法，其原理也是RGB，但是每一个值由0-255变成了0-ff，P{color:#00ff;}

长度值

长度燕尾总结一下，目前常用到的xp，em,%其实都是相对单位。

px

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设90像素=1英寸）。实际情况是浏览器会使用显示器的实际像素值以有关，在目前大多数设计者都偏向使用像素作为设计单位。

em

就是本元素给字体的font-size值，如果元素的font-size为14px，那么1em=14px；如果font-size是18px，那么1emm=18px。如下代码：

P{font-size:12px;text-ident:2em;}
上面的代码就可以实现首航段落缩进24px（也就是两个字体大小的距离）
下面特殊情况
但当给font-size设置单位为em时，此时计算的标准以p的父元素的font-size为基础，如下代码
html:

以这个例子为例.

css:

p{font-size:14px}
span{font-size:0.8em;}

结果span中的字体’例子’大小就为11.2px(140.8=11.2px)
3. 百分比
p{font-size:12px;line-height:130%}
设置行间距为字体的130%(121.3=15.6px)

水平居中设置=行内元素

我们在实际工作中需要用到水平剧中的场景，比如为了美观，文化在那个的标题，文章的标题一般都是水平居中显示的。
这里我们都得分两种情况：行内元素还是块状元素，块中元素里面又分为定宽块状元素，以及不定块状元素。
如果被设置元素文本为文本，图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现。（父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素）如下代码：

<body>
<div class="txtCenter">我想要在父容器中水平显示。></div>
</body>

css代码

<style>
  .txtCenter{
    text-align:center;
  }
</style>

水平居中设置-定宽块元素

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

</style>

也可以写成：

margin-left:auto;
margin-right:auto;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
div{
    border:1px solid red;
	
	
	margin:20px auto;
}

</style>
</head>

<body>
<div>我是定宽块状元素，我要水平居中显示。</div>
</body>
</html>

水平居中总结-不定宽块状元素的方法(一)

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

1. 加入 table 标签  
2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

这一小节我们来讲一下第一种方法：

为什么选择方法一加入table标签? 是利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括、、 )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

举例如下：

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>

css代码

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table{
    margin:0 auto;
}

/*下面是任务区代码*/
.wrap{
    background:#ccc;
}
</style>
</head>

<body>
<div>
<table>
  <tbody>
    <tr><td>
	<ul>
    	<li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
</table>
</div>

<div class="wrap">
  设置我所在的div容器水平居中  
</div>
</body>
</html>

水平居中总结-不定宽块状元素方法（二）

除了上一节讲到的插入table标签，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。

第二种方法：改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center 来实现居中效果。如下例子：

html代码：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码：

<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

水平居中总结-不定宽块状元素方法（三）

除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。

方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。

代码如下：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码：

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

垂直居中-父元素高度确定的单行文本

这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。
任务

我来试试：添加代码为任务区中的 class 为 wrap-center 的div设置水平居中。（记得点击右上角的全屏按钮查看效果哦！）

我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。

这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。

本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

如下代码：

<div class="container">
    hi,imooc!
</div>

css代码：

<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>

.wrap h2{
    margin:0;
    height:100px;
  
    background:#ccc;
}
</style>
</head>

<body>

<!--下面是代码任务部分-->
<div class="wrap">
    <h2>hi,imooc!</h2>
</div>
</body>
</html>

垂直居中-父元素高度确定的多行文本（方法一）

父元素高度确定的多行文本、图片等的竖直居中的方法有两种：

方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：

html代码：

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代码：

table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

垂直居中-父元素高度确定的多行文本（方法二）

除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。

html代码：

<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

css代码：

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。

隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

position : absolute
float : left 或 float:right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是没有效果的，但是设置为 position:absolute 以后，就可以了。

<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>

css代码

<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

想不起 display:inline-block 是做什么的小伙伴们，单击“元素分类–内联块状元素”可返回到前面小节进行复习。

HTML学习

使用表单标签，与用户交互

文本框，密码输入框

文本域，支持多行文本输入

使用单选框，复选框让用户选择

使用下拉列表框，节省空间。

使用下拉列表框进行多选

使用提交按钮

使用重置按钮，重置表单信息

form表单中的label标签

认识CSS样式

CSS语法代码

CSS注释代码

CSS样式

选择器

类选择器

ID选择器

类和ID选择器的区别

子选择器

包含选择器

通用选择器

伪类选择符

分组选择符

继承

勇气

层叠

重要性

文字排版

缩进

了不起的盖茨比

welcome to imooc!

对齐

了不起的盖茨比

元素分类

...

, , , ,, ,,,. 常用的内联元素有：

元素分类–块级元素

、、 和 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a{dislpay:block;} 块级元素特点：

内联元素

内联块状元素

边框

宽度和高度

边界

css布局模型

流动模型

层模型

绝对位置

相对定位

固定定位

Relative与Absolute组合使用

字体缩写

颜色值

长度值

px

em

水平居中设置=行内元素

水平居中设置-定宽块元素

水平居中总结-不定宽块状元素的方法(一)

水平居中总结-不定宽块状元素方法（二）

水平居中总结-不定宽块状元素方法（三）

垂直居中-父元素高度确定的单行文本

垂直居中-父元素高度确定的多行文本（方法一）

垂直居中-父元素高度确定的多行文本（方法二）

隐性改变display类型

,
,
,
,, ,`,,. 常用的内联元素有：`

、、
和
就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{dislpay:block;}
块级元素特点：