CSS简要发展史

• CSS是层叠样式表（Cascading Style Sheet），又叫级联样式表，简称样式表。
• CSS最早由Håkon Wium Lie和Bert Bos于1994年提出，他们当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计CSS。
• 1997年初，W3C内组织了专门管CSS的工作组，其负责人是Chris Lilley。
• 1998年5月W3C发表了CSS2，CSS2.1修改了CSS2中的一些错误，删除了其中不被支持的内容和增加了一些已有的浏览器的扩展内容。
• 从2011年开始CSS被分为多个模块单独升级，统称为CSS3。这些模块有：CSS选择器level3、CSS媒体查询level3、CSS颜色level3等。
• 目前没有CSS4，只有模块的level4。周边工具有LESS、SASS、PostCSS等，可以简化、增强CSS的功能。

课程内容

基础知识

布局和定位

层叠上下文

变形、过渡、动画 响应式设计

CSS生态相关

为什么学习CSS？

CSS能让界面有更丰富的交互和更好看的设计。

• CSS是用于定义HTML文档中元素的样式，实现了将内容与表现分离，提高了代码的可重用性和可维护性。
• CSS可以让网页的外观更加美观、专业和个性化，提高了用户的体验和满意度。
• CSS可以实现各种复杂的效果，如动画、变形、过渡、3D等，增强了网页的交互性和功能性。
• CSS是Web前端开发的基础技能之一，掌握CSS可以为学习其他前端技术如JavaScript、jQuery、Bootstrap等打下坚实的基础。
• CSS是Web设计师和前端工程师的必备技能之一，掌握CSS可以提高自己的职业竞争力和就业机会。
• CSS是一种简单易学的语言，只需要掌握一些基本的语法和规则，就可以开始编写样式表。
• CSS是一种灵活多变的语言，有很多种选择器、属性和值可以使用，可以根据自己的喜好和需求进行创造和调整。
• CSS是一种不断发展的语言，随着Web标准的进步和浏览器的支持，CSS不断推出新的特性和模块，让网页设计更加丰富和先进。
• CSS是一种有趣的语言，学习CSS可以培养自己的审美能力和创造力，享受编码的乐趣。

基础知识

层叠（Cascading）、优先级

层叠三大原则（优先度逐次递减）：

1. 样式表来源
2. 选择器优先级
3. 源码位置

其中选择器的类型：基础选择器、组合器、子组合器、相邻兄弟组合器、通用兄弟组合器、复合选择器、属性选择器、伪类选择器、伪元素选择器、逻辑选择器。

选择器优先级：

盒模型

CSS中盒模型是一种用来描述元素所占空间的模型，它包括四个部分：内容（content）、内边距（padding）、边框（border）和外边距（margin）。盒模型的作用是控制元素的布局和样式，以及元素之间的位置关系。

布局

Flex：一维布局；基于内容；浏览器兼容性更好

Grid：二维布局；基于布局；2017年后浏览器的版本普遍支持

大面积或整体布局，推荐使用Grid布局；小面积或组件中，或Grid item中可以使用Flex做灵活布局

层叠上下文：层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开。层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序。

媒体查询

媒体查询的作用是实现响应式网页设计，即让网页能够适应不同设备和分辨率的显示。媒体查询可以写在样式表中，也可以写在HTML标签中，还可以通过标签引入外部样式表

08、语言增强——CSS预处理器

CSS预处理器是一种用来扩展CSS功能的编程语言，它可以为CSS增加一些编程特性，如变量、函数、嵌套、运算、继承等，然后通过编译器将其转换为普通的CSS文件。CSS预处理器的作用是让CSS更易于编写、维护和复用，提高开发效率和代码质量。