CSS入门项目小步教程 前言

链接地址：前言 | CSS入门项目小步教程 

一、为什么写《CSS入门项目小步教程》

CSS入门同学经常有这些疑问。

我是零基础，能不能推荐一本CSS入门书籍？

哪里有一个完整的项目（包括素材、完整详细的分析方法、实现代码）？

一个项目的整体思路是什么？开发流程是什么？我们如何一步步分析与实现？

项目基本能实现，但思路混乱，怎么梳理？如何思路清晰的写出代码清晰的网页？

标签约一百个，CSS属性几百个，哪些关键标签与CSS属性必须熟练掌握？标签与属性的关系是什么？

每个CSS属性都有若干个CSS属性值，没有设置时是否有值？标签的属性值是什么，标签的特殊样式从何而来？

这个属性明明是这个功能，为什么我这里用就不生效？是代码没有写对，还是属性之间互相制约、还是被自动修改过？到底为什么不生效？

CSS的规范规则这么多，有没有明确的规范规则清单？

经常碰到问题不知道问题在哪里所以无法解决，如何快速定位问题？

希望这本书能够指导同学们找到答案。

二、教程特色

（1）以项目为目标。讲解的每项内容（包括概念）具备可操作性。

（2）体系化。体系化的项目、体系化的知识点、体系化的方法、体系化的工具讲解。

（3）完整的图文教程。包括完整的目标、分析、代码、操作、运行效果、调试等。

（4）小步。细致讲解每个步骤。

（5）重在思路分析与设计。每个步骤都有对应的思路分析与设计说明。

（6）极力列举初学者常犯错误约20个。精准挖坑与填坑，假装不知道怎么原因，详细讲解分析思路、定位方法，帮助同学们以后碰到类似问题也能快速独立解决。

（7）让CSS不再是一门玄学。常见问题：属性设置无效、属性被其它属性自动修改、属性设置不合预期。说明常见玄幻问题与规范规则的识别、底层设计逻辑、解决方法。

（8）帮助入门同学开始就养成良好的设计与编码习惯。

（9）分步讲解产生的不规范代码。

规范代码

.class1{
 prop1: value1;
 prop2: value2;
…
 prop10: value10;
}

同一选择器各CSS属性按规范会放在一起。

实现页面时分多个步骤，每个步骤需要设置选择器的一部分内容，对应出现如下代码。

.class1{
 prop1: value1;
 prop2: value2;
}

.class1{
 prop3: value3;
 prop4: value4;
 prop5: value5;
}
…

.class1{
 prop10: value10;
}

一个文件内，同一选择器的所有属性放在一起。虽然不规范，但方便教学。

三、关于注释

按照规范，编码需要进行注释。同时，良好的代码天然具有解释自己的作用，即自解释性。实际项目如无必要，不加注释。本教程按照这个原则，代码基本没有注释。

初学者学习时，建议适当写注释，作为巩固知识的一种手段，更最重要的是熟悉代码本身。

四、原创声明

未经许可，不得转载。

本人水平有限，如有错误或者建议，敬请指正。

联系方式 ：153308271@qq.com