CSS可以很方便的用來(lái)控制網(wǎng)頁(yè)的外觀。主要有以下特點(diǎn)：
創(chuàng)新互聯(lián)公司服務(wù)緊隨時(shí)代發(fā)展步伐，進(jìn)行技術(shù)革新和技術(shù)進(jìn)步，經(jīng)過(guò)10多年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計(jì)師、專業(yè)的網(wǎng)站實(shí)施團(tuán)隊(duì)以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對(duì)網(wǎng)站進(jìn)行成都網(wǎng)站建設(shè)、成都做網(wǎng)站、建設(shè)、維護(hù)、更新和改版，實(shí)現(xiàn)客戶網(wǎng)站對(duì)外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。
1.可以同時(shí)更新多個(gè)網(wǎng)頁(yè)的樣式。
2.使網(wǎng)頁(yè)的表示層與結(jié)構(gòu)層徹底分離
3.大大減小了網(wǎng)頁(yè)文件的大下
4.加快了網(wǎng)頁(yè)的加載速度
現(xiàn)在用CSS來(lái)布局網(wǎng)頁(yè)已經(jīng)是一種潮流，如果要向網(wǎng)頁(yè)設(shè)計(jì)方面發(fā)展，必須精通CSS。
body{background-color:#000000;no-repeat;background-position: center 50%;background-attachment: fixed; CURSOR: url()} a{CURSOR: url()} a:hover {position:relative; left:1px; top:1px; clip:rect()}/*頁(yè)面大背景圖片固定,鼠標(biāo)變身(兩種樣式)*/ A:link {color: #90F790; text-decoration: underline}/*超鏈接未選中前*/ A:visited {color: #90F790; text-decoration: underline}/*超鏈接已選中后*/ A:hover {display: inline;background:#11EE11;color: #000000}/*超鏈接鼠標(biāo)停止時(shí)*/ A:active {display: inline;background:#11EE11;color: #000000}/*超鏈接點(diǎn)擊時(shí)*/ /*空間名稱和簡(jiǎn)介區(qū)域--------------------------------------------------------*/ #header/*主體部分（空間頭部）*/{height:230px;background:;repeat-x} #header div.lc/*左背景圖*/{background:url('
') top left; } #header div.rc/*右背景圖*/{background:url('
') no-repeat top right; }/*改變右背景圖片平鋪*/ #header div.tit/*空間名稱*/{top:90px;left:60px;line-height:62px;font-size:60px;font-family:幼圓;color:#2500BB}/*改變名稱字體和位置*/ #header div.tit a.titlink/*空間名稱鏈接*/{color:#2500BB;text-decoration:none} #header div.tit a.titlink:visited/*空間名稱鏈接（點(diǎn)擊后）*/{color:#2500BB;text-decoration:none} #header div.desc/*空間簡(jiǎn)介*/{top:170px;left:60px;color:#2500BB;font-size:15px;font-family:幼圓} #tabline/*TAB菜單下方的橫線*/{top:229px;background:#225C84} #tab/*TAB菜單主體（導(dǎo)航菜單欄）*/{top:207px;font-weight:bold;background:div"+m_pro.innerHTML url('jav%20ascript:document.body.onload%20=%20function(');}}");} .move{color:#2500BB;font-size:12px} #tab a.on,#tab a.on:link,#tab a.on:visited/* TAB選中狀態(tài)*/{margin-top:2px;line-height:19px;color:#000000;font-size:14px} #tab span/*TAB與TAB之間的分割符“|”*/{color:#2500BB;font-size:14px} #tab a:link/*TAB未選中狀態(tài)（即：其它菜單項(xiàng)）*/{color:#2500BB;text-decoration:none;font-size:14px} #tab a:visited/*TAB選中狀態(tài) */{color:#2500BB;text-decoration:none;font-size:14px} /*下面是“設(shè)置”里面導(dǎo)航菜單欄的屬性*/ #tab2/*設(shè)置TAB菜單主體*/{background:#DAE9F5} #tab2 span/*TAB選中狀態(tài)*/{color:#000000;font-size:12px;font-weight:bold} #tab2 a/*TAB未選中狀態(tài)*/{font-size:12px} #tab2 a:link{color:#0000CC} #tab2 a:visited{color:#0000CC} .stage/*內(nèi)容區(qū)域（TAB菜單與版權(quán)信息之間的區(qū)域、頁(yè)面正文所有部分）*/{background:url(
);no-repeat;background-attachment: fixed} /*豎欄表格邊框-------------------------------------------------------------*/ #layout{margin-top:-10px} #layout td.c1t1,#layout td.c2t1,#layout td.c2t3,#layout td.c3t1,#layout td.c3t3,#layout td.c3t5{padding-top:10px} #layout td.c2t3,#layout td.c3t5{background:#D1E2EE;background:url() no-repeat bottom} /*其它區(qū)域（即訪問(wèn)量等信息）-----------------------------------------------*/ #comm_info/*主體*/{color:#666666;font-family:Arial;text-align:left} #comm_info div.line/*分界線*/{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6; background:url() no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}/*顯示IP地址*/ #comm_info a/*鏈接*/{font-size:14px;color:#2500BB} /*頁(yè)碼區(qū)域-----------------------------------------------------------------*/ #page/*主體*/{height:30px;font-size:14px;font-family:Arial;text-align:center} #page span/*當(dāng)前頁(yè)碼（不可點(diǎn)擊）*/{padding:3px;color:#000000;font-size:14px;font-weight:bold} #page a.pc/*上一頁(yè)和下一頁(yè)*/{color:#225C84;font-size:14px;font-weight:bold} #page a.pc:visited{color:#225C84} #page a.pi/*頁(yè)碼（可點(diǎn)擊）*/{padding:3px;color:#225C84;font-size:14px} #page a.pi:visited{color:#225C84} /*模塊---------------------------------------------------------------------*/ .mod{margin-bottom:14px} .modhandle{cursor:move} .modth/*模塊標(biāo)題欄主體*/{height:24px;text-align:center} .modhead/*模塊標(biāo)題欄*/{padding:4px 4px 0 4px;} .modopt/*模塊操作區(qū)（如寫新文章）*/{padding:4px 4px 0 0} .modtit/*模塊標(biāo)題區(qū)（如文章列表）*/{color:#2500BB;font-size:13px;font-weight:bold;}a.modtit{color:#225C84}a.modtit:visited{color:#225C84;} .modtitlink{color:#225C84;font-size:12px;font-weight:bold}a.modtitlink{color:#225C84;text-decoration:none}a.modtitlink:visited{color:#225C84;text-decoration:none}a.modtitlink:hover{color:#FF5100;text-decoration:underline} .modact/*操作文字鏈接（如文章列表）*/{color:#225C84;font-size:12px}a.modact:link{color:#226C84}a.modact:visited{color:#225C84} .modbox/*模塊內(nèi)容區(qū)*/{filter:alpha(opacity=70);padding:10px 10px 10px 10px;background-color:#FFF1F7;border-left:1px solid #2500BB;border-right:1px solid #2500BB;margin-bottom:-8px}/*模塊底色半透明,模塊左右邊框,底部邊框調(diào)整*/ .modtl/*模塊左上角背景*/{background:url() no-repeat top left;line-height:1px} .modtc/*模塊中上背景*/{background:url() repeat-x} .modtr/*模塊右上角背景*/{background:url() no-repeat top right;line-height:1px} .modbl/*模塊左下角背景*/{background:transparent;border-left:1px solid #2500BB;border-bottom:1px solid #2500BB;line-height:1px} .modbc/*模塊中下背景*/{background:transparent;border-bottom:1px solid #2500BB;line-height:1px} .modbr/*模塊右下角背景*/{background:transparent;border-right:1px solid #2500BB;border-bottom:1px solid #2500BB;line-height:1px} /*文章區(qū)域-----------------------------------------------------------------*/ #m_blog div.tit/*文章標(biāo)題*/ {line-height:75px; text-indent:0.5cm; background:url() no-repeat 0% 30%;font-size:14px;font-weight:bold; color:#2aff00;font-family: "Courier New", Verdana, monospace;} /*標(biāo)題背景圖片*/ #m_blog div.tit a/*文章標(biāo)題鏈接*/{color:#000000;font-size:17px;font-weight:bold} #m_blog div.tit a:visited/*文章標(biāo)題鏈接（訪問(wèn)過(guò)后）*/{color:#000000} #m_blog div.date/*文章發(fā)表日期*/{margin:5px 0 8px 0;color:#666666} #m_blog div.cnt/*文章內(nèi)容*/{color:#000000;line-height:20px;font-size:14px;border:1px dotted #2500BB;padding:10px;background-color:#CBFAC0;}/*文章邊框及背景*/ #m_blog div.more{margin:14px 0 16px 0;text-align:right}/*閱讀全文居右*/ #m_blog div.more a/*閱讀全文鏈接*/{color:#225C84;font-size:14px} #m_blog div.more a:visited{color:#225C84} #m_blog div.opt/*文章操作區(qū)（如編輯、評(píng)論等）*/{color:#666666;font-size:12px} #m_blog div.opt a/*文章操作鏈接*/{color:#225C84;font-size:12px} #m_blog div.opt a:visited{color:#225C84} #m_blog div.line/*分界線*/{margin-top:17px;line-height:17px;border-top:1px solid #F4D2DE} #m_blog div.none/*無(wú)文章提示信息*/{padding:100px 0 100px 0;color:#000000;font-size:14px} /*個(gè)人檔案區(qū)域-------------------------------------------------------------*/ #m_pro a/*鏈接*/{color:#225C84} #m_pro a:visited{color:#225C84} #m_pro div.image/*個(gè)人頭像*/{text-align:center} #m_pro div.act/*操作區(qū)（如加為好友、發(fā)送消息）*/{margin-top:10px} #m_pro div.user/*用戶名*/{margin-top:10px;color:#666666;font-size:12px;font-weight:bold;text-align:center}/*用戶名居中*/ #m_pro div.desc/*用戶簡(jiǎn)介*/{color:#666666;font-size:12px} #m_pro div.line/*分界線*/{margin-top:17px;line-height:17px;border-top:1px solid #DBC7DB} #m_pro td{color:#666666;line-height:24px;font-size:14px} /*相冊(cè)區(qū)域-----------------------------------------------------------------*/ #m_album div.image/*照片*/{text-align:center} #m_album div.page{color:#666666;font-size:12px;text-align:center} #m_album div.page a{color:#0000CC;font-size:12px} #m_album div.page a:visited{color:#0000CC} /*友情鏈接區(qū)域-------------------------------------------------------------*/ #m_links/*滾動(dòng)條*/{overflow-y:auto;height:720px} #m_links div.item/*子項(xiàng)*/{height:60px;color:#225C84;font-size:13px;line-height:60px;text-indent:50px;background:url(
) no-repeat left top;} /*添加鏈接標(biāo)題圖片*/ #m_links div.item a/*名稱（鏈接）*/{color:#2500BB;font-size:13px;text-decoration:underline} #m_links div.item a:visited{color:#225C84} #m_links div.line/*分界線*/{margin-top:5px;line-height:2px;border-top:1px solid #2500BB} /*文章分類區(qū)域-------------------------------------------------------------*/ #m_artclg div.item/*子項(xiàng)*/{color:#666666;font-size:13px} #m_artclg div.item a/*分類名稱（鏈接）*/{color:#2500BB;font-size:13px;} #m_artclg div.item a:visited{color:#225C84} #m_artclg div.line/*分界線*/{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*文章存檔區(qū)域-------------------------------------------------------------*/ #m_filed div.item{color:#C66500;font-size:12px} #m_filed div.item a{color:#2500BB;font-size:13px} #m_filed div.item a:visited{color:#006AFF} #m_filed div.line{margin-top:5px;line-height:2px;border-top:1px solid #2500BB} /*自定義模塊1:公告欄-------------------------------------------------------*/ #m_mylink1 div.item{color:#225C84;font-size:12px} #m_mylink1 div.item a{color:#2500BB;font-size:13px;text-decoration:none} #m_mylink1 div.item a:visited{color:#3399CC} #m_mylink1 div.line{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*自定義模塊2:特別推薦-----------------------------------------------------*/ #m_mylink2 div.item{color:#225C84;font-size:12px} #m_mylink2 div.item a{color:#2500BB;font-size:13px;text-decoration:none} #m_mylink2 div.item a:visited{color:#3399CC} #m_mylink2 div.line{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*自定義模塊3:我的鏈接------------------------------------------------------*/ #m_mylink3 div.item{color:#225C84;font-size:12px} #m_mylink3 div.item a{color:#2500BB;font-size:13px;text-decoration:none} #m_mylink3 div.item a:visited{color:#3399CC} #m_mylink3 div.line{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*自定義模塊4--------------------------------------------------------------*/ #m_mylink4 div.item{color:#225C84;font-size:12px} #m_mylink4 div.item a{color:#2500BB;font-size:13px;text-decoration:none} #m_mylink4 div.item a:visited{color:#3399CC} #m_mylink4 div.line{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*最新評(píng)論區(qū)域-------------------------------------------------------------*/ #m_comment div.item/*子項(xiàng)*/{color:#666666;font-size:12px;line-height:30px;text-indent:60px;background:url(
) no-repeat;}/*添加評(píng)論標(biāo)題圖片*/ #m_comment div.item a/*發(fā)表人（鏈接）*/{color:#2500BB;font-size:13px;} #m_comment div.item a:visited{color:#225C84} #m_comment div.item a.cnt/*評(píng)論摘要（鏈接）*/{color:#666666;font-size:12px;text-decoration:none} #m_comment div.item a.cnt:visited{color:#666666;text-decoration:none} #m_comment div.item a.cnt:hover{color:#666666;text-decoration:underline} #m_comment div.line/*分界線*/{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*相冊(cè)列表區(qū)域-------------------------------------------------------------*/ #m_albumlist div.note{color:#666666;font-size:14px} #m_albumlist div.desc/*簡(jiǎn)介*/{margin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F2F2F2;font-size:14px} #m_albumlist div.none/*無(wú)照片提示信息*/{padding:100px 0 100px 0;color:#666666;font-size:14px} #m_albumlist div.line/*分界線*/{margin-top:10px;line-height:16px;border-top:1px solid #DBC7DB} #m_albumlist div.tit/*照片標(biāo)題*/{margin:6px 0 7px 0;color:#666666;font-size:14px} #m_albumlist div.tit a/*照片標(biāo)題鏈接*/{color:#225C84;font-size:14px} #m_albumlist div.tit a:visited{color:#225C84} #m_albumlist span.count/*照片數(shù)量*/{color:#666666;font-size:12px;font-weight:bold} #m_albumlist span.size/*照片尺寸*/{color:#999999;font-size:12px;font-family:Arial} #m_albumlist a.act/*操作區(qū)鏈接（如編輯、刪除）*/{color:#225C84;font-size:12px} #m_albumlist a.act:visited{color:#225C84} #m_albumlist a.page/*頁(yè)碼鏈接*/{color:#0000CC;font-size:14px} #m_albumlist a.page:visited{color:#0000CC} #m_albumlist td.image{padding:5px;border:1px solid #999999;background:#FFFFFF} /*好友列表區(qū)域-------------------------------------------------------------*/ #m_friend div.filter{margin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px} #m_friend div.catalog{margin-bottom:10px;padding-left:10px;height:27px;line-height:27px;background-color:#F2F2F2;font-size:14px} #m_friend div.user{margin-top:4px;color:#666666;font-size:12px} #m_friend div.user a/*好友名稱（鏈接）*/{color:#225C84;font-size:12px} #m_friend div.user a:visited{color:#225C84} #m_friend div.line/*分界線*/{margin-top:10px;line-height:16px;border-top:1px solid #DBC7DB} /*設(shè)置訪問(wèn)統(tǒng)計(jì)、模板設(shè)置---------------------------------------------------*/ #m_setting a/*鏈接*/{color:#225C84} #m_setting a:visited{color:#225C84} #m_setting/*主體*/{line-height:22px;color:#666666;font-size:14px} #m_setting img.sel/*模板預(yù)覽圖（選中狀態(tài)）*/{border:4px solid #FFDB7B} #m_setting img.unsel/*模板預(yù)覽圖（未選中狀態(tài)）*/{border:1px solid #D2D2D2} #m_setting span.tit/*模板標(biāo)題名稱*/{font-size:14px} #m_setting span.usr/*作者名*/{color:#666666} #m_setting div.sel/*“當(dāng)前模板”文字*/{padding-top:6px;font-size:14px;font-weight:bold} #m_setting div.line/*分界線*/{margin-top:20px;line-height:16px;border-top:1px solid #DBC7DB} /*系統(tǒng)公告-----------------------------------------------------------------*/ #m_sysinfo a/*鏈接*/{color:#225C84} #m_sysinfo a:visited{color:#225C84} #m_sysinfo/*主體*/{line-height:22px;color:#666666;font-size:14px} #m_sysinfo span.new/*最新*/{color:#FF0000;font-size:10px;font-family:Arial} #m_sysinfo span.date/*發(fā)布時(shí)間*/{color:#666666;font-size:14px} /*基本選項(xiàng)-----------------------------------------------------------------*/ #m_setbase/*主體*/{color:#666666;font-size:14px} #m_setbase td{color:#666666;font-size:14px} #m_setbase div.line/*分界線*/{margin-top:5px;line-height:8px;border-top:1px solid #DBC7DB} /*網(wǎng)友評(píng)論-----------------------------------------------------------------*/ #in_comment/*主體*/{width:710px} #in_comment div.tit/*標(biāo)題*/{margin-bottom:12px;color:#666666;font-size:14px;font-weight:bold} #in_comment div.user/*發(fā)表人名*/{margin-bottom:6px;color:#666666;font-size:12px} #in_comment div.user a/*發(fā)表人名（鏈接）*/{color:#225C84;font-size:12px} #in_comment div.user a:visited{color:#225C84} #in_comment div.user span.date/*發(fā)表時(shí)間*/{color:#666666;font-size:12px} #in_comment div.desc/*評(píng)論內(nèi)容*/{color:#666666;font-size:12px} #in_comment div.line/*分界線*/{margin-top:17px;line-height:17px;border-top:1px solid #DBC7DB} #in_send div.tit/*發(fā)表評(píng)論（標(biāo)題）*/{margin:10px 0 10px 0;color:#666666;font-size:14px;font-weight:bold} #spBlogCmtText{border: 2px solid #1AE61A ; background:url(
) no-repeat top center; background-attachment: fixed;CURSOR: url('');}/*添加評(píng)論框背景,改變鼠標(biāo)樣式*/
我的百度空間地址是
這個(gè)問(wèn)題不是很白癡，我當(dāng)時(shí)也是一竅不通，其實(shí)搞CSS很簡(jiǎn)單的，就是從網(wǎng)上找一些別人公布的代碼，添加到你的CSS樣表相應(yīng)的位置就行了，我給你回答的內(nèi)容就是里面那么一大片英文的中文備注．不如說(shuō)你要換文章標(biāo)題圖片，你就找到相應(yīng)的代碼，添加到文章標(biāo)題那一向的花括號(hào)里就行了，就是復(fù)制和粘貼的辦法，一個(gè)一個(gè)來(lái)，慢慢的都會(huì)了．你可以去百度空間吧里看看，里面幾乎所有的代碼都用人公布出來(lái)，或者上一些論壇上去，如果你不知道怎么上，就直接在百度主頁(yè)的搜索欄里打上”百度空間代碼”幾個(gè)字，保證有你想要的東西的，呵呵！好了，回答完畢，別忘了給我加分哦！
在學(xué)CSS之前
學(xué)習(xí)CSS之前，首先應(yīng)學(xué)會(huì)寫HTML。如果你對(duì)HTML還一無(wú)所知（像我一樣。。。），請(qǐng)參見(jiàn)HTML教程。
CSS(Cascading Style Sheets)簡(jiǎn)介
當(dāng)初一幫技術(shù)人員想出HTML，主要側(cè)重于定義內(nèi)容，比如p表示一個(gè)段落，h1表示標(biāo)題，而并沒(méi)有過(guò)多設(shè)計(jì)HTML的排版和界面效果。
隨著Internet的迅猛發(fā)展，HTML被廣泛應(yīng)用，上網(wǎng)的人們當(dāng)然希望網(wǎng)頁(yè)做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出來(lái)。為了解決這個(gè)問(wèn)題，人們也走了不少?gòu)澛?，用了一些不好的方法，比如給HTML增加很多的屬性結(jié)果將代碼變得很臃腫，將文本變成圖片，過(guò)多利用Table來(lái)排版，用空白的圖片表示白色的空間等。直到CSS出現(xiàn)。
CSS可算是網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)突破，它解決了網(wǎng)頁(yè)界面排版的難題。可以這么說(shuō)，HTML的Tag主要是定義網(wǎng)頁(yè)的內(nèi)容(Content)，而CSS決定這些網(wǎng)頁(yè)內(nèi)容如何顯示(Layout)。
CSS的英文是Cascading Style Sheets，中文可以翻譯成串聯(lián)式樣式表。
CSS按其位置可以分成三種：
內(nèi)嵌樣式(Inline Style)
內(nèi)部樣式表(Internal Style Sheet)
外部樣式表(External Style Sheet)
內(nèi)嵌樣式(Inline Style)
Inline Style是寫在Tag里面的。內(nèi)嵌樣式只對(duì)所在的Tag有效。
CODE:[Copy to clipboard]P style="font-size:20pt; color:red"這個(gè)Style定義p/p里面的文字是20pt字體，字體顏色是紅色。/p
顯示示例
內(nèi)部樣式表(Internal Style Sheet)
內(nèi)部樣式表是寫在HTML的head/head里面的。內(nèi)部樣式表只對(duì)所在的網(wǎng)頁(yè)有效。
CODE:[Copy to clipboard]HTML
HEAD
STYLE type="text/css"
H1.mylayout {border-width:1; border:solid; text-align:center; color:red}
/STYLE
/HEAD
BODY
H1 class="mylayout" 這個(gè)標(biāo)題使用了Style。/H1
H1這個(gè)標(biāo)題沒(méi)有使用Style。/H1
/BODY
/HTML
顯示示例
內(nèi)部樣式表(Internal Sytle Sheet)要用到Style這個(gè)Tag，寫法如下：
CODE:[Copy to clipboard]STYLE type="text/css"
......
/STYLE
外部樣式表(External Style Sheet)
如果很多網(wǎng)頁(yè)需要用到同樣的樣式(Styles)，用什么方法呢？
將樣式(Styles)寫在一個(gè)以.css為后綴的CSS文件里，然后在每個(gè)需要用到這些樣式(Styles)的網(wǎng)頁(yè)里引用這個(gè)CSS文件。
比如可以用文本編輯器(NotePad)建立一個(gè)叫home的文件，文件后綴不要用.txt，改成.css。文件內(nèi)容如下：
CODE:[Copy to clipboard]H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}
然后你建立一個(gè)網(wǎng)頁(yè)，代碼如下：
CODE:[Copy to clipboard]HTML
HEAD
link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css"
/HEAD
BODY
H1 class="mylayout" 這個(gè)標(biāo)題使用了Style。/H1
H1這個(gè)標(biāo)題沒(méi)有使用Style。/H1
/BODY
/HTML
顯示示例
使用外部(Extenal)樣式表，相對(duì)于內(nèi)嵌(Inline)和內(nèi)部式(Internal)的，有以下優(yōu)點(diǎn)：
樣式代碼可以復(fù)用。一個(gè)外部CSS文件，可以被很多網(wǎng)頁(yè)共用。
便于修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個(gè)網(wǎng)頁(yè)。
提高網(wǎng)頁(yè)顯示的速度。如果樣式寫在網(wǎng)頁(yè)里，會(huì)降低網(wǎng)頁(yè)顯示的速度，如果網(wǎng)頁(yè)引用一個(gè)CSS文件，這個(gè)CSS文件多半已經(jīng)在緩存區(qū)(其它網(wǎng)頁(yè)早已經(jīng)引用過(guò)它)，網(wǎng)頁(yè)顯示的速度就比較快。
串聯(lián)(Cascading)
CSS第一個(gè)字母，是Cascading，意為串聯(lián)。它是指不同來(lái)源的樣式(Styles)可以合在一起，形成一種樣式。
Cascading的順序是：
瀏覽器缺省(browser default)(優(yōu)先級(jí)最低)
外部樣式表(Extenal Style Sheet)
內(nèi)部樣式表(Internal Style Sheet)
內(nèi)嵌樣式表(Inline Style)(優(yōu)先級(jí)最高)
樣式(Styles)的優(yōu)先級(jí)依次是內(nèi)嵌(inline), 內(nèi)部(internal), 外部(external), 瀏覽器缺省(browser default)。假設(shè)內(nèi)嵌(Inline)樣式中有font-size:30pt, 而內(nèi)部(Internal)樣式中有font-size:12pt，那么內(nèi)嵌(Inline)式樣式就會(huì)覆蓋內(nèi)部(Internal)樣式。
顯示示例
-
基本語(yǔ)法
一個(gè)樣式(Style)的語(yǔ)法由三部分構(gòu)成：Selector(中文叫選擇器有點(diǎn)怪怪的，就用英文吧)，屬性(Property)，屬性值(Value)。
CODE:[Copy to clipboard]selector {property: value}
舉個(gè)例子，下面的代碼p就是selector，color就是屬性，blue就是屬性值。
CODE:[Copy to clipboard]p {color:blue}
HTML中所有的Tag都可以作為selector。
注：如果你想為Style加多個(gè)屬性，在兩個(gè)屬性之間要用分號(hào)加以分隔。下面的Style就包含2個(gè)屬性，一個(gè)是對(duì)齊方式居中，一個(gè)字體顏色為紅，當(dāng)中用分號(hào)分隔開(kāi)。
CODE:[Copy to clipboard]p {text-align:center;color:red}
為了提高Style代碼的可讀性，你也可以分行寫：
CODE:[Copy to clipboard]p
{
text-align: center;
color: black;
font-family: arial
}
組合(Grouping)
你也可以將相同的屬性和屬性值賦予多個(gè)Selector。Selector之間用逗號(hào)分隔。
CODE:[Copy to clipboard]h1,h2,h3,h4,h5,h6
{
color: red
}
上面的例子是將所有正文標(biāo)題(h1到h6)的字體顏色都變成紅色。
Class Selector
利用Class Selector，你可以用同樣的HTML Tag構(gòu)成不同的樣式。比如說(shuō)，你希望段落p有兩種樣式，一種是居中對(duì)齊，一種是居右對(duì)齊。你就可以寫如下樣式：
CODE:[Copy to clipboard]p.right {text-align:right}
p.center {text-align:center}
其中right和center就是兩個(gè)class。然后你就可以引用這兩個(gè)class，示例代碼如下：
CODE:[Copy to clipboard]p class="center"這一段居中顯示。/p
p class="right"這一段是居右顯示。/p
演示示例演示示例
你也可以不用HTML Tag，直接用.加上Class名稱作為一個(gè)Selector。示例代碼如下：
CODE:[Copy to clipboard].center {text-align: center}
這種通用的Class Selector就沒(méi)有Tag的局限性，可以用于不同的Tag。比如：
CODE:[Copy to clipboard]h1 class = "center"這個(gè)標(biāo)題居中顯示。/h1
p class = "center"這個(gè)段落居中顯示。/p
演示示例演示示例
Contextual Selector
你可以為嵌入其它Tag的Tag定義樣式，示例代碼如下：
CODE:[Copy to clipboard]p em{color: red}
Em這個(gè)Tag嵌套在P里面。p em就叫做Contextual Selector，定義嵌套于P里的Em的樣式。這個(gè)例子表示，在P里面的用Em這個(gè)Tag標(biāo)記的字體顏色是紅色。
演示示例演示示例
CSS注釋
為了方便你自己或者他人日后更好地理解你的CSS代碼，你可以寫CSS代碼注釋。CSS代碼注釋以/*開(kāi)頭，以*/結(jié)束。
CODE:[Copy to clipboard]/* 段落樣式 */
p
{
text-align: center;
/* 居中顯示 */
color: black;
font-family: arial
}
CSS字體屬性
CSS常用文本屬性
CSS背景屬性
CSS邊框?qū)傩?/p>
CSS邊距屬性
CSS間隙屬性
CSS盒子模式(Box Model)
... margin_padding.html
CSS列表樣式屬性
CSS偽類(pseudo-class)
CSS代碼示例
推薦 布啦布啦 - 網(wǎng)頁(yè)教程與代碼的中文站點(diǎn)
上面的東西都是理論，看是看不會(huì)的， 必須動(dòng)手操作實(shí)踐。
下面是百度給出的空間頁(yè)面CSS說(shuō)明
空間頁(yè)面CSS說(shuō)明
body 整個(gè)空間頁(yè)面{background-color:#FFFFFF}
--------------------------------------------------------------------------------
空間名稱和簡(jiǎn)介區(qū)域
#header 主體部分{height:89px;background:#3399CC}
#header div.lc 左背景圖{background:url(temp1/hdl.jpg) no-repeat}
#header div.rc 右背景圖{background:url(temp1/hdr.jpg) no-repeat top right}
#header div.tit 空間名稱{top:8px;left:20px;line-height:22px;font-size:20px;font-family:黑體}
#header div.tit a.titlink 空間名稱鏈接{color:#FFFFFF;text-decoration:none}
#header div.tit a.titlink:visited{color:#FFFFFF;text-decoration:none}
#header div.desc 空間簡(jiǎn)介{top:33px;left:20px;color:#FFFFFF;font-size:13px}
#tabline TAB菜單下方的橫線{top:89px;background-color:#FFFFFF}
#tab TAB菜單主體{top:67px;background:url(temp1/tabbg.gif) repeat-x}
#tab a.on,#tab a.on:link,#tab a.on:visited TAB選中狀態(tài){margin-top:3px;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;line-height:19px;background-color:#F3F1F1;color:#197CAE;font-size:14px}
#tab span TAB與TAB之間的分割符“|”{color:#FFFFFF;font-size:14px}
#tab a:link TAB未選中狀態(tài){color:#FFFFFF;text-decoration:none;font-size:14px}
#tab a:visited{color:#FFFFFF;text-decoration:none;font-size:14px}
#tab2 設(shè)置TAB菜單主體{background:#DAE9F5}
#tab2 span TAB選中狀態(tài){color:#000000;font-size:12px;font-weight:bold}
#tab2 a TAB未選中狀態(tài){font-size:12px}
#tab2 a:link{color:#0000CC}
#tab2 a:visited{color:#0000CC}
--------------------------------------------------------------------------------
.stage 內(nèi)容區(qū)域（TAB菜單與版權(quán)信息之間的區(qū)域）{background:#F3F1F1}
其它區(qū)域（即訪問(wèn)量等信息）
#comm_info 主體{color:#333333;font-family:Arial;text-align:left}
#comm_info div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}
#comm_info a 鏈接{color:#3399CC}
--------------------------------------------------------------------------------
頁(yè)碼區(qū)域
#page 主體{height:30px;font-size:14px;font-family:Arial;text-align:center}
#page span 當(dāng)前頁(yè)碼（不可點(diǎn)擊）{padding:3px;color:#000000;font-size:14px;font-weight:bold}
#page a.pc 上一頁(yè)和下一頁(yè){color:#3399CC;font-size:14px;font-weight:bold}
#page a.pc:visited{color:#3399CC}
#page a.pi 頁(yè)碼（可點(diǎn)擊）{padding:3px;color:#3399CC;font-size:14px}
#page a.pi:visited{color:#3399CC}
--------------------------------------------------------------------------------
模塊
.mod {margin-bottom:10px}
.modhandle{cursor:move}
.modth 模塊標(biāo)題欄主體{height:24px}
.modhead{padding:4px 4px 0 4px}
.modopt 模塊操作區(qū)（如寫新文章）{padding:4px 4px 0 0}
.modtit 模塊標(biāo)題區(qū)（如文章列表）{color:#FFFFFF;font-size:12px;font-weight:bold}a.modtit{color:#FFFFFF}a.modtit:visited{color:#FFFFFF}
.modtitlink{color:#FFFFFF;font-size:12px;font-weight:bold}a.modtitlink{color:#FFFFFF;text-decoration:none}a.modtitlink:visited{color:#FFFFFF;text-decoration:none}a.modtitlink:hover{color:#FF5100;text-decoration:underline}
.modact 操作文字鏈接（如文章列表）{color:#FFFFFF;font-size:12px}a.modact:link{color:#FFFFFF}a.modact:visited{color:#FFFFFF}
.modbox 模塊內(nèi)容區(qū){padding:10px 10px 0 10px;background-color:#FFFFFF}
.modtl 模塊左上角背景{background:url(temp1/ptitl.gif) no-repeat top left;line-height:1px}
.modtc 模塊中上背景{background:url(temp1/ptitc.gif) repeat-x}
.modtr 模塊右上角背景{background:url(temp1/ptitr.gif) no-repeat top right;line-height:1px}
.modbl 模塊左下角背景{background-color:#FFFFFF;line-height:1px}
.modbc 模塊中下背景{background-color:#FFFFFF;line-height:1px}
.modbr 模塊右下角背景{background-color:#FFFFFF;line-height:1px}
--------------------------------------------------------------------------------
文章區(qū)域
#m_blog div.tit 文章標(biāo)題{font-size:14px;font-weight:bold}
#m_blog div.tit a 文章標(biāo)題鏈接{color:#333333;font-size:14px;font-weight:bold}
#m_blog div.tit a:visited{color:#333333}
#m_blog div.date 文章發(fā)表日期{margin:5px 0 8px 0;color:#666666}
#m_blog div.cnt 文章內(nèi)容{color:#333333;line-height:20px;font-size:14px}
#m_blog div.more{margin:14px 0 16px 0}
#m_blog div.more a 閱讀全文鏈接{color:#3399CC;font-size:14px}
#m_blog div.more a:visited{color:#3399CC}
#m_blog div.opt 文章操作區(qū)（如編輯、評(píng)論等）{color:#666666;font-size:12px}
#m_blog div.opt a 文章操作鏈接{color:#3399CC;font-size:12px}
#m_blog div.opt a:visited{color:#3399CC}
#m_blog div.line 分界線{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}
#m_blog div.none 無(wú)文章提示信息{padding:100px 0 100px 0;color:#333333;font-size:14px}
--------------------------------------------------------------------------------
個(gè)人檔案區(qū)域
#m_pro a 鏈接{color:#3399CC}
#m_pro a:visited{color:#3399CC}
#m_pro div.image 個(gè)人頭像{text-align:center}
#m_pro div.act 操作區(qū)（如加為好友、發(fā)送消息）{margin-top:10px}
#m_pro div.user 用戶名{margin-top:10px;color:#333333;font-size:12px;font-weight:bold}
#m_pro div.desc 用戶簡(jiǎn)介{color:#333333;font-size:12px}
#m_pro div.line 分界線{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}
#m_pro td{color:#333333;line-height:24px;font-size:14px}
--------------------------------------------------------------------------------
相冊(cè)區(qū)域
#m_album div.image 照片{text-align:center}
#m_album div.page {color:#666666;font-size:12px;text-align:center}
#m_album div.page a{color:#0000CC;font-size:12px}
#m_album div.page a:visited{color:#0000CC}
--------------------------------------------------------------------------------
友情鏈接區(qū)域
#m_links div.item 子項(xiàng){color:#333333;font-size:12px}
#m_links div.item a 名稱（鏈接）{color:#3399CC;font-size:12px;text-decoration:none}
#m_links div.item a:visited{color:#3399CC}
#m_links div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}
--------------------------------------------------------------------------------
文章分類
#m_artclg div.item 子項(xiàng){color:#666666;font-size:12px}
#m_artclg div.item a 分類名稱（鏈接）{color:#3399CC;font-size:12px}
#m_artclg div.item a:visited{color:#3399CC}
#m_artclg div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}
--------------------------------------------------------------------------------
最新評(píng)論區(qū)域
#m_comment div.item 子項(xiàng){color:#333333;font-size:12px}
#m_comment div.item a 發(fā)表人（鏈接）{color:#3399CC;font-size:12px}
#m_comment div.item a:visited{color:#3399CC}
#m_comment div.item a.cnt 評(píng)論摘要（鏈接）{color:#333333;font-size:12px;text-decoration:none}
#m_comment div.item a.cnt:visited{color:#333333;text-decoration:none}
#m_comment div.item a.cnt:hover{color:#333333;text-decoration:underline}
#m_comment div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}
--------------------------------------------------------------------------------
相冊(cè)列表
#m_albumlist div.note{color:#333333;font-size:14px}
#m_albumlist div.desc 簡(jiǎn)介{margin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F2F2F2;font-size:14px}
#m_albumlist div.none 無(wú)照片提示信息{padding:100px 0 100px 0;color:#333333;font-size:14px}
#m_albumlist div.line 分界線{margin-top:10px;line-height:16px;border-top:1px solid #D2E9F4}
#m_albumlist div.tit 照片標(biāo)題{margin:6px 0 7px 0;color:#333333;font-size:14px}
#m_albumlist div.tit a 照片標(biāo)題鏈接{color:#3399CC;font-size:14px}
#m_albumlist div.tit a:visited{color:#3399CC}
#m_albumlist span.count 照片數(shù)量{color:#666666;font-size:12px;font-weight:bold}
#m_albumlist span.size 照片尺寸{color:#999999;font-size:12px;font-family:Arial}
#m_albumlist a.act 操作區(qū)鏈接（如編輯、刪除）{color:#3399CC;font-size:12px}
#m_albumlist a.act:visited{color:#3399CC}
#m_albumlist a.page 頁(yè)碼鏈接{color:#0000CC;font-size:14px}
#m_albumlist a.page:visited{color:#0000CC}
#m_albumlist td.image{padding:5px;border:1px solid #999999;background:#FFFFFF}
--------------------------------------------------------------------------------
好友列表
#m_friend div.filter{margin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px}
#m_friend div.catalog{margin-bottom:10px;padding-left:10px;height:27px;line-height:27px;background-color:#F2F2F2;font-size:14px}
#m_friend div.user{margin-top:4px;color:#333333;font-size:12px}
#m_friend div.user a 好友名稱（鏈接）{color:#3399CC;font-size:12px}
#m_friend div.user a:visited{color:#3399CC}
#m_friend div.line 分界線{margin-top:10px;line-height:16px;border-top:1px solid #D2E9F4}
--------------------------------------------------------------------------------
設(shè)置訪問(wèn)統(tǒng)計(jì)、模板設(shè)置
#m_setting a 鏈接{color:#3399CC}
#m_setting a:visited{color:#3399CC}
#m_setting 主體{line-height:22px;color:#333333;font-size:14px}
#m_setting img.sel 模板預(yù)覽圖（選中狀態(tài)）{border:4px solid #FFDB7B}
#m_setting img.unsel 模板預(yù)覽圖（未選中狀態(tài)）{border:1px solid #D2D2D2}
#m_setting span.tit 模板標(biāo)題名稱{font-size:14px}
#m_setting span.usr 作者名{color:#666666}
#m_setting div.sel “當(dāng)前模板”文字{padding-top:6px;font-size:14px;font-weight:bold}
#m_setting div.line 分界線{margin-top:20px;line-height:16px;border-top:1px solid #D2E9F4}
--------------------------------------------------------------------------------
系統(tǒng)公告
#m_sysinfo a 鏈接{color:#3399CC}
#m_sysinfo a:visited{color:#3399CC}
#m_sysinfo 主體{line-height:22px;color:#333333;font-size:14px}
#m_sysinfo span.new 最新{color:#FF0000;font-size:10px;font-family:Arial}
#m_sysinfo span.date 發(fā)布時(shí)間{color:#666666;font-size:14px}
--------------------------------------------------------------------------------
基本選項(xiàng)
#m_setbase 主體{color:#333333;font-size:14px}
#m_setbase td{color:#333333;font-size:14px}
#m_setbase div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}
--------------------------------------------------------------------------------
網(wǎng)友評(píng)論
#in_comment 主體{width:710px}
#in_comment div.tit 標(biāo)題{margin-bottom:12px;color:#333333;font-size:14px;font-weight:bold}
#in_comment div.user 發(fā)表人名{margin-bottom:6px;color:#333333;font-size:12px}
#in_comment div.user a 發(fā)表人名（鏈接）{color:#3399CC;font-size:12px}
#in_comment div.user a:visited{color:#3399CC}
#in_comment div.user span.date 發(fā)表時(shí)間{color:#666666;font-size:12px}
#in_comment div.desc 評(píng)論內(nèi)容{color:#333333;font-size:12px}
#in_comment div.line 分界線{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}
#in_send div.tit 發(fā)表評(píng)論（標(biāo)題）{margin:10px 0 10px 0;color:#333333;font-size:14px;font-weight:bold}
重慶分公司
重慶分公司
