【前端开发从零学起】HTML使用样式格式化文档

从HTML4.0以后，所有的标签样式格式化代码都可以与HTML文档分离，单独储存在独立的css文件中，然后再通过引用的方式来调用样式表。本课主要讲解HTML引用样式的三种方法，关于css的深入学习课程将会安排专门的课程进行讲解。

由于HTML4.0后的样式独立性，样式可以独立的存在于某个区域。通过在HTML文档中插入对应的引用脚本，将样式载入。当浏览器加载到样式表后，会按照样式表的信息将HTML文档格式化。加载样式表有三种形式，本课将会一一进行讲解。

外部样式表

外部样式表是将格式化代码写入到独立的外部css文件中，然后再通过link的方式将样式表加载到HTML中。一般来说，当某些样式可以重复的应用到多个页面中时，可以选择使用外部样式表。这样大大的增加了代码的复用性，并且减少重复的冗余代码。在修改维护时，可以只通过修改外部样式表来改变整个站点的外观。

使用方法：在HTML文档的<head></head>标签之间写入<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>即可将网站根目录下的mystyle.css样式表加载到HTML文档中。

<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
</head>

内部样式表

内部样式表是通过在HTML文档中的某个区域内，使用<style>标签进行定义。内部样式表一般情况下写在<head>标签内，但是某些情况下也可以写在HTML文档的任意部分。但是切记，不要将内部样式表写在需要格式化的元素之后；因为在页面加载时会造成页面布局抖动。内部样式一般用于单个HTML文档需要单独定义小范围特定样式时使用。

使用方法：在HTML文档中使用<style type=”text/css”></style>标签定义内部样式表的区域，然后在内部样式表区域内书写对应的样式表。

<head>
<style type=“text/css”>
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

当需要对个别元素进行样式定义时，可以使用内联样式。内联样式是将css样式表通过标签属性的形式写在标签的内部。样式属性可以包含所有的css属性，并且内联样式对元素的定义具有最高优先权，所有通过外部样式、内部样式定义的样式表都会被内联样式覆盖。

使用方法：在元素标签内使用style属性，并在对应的值内写入样式表即可。

<p style=“color: red; margin-left: 20px”>
This is a paragraph
</p>

结语：HTML在4.0后分离了格式化代码，使得网站的样式定义实现了复用，大大增加了HTML文档样式的可维护性。HTML通过三种方式将css样式引用到文档中，实现格式化代码的目的。HTML可以同时对一个元素使用外部样式、内部样式、内联样式。这三种引用方式的优先级为内联样式 > 内部样式 > 外部样式，优先级高的方式会覆盖掉下级的样式。

作者：品味人生来源：前端开拓者（www.frontopen.com）