py系统学习笔记：第七阶段：网页编程基础：第二章：CSS3：19.CSS 的引入方式与选择器的使用

发布于：2022-12-16 ⋅ 阅读:(304) ⋅ 点赞:(0)

目录

 css的引入方式

内联样式（行内样式）

代码：背景设定为红色，字体大小变为24px

实际效果：

内部样式

代码：为h1设定背景颜色为红色，大小为100px的样式

效果：

外部样式

代码：创建名为h1.css的文件，并利用link标签应用到单个文档之中

效果：

选择器的使用（以下的实际效果都是采取外部引入的方式）

全局选择器

代码：在h1.css的文件中将背景颜色设为绿色，字体大小设定为20px

效果：

元素选择器

代码：在h1.css的文件中，只为h2标签设定样式

效果：

特性：

代码：在h1.css的文件中，为span设置样式

效果：

类选择器

特点：

例如：为以下代码设定样式

代码：在h1.css的文件中，为cs1与cs2的class类设置样式

效果：

id选择器

特点：

代码：在h1.css的文件中，为标签h2，即id为mytitle的标签设置样式

效果：

样式优先级实验（优先级从高到低: 行内样式（内联引用） > ID选择器 > 类选择器 > 元素选择器）

内联引用与内部引用的优先级实验

条件搭建：

实际效果：

结论：

内部引用与外部引用的优先级实验

条件搭建：

实际效果：

结论：

各类选择器的优先级实验

条件搭建：（为避免以上的覆盖影响，将以已知的优先级倒序进行设定）

实际效果：

结论：

  •  css的引入方式

    • 内联样式（行内样式）

      • 在相关的标签内使用样式（style）属性。 Style 属性可以包含任何 CSS 属性（优先级最高，但缺乏整体性和规划性，不利于维护，维护成本高）

      • 代码：背景设定为红色，字体大小变为24px

        • <p style="background-color:red;font-size:24px;">CSS</p>

      • 实际效果：

    • 内部样式

      • 在head头标签内引用style标签，并使用选择器对单个文档的标签进行个性化样式设定。（单个页面内的CSS代码具有统一性和规划性，便于维护，但是在 多个页面之间容易混乱）

      • 代码：为h1设定背景颜色为红色，大小为100px的样式

        • <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>Document</title>
    <style>
        h1{
        background-color:green;
        font-size:100px;
        }
    </style>
</head>
<body>
    <h1>CSS</h1>
</body>

      • 效果：

    • 外部样式

      • 单独创建css文档，在需要使用的文档头标签处，使用link将css文件中将生效的个性化标签效果生效。

      • 代码：创建名为h1.css的文件，并利用link标签应用到单个文档之中

        • 创建名为h1.css的文件 
          • h1{
    background-color:green;
    font-size:100px;
}
        • 利用link标签应用到单个文档 
          • <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>Document</title>
    <link rel="stylesheet" href="h1.css">
</head>
<body>
    <h1>CSS</h1>
