本文介绍了CSS的历史，强调了层叠的概念，包括样式层叠、选择器重叠和文件重叠。文章指出不存在CSS4，从CSS3开始，所有子模块独立发展。推荐了权威的学习资源，如官方标准和MDN文档，并详细阐述了CSS的语法结构。此外，还分享了调试CSS的方法——border调试法。最后，推荐了Css-Tricks网站和张鑫旭的博客作为进一步学习的资料。
1.css历史（Cascading Style Sheets层叠样式表）
1.层叠指什么？
- 样式层叠。多次对同一选择器进行样式声明
- 选择器重叠。不同选择器对同一元素进行样式声明
- 文件重叠。可以用多个文件进行层叠
我的页面：JS Bin - Collaborative JavaScript Debugging
2.css版本
注：不存在css4，从css3开始所有的css子模块分开制定标准，只存在子模块的版本号。
测试浏览器是否支持某功能：Can I use... Support tables for HTML5, CSS3, etc
2.体系化学习css
1.css资料
官方标准：All CSS specifications（specifications说明书）
权威文档：CSS（层叠样式表） | MDN
2.css语法
- 语法一：样式语法
选择器 {
属性名: 属性值;
/*注释*/
}
注：类选择器，id选择器等区分大小写，没有//注释。（例：//color: red;只会认为color拼错。.a{}和.A{}是不同的类选择器）
- 语法二：at语法
@charset ''UTF-8''
@import url(2.css)
@media (min-width: 100px) and (max-width: 200px) { 语法一 }
注：（这三个是最常用的）
@charset ''UTF-8'' 必须放第一行，声明字符编码。charset字符集，utf-8是encoding字符编码。
@import url(css路径)导入额外的css文件
@media媒体查询
3.如何调试css
border调试法：
- 怀疑某个元素有问题，就给这个元素加border
- border没出现？说明选择器错了或语法错了
- border出现了？看border是否符合预期
- 解决bug就可以把border删掉
4.推荐阅读/查阅资料
Css-Tricks：CSS-Tricks - Tips, Tricks, and Techniques on using Cascading Style Sheets.
张鑫旭的博客：张鑫旭的个人主页 » 张鑫旭-鑫空间-鑫生活
扫一扫
1805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
