HTML和CSS是不同的两种语言，但是它们对网页同时产生作用。

网页（WebPage）= 内容（html） + 表现（css） + 行为（javascript），因此需要把CSS引入HTML一起使用，让浏览器识别并正确调用CSS。当浏览器读取样式表时，要依照文本格式来读，而且当CSS样式表放在不同的地方，所产生的作用范围也是不同的。在HTML中，主要用四种方法引入CSS：行内式、内嵌式、导入式和链接式。

行内式

即在标记的style属性中设定CSS样式，这种方式本质上没体现出CSS的优势，因此不推荐使用。但是某些情况可以使用，比如只有少量的HTML内容需要指定特殊的CSS样式。示例如下：

<p style="color:red">这段文字颜色是红色</p>

<font color="#CC0000">这段文字颜色是红色</font>

<font color="#CC0000" size="5em">大号红字</font>

<span style="background:#D8D8BF">这段文字的背景颜色是黄绿色</span>

<h2 style="background-color: #FF6633">标题背景颜色</h2>

<p style="background-color: #999900">行内元素，控制段落</p>

<strong style="font-size:30px;">行内元素，strong 比 em 效果要强</strong>

<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素</div>

<em style="font-size:2em;">行内元素，em 强调</em>

用span设置一个行内样式按钮：

<span style="cursor: pointer;border-radius: 4px;background-color: #cccccc;padding: 10px 20px;display: inline-block;font-size: 20px;"><a href="http://www.mtdsj.com/" >背景灰色的字体随网页的链接按钮</a></span>

<span style="cursor: pointer;border-radius: 4px;background-color: #cc0000;color: #FFFFFF;padding: 10px 20px;display: inline-block;font-size: 20px;">字体为白色的红色按钮</span>

嵌入式

和行内式相似，适合单独页面使用，css内容写在和之间，示例如下：

<style type=”text/css”>

    P{ color:red }

</style>

导入式

<!-- 导入外部样式：在内部样式表的<style></style>标记之间导入一个外部样式表，导入时用@import。 -->  

<style type="text/css">  

 @import "jisuan.css";  

</style>

链接式

这是最常用的引入方式，效率高，代码美观，维护方便，最能体现DIV+CSS中的内容与显示分离的思想，都是优点！示例如下：

<link href="css.css" rel=”stylesheet” type=”text/css” />

小问题：CSS括号内写到最后一个样式的时候，分号是否需要省略？

可以省略，但是注意添加样式时要加上！