第01阶段.前端基础.CSS初识

CSS层叠样式表

学习目标

CSS引入样式文件有2种，分别是<link>标签和@import方式，下面总结了2者的区别！

区别1：<link>不止可以引用样式文件，还可以引用其他的资源，但是import只能引入样式表文件。

作者:极客小俊
一个把逻辑思维转变为代码的技术博主

引言

随着 Web 技术的发展，CSS 变量（也称为 CSS 自定义属性）已成为现代前端开发中不可或缺的一部分。CSS 变量提供了一种在样式表中存储可重用值的方法，这些值可以在整个文档中使用甚至在运行时修改。本文将深入探讨 CSS 变量的概念、优势、使用方法以及一些实际应用案例。

我们之前讲了网页的HTML代码，今天我们来讲一下CSS样式,css样式和HTML的关系就像人的的骨头和肉，HTML是网页的骨架，CSS则是网页的肉。我看过一个视频，说只有HTML的网页就像一个没有化妆的女生，而加了CSS样式的网页就像一个化了妆的女神，确实，通过CSS样式，我们的网页可以变得非常美丽。那么CSS样式到底是怎么样的呢，我们今天来开始学习一下。

@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

项目中要求在不同时间段根据不同条件更改一些控件的样式，甚至增加一些不同的样式表文件，这样我就不能把引用样式表的代码写在html中，只能在程序中动态添加了。

先添加一个 abc.css 和 webform1.aspx 用来测试

webform1.aspx代码如下：

在网页设计中，CSS技术发挥着不可估量的作用。运用CSS技术设计网页,不仅能够有效运用形式多样的字形字体、灵活控制Web网页设计样式,还能够实现对网页中文件大小的灵活控制，不仅能够美化网页页面，还可以去实现网页设计风格的统一性, 从而提升网页设计效果。深圳网站建设、深圳网站设计、网站建设、网站制作规划、深圳建设公司逐个为对深圳网站设计制作感兴趣的朋友进行网站分析、希望可以给深圳朋友带来帮助！

关于网站的CSS引用我们可以有以下四种方式：

• 内联样式（行间样式）

在标签的style属性后添加样式。

// 通过html属性style实现，写在body标签中
<div style="color:green; font-size:18px;">行内式</div>

css中的优先级讲的有

1.选择器的优先级。

2.样式引入的优先级。

今天要研究的是样式引入的优先级。网上又很多答案都是如下的，但是真的是这样的吗，让我们来探一探究竟是如何。

四种样式的优先级别是：行内样式最高、

？优先级？ 内嵌样式>链接样式>导入样式？

在这四种的优先中，行内样式最高（内嵌样式），大家都是认可的。但剩下的3中就会是我们想的那样吗？