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

news2024/10/5 14:18:22

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>

运行结果：