css设计模式 一

1.背景图片模式

Div{background:url("bg.jpg") no-repeat;height:960px;width:400px;}

2.绝对定位模式

首先必须确定一个祖先，这个祖先必须是已经定位的元素，然后在设定自己的定位模式为position:absolute;用top和left等属性来设定自己在离他最近的已经定位的元素的距离。

<style>div{background:url("bg.jpg") no-repeat;height:400px;width:960px;}*.positioned{position:relative;}*.absolute{position:absolute;top:10px;left:10px;}</style><h1>绝对定位</h1><div class="positioned"><span class="absolute">设定尺寸的绝对定位元素</span></div>

3.文本替换模式
用来替换一段文本，但是当图片下载失败的时候也能显示出这段文本来。

<style>#h2{height:99px;width:200px;position:relative;overflow:hidden;}#h2 span{position:absolute;width:200px;height:99px;left:0;top:0;background:url("bg.jpg") no-repeat;}</style><h1>文本替换</h1><h2 id="h2">标题2<span></span></h2>

4.左外边距模式
有时候你想将一段内容移到一边去，比如注释，内容显示在主体部分，这种模式非常有用,左侧的导航菜单的方式一般也这样来做。

<style>#leftmargin{position:relative;margin-left:200px;border:1px solid #EEE;}#comment{position:absolute;left:-200px;background-color:#eee;}</style><h1>文本替换</h1><div id="leftmargin"><div id="comment">这里是注释部分</div>

5.外边级图片字母下沉模式
首字母用图片代替，并且与正文同高。这种模式有时也用在一段文字之前的图片中,这个结合了前面的2种模式。

<style>.indent{position:relative;margin-left:120px;}.dropCap{position:absolute;width:120px;height:50px;top:0;left:-120px;}.dropCap span{position:absolute;width:120px;height:50px;top:0;left:0;background:url("bg.jpg") no-repeat;}</style><h1>图片字母下沉</h1><p class="indent"><span class="dropCap">Picture<span></span></span>是个图片，如果图片不显示，会显示前面的Picture这样的字母！！！</p>

6.样式表的命名

尽力用一个单词的小写字母给样式表命名，推荐的几个
site.css
Page.css
Handheld.css
Print.css
样式表的标准媒介类型是text/css
样式表应该根据不同的位置来控制作用域，不要使用html中的style属性，这样使用维护困难

7.css语法的一些细节问题
html和css尽量都用utf-8的编码格式来编码
css选择器是区分大小写，为了统一标准，最好是都用小写的字母，用连接线来划分单词。注意属性值是不区分大小写的
一个元素可以用多个空格分开 class="class1 class2 class3"
常量值不要用引号，比如：color:black是对的，但是COLOR:"BLACK"则是错误的。
css中同样有反斜杠的转义
空格制表换行都产生一样的结果
要使得某个规则失效的简单方式是在前面加一个字符background-color:black;==>lbackground-color:black,只针对这个语句，前后的都不受影响。