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,只针对这个语句，前后的都不受影响。