本文介绍了CSS的发展历史，从CSS1到CSS3的重要更新，以及如何通过行内式、内联式和外联式在HTML中引入和使用CSS。讨论了三种引入方式的优缺点和优先级，以及CSS的基本语法规则和注释方法。
css概述
CSS（Cascading Style Sheets，层叠样式表） 是用于控制网页样式和布局的一种样式表语言。用于描述网页的样式和布局，包括字体、颜色、大小、间距、边框等方面。
前端三🗡客：HTML,CSS,JavaScript，组成了我们看到的页面，CSS时其中不可或缺的一环，如果没有它，页面也就会像数据 一样一行一行展现在我们面前，正是因为CSS强大的修饰能力，让我们看到了五颜六色的页面。
css的发展史
随着技术的不断发展，CSS 也不断更新迭代，目前主要有三个主要版本：CSS1、CSS2 和 CSS3。
CSS1 是最早的版本，于 1996 年推出，引入了基本的样式控制功能，如文本样式、颜色和背景等，当下已基本废弃。
CSS2 在 1998 年发布，增加了更多的样式属性和布局控制功能，如浮动和定位等。
而 CSS3 是最新的版本，于 2011 年开始逐步推出，引入了更多的新特性，如动画、过渡效果、阴影、圆角等，以及对响应式布局和移动端优化的支持。
css的引入规则
三种引入方式
css的修饰这么强大，那么在代码中我们该如何使用它呢。它提供了三种使用方式：行内式（知道即可，不推荐使用），内嵌式，外联式。
行内式：
行内式，顾名思义就是写在行内的样式。在需要使用css修饰的标签上通过style属性添加样式,
样式和样式之间通过 ; 隔开。
行内式的缺点：
- 没有完全脱离HTML标签
- css样式让标签结构繁重，不利于HTML结构的解读
- 一个内联式的css代码只能给一个标签用，复用性差；多个相同时，会增加代码量，影响加载速度。
<div style = "width：300px">
我是盒子
</div>内联式：
除了行内式，内联式也是写在html页面中的，它相较于行内式更加方便，它写在<head>标签内部写<style>标签,<style>标签写在<title>标签后面 。在style标签中通过class名和id这些选择器完成对页面的渲染
-
内嵌式优点
- 实现了结构与样式的初步分离(css只负责样式，html负责结构)
- 多个标签可利用一段代码设置相同的样式，节省代码量。
-
内嵌式缺点
- 结构和样式并没有完全分离，代码仍然写在HTML文件头部
- css只能给一个HTML文件使用，不能被多个HTML文件同时利用。
- 在HTML中如果css代码太多，会造成文件头重脚轻。
<head>
<style>
.a {
width ： 300px
}
样式写在这里
</style>
<head>外联式：
由于发展越来越快，页面样式越来越复杂，css样式也越来越多，外联式也营运而生。写在独立的.css文件中的样式。通过<link>标签引入页面 中完成渲染。
外联样式表的两种导入方式
1，通过link标签引入
2，在style标签中通过@import url(路径)语句进行引用
为什么使用link引入，不使用@import引入
- 导入式和外联式作用基本相同
- 但是导入式在浏览器中加载时，会在HTML结构加载完毕后再进行编译，网速比较慢的时候，会导致网页出现没有css样式的效果，给用户的体验不好。
- 实际工作中，较少用导入式，推荐使用外联式样式表。
行内式，内嵌式 ，外联式的优先级
这三个引用方式的优先级为行内式 > 内联式 > 外联式
css的语法规则
1，css中的样式键值对为 属性名：属性值；的形式
2，属性值为字符串时要用""包裹
3，属性和属性之间要用;连接
4，css属性对空格，缩进不敏感
css的注释语法
css的注释语法为/* 注释 内容*/
快捷键：ctrl+/
<style>
/*注释 内容*/
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
