|
|
|
|
# CSS教程
|
|
|
|
|
|
|
|
|
|
这是针对新人的 CSS 入门级教程。
|
|
|
|
|
|
|
|
|
|
阅读本教程前，确保你对 HTML 有一定的了解，知道各个 html 标签的用法，如果对 HTML 还不了解，可以在[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML)上学习下 HTML 的基础知识，再回到这里阅读本教程。
|
|
|
|
|
|
|
|
|
|
本教程会介绍 CSS 的所有内容，既可以当做入门教程，也可以用作参考手册。
|
|
|
|
|
|
|
|
|
|
教程中的例子，使用 codepen 内嵌在文档中，方便读者调试和学习。教程参考了谷歌的 [learn css](https://web.dev/learn/css/box-model/)教程，你可以认为本教程是它的半翻译中文版本。
|
|
|
|
|
|
|
|
|
|
有任何与本教程相关的问题，欢迎在文章下方留言或者 github 上提交 [issue](https://github.com/pengfeiw/css-tutorial/issues)。
|
|
|
|
|
|
|
|
|
|
## 内容
|
|
|
|
|
|
|
|
|
|
- [001 盒模型](https://pengfeixc.com/tutorial/css/box-model)
|
|
|
|
|
- [002 选择器](https://pengfeixc.com/tutorial/css/selector)
|
|
|
|
|
- [003 级联](https://pengfeixc.com/tutorial/css/cascade)
|
|
|
|
|
- [004 特征性](https://pengfeixc.com/tutorial/css/specificity)
|
|
|
|
|
- [005 继承](https://pengfeixc.com/tutorial/css/inherit)
|
|
|
|
|
- [006 颜色](https://pengfeixc.com/tutorial/css/color)
|
|
|
|
|
- [007 尺寸单位](https://pengfeixc.com/tutorial/css/unit)
|
|
|
|
|
- [008 布局](https://pengfeixc.com/tutorial/css/layout)
|
|
|
|
|
- [009 flex 布局](https://pengfeixc.com/tutorial/css/flex)
|
|
|
|
|
- [010 grid 布局](https://pengfeixc.com/tutorial/css/grid)
|
|
|
|
|
- [011 逻辑属性](https://pengfeixc.com/tutorial/css/logic-property)
|
|
|
|
|
- [012 间距](https://pengfeixc.com/tutorial/css/spacing)
|
|
|
|
|
- [013 伪元素](https://pengfeixc.com/tutorial/css/pseudo-elements)
|
|
|
|
|
- [014 伪类](https://pengfeixc.com/tutorial/css/pseudo-class)
|
|
|
|
|
- [015 边框](https://pengfeixc.com/tutorial/css/border)
|
|
|
|
|
- [016 阴影](https://pengfeixc.com/tutorial/css/shadow)
|
|
|
|
|
- [017 焦点](https://pengfeixc.com/tutorial/css/focus)
|
|
|
|
|
- [018 z-index 和栈空间](https://pengfeixc.com/tutorial/css/z-index-and-stacking-context)
|
|
|
|
|
- [019 函数](https://pengfeixc.com/tutorial/css/function)
|
|
|
|
|
- [020 渐变](https://pengfeixc.com/tutorial/css/gradients)
|
|
|
|
|
- [021 动画](https://pengfeixc.com/tutorial/css/animation)
|
|
|
|
|
- [022 filter 属性](https://pengfeixc.com/tutorial/css/filter)
|
|
|
|
|
- [023 混合模式](https://pengfeixc.com/tutorial/css/blend-model)
|
