《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

编写高质量代码：Web 前端开发修炼之道／曹刘阳著. —北京：机械工业出版社，2010.5 第一版

涉及到的知识点：

1. CSS Sprites 在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

2. border-collapse 属性设置表格的边框是否被合并为一个单一的边框

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。

3.:after 选择器在被选元素的内容后面插入内容。http://www.w3school.com.cn/tiy/t.asp?f=css_sel_after_style

请使用 content 属性来指定要插入的内容。

p:after
{
content:"台词：-";
background-color:yellow;
color:red;
font-weight:bold;
}

4. zoom版本：IE5.5+专有属性　继承性： 语 

zoom : normal | number 
 参数：
normal : 　使用对象的实际尺寸
number : 　百分数|无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值
说明：设置或检索对象的缩放比例。
 示例：http://www.divcss5.com/shouce/c_zoom.shtml
div {zoom : 0.75; } 

 

5.

widget 英[ˈwɪdʒɪt]
美[ˈwɪdʒɪt]
n. 小器具，装饰品，窗口小部件;
[例句]The secret is a little widget in the can.
奥秘在于易拉罐中的一个小玩意儿。

overlay 英[ˌəʊvəˈleɪ]
美[ˌoʊvərˈleɪ]
v. 覆盖; 镀金;
n. 覆盖物; 轮廓纸;
[例句]The floor was overlaid with rugs of oriental design.
地板上铺着东方风情的地毯。

stacked 英[stækt]
美[stækt]
v. 堆积( stack的过去式和过去分词 );
[例句]They are stacked neatly in piles of three.
它们每3个一组被整齐地码放在一起。

6.

<style type=”text/CSS”>
span{font-size:40px}
.test2{color:green}
.test{color:red}//覆盖前边的，显示红色
</style>
<span class=”test test2”>1234567890</span>

<style type=”text/CSS”>
span{font-size:40px}
.test2{color:green}
.test{color:red}//覆盖前边的，显示红色
</style>
<span class=”test2 test”>1234567890</span>

根据类在css中定义的位置，后边的覆盖前边的

另外，HTML标签的权重是1，如p。class的权重是10，如.test。id的权重是100,如#id。权重总合越大，越不容易被覆盖。

7.DTD全程Document Type Definition, 即文档类型定义。DTD是一种保证HTML文档格式正确的有效方法，可以通过比较HTML文档和DTD文件来看文档是否符合规范， 以及元素和标签使用是否正确。一个DTD文档包含元素的定义规则，元素可使用的属性，可使用的实体或符号规则。

8.

cite 英[saɪt]

美[saɪt]
vt. 引用，引证; [法] 传讯; 表扬; [军事] 传（或通）令嘉奖;
n. <口>例证，引文;

acronym 英[ˈækrənɪm]
美['ækrənɪm]
n. 首字母缩略词;

9.块级元素可以设置width、height属性。而行内元素设置width、height属性无效。

但奇怪的是，行内元素水平的padding-left、padding-right、margin-left、margin-right都能产生边距效果。而竖直方向的却不会产生边距效果。

我们可以通过修改display属性来切换块级元素和行内元素，如block或inline。

感想：

如果让我就这个主题写一本书，我会写点什么呢？也许很少吧，也许无从下手吧。所以，多看书吧，满足一下自己的求知欲。