CSS2笔记——CSS 基础

2025-02-16 56 阅读3分钟

1. CSS 简介

CSS 的全称是“层叠样式表（Cascading Style Sheets）”，层叠的意思是作用在同一个元素的同一个特征的样式可能有不止一个，但是最终只能有一个生效；
CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等。

核心思想：HTML 搭建结构，CSS 添加样式，实现了：结构与样式分离。

2. CSS 编写的位置

2.1 行内样式

写在标签的 style 属性中（又称为“内联样式”）；
语法：<h1 style="color: ref; font-size: 60px;">hello css!</h1>；
注意点：style 属性的值编写时要符合 CSS 规范，是 key: value; 的形式；
存在的问题：行内样式不符合结构与样式分离的思想，因此不推荐大量使用。

2.2 内部样式

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

语法：

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

注意点：理论上 <style> 标签可以放在 html 文档的任何地方，但是最佳实践是放在 <head> 标签中；
存在的问题：结构与样式没有完全分离，多个 html 页面无法复用样式。

2.3 外部样式

写在单动的 .css 文件中，随后在 html 文件中引入；
语法：
1. 新建一个扩展名为 .css 的样式文件，把所有的 CSS 代码都放入此文件中；
```
h1 {
    color: red;
    font-size: 40px;
}
```
2. 在 html 文件中引入 .css 文件。
```
<link rel="stylesheet" href="./xxx.css">
```
注意点：
1. <link> 标签要写在 <head> 标签中；
2. href 表示引入的文件的来自哪里，rel 说明引入的文档与当前文档之间的关系；
3. 实现了结构与样式的完全分离，这是最佳实践，实际开发中，几乎都使用外部样式。

3. 样式表的优先级

优先级规则：

行内样式 > 内部样式 = 外部样式；
当同时存在内部样式和外部样式时，后声明的会覆盖前面的；
同一个样式表中，优先级也和编写顺序有关，也遵循“后面声明的会覆盖前面声明的”规则。

4. CSS 语法规范

CSS 语法规范由两部分组成：

选择器：定位到要添加样式的元素；
声明块：设置具体的样式（声明块由一个或多个声明组成），声明格式为：属性名: 属性值；
最佳实践1：每个声明后面都加上分号（“;”）；
最佳实践2：冒号后面保留一个空格。
// line note.. 是单行注释，/* mutliline note.. */ 是多行注释。

5. CSS 代码风格

展开风格（最佳实践）：

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

紧凑分割，项目上线时推荐，可减少文件体积：
```
h1{color:red;font-size:40px;}
```

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