CSS 实用实例

背景颜色

1. 颜色背景

<style type="text/css">
body { font-size: 16px;">h1 { font-size: 16px;">h2 { font-size: 16px;">p { font-size: 16px;"></style>

2. 图片做为背景

（１）body 
{   background-image:url('/articleimg/2006/07/3744/bgdesert.jpg')}

（２）body
{ 
     background-image: url('/articleimg/2006/07/3744/bgdesert.jpg');
     background-repeat: repeat　　//垂直重复背景图片
}

(3)   body
{    background-image: url('/articleimg/2006/07/3744/bgdesert.jpg');
     background-repeat: repeat-x   //水平重复背景图片
}

3. 怎样放置背景图片（位置摆放）

body
{   background-image: url('/articleimg/2006/07/3744/smiley.gif');
    background-epeat: no-repeat;
    background-position:center; 
}

4. 固定背景图片（不会滚动）
body 
{
background-image:url('/articleimg/2006/07/3744/smiley.gif');
background-repeat:no-repeat;
background-attachment: fixed
}

Text 文字

1.设置文字颜色

<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>

2.字符间的距

<style type="text/css">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>

3.对齐
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}

4.文字的修饰
h1 {text-decoration: overline}                           //上化线
h2 {text-decoration: line-through}                     //中化线
h3 {text-decoration: underline}                         //下化线
a {text-decoration: none}

5.文字缩进
p {text-indent: 1cm}

6.文字大小写
p.uppercase {text-transform: uppercase}     // 全部大写
p.lowercase {text-transform: lowercase}     //全部小写
p.capitalize {text-transform: capitalize}       //全部首字母大写

Font 字体
1.设置文字的字体
h3 {font-family: times}
p {font-family: courier}
font-family: sans-serif
2.大小
h1 {font-size: 150%}
h2 {font-size: 130%}
p {font-size: 100%}
p {font-size: 12px}
p.sansserif {font-family: sans-serif}

3.样式
h1 {font-style: italic}     斜体
h2 {font-style: normal}   粗体
p {font-style: oblique}  
4.
p.normal {font-weight: normal}
p.thick {font-weight: bold}     字体加粗
p.thicker {font-weight: 900}

Border 边框

1.边框样式
<style type="text/css">
p.dotted {border-style: dotted}     //点化线
p.dashed {border-style: dashed} //
p.solid {border-style: solid}
p.double {border-style: doub le}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>

2.边框设置

<style type="text/css">
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}
</style>

3.四边框的颜色
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}

4.设置底边框宽
p 
{
border-style: solid;
border-bottom-width: 15px
}
5.右边框宽
p 
{
border-style: solid;
border-right-width: 15px
}
6.上边框宽
p 
{
border-style: solid;
border-top-width: 15px
}
7.底边框
p 
{
border-bottom: medium solid #ff0000
}
p 
{
border-left: medium solid #ff0000
}
8.所有边框
p 
{
border: medium double rgb(250,0,255)
}

Margin外补丁（间距）

1.设置文字的左边距
p.leftmargin {margin-left: 2cm}    //左边距
p.rightmargin {margin-right: 8cm}   // 设置文字的右边距
p.topmargin {margin-top: 5cm}     //上边距
p.margin {margin: 2cm 4cm 3cm 4cm}   //所有边距属性一行解决

Padding内补丁（填充）

1.左单元格
td {padding-left: 2cm}   //左单元格填充
td {padding-right: 5cm}   //右单元格填充
td {padding-top: 2cm}    //上单元格填充
td {padding-bottom: 2cm}   //下单元格填充
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}      //所有填充属性一行解决

List 列表
1.无序列表的不同项目标号
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
2.有序的列表的不同项目标号
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
3.设置一个图片做为标号
<style type="text/css">
ul 
{
list-style-image: url('/articleimg/2006/07/3744/arrow.gif')
}
</style>

4.放置标号
<style type="text/css">
ul.inside 
{
list-style-position: inside
}

ul.outside 
{
list-style-position: outside
}
</style>
5.所有列表属性一行解决
<style type="text/css">
ul 
{
list-style: square inside url('arrow.gif')
}
</style>

维度

1.增加两行间距
<style type="text/css">
p.small {line-height: 0.4cm}
p.big {line-height: 0.9cm}
</style>

Classification 分类

图片浮动到右边

<style type="text/css">
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
建立水平菜单
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
将一个元素的相对定位到它的正常位置
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;

padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover { font-size: 16px;">li {display:inline}

元素不可见
h1.visible {visibility:visible}
h1.invisible {visibility:hidden}

改变鼠标样子

<html>

<body>
<p>Move the mouse over the words to see the cursor change:</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>

</html>

将一个元素放到另一个元素的后面
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
将一个元素放到另一个元素的后面2
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}

Pseudo-classes 伪类

给超级链接加上不同的颜色

a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

给超级链接增加其他样式

a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}

a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}

使用:first-child伪类
a:first-child
{
text-decoration:none
}

Pseudo-elements 伪元素

