自定义样式的来源与优先级及选择器与权重分析示例

题目一：自定义样式的来源与优先级

<!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>自定义样式来源与优先级</title>
    <!-- *第一种外部导入方式 -->
    <!--* <link rel="stylesheet" href="../static/style.css"> -->
    <!-- *第二种外部导入方式 -->
    <style>
        @import url("../static/style.css");
    </style>
</head>
<body>
    <!-- *1.默认样式继承自html -->
    <h1>晚上好</h1>
    <!-- *2.自定义的行内样式 覆盖默认样式-->
    <h2 style="color: red;">晚上好</h2>
    <!-- *3.自定义的行内样式,而在自定义的样式中，如有同名属性中则后面的会覆盖前面的-->
    <h2 style="color: red; color: green;">晚上好</h2>
    <!-- *4.自定义的文档样式/内部样式 -->
    <h3>晚上好</h3>
    <style>
        /* 分两步
        1.找到它：选择器
        2.设置它；样式声明 */
        h3{
            color: blue;
        }
        h3{
            color: green;
        }
    </style>
    <!-- *5.有两种导入方式，即<link...>与@import ... -->
    <h4>晚上好</h4>
</body>
</html>

外部样式文件：style.css

h4 {
    color: green;
}

效果图：

题目二：选择器与权重分析示例

<!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">
    <link rel="stylesheet" href="../static/4-3.css"
    <title>选择器与权重</title>
</head>
<body>
   <div><h1 class="title" id="a1">Hello</h1></div>
</body>
</html>

对应的css文件为：

/* *h1.title权重（0，1，1） */
h1.title{
    color: red;
}
/* *div h1#a1.title权重（1，1，2） */
div>h1#a1.title{
    color: green;
}
/* *忽略权重为最大 */
h1{
    color:rosybrown !important;
}
/* *h1权重(0,0,1) */
h1{
    color:chartreuse;
}
/* *h1#a1.title权重（1，1，1） */
h1#a1.title{
    color: blue;
}

效果图：

1.首先显示的是!important,因它忽略权重为最大：

2.然后删去上面最大的权重，依次显示的分别为：

题目一：自定义样式的来源与优先级

外部样式文件：style.css

效果图：

题目二：选择器与权重分析示例

对应的css文件为：

效果图：

更多相关文章

随机推荐