CSS 资料合集

这里收集 CSS 相关的长期资料入口，包括官方文档、专题网站、文章、工具、示例库、字体资源、书籍和后续可补充的视频、论坛资源。

官方文档与规范

• MDN CSS - CSS 属性、模块、语法和浏览器兼容性的主要参考入口。
• MDN Learn CSS: First steps - 适合作为 CSS 入门路线的官方教程。
• MDN Learn CSS: Building blocks - 覆盖选择器、盒模型、值与单位、层叠等基础模块。
• MDN CSS Selectors - 选择器语法、伪类和伪元素的参考入口。
• W3C CSS Working Group - CSS 规范和工作组动态入口。

网站与文章

• CSS-Tricks - CSS 技巧、布局、浏览器行为和实践文章。
• The Shapes of CSS - 用 CSS 绘制形状的示例集合。
• Inheriting box-sizing Probably Slightly Better Best Practice - 关于 box-sizing 继承写法的说明。
• 大漠的 CSS 专栏 - 大漠在 fedev.cn 上整理的 CSS 文章集合。
• 现代 Web 布局 - 大漠的布局与移动端适配相关内容。
• 如何在 Vue 项目中使用 vw 实现移动端适配 - Vue 项目中使用 vw 和 PostCSS 做移动端适配的参考。
• Vue 使用 postcss-px-to-viewport 适配移动端、PC 端布局 - postcss-px-to-viewport 的项目配置参考。
• 关于移动端适配，你必须要知道的 - 移动端像素、视口和适配问题的整理。
• PPI vs. DPI: what's the difference? - 理解屏幕密度、图片和设计交付时可参考。
• vw for layout - 使用 vw 做布局适配的文章。
• iPhone X 适配手Q H5 页面通用解决方案 - 移动端安全区和异形屏适配参考。

工具与资源库

• CSS Font Stack - 常见系统字体和网页安全字体参考。
• Font Squirrel - 免费字体和 Webfont 生成工具。
• Font Squirrel Webfont Generator - 生成 @font-face 所需文件和 CSS。
• Google Fonts - 免费在线字体服务。
• Adobe Fonts - 原 Typekit，在线字体服务。
• Cloud.typography - 在线字体服务。
• CSS Arrow Please - 用 CSS 生成箭头形状的工具。
• BentoGrids - Bento 风格页面和布局灵感集合。
• CodePen - CSS 示例、交互效果和实验代码集合。

字体资源站

• dafont - 免费字体资源。
• Everything Fonts - 字体资源与字体工具集合。
• fonts.com - 商业字体资源。
• MyFonts - 商业字体资源。
• Linotype - 字体厂牌与商业字体资源。
• Monotype - 字体厂牌与商业字体资源。
• Exljbris - 字体厂牌资源。

书籍

• 《CSS 世界》 - 张鑫旭的 CSS 2.1 知识体系整理，适合系统理解 CSS 底层规则。
• 《CSS 选择器世界》 - 张鑫旭的 CSS 选择器专题书，覆盖选择器概念、优先级、命名和伪类选择器。
• 《CSS 新世界》 - 张鑫旭的现代 CSS 专题书，覆盖新特性、现代布局、移动端和视觉表现。

待补充类型

• 视频栏目
• 社区与论坛