CSS-初识cs 层叠样式表，引入样式的三种方式

Dear 丶 2023-08-17 16:19 83阅读 0赞

## 概述 ##

Cascading(级联) Style(样式) Sheets(工作表) 层叠样式表；CSS 负责页面样式，属于网页中的表示层；CSS 规则是由“选择器” 和 “格式语句” 组成，通过 “选择器” 查找页面中指定的 HTML 元素，结合 “格式语句” 来控制元素的样式；所谓的 “格式语句” 就是CSS的属性，CSS的属性有很多类别，例如：尺寸、文本、背景、边框等；目前 CSS 的最新版本是 css3

#### CSS 的语法组成 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

#### CSS 的书写位置、引入方式 ####

##### 内联式 #####

通过 `style` 直接将 CSS 样式写在 HTML 标签中（开始标签中），样式只作用于当前元素内部；优点是十分高效、便捷；但是同时也造成了不能够重用样式的缺点，不利于后期代码的维护

![在这里插入图片描述][20190928141541912.png]

##### 嵌入式 #####

所谓嵌入式，就是将 CSS 样式写在 `<style></style>` 标签之间；style 标签一般放在 head 标签中；作用范围是当前页面；代码可维护性比较差

*  HTML5 之前需要设置 type=“text/css”，用于告诉浏览器该标签包含的内容为什么类型

<head>
      <style type="text/css"> div { /* 文本颜色 */ color: #fff; /* div 元素的宽 */ width: 200px; /* 高 */ height: 100px; /* 背景色 */ background: skyblue; } </style>
    </head>

![在这里插入图片描述][20190928141831398.png]

##### 外联式 #####

###### 通过 `<link />` 标签链接外部样式文件（后缀名为 .css 的文件） ######

*  使用时需要在 HTML 文件中设置 `rel="stylesheet"`，指定当前文档与被链接文档之间的关系（外部样式表）；
 *  `href` 属性指定链接的地址，link 标签同样要放在 style 标签中；
 *  在实际开发中通常使用外联样式文件的方式，优点是可维护性好；
 *  外联 CSS 是一个单独的文件，可以复用于多个页面，在修改的时候可以针对性地修改某一块区域；
 *  相较于内联式和嵌入式，省去了到每个页面中修改样式的步骤，提高了开发效率，同时在一定程度提高了性能
 *  css 文件中只需要写 CSS 样式代码和 CSS 注释即可，不需要写别的内容

示例：

目录结构  
![在这里插入图片描述][2019092815572674.png]  
index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      
      <link rel="stylesheet" href="./css/index.css" />
    </head>
    <body>
      <div>外联 css 样式</div>
    </body>
    </html>

index.css

div { 
      color: red;
      width: 200px;
      height: 200px;
      background-color: yellow;
    }

![在这里插入图片描述][20190928160330815.png]

###### 通过 `@import` 导入部样式文件 ######

语法：`@import url("这里写文件路径")`

在 HTML 文件中使用 @import 时，必须要将其放在 style 标签中

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230810/d19174ec5d1f46abb75543b10acba6dd.png
[20190928141541912.png]: /images/20230810/510dc2b7a3fc44ef84e8179b456b85c4.png
[20190928141831398.png]: /images/20230810/79643dc4065845ec81635b81c511136a.png
[2019092815572674.png]: /images/20230810/631f50d6b35d410b9d3bb2161fa762f6.png
[20190928160330815.png]: /images/20230810/adaf09784f3b4727912ae6cb57800847.png