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

m0_73365527

已于 2022-09-19 13:15:15 修改

阅读量173

点赞数

分类专栏： py系统学习笔记：第七阶段：网页编程基础文章标签： css html5 学习

于 2022-09-15 22:11:55 首次发布

本文链接：https://blog.csdn.net/m0_73365527/article/details/126869632

版权

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;
    }
```
- 效果：