# 一、简介
CSS（Cascading Style Sheets，层叠样式表），用于设置HTML标签的样式，它的基本结构如下：
# 二、引入方式
使用样式表主要有4种方式：**行内样式**、**内嵌样式**、**外链样式**、**导入式**。
## 1、行内样式 *
是将 `style` 作为一个标签的属性，然后通过它的值来设置样式。写法如下：
```html
<div style="width: 300px; height: 300px; background-color: red;"></div>
```
## 2、内嵌样式 *
是将 `style` 作为一个标签，然后在标签内通过样式选择符设置样式。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 内嵌样式 -->
<style type="text/css">
div { width: 300px; height: 300px; background-color: red; }
</style>
</head>
<body>
<div></div>
</body>
</html>
```
## 3、外链样式 *
将样式单独放置在一个`.css` 文件，然后在页面中通过 `<link>` 标签的 `href` 属性引入该样式文件。这样做的目的为了抽离CSS，便于维护和管理。
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 外链样式 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div></div>
</body>
</html>
```
```css
/*index.css*/
@charset "UTF-8";
div {
width: 300px;
height: 300px;
background-color: red;
}
```
> 注意：css文件第一行代码需指定字符编码格式，防止出现乱码：`@charset "utf-8";`
## 4、导入式
该方法是在 `<style>` 标签的内容里通过 `@import` 方法来导入外部CSS文件，这点和通过\<link>标签导入外部样式是一样的，但其它方面却有很大不同。这种方式的写法是：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@import("./css/index.css");
</style>
</head>
<body>
<div></div>
</body>
</html>
```
> 拓展：**外链与导入同是外部引用的方式，但他们有哪些区别？**
1. 编码位置不同：\<link> 是放在 \<head> 标签中通过 href 属性引入样式的，而@import 是在样式文件中引入其他CSS文件的。
2. 引入类型不同：@import 只能引入CSS文件，\<link> 可以引用各种类型的外部资源。
3. 主要区别在于加载顺序和浏览器对它们的处理方式。
- 使用\<link>标签引入的样式表会在网页开始加载时同时加载并解析.
- 使用@import引入的样式表则要等到当前文档被完全加载之后才会被下载和解析。
> 结论：推荐使用 \<link> 引入外部样式。
>
# 三、通过< link >标签引用CSS文件
在实际的项目开发过程中，我们一般都是将CSS单独存放在一个文件夹中，然后在HTML页面中通过如下形式进行引用。
```html
<link rel="stylesheet" href="样式表路径+名称.css">
```
引用后CSS文件仍然是独立的，不会受到包括HTML和JavaScript任何方法和函数的影响，如果CSS文件中涉及到文件路径的相对位置，那么也是以CSS文件所在的文件路径位置为准，而非引用它的HTML文件的文件路径位置。
相对于“行内样式”和“内嵌样式”而言，“外链样式”即通过\<link>标签引用CSS样式有以下好处：
1. 简化了DOM结构，实现了内容和表现的分离，使HTML和CSS文件结构更加清晰，利于维护
2. 大大减少了CSS代码的编写量。项目越大，这一点体验得越明显
3. \<link>可以和其它\<link>、JS文件以及\<body>内的内容进行多线程加载，使得加载速度更快
4. 利于项目整体风格的调整，维护起来也更加便捷。单文件修改，全网站（应用）生效
5. 浏览器会将CSS文件进行缓存，进一步地减少了加载所需时间
6. 可以根据需要利用JavaScript或Media动态的组合所需的CSS文件
7. 对搜索引擎友好，有利于SEO
# 四、引用优先级
以上四种样式的引用方式，按照优先级从高到低排列分别是：
```
行内样式 > 内嵌样式 > 外链样式 > 导入样式
```
为了便于记忆，我们可以这样理解：越是离我们要设置样式标签元素近的CSS样式，那优先级越高，反之，优先级越低。当然在这里需要明白的是，CSS样式的引用优先级没有优先级越高越好或者优先级越低越好的说法，我们是要利用样式优先级这一特性，在是我们写更少的CSS代码同时，又使我们的Web页面表现力更加丰富。
另外，通过 `!important` 可以提升样式的优先级，如下所示：
```css
.title {
color: blue !important;
}
```
# 五、CSS 常用单位
- `px`：固定单位，相对于 **显示器屏幕分辨率** 而言，值是固定的，指定多少就是多少。
- `em`：相对单位，相对于 **父元素** 字体大小，em单位的值可以被子元素继承。
- em = 像素值 / 父元素字体大小
- `rem`：相对单位，相对于 **根元素** 字体大小，rem单位的值不会被继承。
- 根元素字体大小 = 设备宽度/设计稿宽度 * 100
- rem = 设计稿值 / 100
css 基础知识总结以及demo （179个子文件） 
index.css 273B index.css 123B .DS_Store 6KB .DS_Store 6KB .DS_Store 6KB .DS_Store 6KB
transform-3D-carousel.gif 3.86MB transform-3D-cubic-transition.gif 507KB perspective&translateZ.gif 461KB animation_hover_t1.gif 427KB animation_hover.gif 310KB transform-origin.gif 224KB animation-1.gif 200KB rotate.gif 106KB animation_loading.gif 101KB position-absolute-4.gif 67KB transform-style.gif 60KB translate.gif 50KB skew.gif 49KB scale.gif 42KB sibling_selector_test.gif 31KB float-case-menulist.gif 30KB transition-4.gif 30KB content_attr.gif 14KB transition-2.gif 10KB flex_01.gif 9KB transition-3.gif 8KB transition-1.gif 7KB animation_bubble.gif 3KB animation_strechDelay.gif 2KB
index.html 4KB index.html 2KB index.html 821B index.html 357B grid.jpeg 316KB pictures.jpeg 169KB float-case-2.jpeg 140KB box-model.jpeg 27KB font.jpeg 23KB side-or-corner.jpeg 23KB float-case-1.jpeg 22KB conic_gradient.jpeg 21KB border-case-01.jpeg 18KB border-radius.jpeg 16KB checked.jpeg 8KB grid-area.jpeg 4KB grid-track.jpeg 4KB grid-cell.jpeg 4KB grid-line.jpeg 4KB
box.jpg 85KB pseudo-class.jpg 64KB 3d-distance.jpg 33KB css.jpg 21KB flex_support.jpg 17KB 第04章 显示与定位.md 31KB 第08章 变形转换.md 23KB 第02章 高级选择器.md 21KB 第06章 元素背景.md 17KB 第11章 Grid 布局.md 14KB 第10章 Flex布局.md 11KB 第12章 布局方案.md 7KB 第05章 盒子模型.md 7KB 第09章 动画.md 7KB 第03章 文本与字体.md 6KB 第01章 选择器.md 6KB README.md 5KB 第13章 响应式布局.md 5KB 第07章 过渡特效.md 3KB 第15章 BFC.md 3KB 第14章 浏览器前缀.md 416B
float-case-3.png 366KB writing-mode.png 218KB flex_align_content.png 144KB only-of-type.png 141KB last-of-type.png 140KB first-of-type.png 137KB position-absolute-2.png 119KB grid-template-areas.png 117KB grid-support.png 114KB repeating-linear-gradient-1.png 113KB position-absolute-3.png 101KB opacity-case.png 99KB first-line.png 92KB only-child.png 79KB nth-child-1.png 78KB not-selector.png 71KB first-child.png 70KB last-child.png 69KB linear-gradient.png 66KB flex-basis.png 66KB flex_align_self.png 66KB conic_gradient_examples.png 61KB empty.png 60KB transform-3d-cubic-box.png 56KB transform-origin-1.png 55KB perspective-2.png 54KB nth-child-3.png 54KB backface-visibility-1.png 52KB first-letter.png 51KB flex_grow.png 49KB共 179 条
- 1
- 2
资源评论
进击的代码家
- 粉丝: 2748
- 资源: 204
最新资源
- 我在 YouTube 上创建的 YOLOv3 系列的配套代码.zip
- 人体检测计算机视觉项目 yolov11标记 2G的文件大小
- 应用程序编号 AA8D2-2325A-B6B4C-36C9E-E1004，版本名称 - stroyportal.zip
- 应用程序编号 8887.zip
- 帮助将 LabelMe 标注工具 JSON 格式转换为 YOLO 文本文件格式 如果你已经用 LabelMe 标注了你的分割数据集，那么可以很轻松地使用此工具帮助转换为 YOLO 格式的数据集.zip
- java获取request中的请求参数
- 带有 Web UI 的文件观察器 .zip
- 微信小程序LOL战绩查询
- 带有 Tensorflow mobile 的 Android YOLO 实时对象检测示例应用程序 .zip
- Go语言 学习笔记 记录了学习所需的基本语言知识
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
