《CSS设计指南》学习笔记一_html/css_WEB-ITnose

本篇文章是对这几天看完 Charles Wyke-Smit 的 《CSS 设计指南》 后的一些学习笔记与心得，笔者好像是大一的时候开始接触网页设计，由于并不是计算机专业的，所以所有都是自己自学的，记得当时自己对 CSS 基本上什么都不懂，甚至连怎么在 CSS 中选择某个 class 和 id 都不懂，然后就直接下载一些源码来看，后来看到这些 CSS 文件中有 . 和 # ，然后就连蒙带猜的学会了怎么使用它们，然后就在源码中看到什么不懂的就直接上 W3School 中查找 API，这样也慢慢的让我掌握了 CSS 中常用的部分，并且制作网页时大多数的问题都能够得到解决。由于期间自己的态度摇摆不定也想学 PHP、 Java、 Android 等等，然而结果可想而知，并没有坚持下来，如今大三也快结束马上要进入准大四的阶段了，感觉不能在这样下去了，前段时间一直在思考一个问题，自己到底喜欢什么，然后回想自己大学以来花的最多时间的地方是什么，最终的出的结果就是??前端，尽管前端涉及的知识很多，但这并不能阻碍我对它的热情。决定下来后的第一件事情就是系统的巩固一下自己的知识体系，然后就有了这篇 《CSS 设计指南》 的学习笔记，这本书也是比较多人推荐并且好评比较多的一本 CSS 入门书。废话说了这么多然而并没有什么 * 用，赶紧进入正题才是，下面主要是笔者对某些章节的总结，并不是每一个章节的总结，同时也有笔者对书本内容的一些个人观点和一些拓展。

.age::before { content: "Age: ";}
.age::after { content: " years";}
这里需要注意的是，对于 ::before 和 ::after 伪元素，其 content 属性是必须的，还有就是搜索引擎不会取得伪元素的信息（因为它在文档流中并不存在），因此不要通过伪元素添加一些对搜索引擎来说是重要的内容。

拓展：

其实伪元素前面冒号可以是两个也可以是一个，但是为了区别伪类，笔者建议大家还是使用两个冒号。还有一个要注意的是，比如通过 ::before 和 ::after 伪元素为 class 为 pseudo-element 添加两个伪元素，则生成的两个伪元素分别处于 pseudo-element 元素的内部，也就是说是 pseudo-element 元素的子元素，并且分别位于 pseudo-element 元素的内容的最前面和最后面，代码如下：

Pseudo Element

查看更多关于《CSS设计指南》学习笔记一_html/css_WEB-ITnose的详细内容...