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

2024-03-30 04:37•css•阅读 3459

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)

<!-- [if IE X]>

<![endif]-->

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

<!-- [if lt IE 6]

<![endif]-->

③对IE隐藏样式

④对IE5.x隐藏样式

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. 略

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

相关推荐

移动端点击出现阴影 css解决方案

《JavaScript高级程序设计》读书笔记 ---Function 类型

CSS中设置height:100%无效的解决方案

javascript--IE不支持table的innerHTML解决方案

多浏览器兼容性问题及解决方案之CSS篇

html 中 div不定宽度如何水平居中的解决方案？

css display:inline-block 出现空格解决方案

java解决动态的锁顺序死锁的方案