HTML前端技术中内部样式表,《前端开发从零学起》Lesson.6 HTML使用样式格式化文档...

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

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

外部样式表

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

使用方法：在HTML文档的

标签之间写入即可将网站根目录下的mystyle.css样式表加载到HTML文档中。

内部样式表

内部样式表是通过在HTML文档中的某个区域内，使用

使用方法：在HTML文档中使用标签定义内部样式表的区域，然后在内部样式表区域内书写对应的样式表。

body {background-color: red}

p {margin-left: 20px}

内联样式

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

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

This is a paragraph

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