css设计理论-css基本规则,css高级应用技巧

csscascading style sheet

›› 设计理论 ›› 参考文章 ›› 工具代码 ›› 经典站点 ›› css关键词

css基础知识
css常见错误
css选择符
css高级技巧
bug与bug修复
css hack
对链接使用样式
对列表使用样式

css基础知识

良好的代码结构
1. 使用有意思的标签。
  1. 有意义的标记提供了将元素调整为你所需样式的简单方法。它在文档中添加了结构并且创建一个底层框架。可以直接设置元素的样式，而不需要添加其它的标识符，因此避免了不必要的代码膨胀。
  2. XHTML包含丰富的有意义元素,如h1，h2，ul，ol，dl，strong，em，blockquote，cite，abbr，acronym，code，fieldset，legend，label，caption，thead，tbody，tfoot
2. id和类名的使用与区别
  1. ID用来标识持久的结构性元素，页面内唯一
  2. class可以应用于页面上的任意数量的元素
  3. 在id和class的命名中，尽量保持名称的有意义并与表现方式无关，如subNav或secondaryNav比rightHandNav更适合，错误消息的显示用error或feedback比red更适合
  4. id用于控制页面结构，class用于控制页面的修饰部分
  5. id和class是否区分大小写取决于标记语言是否区分大小写
  6. 在类的使用过程中避免出现多类症，尽量采用层级书写方式控制页面表现
  7. id和class的命名方式采用驼峰式(camel caes)，如mainNav，secondaryNav
3. div和span
  1. div对块级元素进行分组，span对内联元素分组或者标记
  2. div根据条目的意义或功能(而不是根据它们的表现方式或布局)对条目进行分组，嵌套结构建议控制在3层之内

css常见错误

检查代码错误, 申明DTD，否则导致元素居中等错误

css选择符

通配选择符语法：* {sRules} 说明：选定文档目录树（DOM）中的所有类型的单一对象
类型选择符语法：E {sRules} 说明：以文档语言对象(Element)类型作为选择符
属性选择符
1. 语法：
  1. E1[attr] h[title] { color: blue; } /* 所有具有title属性的h对象 */
  2. E1[attr=value] span[class=demo] { color: red; }
  3. E1[attr~=value] div[speed="fast"][dorun="no"] { color: red; }
  4. E1[attr|=value] a[rel~="copyright"] { color:black; }
http://www.cnblogs.com/JustinYoung/articles/css-selector.html

css高级技巧

图片等比缩放 img.zoom {width:70%; height:110px;}
居中定位 #container {position:relative;left:50%;margin-left:1/2容器宽度px;}
文字换行 .wordwrap {word-wrap:break-word;word-break:break-all;-moz-binding: url('./wordwrap.xml#wordwrap');overflow: hidden;} Wordwrap for Mozilla Wordwrap for Mozilla js截取字符串强制换行
截取字符 div.test{width:200px;height:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} 说明：优点是内容可以为任何HTML元素,包括超链接和图片等,在IE6中还会在结尾自动显示省略号.缺点是必须指定宽度数值,并且宽度不能是百分数,否则在IE中会被认为是字符总长的百分比. test-overflow white-space
IE6.O下使用iframe出现横向滚动条 html {overflow-x:hidden;}

bug与bug修复

bug捕捉

最常见的css问题并非来源与浏览器bug,而是开发人员队css规范理解的不完全.
检查语法错误 css代码检查器 clean css CSS整形与最佳化工具
检查特殊性和分类次序
1. 增加特殊性 #content p {} .intro {} ->#content p {} #content .intro {}
2. 空白边叠加问题(如果没有垂直边框和填充,它的高度就是它包含子元素的顶部和底部边框的距离).解决方法:通过添加一个垂直的边框或填充,使空白不再重叠.
使用符合标准的浏览器(fire,safari)
隔离问题
1. 边框轮廓测试
2. 修改几个属性值,bug效果扩大化
3. 修改position:relative,display:inline或者设置宽高度,可以修复许多ie bug
创建基本测试
1. 重现 bug所需的最少量的xhtml和css
2. 有些浏览器有奇怪的空格bug,可以尝试删除xhtml中的空格
3. css社区 css-discuss web standards group webmaster world css forums
拥有布局
1. 如果元素没有拥有布局,尺寸和未知有最近的拥有布局的祖先元素控制
2. 默认情况下拥有布局的元素 body,标准模式中的html,table,tr,td,img,hr, input,select,textarea,button,iframe,embes,object,applet,marquee
3. 设置以下css会使元素自动拥有布局 position:absolute,float:left(right),display:inline-block,width:任何值,heght:任何值,zoom:任何值(ms私有),writing-mode:tb-rl(ms私有)
布局有什么效果
1. 拥有布局的元素不进行收缩
2. 布局元素队浮动自动清理
3. 相对定位的元素不获得布局
4. 再拥有布局的元素之间空白边不叠加
5. 再不拥有布局的块级链接上,单击区域只覆盖文本

