HTML使用样式格式化文档

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

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

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

使用方法：在HTML文档的标签之间写入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”标签定义内部样式表的区域，然后在内部样式表区域内书写对应的样式表。

<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可以同时对一个元素使用外部样式、内部样式、内联样式。这三种引用方式的优先级为内联样式 > 内部样式 > 外部样式，优先级高的方式会覆盖掉下级的样式。

HTML使用样式格式化文档相关推荐

Typora markdown公式换行等号对齐_Typora-编写博客格式化文档的最佳软件
Typora-编写博客格式化文档的最佳软件 Typora 不仅是一款支持实时预览的 Markdown 文本编辑器,而且还支持数学公式.代码块.思维导图等功能.它有 OS X.Windows.Linux ...
Typora markdown公式换行等号对齐_Typora编写博客格式化文档的最佳软件
Typora-编写博客格式化文档的最佳软件 Typora 不仅是一款支持实时预览的 Markdown 文本编辑器,而且还支持数学公式.代码块.思维导图等功能.它有 OS X.Windows.Linux ...
typroa 思维导图_Typora-编写博客格式化文档的最佳软件
Typora-编写博客格式化文档的最佳软件 Typora 不仅是一款支持实时预览的 Markdown 文本编辑器,而且还支持数学公式.代码块.思维导图等功能.它有 OS X.Windows.Linux ...
计算机被格式化怎么找回资料,电脑文档被格式化,怎么恢复格式化文档
原标题:电脑文档被格式化,怎么恢复格式化文档我们的电脑在工作时都会接收数以万计的数据,在我们日常工作生活中,最常用也最常见的数据类型,就是文档.不管是office文档也好,还是WPS文档,亦或者是阅 ...
vsCode格式化文档
vsCode格式化文档-html属性不换行(css格式话) 打开文件-首选参数-设置在搜索框输入settings 点击 settings.josn编辑代码如下: {"editor.fo ...
如何在vscode中使用快捷键ctrl+alt+L，快速格式化文档。
由于经常使用Pycharm格式化文档,所以习惯了使用ctrl+alt+L的快捷键格式化python代码.那么在vscode中如何更该为自己习惯的方式呢? 第一步:点击左下角,或者快捷键ctrl+s. ...
linux 格式化磁盘数据恢复_电脑文档被格式化,怎么恢复格式化文档！
我们的电脑在工作时都会接收数以万计的数据,在我们日常工作生活中,最常用也最常见的数据类型,就是文档.不管是office文档也好,还是WPS文档,亦或者是阅读爱好者们的TXT文档,都是以电脑数据的形式保 ...
什么插件格式化文档_推荐15款IntelliJ IDEA 神级插件
满满的都是干货所有插件都是在 ctrl+alt+s 里的plugins 里进行搜索安装 1.CodeGlance 代码迷你缩放图插件 2. Codota 代码提示工具,扫描你的代码后,根据你的敲击完 ...
Java读写word带样式,java将html导出带样式word文档
java怎么由html生成word,保留html样式 @RequestMapping(＂download＂)public void exportWord( HttpServletRequest req ...

HTML使用样式格式化文档

HTML使用样式格式化文档相关推荐

最新文章

热门文章