CSS样式既可以作为单独的文件（.css 类型的文件）引入到HTML文档中，也可以直接写在HTML文档中，大致分为如下四种方法：

第1种和第2种方法都是将CSS样式写到当前HTML文档中，第3种和第4种方法都是将CSS样式放在外部文件中，然后再导入到当前HTML文档中。

行内元素，控制段落-1

行内元素，控制段落-2

页面演示效果如下图所示：

行内元素虽然编写简单，但通过示例可以发现存在以下缺陷：

网络上有些网页通过查看源文件可以看到这种编写方式，虽然一个网页只有一部分是如此做的，但需要分情况：

【示例2】为段落设置内嵌式样式书写方法，减少代码量。

在百度那次更换LOGO的计划中，百度给出的3个新LOGO设计方案在网民的投票下，全部被否决，更多的网民将选票投给了原有的熊掌标志。

此次更换LOGO的行动共进行了3轮投票，直到第2轮投票结束，新的笑脸LOGO都占据了绝对优势。但到最后一轮投票时，原有的熊掌标志却戏剧性地获得了最多的网民选票，从而把3个新LOGO方案彻底否决。

页面演示效果如下图所示：

在上面示例中，段落进行如下设置：文本左对齐、字体为14号、行高25像素、宽度500像素、下边距20像素、浏览器下居中、首行缩进两个文字大小空间。首行缩进使用相对单位，此设置的作用是当字体大小改变时（如font-size:18px;）依然能够实现缩进两个文字大小空间。

行内样式带来了样式修改的不方便，例如上个示例中两个段落都使用同样的样式，但需要编写两遍；而使用内嵌式样式后，就可以将所有的段落样式放在一起。

style不仅可定义CSS样式，还可以定义JavaScript脚本，故使用style时需要注意。当style的type值为text/css时，内部编写CSS样式；若style的type值为text/javascript时，内部编写 JavaScript脚本。

style中有一个比较特殊的属性title，使用title可以为不同的样式设置一个标题，浏览者就可以根据标题选择不同的样式达到浏览器中切换的效果，但IE浏览器不支持，Firefox浏览器支持此效果。

【示例3】分别为火狐浏览器设置两种字体大小样式，通过火狐“查看”菜单进行修改。

页面演示效果如下图所示。

在上面不例中，通过定义了两种字体大小，通过火狐浏览器“查看”菜单下的“页面样式”子菜单中有两个选项：字体14号、字体18号，默认情况下显示的是第一次书写的，通过菜单可以改变该页面样式。

【示例4】使用链接式为HTML代码应用样式，书写、更改方便。

我是被lianjie-2.css文件控制的，楼下的你呢？？

页面演示效果如下图所示：

p{color:#FF3333;/*字体颜色设置*/font-weight:bold;/*字体加粗*/border-bottom:3pxdashed#009933;/*设置下边框线*/line-height:30px;/*设置行高*/}

链接式样式使CSS代码和HTML代码完全分离，达到结构与样式的分开，使HTML代码专门构建页面结构，而美化工作由CSS完成。

链接式导入CSS样式的好处：

导入样式使用@import命令导入外部样式表。导入样式有6种书写方式：

我是被lianjie-2.css文件控制的，楼下的你呢？？

页面演示效果如下图所示。

在上面示例中，必须是@importURL("lianjie-2.css");p{text-indent:3em;}，而不能是p{text-indent:3em;}@importurl("lianjie-2.css");，否则将导入效果无效。在CSS文件中也需要将@import放在前面，后面加入CSS样式，否则也是无效。

@importurl("lianjie-2.css");p{text-indent:3em;}

到此这篇关于HTML嵌入CSS样式的四种实现方法的文章就介绍到这了,更多相关HTML嵌入CSS样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！ 

我是被lianjie-2.css文件控制的，楼下的你呢？？

褛上的，lianjie.css文件给我穿的花衣服。