常见bug及修复

双空白边浮动bug
1. 适用 ie6-
2. 形成使任何浮动元素的空白边加倍
3. 解决浮动元素申明display:inline
4. 说明每当对具有水平空白边的元素进行浮动时,都应该自然的将display设置维inline
3象素文本偏移bug
1. 适用 ie5-6
2. 形成当文本与一个浮动元素相邻使,这个bug会表现出来 .myfloat {float:left;width:200px;} p {margin-left:200px;}
3. 解决
  1. 设置文本任意高度,使元素拥有布局,表面上消除文本偏移
  2. 将空白边设置为零
  3. 设置一个负3px的右空白边,去除浮动元素间隙
  4. /* hide from ie5-mac.only ie-win sees this */
    * html p {height:1%margin-left:0;}
    * html .myfloat {margin-right:-3px;}
    /* end hide from ie5/mac */
  5. 如果浮动元素使图像/* hide from ie5-mac.only ie-win sees this */
    * html p {height:1%margin-left:0;}
    * html img.myfloat {margin:0 -3px;ma\rgin:0;}
    /* end hide from ie5/mac */
4. 说明 win ie6- 将height作为min-height那样对待,设置一个小高度并不影响元素再这些浏览器中的实际尺寸
ie6重复字符bug
1. 适用 ie6
2. 形成在一系列浮动元素的第一个和最后一个元素之间有多余2个注释时出现
3. 解决删除html中的注释
ie6躲躲猫bug(peek-a-boo)
1. 适用 ie6
2. 形成在一个浮动元素后面跟着一些非浮动元素,然后时一个清理元素,所有元素都包含在一个设置了背景颜色或图像的父元素中.如果清理元素遇到了浮动元素,中间的非浮动元素消失,隐藏到父元素的背景颜色或图像后面,只有重新加载才出现.
3. 解决
  1. 清除父元素背景色或图像
  2. 给容器元素应用尺寸
  3. 给容器制定行高
  4. 将浮动元素和容器元素position:relative也会减轻这个问题
相对定位中的绝对定位
1. 适用 ie6-
2. 形成相对定位的元素没有获得ie/win的内部hasLayout属性
3. 解决一般在容器上显式的设置height和width,* html .container {height:1%;}
ie6最小高度
1. 适用 ie6
2. 形成 ie6中即使你的容器里没有文字(font),还是继承了一个默认字体大小(font-size),而且认为容器高度不得低于这个字体大小

a. firefox开发人员工具条

css hack

浏览器私有选择符

