再读《精通CSS》笔记

Author：Chemandy

第一章 基础知识

1. div和span

①div实际上代表部分（division），它可以将文档分割为几个有意义的区域。所以通过将主要内容区域包围在div中并分配Content类，就可以在文档中添加结构和意义。

②为了将不必要的标记减到最少，应该只在没有现有元素能够实现区域分割的情况下使用div元素。

③span可以用来对行内元素进行分组或标示。

2. 微格式

①基于vCard和iCalendar等现有的数据格式，开发的一套标准的命名约定和标记模式来表示人、地点、或日期等类型的信息。

3. XHTML 1.0页面可以作为HTML文档，而XHTML 1.1页面是作为XML发送给浏览器。
4. 进行W3C验证，html文档和CSS文档。
5. Doctype对浏览器验证、浏览器模式有影响。

 

第二章 为样式找到应用目标

1. CSS 2.1中兼容问题：

IE6：

不支持多类选择器：.class1.class2

不支持属性选择器

不支持相邻同胞选择器

不支持直接后代选择器

只支持伪类中的:link :visited :hover且只能用于锚元素。

 

2. 建议使用单一文件样式表。多个文件会导致从服务器发送更多数据包，这些数据包会影响下载时间。
3. CSS注释小tips，使用@gourp type定义样式表中的版式部分，通过搜素标志和注释头前几个字母进行查询。/* @gourp typography */

4. ①设计css代码结构：

◎ 一般样式

         □ 主题样式

         □ reset样式

         □ 链接

         □ 标题

         □ 其他元素

◎ 辅助样式

         □ 表单

         □ 通知和错误

         □ 一致的条目

◎ 页面结构

         □ 标题、页脚和导航

         □ 布局

         □ 其他页面结构元素

◎ 页面组件

         □ 各个页面

◎ 覆盖

②代码结构：

/* @group general styles

----------------------------------------------------------------------*/

/* @group helper styles

----------------------------------------------------------------------*/

/* @group page structure

----------------------------------------------------------------------*/

/* @group page components

----------------------------------------------------------------------*/

/* @group overrides

----------------------------------------------------------------------*/

③添加css自我提示

/* @todo 表示东西需要以后进行修改、修复或复查 */

/* @workaround: 不完善的权宜之计*/

/* @bugfix: 表示代码或特定浏览器遇到的问题 */

④删除多余的注释，优化样式表。

网站发布是需要对样式和页面进行压缩。

 

第三章 可视化格式模型

1. IE中怪异模式的盒模型：在这种非标准的盒模型中，浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度总和。
2. IE6BUG：如果要相对于定位框的右边或底部设置绝对定位的框的位置，那么需要确保相对定位的框已经设置了尺寸。若果没有，IE会错误地相对于画布定位这个框。
3. IE6中不支持固定定位，Jonathan Snook使用JavaScript在IE中重现这个效果。
4. 清楚浮动的方法：

①定义overflow属性为hidden，利用这个属性会自动清理包含的任何浮动元素的副作用。（缺点：会影响滚动条或截断内容）

②结合:after伪类和内容声明在指定的现有内容末尾添加新的内容。（缺点：IE6、IE7不支持生成内容）

.clear:after{

content:".";

height:0;

visibility:hidden;

display:block;

clear:both;

}

③Holly hack，迫使IE6拥有布局和错误地清理浮动元素。

④添加一个应用clear的元素。（缺点：可能会造成添加无意义的标记）

⑤使父元素也浮动。（缺点：浮动会对下一个元素造成影响）

 

第四章 背景图像效果

1. 圆角框

①滑动门，会添加额外无语义元素。

②山顶角，使用位角蒙版（位图），对背景进行阻挡形成圆角。

③CSS3中定义多背景图像（用逗号分隔不同图片），实现滑动门效果。

④使用CSS3中border-radius属性，绘制圆角框。

⑤使用border-image设置图片边框。

2. 投影

①使用一个阴影背景，然后利用负外边距或相对定位偏移图片，形成阴影效果。

②使用box-shadow属性，可设值：阴影类型、X轴位移、Y轴位移、阴影大小、阴影扩展、阴影颜色。

3. 不透明度

①设置CSS3的opacity属性令背景半透明。

②IE9以下不支持CSS3的opacity，需要是使用滤镜。

延伸：CSS透明度大汇总

③使用RGBa的方法（同时设置背景色和背景色的透明度）：background-color:rgba(0,0,0,0.8);

④使用透明图片

1. gif支持256色，全透明或全不透明（索引透明）。

2. png8支持256色，全透明或全不透明（压缩性比gif好）。

3. Png24/32支持多种色彩，有alpha透明（即可以半透明）。ie6不支持png的alpha透明，所以，需要调用ie过滤器filter。

