一、CSS的引入方式
CSS样式表分为三类:行内样式表、内部样式表、外部样式表。
1.1内部样式表
内部样式表写在HTML页面内部，会将所有的CSS代码抽取出来单独放到一个<style>标签中。语法如下:
<style>
div {
color: blue;
font-size: 20px;
}
</style>
<style>标签一般会放在文档的<head>标签中。
这种可以控制整个页面的元素样式，且代码结构清晰，不过并没有实现结构与样式完全分离。这种被称为嵌入式引入。
1.2行内样式表
行内样式表是在元素标签内部的style属性中设置CSS样式，一些比较简单的样式修改可以用这个方法。示例如下：
<div style="color: blue; font-size: 20px;">一二三四五，上山打老虎</div>
注意双引号中间的写法是要符合CSS规范的。这种被称为行内式引入。
1.3外部样式表
外部样式表适用于样式比较多的情况，实际开发中也多使用外部样式表。主要是样式单独写在CSS文件中，之后把CSS文件引入到HTML页面中使用。
引入外部样式表的步骤如下：
1、把CSS代码都写到后缀名为.css的样式文件中。
2、在HTML页面中，使用<link>标签引入这个文件，如下:
<link rel="stylesheet" href="css的文件路径">
使用外部样式表设定CSS也被称为链接式引入或外链式。
二、使用目前所学内容制作一个页面
2.1 搭建HTML结构页面
2.1.1使用标题、段落标签
使用<h1>、<h4>、<div>、<p>标签先把文字内容整理好，梳理大致结构，如下：
2.1.2使用图像标签
使用<img>标签插入一些图片，这里省略一些图片，如下:
2.2 修改CSS样式
2.2.1修改整个页面的样式
样式包含在<style>标签内，写在</head>上方。先修改整个页面的样式，设置字体大小/行高、字体系列如下：
2.2.1再修改细节
2.2.1.1修改标题粗细、对其方式等
用标签选择器选择h1(这里页面中只有一个h1，就直接用标签选择器就好)，修改h1字体粗细、对其方式，如下：
2.2.1.2修改标题下面那行的样式并添加链接、查询框
这里运用类选择器，先给HTML语句中的<div>标签加上类名"gray"，再在CSS语句里用类选择器修改样式，如下：
再给其中的 百度百科 四个字添加链接。运用HTML中的超链接标签<a>，再在CSS语句中修改标签的样式，删掉下划线。如下：
最后加上查询框，这里运用的是HTML表单的知识点，用<input>标签，修改里面的type属性就可以让输入字段有不同的形式。
设置type为text，可以得到一个文本框。这里新认识一个button标签，就是普通的按钮，是双标签。在这两个标签里面都添加上class属性，再在CSS语句里用类选择器修改样式，最终调整效果如下：
2.2.1.3修改所有段落缩进、图片对齐方式
使用标签选择器选择p标签，修改缩进样式；使图片居中对齐，在img标签里加入class属性是没用的，要在放图片的段落标签p那里加入class属性，再使用CSS类选择器去修改。效果如下:
2.2.1.3最后一步，修改最后一行的样式
就像修改图片对齐方式一样，最后一个段落也不同于其他段落，需要加上class标签然后用CSS类选择器去选择。然后修改颜色和字号，与2.2.1.2类似，效果如下：
至此，整个页面制作完成。
