HTML中嵌入CSS样式的四种方法详解：行内、内嵌、链接与导入

HTML嵌入CSS样式的四种实现方法

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

• 行内样式：使用HTML标签的style属性定义CSS样式。
• 内嵌样式：使用<style>标签在HTML文档头部（<head>与</head>之间）定义CSS样式。
• 链接式：使用<link>标签引入外部CSS样式表文件。
• 导入式：使用@import命令导入外部CSS样式表文件。

其中，前两种方法将CSS样式直接写入当前HTML文档，后两种则将样式放在外部文件中再导入。下面逐一详解。

1. 行内样式（内联样式）

行内样式是将CSS样式直接写在HTML标签的style属性中。这种方式最为直接，但修改起来也最不方便，因为每个标签都需要单独设置。

示例1：为多个标签应用行内样式

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body>
    <p>行内元素，控制段落-1</p>
    <h2>行内元素，h2 标题元素</h2>
    <p>行内元素，控制段落-2</p>
    <strong>行内元素，strong 比 em 效果要强</strong>
    <div>行内元素，div 块级元素</div>
    <em>行内元素，em 强调</em>
</body>
</html>

在上面的示例中，行内样式通过HTML元素的style属性嵌入，多个CSS属性值用分号;分隔。例如<div>标签的样式设置：

<div>行内元素，div 块级元素</div>

段落<p>标签设置背景色为褐色（background-color: #999900），标题<h2>标签设置背景色为红色（background-color: #FF6633）。<strong>标签设置字体大小为30像素（font-size:30px;），<div>标签设置高度、行高、背景色和文字颜色，<em>标签使用相对单位设置字体大小（font-size: 2em;）。

从示例中可以看出，两个段落<p>标签虽然内容不同，但使用了相同的背景色设置，却需要分别添加两次style属性，这体现了行内样式的重复性问题。

行内样式的缺陷

• 每个标签都需要单独添加style属性，代码冗余。
• 后期维护成本高，修改样式时需要逐个页面、逐个标签进行修改。
• 页面体积增大，浪费服务器带宽和流量。

不过，在某些场景下，行内样式仍有其用武之地：

• 快速调试或临时修改当前样式，无需担心影响其他部分。
• 后台编辑器生成的样式，或后台功能不完善时，编辑人员直接通过编辑器修改颜色、字体等效果。

2. 内嵌样式

内嵌样式将CSS代码写在HTML文档的头部（<head>和</head>之间），通过<style>标签包裹。这种方式解决了行内样式重复书写的问题，但样式仅对当前页面有效。

示例2：为段落设置内嵌样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌式</title>
<style type="text/css">
p{
    text-align: left;  /*文本左对齐*/
    font-size: 18px;  /*字体大小 18 像素*/
    line-height: 25px;  /*行高 25 像素*/
    text-indent: 2em;  /*首行缩进2个文字大小空间*/
    width: 500px;  /*段落宽度 500 像素*/
    margin: 0 auto;  /*浏览器下居中*/
    margin-bottom: 20px;  /*段落下边距 20 像素*/
}
</style>
</head>
<body>
    <p>“百度”这一公司名称便来自宋词“众里寻他千百度”。（百度公司会议室名为青玉案，即是这首词的词牌）。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。在这之后，由于在搜索引擎中，大都有动物形象来形象，如 SOHU 的狐，如 GOOGLE 的狗，而百度也便顺理成章称作了熊。百度熊也便成了百度公司的形象物。</p>
    <p>在百度那次更换 LOGO 的计划中，百度给出的 3 个新 LOGO 设计方案在网民的投票下，全部被否决，更多的网民将选票投给了原有的熊掌标志。</p>
    <p>此次更换 LOGO 的行动共进行了 3 轮投票，直到第 2 轮投票结束，新的笑脸 LOGO 都占据了绝对优势。但到最后一轮投票时，原有的熊掌标志却戏剧性地获得了最多的网民选票，从而把 3 个新 LOGO 方案彻底否决。</p>
</body>
</html>

在上述示例中，所有段落统一设置了文本左对齐、字体大小18像素、行高25像素、宽度500像素、下边距20像素、浏览器下居中以及首行缩进两个文字大小空间。首行缩进使用相对单位em，这样即使字体大小改变，缩进效果依然能保持两个文字大小的空间。