第一个字母特殊化

p:first-letter 
{
color: #ff0000;
font-size:xx-large
}
文字第一行特殊化 
p:first-line 
{
color: #ff0000;
font-variant: small-caps
} 宁静致远，淡泊明志   <div id="commentDIV" oldhtml="<A id=commentTop href="javascript:;"></A> <DIV class="bt_page"><SPAN class="right"><SPAN class="bt_comment" onclick=document.diary_form.content.focus()>发表评论</SPAN></SPAN><SPAN class="left">共<SPAN class="bluenum" id=commentCount1></SPAN>条评论，第<SPAN class="rednum" id=commentPageNo1>1</SPAN>页/共<SPAN class="bluenum" id=commentPageCount1>1</SPAN>页</SPAN><SPAN class="bt_pre_e" title=第一页 onclick="focusTop('commentTop');loadComment(-999)">　</SPAN><SPAN class="bt_pre" title=上一页 onclick="focusTop('commentTop');loadComment(-1)">上一页</SPAN><SPAN class="bt_next" title=下一页 onclick="focusTop('commentTop');loadComment(1)">下一页</SPAN><SPAN class="bt_next_e" title=最后一页 onclick="focusTop('commentTop');loadComment(999)">　</SPAN></DIV>[%repeat_0 match="/rss/channel/item/comment"%] <TABLE class="mode_table" cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class="mode_table_title_guest"><SPAN class="right"><SPAN class="ownerMode" title=您要拥有照妖镜道具才可以使用照妖镜，照妖镜道具请在藏宝阁兑换 style="CURSOR: pointer" onclick="magicMirror('[%=@id%]','[%=@archive%]')"><%repeat_1 match="magicMode"%><IMG hspace=2 src="http://imgcache.qq.com/qzone/mall/bt_show.gif" align=middle border=0>使用照妖镜&nbsp;<%_repeat_1%></SPAN><SPAN class="bt_qute loginMode" onclick="ubbquote(this.parentNode.nextSibling.nextSibling.firstChild.firstChild.firstChild.firstChild.firstChild.nodeValue,'[%=@pubDate%]','[%=@escapeComment%]',document.diary_form.content)">引用</SPAN><SPAN class="bt_del ownerMode" onclick="deleteComment('[%=@id%]','[%=@archive%]')">删除</SPAN></SPAN>[%=@layer%]楼&nbsp;[%repeat_1 match="author"%] <TABLE class=[%=@rainbow%] cellSpacing=0> <TBODY> <TR> <TD class=[%=@ttt%]>[%=@uin%]</TD></TR></TBODY></TABLE>[%repeat_2 match="angelMode"%]<IMG alt=天使之爱 src="http://imgcache.qq.com/qzone/client/tsza.gif" align=absMiddle border=0>[%_repeat_2%]&nbsp;&nbsp;评论时间：[%_repeat_1%]<SPAN>[%=@commentTime%]</SPAN></TD></TR> <TR> <TD class="mode_table_mains fixTD" style="OVERFLOW: hidden; WIDTH: 100%" vAlign=top> <DIV>[%=@description%]</DIV></TD></TR> <TR class="showSign"> <TD class="mode_sign" vAlign=top>[%=@autograph%]</TD></TR></TBODY></TABLE>[%_repeat_0%]<A name=signCommentBottom></A> <DIV class="bt_page"><SPAN class="mode_blogr_menu"><IMG class="hand" id=previousButton onclick="getArticle('prev')" height=20 alt=上一篇 hspace=3 src="/qzone/images/client/bt_pre_blog.gif" width=20 align=absMiddle>|<IMG class="hand" id=nextButton onclick="getArticle('next')" height=20 alt=下一篇 src="http://imgcache.qq.com/qzone/images/client/bt_next_blog.gif" width=20 align=absMiddle>|<IMG class="hand" onclick=returnBlogList() height=20 alt=返回 src="http://imgcache.qq.com/qzone/images/client/bt_back_blog.gif" width=20 align=absMiddle></SPAN><SPAN class="left">共<SPAN class="bluenum" id=commentCount2></SPAN>条评论，第<SPAN class="rednum" id=commentPageNo2>1</SPAN>页/共<SPAN class="bluenum" id=commentPageCount2>1</SPAN>页</SPAN><SPAN class="bt_pre_e" title=第一页 onclick="focusTop('commentTop');loadComment(-999)">　</SPAN><SPAN class="bt_pre" title=上一页 onclick="focusTop('commentTop');loadComment(-1)">上一页</SPAN><SPAN class="bt_next" title=下一页 onclick="focusTop('commentTop');loadComment(1)">下一页</SPAN><SPAN class="bt_next_e" title=最后一页 onclick="focusTop('commentTop');loadComment(999)">　</SPAN></DIV>">发表评论共5条评论，第1页/共1页　上一页下一页　 引用删除1楼   Web Develope    评论时间：2007年1月20日 11时34分 黄色方块

<div style="width:140px; height:140px; cursor:pointer;"></div>