本文主要内容是初步接触CSS的了解的内容。

CSS 基础

CSS 简介

CSS的全称为：层叠样式表（Cascading Style Sheets）
什么是CSS：
- CSS是一种样式表语言，用于控制网页的外观和布局
- 它允许你定义页面元素的样式，如颜色、字体、大小、边距、边框等
CSS规则：
- CSS样式以规则的形式表达，每个规则由一个选择器和一组属性值组成。
- 选择器用于指定要应用样式的HTML元素
- 属性值对应于所选元素的样式特性
CSS 文件：
- CSS样式可以包含在HTML文档的<style>标签中，也可以存储在外部的.css文件中，然后通过链接引用
- 使用外部样式表的好处包括样式重用和维护的便捷性
简单理解：CSS 可以美化 HTML，让HTML 更漂亮
核心思想： HTML 搭建结构，CSS 添加样式，实现了结构与样式的分离

CSS的编写位置

行内样式

写在标签的style属性中。（又称：内联样式）。
语法：<h1 style="color: red; font-size: 20px;">hello，我是一个小测试哦</h1>
注意点📢
1. style 属性的值不能随便写，写要符合CSS 语法规范，是名:值;的形式。
2. 行内样式表，只能控制当前标签的样式，对其他标签无效。

存在问题(O_O)?

书写繁琐、样式不能复用、并且没有体现出结构与样式分离的思想，不推荐大量使用，只有对当前元素添加简单样式时，才偶尔使用。

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  <meta charset="UTF-8" />
    <title>行内样式</title>
  </head>
  <body>
    <h1 style="color: red; font-size: 20px;">hello，我是一个小测试哦</h1>
  </body>
  </html>
  ```

内部样式

写在html页面内部，将所有的CSS代码提取出来，单独放在<style>标签中。

语法：

<style>
    h1 {
      color: chartreuse;
      font-size: 40px;
    }
</style>

注意点📢
1. <style> 标签理论上可以放在HTML文档的任何地方，但一般都放在<head>标签中。
2. 此种写法，样式可以复用、代码结构清晰。

存在问题(O_O)?

并没有实现结构与样式完全分离

多个HTML页面无法复用样式

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
      <meta charset="UTF-8" />
      <title>内部样式</title>
      <style>
        h1 {
          color: chartreuse;
          font-size: 40px;
        }
        h2 {
          color: purple;
          font-size: 30px;
        }
        p {
          color:salmon;
          font-size: 50px;
        }
        img {
          width: 200px;
        }
      </style>
    </head>
    <body>
      <h1 >hello，我是一个小测试哦</h1>
      <h2>正在学习前端</h2>
      <p>橙子</p>
      <p>柚子</p>
      <p>橘子</p>
      <img src="../images/test.png" alt="test" >
    </body>
</html>

外部样式

写在单独的.css文件中，随后在HTML 文件中引入使用。
语法

新建一个扩展名为.css的样式文件，把所有的CSS代码都放入此文件中。
```
h1 {
  color: chartreuse;
  font-size: 40px;
}
```
在HTML文件中引入.css文件。
<link rel="stylesheet" href="./position.css">

注意点📢
1. <link>标签要写在<head>标签中。
2. <link>标签属性说明：
  href：引入的文档来自于哪里
  rel：（relation：关系）说明引入的文档与当前文档之间的关系。
3. 外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了`结构与样式的完全分离
4. 实际开发中，几乎都使用外部样式，这是最推荐的使用方式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>外部样式</title>
  <link rel="stylesheet" href="./position.css">
</head>
<body>
  <h1 >hello，我是一个小测试哦</h1>
  <h2>正在学习前端</h2>
  <p>橙子</p>
  <p>柚子</p>
  <p>橘子</p>
  <img src="../images/test.png" alt="test" >
</body>
</html>

h1 {
  color: chartreuse;
  font-size: 40px;
}
h2 {
  color: purple;
  font-size: 30px;
}
p {
  color:salmon;
  font-size: 50px;
}
img {
  width: 200px;
}

样式表的优先级

优先级规则：行内样式 > 内部样式 = 外部样式
1. 内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的（后来者居上)。
2. 同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（后来者居上)。

分类	优点	缺点	使用频率	作用范围
行内样式	`优先级最高`	1. 结构与样式未分离 2.代码结构混乱 3. 样式不能复用	很低	当前标签
内部样式	`1. 样式可复用` `2. 代码结构清晰`	1. 结构与样式未彻底分离 2. 样式不能多页面复用	一般	当前页面
外部样式	`1. 样式可多页面复用` `2.代码结构清晰` `3. 可触发浏览器的缓存机制` `4. 结构与样式彻底分离`	需要引入才能使用	`最高`	多个页面使用

<!DOCTYPE html>
<meta charset="UTF-8" />
<html lang="zh-CN">
<head>
  <title>优先级</title>
  <link rel="stylesheet" href="./index.css">
  <style>
    h1 {
      color: green;
      font-size: 40px;
    }
  </style>
</head>
<body>
  <h1 style="color: red; ">hello，我是一个小测试哦</h1>
</body>
</html>

index.css
h1 {
  color: gold;
}

语法规范

CSS 语法由两部分组成：

选择器：找到要添加样式的元素
声明块：设置具体的样式（声明块是有一个或多个声明组成的），声明的格式为：属性名：属性值

提示1：最后一个声明后的分号理论上能省略，但最好写上

提示2：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上

注释的写法

/* 给h1元素添加样式 */
h1 {
  /* 设置文字颜色 */
  color: red;
  /* 设置字体大小 */
  font-size: 20px;
}

CSS代码风格

展开风格：开发时推荐，便于维护

h1 {
  color: red;
  font-size: 20px;
}

紧凑风格：项目上线时推荐，可以减小文件体积
```
 h1 {color: chartreuse; font-size: 20px;}
```

项目上线时，会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文件体积，节约网络流量，同时也能让用户打开网页时速度更快。

一、初识CSS

CSS 基础

CSS 简介

CSS的编写位置

行内样式

内部样式

外部样式

样式表的优先级

语法规范

CSS代码风格

相关地址