与行内样式相比，内嵌样式避免了重复编写相同的样式规则，使代码更加简洁。

style标签的title属性

<style>标签有一个特殊的title属性，可以为不同的样式设置标题，浏览者可以根据标题选择不同的样式，实现浏览器中的样式切换效果。但需要注意的是，IE浏览器不支持此功能，Firefox浏览器支持。

示例3：为Firefox浏览器设置两种字体大小样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css" title="字体14号">
p{
    text-align: left;  /*文本左对齐*/
    font-size: 14px;  /*字体大小 14 像素*/
    line-height: 25px;  /*行高 25 像素*/
    text-indent: 2em;  /*首行缩进两个文字大小空间*/
    width: 500px;  /*段落宽度 500 像素*/
    margin: 0 auto;  /*浏览器下居中*/
}
</style>
<style type="text/css" title="字体 18 号">
p{
    text-align: left;  /*文本左对齐*/
    font-size: 18px;  /*字体大小 18 像素*/
    line-height: 25px;  /*行高 25 像素*/
    text-indent: 2em;  /*首行缩进两个文字大小空间*/
    width: 500px;  /*段落宽度 500 像素*/
    margin: 0 auto;  /*浏览器下居中*/
    color: #6699FF;  /*字体颜色的改变*/
}
</style>
</head>
<body>
    <p>“百度”这一公司名称便来自宋词“众里寻他千百度”。（百度公司会议室名为青玉案，即是这首词的词牌）。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。</p>
</body>
</html>

在Firefox浏览器中，通过“查看”菜单下的“页面样式”子菜单，可以选择“字体14号”或“字体18号”，默认显示第一次书写的样式。

3. 链接式

链接式通过HTML的<link>标签将外部CSS样式表文件链接到HTML文档中。这是目前网站应用最广泛的方式，也是最实用的方式。它将HTML文档和CSS文件完全分离，实现结构层与表示层的彻底分离，增强了网页结构的扩展性和CSS样式的可维护性。

示例4：使用链接式引入外部样式表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <p>我是被 lianjie-2.css 文件控制的，楼下的你呢？？</p>
    <h3>楼上的，<span>lianjie.css</span> 文件给我穿的花衣服。</h3>
</body>
</html>

通过link标签可以同时链接多个CSS文件，且都有效。网站制作者通常将公共样式放入一个CSS文件，当前页面特有的样式则编写在另一个CSS文件中。

lianjie.css文件代码：

h3{
    font-weight: normal;  /*取消标题默认加粗效果*/
    background-color: #66CC99;  /* 设置背景色 */
    height: 50px;  /*设置标签的高度*/
    line-height:50px;  /* 设置标签的行高 */
}
span{
    color: #FFOOOO;  /* 字体颜色 */
    font-weight:bold;  /* 字体加粗 */
}

lianjie-2.css文件代码：

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

链接式样式使CSS代码和HTML代码完全分离，HTML专注于构建页面结构，CSS负责美化工作。

链接式导入CSS样式的好处

• CSS文件可以被多个HTML文件共享，使网站所有页面样式统一。
• 将CSS代码集中在一个文件中，便于管理和维护，减少代码量。
• 修改CSS文件时，所有引用该文件的HTML页面都会自动更新，无需逐个修改上传。

4. 导入式

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

@import daoru.css;
@import 'daomxss';
@import "daoru.css";
@import url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");

示例5：导入样式表并设置body背景色

<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    @import url(lianjie.css);
    @import url(daoru.css);
    body { background-color: #e4e929; }
</style>
</head>
<body>
    <div>
        <p>我是被 lianjie-2.css 文件控制的，楼下的你呢？？</p>
        <h3>褛上的，<span>lianjie.css</span>文件给我穿的花衣服。</h3>
    </div>
</body>
</html>

需要注意的是，@import必须写在CSS规则之前，否则导入效果无效。例如，正确的写法是@import url("lianjie-2.css"); p{text-indent: 3em;}，而不能写成p{text-indent:3em;} @import url("lianjie-2.css");。在CSS文件中同样需要将@import放在最前面。

daoru.css文件代码：

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

通过以上四种方法，开发者可以根据实际需求选择最合适的CSS嵌入方式。行内样式适合快速调试，内嵌样式适合单页面样式定义，链接式适合多页面统一管理，导入式则适用于CSS文件之间的相互引用。