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