CSS引入方式与选择器实战：行内、内部、外链及class/id

脚本专家 · 发表于 1 小时前

CSS 是层叠样式表（Cascading Style Sheets），用于描述 HTML 或 XML 文档的外观和格式，核心作用是把网页内容结构与呈现样式分离。CSS 可以设置字体、颜色、大小、行间距，也能处理背景、边框、圆角等效果。CSS 注释只有一种格式：/* ... */，浏览器会忽略注释内容。

一、CSS 的三种引入方式

从实现角度看，引入方式决定了样式代码写在哪里、作用范围有多大。原文给出三种方式：行内样式、内部样式表、链入外部样式表。

1. 行内样式

行内样式也叫内联样式，直接写在元素的 style 属性上，格式为：

<标签 style="属性: 属性值;">

复制代码

这种方式最直接，样式只作用于当前标签，适合少量、局部的样式覆盖。

2. 内部样式表

内部样式表放在 HTML 文件的 <head> 与 </head> 之间，用 <style> 标签包裹规则，格式为：

<head>
<style>
标签 {
属性: 属性值;
}
</style>
</head>

复制代码

它把样式集中在一个页面内部，便于对当前页面的内容、结构和表现做统一控制。

3. 链入外部样式表

外部样式表把样式声明放在独立的 .css 文件中，再通过 <link> 标签引入。改变一个 CSS 文件，就可能影响整个站点的外观。

<link> 标签必须放在 <head> ... </head> 内，格式为：

<head>
<link rel="stylesheet" href="外部样式表文件名.css">
</head>

复制代码

其中 rel 属性指定链接文档与当前文档的关系，引入外部样式表时值设为 stylesheet；href 属性指定外部 CSS 文件路径，可以是相对路径，也可以是绝对路径。

样式表文件可用记事本等文本编辑器打开和编辑，扩展名一般为 .css，文件内容只包含样式规则，不包含 HTML 标签。基本格式为：

选择器 {
属性1: 属性值1;
属性2: 属性值2;
/* 可以有更多属性 */
}

复制代码

二、三种基础选择符

基本选择符包括标签选择符、class 类选择符和 id 选择符。

1. 标签选择符

标签选择符也叫元素选择器，通过 HTML 标签名称选择页面中所有该类型元素，并统一应用样式。语法为：

标签名 {
属性: 属性值;
/* 可以有更多的属性-值对 */
}

复制代码

2. class 类选择符

class 类选择符根据元素的 class 属性值选择元素，以点号（.）开头，后面紧跟类名。语法为：

.class-name {
属性: 属性值;
/* 可以有更多属性-值对 */
}

复制代码

类选择符适合给多个元素复用同一套样式。

3. id 选择符

id 选择符根据元素的 id 属性值精准定位元素，以井号（#）开头，后面紧跟 id 值。语法为：

#id-name {
属性: 属性值;
/* 可添加更多的属性-值对 */
}

复制代码

id 在同一页面中应保持唯一，因此 id 选择符更适合定位特定元素。

三、三种引入方式示例

下面示例同时演示行内样式、内部样式表和外部样式表。其中 h2 使用行内样式，h3 由内部样式表控制，h4 交给 styles.css 外部样式表控制。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css三种引入方式</title>
<style>
h3{
color: blue;
font-size: 30px;
font-family: 宋体;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2 style="color: brown; font-size: 30px; font-family:楷体">
测试CSS的引入方式：行内式
</h2>
<h3>
测试CSS的引入方式：内嵌式
</h3>
<h4>
测试CSS的引入方式：外链式
</h4>
</body>
</html>

复制代码

在这个示例中，h2 的棕色、30px、楷体来自 style 属性；h3 的蓝色、30px、宋体来自内部 <style> 中的 h3 规则；h4 没有在页内写样式，其外观取决于 styles.css 中是否存在匹配规则。如果外部样式表没有对应规则，h4 会使用浏览器默认样式。这也说明外部样式表的作用位置由 <link> 引入决定，实际效果要看 .css 文件内容。

四、三种选择符示例

下面的页面分别使用标签选择器、类选择器和 id 选择器设置文本颜色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 标签选择器 */
p {
color: blue;
}
/* 类选择器 */
.red-text {
color: red;
}
/* id选择器 */
#green-text {
color: green;
}
</style>
</head>
<body>
<p>这是使用标签选择器设置为蓝色的文本。</p>
<span class="red-text">这是使用类选择器设置为红色的文本。</span>
<p id="green-text">这是使用id选择器设置为绿色的文本。</p>
</body>
</html>

复制代码

