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

Author：chemandy

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

1. 子选择器和相邻通报选择器，在IE7下，如果父元素与子元素间有注释，会产生错误。
2. 层叠和特殊性，根据特殊性应用样式。内联>id>class>普通元素选择。
3. css中导入样式@import url(路径);速度比链接样式慢。

---------------------------------------------------------------------------------------

1. 设计css代码结构：
一般样式
         主题样式
         reset样式
         链接
         标题
         其他元素
辅助样式
         表单
         通知和错误
         一致的条目
页面结构
         标题、页脚和导航
         布局
         其他页面结构元素
页面组件
         各个页面
覆盖

/* @group general styles
----------------------------------------------------------------------*/

/* @group helper styles
----------------------------------------------------------------------*/

/* @group page structure
----------------------------------------------------------------------*/

/* @group page components
----------------------------------------------------------------------*/

/* @group overrides
----------------------------------------------------------------------*/
2. 添加css自我提示
3. 删除多余的注释，优化样式表。

---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------

章四、背景图像效果

1. 元素背景图像可以栖身于padding中。
2. 图像百分比定位例：若指定垂直和水平位置都是20%，则子元素左上角20%的点定位于父元素左上20%的点。最好不要混合使用单位和关键字。
3. 简单圆角处理：①固定宽度圆角框；②滑动门；③山顶角。
4. CSS 3 处理圆角：①同一元素下设置多个背景；②border-radius属性；③border-image属性。
5. 投影处理：①容器设置投影图片，img设负边距偏移；②Clagnut投影方法：img设置relative定位偏移。
6. CSS 3 处理投影：Box-shadow属性，例：img { box-shadow:3px 3px 6px #666;}，部分浏览器可能需要扩展才可以使用，如Safari（-webkit-）,Firefox（-moz-）
7. 不透明度处理：①属性opacity:0.8;针对IE使用filter:alpha(opacity=80);②使用RGBa方法：.alert { background-color: rgba(0,0,0,0.8); }，其最后一位为opacity值。③使用png图片，IE6不支持，需使用条件注释引用一下代码：.Aimg { filter:progid:DXImageTransform.Microfoft.AlphaImageLoader(src='path',sizingMethod='crop'); }
8. CSS 视差效果，多层png图像叠加情况下，设置水平偏移百分比可达效果。
9. 图像替换：①FIR方法，将文字块用display:none;或visibility:hidden;隐藏；②Phark方法：对文字使用text-indent:-5000px；设置css背景图片；③sIFR（Flash方法，忽略）

---------------------------------------------------------------------------------------

章五、对链接应用样式

1. 设置链接样式次序：a:link, a:visited, a:hover, a:focus, a:active;识记：Lord Vader Hates Furry Animals.
2. <a href="http://webname.com#id_name">some link</a>可以链接到某页的某个id上。CSS 3 允许设置:target伪类为目标元素设置样式。如： .comment:target{ background-color:yellow; }
3. 利用属性选择符突出显示不同类型的链接。
4. 翻转器实现：①利用a:hover(a设为block)；②Pixy样式的翻转：同一图片包含link和hover的图片；③CSS精灵；④利用CSS 3实现翻转。

---------------------------------------------------------------------------------------

章六、对列表应用样式和创建导航条

1. 改变列表的项目符号最好用背景图片，因项目图像属性可控性差。
2. 将锚链接<a>显示为block可以为css翻转器得到很好的兼容性。
3. 应巧妙利用绝对定位的负值来实现元素的显隐。

---------------------------------------------------------------------------------------

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

1. 表格特有元素summay、caption、thead、tbody、tfoot、col、colgroup。
2. 表单元素legend表现于个浏览器差异大，避免使用。
（章七-略）

---------------------------------------------------------------------------------------

章八、布局

1. 网站整体居中，margin：0 auto；IE将text-align：center；误解为所有东西居中，可于body设置让其居中（无害hack）。
2. 让父元素包含浮动的子元素三种方法：①添加清理的元素（会增加不必要的标记，尽量避免）。②让父元素浮动，并且使用某个元素（比如站点页脚）对它进行清理以便换行。③使用overflow:hidden技术（推荐）。
3. 为每一个浮动元素加上display:inline;
4. 布局：固定宽度布局（宽度都以像素布局）、流式布局（尺寸是以百分数而不是像素设置的）、弹性布局（相对于字号来设置元素宽度）。
5. 弹性布局关键：设置基字号。大多数浏览器默认字号16px，基字号设置：body { font-size:65.5%; } ，这样1em=10px；

---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------

章九、bug和修复bug

捕捉bug
CSS编辑器：SKEdit或CSS Edit，或通过CSS Validator等服务运行代码可以突出显示所有语法错误。
1. 常见问题1：特殊性和分类次序的问题，即css样式层叠问题，可通过提高样式特殊性解决。
2. 常见问题2：外边距叠加的问题，父子元素，若无边框或内边距，垂直外边距会发生叠加。

---------------------------------------------------------------------------------------

捕捉bug的基本知识
1. 使用FireBug、Firefox开发人员工具条。
2. 用标准浏览器作主要的开发浏览器，再修复其他非标准浏览器（IE）的bug。
3. 再非绝对必要的情况下避免使用hack。
4. 隔离问题：在相关元素上应用边框或轮廓（代码直接加入、Web开发人员工具条轮廓选项、bookmarklet加入）
5. 创建基本测试案例，重现bug所需最少量的html和css。注释css查明出错代码。
6. 修复问题，而不是修复症状。
7. 请求帮助。无法自行解决的问题，可以求助于活跃的css社区。

---------------------------------------------------------------------------------------

IE Bug有关的现实引擎“拥有布局”
1. IE表现与其他浏览器不同原因之一是，显示引擎使用一个称为“布局”(layout)的内部概念。
2. IE显示引擎为减少浏览器处理开销，用布局概念控制元素尺寸和定位。由部分拥有“拥有布局”（have layout）的元素负责本身及其子元素的尺寸和设置定位。
3. 拥有布局的元素包括：body, html（标准模式中）, table, tr, td, img, hr, input, select, textarea, button, iframe, embed, object, applet, marquee。
4. 设置一下css属性会自动使元素拥有布局。Float:left或right、display:inline-block、width:任何值、zoom:任何值（MS属性，不通过验证）、writing-mode:tb-rl（MS属性，不通过验证）。
5. IE7中，以下属性页成了布局触发器：overflow:hidd、scroll或auto、min-width:任何值、max-width:除none外的任何值。
6. 布局的效果：
段落拥有布局会被限制成矩形，而阻止文本围绕浮动元素。
拥有布局的元素确定自身尺寸的问题，IE中的width实际上更像是min-widht。
拥有布局的元素不会收缩。
布局元素对浮动进行自动清理。
相对定位的元素没有布局。
在拥有布局的元素之间外边距不叠加。
在没有布局的会计链接上，单击区域只覆盖文本。
在滚动时，列表项上的背景图像间接性的显示和消失。

---------------------------------------------------------------------------------------

Bug解决方法
1. IE条件注释
①制定一种特定IE浏览器(x=6\7\8\9)

②指定一组IE浏览器，如IE5和IE5.5

③对IE隐藏样式

    <link rel="stylesheet" type="text/css" herf="/css/advanced.css" />

④对IE5.x隐藏样式

    <link rel="stylesheet" type="text/css" herf="/css/modern.css" />

2. 能不用hack最好不用hack，过于依赖解析bug的过滤器一旦bug修复会破坏网页布局。
3. 如需使用hack需要集中标注，或单独建立一个hack的css文件。
4. 星号HTML hack过滤器，应用于IE6.
5. 使用子选择器对IE6隐藏css，如html>body { }.

---------------------------------------------------------------------------------------

常见bug及其修复方法
1. IE6下，双边距浮动bug
出现条件：元素浮动并有外边距。
解决方法：每当具有水平外边距的元素需要浮动时，应该自然的将display属性设置为inline。
2. IE6下，3像素文本偏移bug
出现条件：文本与浮动元素相邻。
解决方法：仅对IE6作用以下css：p{ height:1%; margin-left:0;} .myFloat { margin-right:3px; }
如果浮动的是图片，则设置为img.myFloat { margin:0; }
3. IE6下，重复字符bug
出现条件：在一些列浮动元素的第一个和最后一个元素之间有多个注释时。
解决方法：设置右外边距从最后一个浮动元素上去掉3像素，或者使容器扩大3像素。这可能造成ie7出现问题，最好是将注释删掉。
4. IE6下，“藏猫猫”bug（peek-a-boo）
出现条件：一个浮动元素后面跟着一些浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或者图像的父元素中。如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来消失了，隐藏到父元素的背景颜色或图像后面，只有刷新才能重新出现。
解决方法：①去掉父元素的背景或颜色。②清理元素与浮动元素的接触。③容器元素应用特定尺寸。④容器制定行高。⑤浮动元素和容器元素的position属性设置为relative。
5. IE6下，相对容器中的绝对定位
出现原因：相对定位元素没有获得IE/Win的内部hasLayoout属性。因此不能创建新的定位上下文，所有绝对定位元素相对于视口进行定位。
解决方法：逼使相对定位容器拥有布局。用条件注释使相对容器拥有高度。

---------------------------------------------------------------------------------------

一、杂
1. outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓线不会占据空间，也不一定是矩形。
2. quotes 属性设置嵌套引用（embedded quotation）的引号类型。

二、实例研究Roma Italia
1. CSS分块注释，添加IE专用CSS，@import注入样式表。
2. 良好的注释，各大块结束添加注释。
3. 浮动清除使用:after伪类结合display:none;解决。
4. 为表单添加fieldset和legend用以通过w3c认证。legend样式难以控制，使用display:none;隐藏。
5. 表单为通过w3c认证必须有fieldset、legend或div嵌套。

三、实例研究Climb the Mountains
1. 可访问性：提供非css用户快速跳转导航。
2. 略

posted @ 2011-03-28 21:29 chemandy 阅读(1692) 评论(8) 编辑收藏举报

刷新页面返回顶部

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

公告