背景颜色
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-serif2.大小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}将一个元素放到另一个元素的后面2img.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" οnclick=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=第一页 οnclick="focusTop('commentTop');loadComment(-999)"> </SPAN><SPAN class="bt_pre" title=上一页 οnclick="focusTop('commentTop');loadComment(-1)">上一页</SPAN><SPAN class="bt_next" title=下一页 οnclick="focusTop('commentTop');loadComment(1)">下一页</SPAN><SPAN class="bt_next_e" title=最后一页 οnclick="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" οnclick="magicMirror('[%=@id%]','[%=@archive%]')"><%repeat_1 match="magicMode"%><IMG hspace=2 src="http://imgcache.qq.com/qzone/mall/bt_show.gif" align=middle border=0>使用照妖镜 <%_repeat_1%></SPAN><SPAN class="bt_qute loginMode" οnclick="ubbquote(this.parentNode.nextSibling.nextSibling.firstChild.firstChild.firstChild.firstChild.firstChild.nodeValue,'[%=@pubDate%]','[%=@escapeComment%]',document.diary_form.content)">引用</SPAN><SPAN class="bt_del ownerMode" οnclick="deleteComment('[%=@id%]','[%=@archive%]')">删除</SPAN></SPAN>[%=@layer%]楼 [%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%] 评论时间：[%_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 οnclick="getArticle('prev')" height=20 alt=上一篇 hspace=3 src="/qzone/images/client/bt_pre_blog.gif" width=20 align=absMiddle>|<IMG class="hand" id=nextButton οnclick="getArticle('next')" height=20 alt=下一篇 src="http://imgcache.qq.com/qzone/images/client/bt_next_blog.gif" width=20 align=absMiddle>|<IMG class="hand" οnclick=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=第一页 οnclick="focusTop('commentTop');loadComment(-999)"> </SPAN><SPAN class="bt_pre" title=上一页 οnclick="focusTop('commentTop');loadComment(-1)">上一页</SPAN><SPAN class="bt_next" title=下一页 οnclick="focusTop('commentTop');loadComment(1)">下一页</SPAN><SPAN class="bt_next_e" title=最后一页 οnclick="focusTop('commentTop');loadComment(999)"> </SPAN></DIV>">发表评论共5条评论，第1页/共1页 上一页下一页 引用删除1楼 评论时间：2007年1月20日 11时34分 黄色方块<div style="width:140px; height:140px; cursor:pointer;"></div>