当前位置：首页 > news >正文

css学习3（三种样式表与样式控制优先级）

news 2025/9/13 17:47:06

1、外部样式表：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表，也要放到<head>中。

2、外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

3、当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部<head>定义内部样式表。

4、当样式仅需要在一个元素上应用一次时，要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

5、如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

6、多重样式优先级：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

7、如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

8、CSS优先规则：内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

h3 {color:blue;
}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>内外样式</title><!--<link rel="stylesheet" type="text/css" href="style.css"/>--><style type="text/css">h3{color:green;}#content-id{/*id控制*/color: red;}.content-class{/*类控制*/color: blue;}div{/*元素控制*/color: yellow;}</style><link rel="stylesheet" type="text/css" href="style.css"/>        </head><body><h3>外部蓝色，内部绿色</h3><div class="content-class" id="content-id">PHP</div></body>
</html>

运行结果：