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

  本文关键词：精通CSS：高级Web标准解决方案，由笔耕文化传播整理发布。

《精通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.

  本文关键词：精通CSS：高级Web标准解决方案，由笔耕文化传播整理发布。