4. CSS视差效果

利用image-position中百分比值的特点，使用透明图片形成视差。P76

5. 图像替换

□ 避免使用图像替换的原因：对屏幕阅读是无效的，且关闭图像但打开css时，就回出现内容缺失。

□ 替换技术：

①FIR：例：<h2> <span>替换文字</span> </h2>，通过display:none;可以使图像消失。（不推荐，部分屏幕阅读器会忽略display为none、visibility为hidden的元素从而造成可访问性问题）

②Phark：不使用display而是使用text-indent设一个大的负缩进使文字消失。（比较理想）

③sIFR：使用JavaScript搜索文档，找到特定元素或者具有特定类名的元素中的所有文本。然后将JavaScript文本替换成一个小的flash文件。（可能还会造成页面延迟，不推荐）

 

第五章 对链接应用样式

1. IE6、IE7不支持在除链接之外的其他元素上使用伪类选择器。
2. 提高对链接样式的可访问性，为链接添加:hover的同时添加:focus，这样在通过键盘移动到链接上时，让链接显示出与鼠标悬停相同效果。
3. 使用:target伪类可以为目标元素设置样式。
4. 通过属性选择器可以为各种链接文档添加图标。
5. 对行内元素使用display:block;后，由于块元素的特性，行内元素会的范围会扩充，表现的方式变成了块元素。
6. 图片多使用CSS Sprite合并。
7. 使用CSS3可以创建按钮：border-radius、gradient、text-shadow、box-shadow、box-reflect、transition等等属性。
8. 利用CSS可以创建提示工具，一般都使利用伪类:hover创建。

 

第六章 列表应用样式与创建导航条

1. 使用内边距和背景图为li元素添加列表小图标，这对图标的可控性更强。

2. 创建导航条：

□一般规范

①无需多余无语义的div嵌套，直接上<ul><li></li><li></li></ul>

②li元素内的锚元素a直接设display为block方便设置样式。li的宽度通过a的padding控制，高度通过a的行高控制。

□可用滑动门技术创建标签页式导航

□纯css弹出菜单：利用:hover与定位，注意IE6、7中此法无效。

3. CSS图像映射

□原理同纯css弹出菜单。利用伪类:hover在锚元素a的属性，通过定位来实现映射。

 

第七章 对表单和数据表格应用样式

1. 对数据表格应用样式：

1）summary和caption：应使用table中的summary属性对表格的内容进行描述，table标题使用caption元素。

2）thead、tbody和tfoot：thead（内部必须使用th而非td）和tfoot只能用一次，但可用多个tfoot对表格进行内容划分。

★IE6、IE7中不理解css的border-spacing属性，只能使用table元素的cellspacing属性控制单元格之间的距离。

2. 关于表单:

1）用label元素与表单关联（两种方式）：

□隐式实现：把表单元素嵌套在label元素中：

<label>email<input name="email" type="text" /></label>

□显式方法：用label的for属性设置为相关联的表单元素的id名称：

<label for="email">email</label><input name="email" id="email" type="text" />

2）利用fieldset元素定义对相关信息块分组，使用legend元素对信息块进行描述。由于legend的表现在各浏览器下可控性都比较差，如果需要控制标题表现，建议使用h元素。

3）label元素对于表单的可访问性很重要，如果不希望页面出现label的文字可以负缩进隐藏，但在HTML代码中含label对可访问性很重要。

4）关于提交按钮：有三种设置提交按钮的方式——input元素type为submit和image时，使用button元素时。

□input的缺陷：无法只使用元素选择器选择。可以使用使用属性选择器选择，但IE6不支持，所以只能用ID或类选择器选择。

□button的问题：IE6（某种程度上还有IE7）处理提交的方式。其他浏览器提交value属性的内容，但是IE6、IE7提交元素本身的内容。

 

第八章 布局

1. 计划布局：先网站框架性，后区域语义性。
2. 基于浮动的布局：

①两列浮动布局：固定宽度，左右浮动中间留空。

②三列浮动布局：重复使用两列浮动布局的技术。

3. 固定宽度、流式和弹性布局：

①流式布局：使用百分比而不是像素来设置尺寸。

②弹性布局：以em为单位设置宽度。

□一般设置浏览器默认字号为16像素，对body元素设font-size:62.5%使1em等于10px。

□一般只对最外层容器wrapper设置字体宽度如92em，内层框架布局使用百分数设置。这样内部宽度还是基于字号的，而且可以方便地修改布局的总尺寸，不必修改每个元素的宽度。

③流式和弹性布局的图像问题：

□这两种布局可能会在页面宽度变化时使图像移动。

□考虑使用背景图像，而不是图像元素。

□图像元素的容器宽度设置为100%并且将overflow属性设置为hidden。