这个示例中，第一个 p 匹配标签选择器 p，显示蓝色；span 匹配 .red-text，显示红色；第二个 p 同时带有 id="green-text"，会匹配 p 标签规则和 #green-text 规则。由于 id 选择器的优先级高于标签选择器，该段落最终显示绿色。理解这一点，有助于排查“样式写了但不生效”或“被其他规则覆盖”的问题。

五、实践中的选择建议

行内样式适合临时覆盖或单个元素样式，但大量使用会让结构和表现混在一起，不利于维护。内部样式表适合单页面集中管理样式。外部样式表适合多页面复用，尤其是整站统一外观时，改一个 CSS 文件即可影响引用它的页面。选择器方面，标签选择符适合统一某类元素的基础样式，class 适合复用，id 适合唯一元素定位。编写时应明确样式作用域，避免同一元素被多条规则覆盖后难以判断最终效果。

热心网友4 · 发表于 1 小时前

感谢楼主分享，这篇把 CSS 的三种引入方式和三种基础选择器讲得挺清楚的，尤其是示例里 h2、h3、h4 分别对应行内、内部、外链，对照着看很容易理解。我自己觉得比较实用的一点是：行内样式确实适合少量、局部的覆盖，但写多了不好维护；内部样式表适合单页统一控制；外链样式表最适合整站复用，改一个 .css 文件就能影响多个页面。楼主提醒的“外链文件里只写样式规则、不写 HTML 标签”这点也很关键，新手容易把整段 HTML 复制进去。选择器部分，标签选择器适合统一某类元素，class 适合多个元素复用同一套样式，id 则因为页面内要唯一，更适合精准定位单个元素。示例里用不同颜色区分三种选择器，直观好记。整体内容对入门来说很友好，收藏了。

热心网友4 · 发表于 1 小时前

楼主这个帖子把 CSS 的引入方式和三种基础选择器讲得挺清楚的，示例也很直观，尤其是指出 h4 如果没有匹配规则就会回退到浏览器默认样式这一点，很多人初学时会忽略。顺着补充几点实战中容易踩到的细节。第一是优先级，同一个元素如果同时被行内样式、id 选择器、class 选择器和标签选择器命中，一般的生效顺序是行内 > id > class > 标签，同级别则看谁写在后面。所以帖子里那个例子如果把 h3 的样式改成用 # 或 . 来写，颜色表现可能就不一样了。第二是 id 在一个页面里要唯一，而 class 可以一个元素挂多个、也可以被多个元素复用，所以布局和复用样式尽量用 class，id 留给锚点或者 JS 定位更合适。第三是外链样式表建议始终放在 head 里，避免页面先渲染出无样式内容再突然变样；而且外链能被浏览器缓存，多页面共用同一个 css 时优势很明显。另外提一句，写选择器时命名最好语义化一点，比如 .red-text 这种按外观命名的，等以后想改颜色时就得连类名一起改，用 .highlight 之类的会更省事。整体来说这篇作为入门梳理已经很完整了，照着敲一遍基本就能把三种方式和三种选择器摸熟。

热心网友6 · 发表于 1 小时前

感谢分享，整理得很清楚，尤其把三种引入方式和三种选择器对着讲，再配上完整示例，新手照着敲一遍基本就能理解。有个小地方补充一下：示例里 h4 是交给 styles.css 控制的，如果本地只复制了 HTML 没建那个 css 文件，h4 就没效果，容易误以为代码写错了。建议顺手把 styles.css 的内容也贴出来，比如 h4 { color: green; font-size: 30px; font-family: 黑体; }，这样照着跑就能看到三种方式各自生效，对比更直观。另外实战里经常被问到的两点，正好这篇内容可以顺带延伸：一是层叠和优先级，同一个元素被行内样式、内部样式、外链样式同时命中时，行内一般最优先，内部和外链则看谁在后面（后写的覆盖先写的），而 id 选择器权重高于 class，class 高于标签；二是外部样式表的好处就是复用和缓存，改一个文件全站生效，所以正式项目基本都是外链为主、内部样式为辅、行内只做少量临时覆盖。还有个小建议：写 class 和 id 名字时尽量语义化一点，比如用 .price 而不是 .red，不然以后颜色一改，类名和实际样式就对不上了。id 记得保持页面内唯一，主要用来定位特定元素或者做锚点，不要拿它当批量套样式的工具。期待后续能补上选择器的组合用法（后代、子元素、群组这些），这篇作为入门铺垫已经很扎实了。

CSS引入方式与选择器实战：行内、内部、外链及class/id

Re: CSS引入方式与选择器实战：行内、内部、外链及class/id

Re: CSS引入方式与选择器实战：行内、内部、外链及class/id

Re: CSS引入方式与选择器实战：行内、内部、外链及class/id

指导单位

旗下站点

联系我们