diff --git a/chapters/CSS教程.md b/chapters/CSS教程.md index 9d06abf..8469517 100644 --- a/chapters/CSS教程.md +++ b/chapters/CSS教程.md @@ -1,11 +1,37 @@ # CSS教程 -这是针对新人的CSS入门级教程。 +这是针对新人的 CSS 入门级教程。 -阅读本教程前,确保你对HTML有一定的了解,知道各个html标签的用法,如果对HTML还不了解,可以在[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML)上花一天时间了解下HTML,再回到这里阅读本教程。 +阅读本教程前,确保你对 HTML 有一定的了解,知道各个 html 标签的用法,如果对 HTML 还不了解,可以在[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML)上学习下 HTML 的基础知识,再回到这里阅读本教程。 -本教程会介绍CSS的所有内容,既可以当做入门教程,也可以用作参考手册。 +本教程会介绍 CSS 的所有内容,既可以当做入门教程,也可以用作参考手册。 -教程中的例子,使用codepen内嵌在文档中,方便读者调试和学习。教程参考了谷歌的[learn css](https://web.dev/learn/css/box-model/)教程,你可以认为本教程是它的半翻译中文版本。 +教程中的例子,使用 codepen 内嵌在文档中,方便读者调试和学习。教程参考了谷歌的 [learn css](https://web.dev/learn/css/box-model/)教程,你可以认为本教程是它的半翻译中文版本。 -如果教程有任何问题,可以在文章下方留言,github上提交issue或者联系我。 +有任何与本教程相关的问题,欢迎在文章下方留言或者 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)