一、CSS/CSS3 基础认知¶

TIP

CSS、CSS3简介，基础语法，CSS样式的两种书写方式，CSS注释，CSS的4种书写位置，优先级

1、CSS简介¶

CSS（Cascading Style Sheets）层叠样式表

CSS是用来控制HTML元素呈现样式的样式表语言
他可以设置HTML页面中元素的文字大小，颜色，对齐方式，宽高，位置等样式。

CSS与CSS3是什么关系？

CSS3是CSS的最新版本，在原有基础上增加了大量的样式、动画、3D特效和移动端特性等等

2、CSS 的基本语法¶

如何通过 CSS 控制页面中 HTML 元素的样式。

TIP

假设我现在要通过 CSS 样式来控制 h1 标签文字的颜色和大小，那该如何书写 CSS 样式呢？

我们来学习下 CSS 规则集

![[Pasted image 20260220142834.png]]

注：

CSS规则集由两个主要的部分构成：选择器和声明块组成；

选择器：选择器指向需要改变样式的HTML元素，通过选择器，我们知道是给那个元素添加样式

声明块：包含一条或多条声明，每条声明用分号;结束，声明大括号{}括起来；

每条声明都包含一个CSS属性名称和一个值，以冒号:分隔。

案例：控制h1标签字体大小和颜色

CSS书写位置

在<head></head>标签对中写<style></style>标签对，然后在里边书写CSS规则集

<html>
<head>
<!--此处省略了部分html结构-->
<style>
h1 {
color: red; /*颜色:红色；*/
font-size: 14px; /*字体大小:14像素；*/
}
p {
color: turquoise; /*颜色淡绿； */
}
</style>
</head>
<body>
<h1>我是h1标题标签</h1>
<p>p标签内容</p>
</body>
</html>

渲染效果：

![[Pasted image 20260220143111.png]]

3、CSS 样式的两种书写方式¶

方式一：

每行只描述一个属性，每一条声明与选择器之间会有一个tab的间距。（或更多间距也不会有问题，但不建议）

p {
  color: red;
  font-size: 14px;
}

在VSCode上安装：prettier 格式化代码插件，ctrl+s 保存代码时，会自动帮我们格式化代码

方式二：

CSS中的样式声明，直接写在一行

p { font-size: 14px; color: red; }

说明：

以上两种方式都可以，不过第一种方式更方便阅读和后期修改，则我们约定后期以第一种方式来书写CSS样式。

注：

在实际项目开发完成上线时，我们会把CSS样式进行代码压缩，压缩后其实就是第二种样式的写法。

4、CSS 注释¶

TIP

注释只是给自己或其他开发者查看的，网页中不显示
提高代码阅读性
注释快捷键：VSCode 中按 Ctrl + /，即可快速注释内容

/* 这里书写注释内容 */
/* h1 标签的样式 */
h1 {
  /* 设置文字的颜色值 */
  color: skyblue;
  /* 设置文字的大小 */
  font-size: 30px;
}

这里要注意区分之前讲的HTML注释，HTML注释内容写在HTML标签中，并使用

<html>
<body>
<!--html的注释-->
</body>
</html>

5、CSS 样式的3种书写位置¶

TIP

CSS 样式的书写位置一共有3种

5.1、方式一：内嵌样式¶

TIP

又俗称：“内部样式”

内嵌在HTML文件中
在<head></head>标签对中写<style type="text/css"></style>标签对，然后在里边书写CSS语句
style：为样式风格的意思
type：类型，当前样式的类型是text/css
在HTML5中，type属性变为可选，我们经常在项目看到会直接使用<style></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>CSS基础入门-清心老师</title>

    <!-- 内嵌样式 -->
    <style>
        /* h1 标签 */
        h1 {
            color: skyblue; /* 颜色:蓝色; */
            font-size: 30px;
        }
        p {
            background-color: red; /* 背景色:红色; */
            color: yellow; /* 颜色:黄色; */
        }
    </style>
</head>
<body>
    <h1>CSS基础入门</h1>
    <p>CSS规则由两个主要的部分构成：选择器，以及一条或多条声明</p>
</body>
</html>

渲染效果： ![[Pasted image 20260220143610.png]]

5.2、方式二：外链样式¶

TIP

又俗称：“外部样式”

将CSS单独存为.css文件，然后使用<link>标签引入到页面中
优点：多个HTML网页，可以共用一个CSS样式表文件

<!--
rel：关系
stylesheet：样式表
href：路径和文件名
-->
<link rel="stylesheet" href="css/index.css" />

代码示例

/* 文件目录结构 */
icod
  css
    basic.css  // css
  index.html   // 网页文件

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <!--此处省略部分html结构-->
  <title>Document</title>
  <!--
    rel：关联
    stylesheet：样式表
    href：路径和文件名
  -->
  <link rel="stylesheet" href="./css/basic.css" />
</head>
<body>
  <h3>网站标题</h3>
  <p><p>标签内容</p></p>
  <div>span标签内容</div>
</body>
</html>

CSS

h3 {
  color: tomato;
}
p {
  color: turquoise;
}
div {
  color: violet;
}

渲染效果： ![[Pasted image 20260220143814.png]]

5.3、方式三：行内样式¶

TIP

样式写在HTML标签的style属性上

行内样式只能作用于当前标签上，不具有通用性
这种写法样式和结构混为一起，通常配合JS使用
优先级最高

<h2 style="color:skyblue">行内样式</h2>

总结

企业开发项目中，常用的样式有内嵌式和外链式，行内样式主要用于与JS打交道的场景。

5.4、3种样式的优先级¶

TIP

行内样式优先级最高
内联样式和外部样式在书写时，如果样式发生冲突，
- 在优先级相同的情况下，以写在后面的为主
- 如果优先级不相同，则以优先级高的为主。

如下案例所示：

basic.css创建外部连接样式文件，代码如下：

/* 找到div元素 */
div {
  color: red;
}
/* 找到body下面的div元素，优先级高于直接找到div元素 */
body div {
  font-size: 40px;
}

index.html

<head>
  <link rel="stylesheet" href="basic.css" />
  <style>
    div {
      color: blue; /* 颜色: 蓝色； */
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div style="color: green">我是div</div>
  <!-- 按CSS优先级判断，该文字为 green 绿色 -->
</body>
<!--

以上代码解读：

- 默认以上文字的颜色为 green 绿色

- 去掉 style="color: green"文字颜色为 blue 蓝色

- 去掉 style="color: green"把link与style标签互换位置，文字颜色为 red 红色

    -->

原效果	去掉style行内样式后效果	去掉style行内样式并调换link与style位置后效果
![[Pasted image 20260220144229.png]]	![[Pasted image 20260220144241.png]]	![[Pasted image 20260220144249.png]]

6、总结：CSS 3种书写位置特点与区别¶

引入方式	书写位置	作用范围	优先级	使用场景
内嵌样式	写在`<style>`标签中	当前页面	由书写位置和选择器优先级共同决定	如：百度、腾讯首页
行内样式	css样式写在标签的`style`属性中	当前标签	最高	配合JS或特殊需求
外链样式	css样式写在单独css文件中，通过`<link>`标签引入	多个页面	由书写位置和选择器优先级共同决定	项目开发中高频使用