□对于常规内容图像，若希望图像可伸缩。可将图像元素添加到没有设置任何尺寸的页面上。然后设置图像的百分数宽度，并且添加max-width以避免图像失真。

4. faux列（略）。高度相等的列：设置大的底部bottom、和差不多大小的负底部margin。CSS3列，利用cloumn-count,cloumn-width,cloumn-gap,cloum-rule来对段落分栏。
5. 圣杯布局：

□一个自适应适应的中心和固定宽度的侧边栏

□允许中间的内容先于其他出现在代码中

□允许任何一栏都是最高的高度

□只需要额外的一个DIV标签

□非常的简单的CSS代码和很少很少的HACK 补丁

★圣杯布局方法概述：包含div（container）设置左右内边距的大小等于left和right的div。中间内容div设置宽度width为100%，left的div设置负100%的左外边距，并且向左相对便宜自身宽度。right的div则设置与本身宽度相同的右负外边距。（这种布局需要理解块级元素水平宽度模型）。

参考：寻找圣杯

 

第九章 bug和bug修复

1.  CSS常见错误

①代码中的打字和语法错误造成的。

②特殊性和分类次序的问题。（css特殊性层叠）

③外边距叠加的问题。

2. 捕捉bug的基础知识

①尽量在一开始就避免bug

②隔离问题（例如在相关的元素上应用边框或轮廓）

③创建基本测试案例

④修复问题，而不是修复症状

⑤请求帮助

3. 拥有布局

★定义：IE6、7使用布局概念来控制元素的尺寸和定位。那些“拥有布局”（have layout）的元素负责本身及其子元素的尺寸设置和定位。如果一个元素“没有拥有布局”，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。

■在默认情况下拥有布局的元素包括：

□body

□html（标准模式中）

□table

□tr、td

□img

□hr

□input、select、textarea、button

□iframe、embed、object、applet

□marquee

■设置以下CSS属性会自动地使元素拥有布局

□float：left或right

□display:inline-block。

□width：任何值

□height：任何值

□zoom：任何值（Microsoft属性——不能通过验证）

□writing-mode：tb-rl（Microsoft属性——不能通过验证）。

■在IE7中，以下属性也成了布局触发器：

□overflow：hidden、scroll或auto。

□min-width：任何值

□max-width：除none之外的任何信息。

■IE拥有布局造成的问题：

□IE6中拥有布局的元素会被限制为矩形，因此阻止文本围绕浮动元素。

□IE6中拥有布局的元素会无视宽度的限制错误的扩展自身元素大小以便适应内容的尺寸。

□拥有布局元素不会收缩

□布局元素对浮动进行自动清理

□相对定位的元素没有布局

□在拥有布局的元素之间外边距不叠加

□在没有布局的块几链接上，单击区域只覆盖文本。

□在滚动时，列表项上的背景图像间歇性地显示和消失。

★如果遇到一个IE BUG，首先应该尝试通过应用规则使元素拥有布局，看看是否可以修复。

4. BUG解决方法

①IE条件注释

②应用星号HTML hack

③应用子选择器hack

④慎用hack

5. 常见BUG及其修复方法

①双外边距浮动bug

②3像素文本偏移bug

□触发：当文本与一个浮动元素相邻时，这个bug就会表现出来。

□修复：首先，给包含文本设置任何高度，迫使元素拥有布局。P201

③IE6的重复字符bug

□触发：当一系列浮动元素的第一个和最后一个元素之间有多个注释时。

□修复：避免这些注释

④IE6的“藏猫猫”bug

□触发：一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来消失了，隐藏到了父元素的背景颜色或图像后面，只有刷新页面才重新出现。

□a.去掉父元素上的背景颜色或图像。b.避免清理元素与浮动元素接触。c.容器元素应用了特定的尺寸。d.给容器指定行高。e.将浮动元素和容器元素设为相对定位。

⑤相对容器中的绝对定位

□根本原因：相对定位元素没有获得IE/WIN的内部hasLayout属性。因此，它们不创建新的定位上下文，所有绝对定位元素相对于视口进行定位。

□使相对定位的容器拥有布局。

 

第十章 实例研究:Roma Italia

1. 着眼于html5。

2. 使用网格协助布局。

3. 使用CSS3为标准浏览器提供更好地视觉效果。

4. 使用AJAX和jQuery增加交互性。

 

第十一章 实例研究：Climb the Mountains

1. 使用css reset：YUI、Eric Meyer
2. 使用条件注释的IE样式表
3. 使用网格灵活布局。
4. 使用body类控制导航。

5. 使用CSS3创造特效。

6. 利用:hover创建特效。

第一次笔记：《精通CSS：高级Web标准解决方案》读书笔记