仅ie7识别 *+html select {background:#000!important;}
IE6以下 * html select {…} , html/**/ >body select {…}
仅ie6不识别 select {display/**/:none;}
仅IE6与IE5不识别 select/**/ {display/**/:none;}
仅IE5不识别 select/**/ {…}
FF独有 *:lang(zh) select {font:12px!important;} (要使*:lang能让浏览器正确识别,web开发者必须在一个顶级标签上加上一个html标记扩展的语言属性,xml:lang="zh-cn"或者xml:lang="zh-TW",有了这个扩展,web开发者可以根据这个属性撰写相应的样式表对某地区加以应对显示) Language tags in HTML and XML Language Subtag Registry RFC 4646, Tags for the Identification of Languages Understanding the New Language Tags
MAC上safari独有 select:empty {font:12px!important;}
Opera独有 @media all and (min-width:0px){select {…}}
其他(不推荐) +background:yellow!important;/*ie7*/background:#000;/*ff,op*/_background:red;/*ie6,ie5*/

盒模型

明确盒模型的清除方法不是通过!important来处理的 select {width:IE5.x宽度;voice-family :"\"}\"";voice-family:inherit; width:正确宽度;}

清除浮动

ff子级浮动,对父级声明 select:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
ie子级浮动,对父级声明 overflow:auto;zoom:1;

截字省略号

Firefox并不支持 select {-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}

IE的if条件Hack

所有的IE可识别 
只有IE5.0可以识别 
IE5.0包换IE5.5都可以识别 
仅IE6可识别 
IE6以及IE6以下的IE5.x都可识别 
仅IE7可识别

对链接使用样式

简单的链接样式

a:hover,a:active {...} a:link,a:visited {...}, 如此申明造成停留和激活样式无效,是因为两个具有相同特殊性的规则,后定义的规则优先,样式定义顺序, LoVe:HAte

初级应用

链接使用边框
a:link,a:visited {text-decoration:none;border-bottom:1px dotted #000;} a:hover,a:active {text-decoration:none;border-bottom-style:solid;}
链接使用背景,但并非所有浏览器都支持背景图像动画,但使动画静态化

突出不同类型的链接

让外部链接看起来不一样 .external { background:....;padding-right:20px;} wikipedia.com
属性选择器来允许根据特定属性是否存在或属性值来寻找元素
a[href^="http:"] {background:...;padding-right:20px;}
去除绝对url的内部链接 a[href^="http://www.yoursite.com"],a[href^="http://yoursite.com"] {background:none;padding-right:0;}
邮件链接 a[href^="mailto:"] {...}
aim即时消息协议 a[href^="aim:"] {...}
下载文档 a[href$=".pdf"] {...}, a[href$=".doc"] {...}
rss提要 a[href$=".rss"] {...}, a[href$=".rdf"] {...}

翻转链接

定义链接样式 a {display:block; width:6em;/*dimensions needed for IE5.x/Win*/ padding:0.2em; line-height:1.4; background-color:#94b8e9; border:1px solid black; color:#000; text-decoration:none; text-align:center;}
简单翻转 a:hover { background-color:#369; color:#fff;}
图像翻转 a:hover { background:url(...); color:#fff;}
Pixy(petr stanicek)样式翻转,使用同一背景通过调整位置实现翻转. 为了避免在ie/win下闪烁,需要讲\将翻转转台应用于链接的父元素,p{ background:url(...)}

已访问过的链接样式

已访问的链接, 定义a:visited的背景状态(在已访问站点旁边显示复选框的外部链接列表)

纯css工具提示

xhtml
	<p><a href="http://www.andybudd.com/" class="tooltip">andy budd<span>(this website rocks)</span></a>is a web developer in birghton england.</p>
	css
	a.tooltip {position:relative;}
	a.tooltip span {display:none;}
	a.tooltip:hover span {display:block;position:absolute;top:1em;left:2em;padding:0.2em 0.6em; border:1px soli #963; bockground:#ff6;color:#000;}
	a.tooltip:hover {font-size:100%;/* fix bug in ie5.x/Win*/}

对列表使用样式

基本列表样式

ie,opera使用左空白边控制列表缩进,safari和firefox使用左填充

初级应用

通常不对列表应用样式,而是对其中包含的锚应用样式,使用行高控制居中. 解决ie列表上下额外空间,申明li {display:inline;}
在导航中突出显示当前页面, 主体ID 列表ID/类的唯一方法在站点导航中突出显示当前部分或页面

水平导航条

对浮动元素的清除浮动, 一使添加清理元素, 二是对父级元素进行浮动.
每个按钮的宽度都有锚文本的尺寸决定, 不设置宽度,而是在每个锚链接的左右应用2em填充.
在Mac的ie5.2上不对浮动列表项进行收缩包围, 解决这个问题,只要对锚也进行浮动.

简化滑动门标签页式导航

对li应用rbg, 对锚使用lbg. 实例网站代码下载

css图像映射

指定图像热点

xhtml
	<div id="pic">
	<img src="" alt="" />
	<ul>
	<li class="a1"><a href="" title="" target="_blank">a1</a></li>
	<li class="a2"><a href="" title="" target="_blank">a2</a></li>
	<li class="a3"><a href="" title="" target="_blank">a3</a></li>
	</ul>
	</div>
	css
	#pic {width:300px; height:200px; position:relative;}
	#pic a {position:absolute; width:100px; height:120px; text-indent:-1000em;}
	#pic .a1 a { top:15px; left:95px;}
	#pic .a2 a {...}  #pic .a3 a {...}
	#pic a:hover { border:1px solid #fff;}

flickr风格图像映射