</body>

      • 效果：

        • 未引用前：
        • 引用后：

  • 选择器的使用（以下的实际效果都是采取外部引入的方式）

    • 全局选择器

      • 可以与任何元素匹配（整个页面都为此样式），优先级最低，一般做样式初始化

      • 代码：在h1.css的文件中将背景颜色设为绿色，字体大小设定为20px

        • *{
    background-color:green;
    font-size:20px;
}

      • 效果：

    • 元素选择器

      • 又称标签选择器，选择的是页面上所有这种类型的标签，所以经常描述 “共性”，无法描述某一个元素的“个性”（即只能针对这一类标签做统一设定，但并未能对这一类标签做另类处理（因此引出类选择器、id选择器））

      • 代码：在h1.css的文件中，只为h2标签设定样式

        • h2{
    background-color:green;
    font-size:20px;
}

      • 效果：

      • 特性：

        • 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等

        • 无论这个标签藏的多深，一定能够被选择上

        • 选择的所有，而不是一个

        • 例如：在如下嵌套下，将所有的span标签都设定为背景为红，大小为100px的样式

          •     <p>css7,<span>css8</span></p>

                <div>

                    <ul>

                        <li>

                            <ol>

                                <li><span>在这里</span></li>

                                <li>不是这里</li>

                            </ol>

                        </li>

                        <li>不是这里</li>

                    </ul>

                </div>

        • 代码：在h1.css的文件中，为span设置样式

          • span{
    background-color:red;
    font-size:20px;
}

        • 效果：

    • 类选择器

      • 规定用圆点.来定义，针对你想要的所有标签使用

      • 特点：

        • 类选择器可以被多种标签使用
        • 类名不能以数字开头
        • 同一个标签可以使用多个类选择器。用空格隔开

      • 例如：为以下代码设定样式

        •     <h1>css1</h1>

              <h2 class="cs1">css2</h2>

              <h3 class="cs2">css3</h3>

              <h4 class="cs1 cs2">css4</h4>

              <h5>css5</h5>

              <h6>css6</h6>

              <p>css7,<span>css8</span></p>

      • 代码：在h1.css的文件中，为cs1与cs2的class类设置样式

        • .cs1{
    background-color:red;
}
.cs2{
    font-size:50px;
}

      • 效果：

    • id选择器

      • 针对某一个特定的标签来使用，只能使用一次。（虽然其他的标签使用别的id样式也能成效，但id代表唯一，不建议个人标签的id供其他标签使用）

      • 特点：

        • id唯一
        • id不能以数字开头
        • id选择器的名称前使用#

      • 代码：在h1.css的文件中，为标签h2，即id为mytitle的标签设置样式

        •     <h1>css1</h1>

              <h2 id="mytitle">css2</h2>

              <h3>css3</h3>

              <h4>css4</h4>

              <h5>css5</h5>

              <h6>css6</h6>

              <p>css7,<span>css8</span></p>

          • #mytitle{
    background-color:red;
    font-size: 50px;
}

      • 效果：

  • 样式优先级实验（优先级从高到低: 行内样式（内联引用） > ID选择器 > 类选择器 > 元素选择器）

    • 内联引用与内部引用的优先级实验

      • 条件搭建：

        • 内部引用：在同一文档中的head头标签的style标签中，为p设定背景颜色为绿色的样式设定。
        • 内联引用：在同一文档中的，p标签内设定背景颜色为红色的样式。
        • 代码： 
          • <!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>Document</title>
    <style>
        p{
            background-color:green;
        }
    </style>
</head>
<body>
    <p style="background-color: red;">是红色的内联引用优先级高还是绿色的内部引用优先级高</p>
</body>
</html>

      • 实际效果：

      • 结论：

        • 内联引用的优先级比内部引用的优先级高

    • 内部引用与外部引用的优先级实验

      • 条件搭建：

        • 内部引用：在同一文档中的head头标签的style标签中，为p设定背景颜色为绿色的样式。
        • 外部引用：创建名为h1.css的文件，为p标签设定背景颜色为红色的样式，并在同一文档中了利用link标签进行引用。
        • 代码 
          • p{
    background-color:red;
}
#名为h1.css文件的设定
          • 同一文档的引用方式1：style在前，link在后 
            • <!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>Document</title>
    <style>
        p{
            background-color:green;
        }
    </style>
    <link rel="stylesheet" href="h1.css">
</head>
<body>
    <p>是红色的外部引用优先级高还是绿色的内部引用优先级高</p>
</body>
</html>
          • 同一文档的引用方式2：link在前，style在后 
            • <!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>Document</title>
    <link rel="stylesheet" href="h1.css">
    <style>
        p{
            background-color:green;
        }
    </style>
</head>
<body>
    <p>是红色的外部引用优先级高还是绿色的内部引用优先级高</p>
</body>
</html>

      • 实际效果：

        • 引用方式1的效果：

        • 引用方式2的效果：

      • 结论：

        • 两者的优先级取决于引用的先后顺序（为同一标签设定时会出现后者效果覆盖前者的效果）：
          • 如若引用方式1：style在前，link在后，那么内部优先级高。
          • 而若如引用方式2：link在前，style在后，那么则是外部优先级高

    • 各类选择器的优先级实验

      • 条件搭建：（为避免以上的覆盖影响，将以已知的优先级倒序进行设定）

        • 为元素选择器的p标签设定背景颜色为蓝色
        • 为具有类选择器的p标签设定背景颜色为黄色
        • 为具备ID选择器的p标签设定背景颜色为红色
          • 文档中的设定 
            • <!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>Document</title>
    <link rel="stylesheet" href="h1.css">
</head>
<body>
    <p id="my" class="MY">优先级是否为:ID选择器 > 类选择器 > 元素选择器</p>
</body>
</html>
          • 名为h1.css中的设定
            • 验证1：验证ID选择器 > 类选择器 > 元素选择器 
              • p{
    background-color:blue;
}

.MY{
    background-color: yellow;
}

#my{
    background-color: red;
}

            • 验证2：验证类选择器 > 元素选择器

              • p{
    background-color:blue;
}

.MY{
    background-color: yellow;
}

      • 实际效果：

        • :验证1

        • 验证2：

      • 结论：

        • 同一标签下，选择器中的优先级为ID选择器 > 类选择器 > 元素选择器

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布