CSS基礎學習十二：CSS樣式 · Web前端HTML+CSS+JS初級入門

CSS樣式包括：CSS背景，CSS文本，CSS字體，CSS列表，CSS表格，CSS輪廓等樣式。我們就目前用到的 CSS樣式簡單地介紹一下。下面只是總結性的一些東西，具體的可以參考：[CSS樣式教程](http://www.phpstudy.net/e/css/css_background.html) (1)背景色 background-color 設置背景顏色可能的值：顏色名稱：如red,yellow,blue 十六進制顏色值：如#ffffff rgb顏色值：如rgb(255,255,255(十六進制為ff)) transparent：默認的，背景顏色透明 inherit：繼承父元素的背景色 (2)背景圖片 background-image 設置背景圖片值：url(圖片目錄) background-repeat 設置背景圖片是否重復值： repeat ? 橫向和縱向都重復(默認的) repeat-x ?橫向重復 repeat-y ?縱向重復 no-repeat 不重復 (3)background-position 設置背景圖片的位置值：一些關鍵詞 ?top,left,right,bottom,center 百分比：x% y% 像素值：xpx,ypx 注意：養成習慣，兩個值，一個表示水平方向，一個表示垂直方向。 (4)字體顏色 color 設置字體顏色可能的值：顏色名稱：如red,yellow,blue 十六進制顏色值：如#ffffff rgb顏色值：如rgb(255,255,255(十六進制為ff)) inherit：繼承父元素的背景顏色 (5)文字縮進 text-indent 設置文字的縮進，注意，多行內容只有第一行縮進可能的值：像素 xpx 像素 x% 基于父元素寬度的百分比 inhertit 繼承父元素的文字縮進屬性 (6)文本對齊方式 text-align 設置文本的對齊方式，注意基于塊級元素可能的值： left ? 把文本排列在左邊，左對齊 right 把文本排列在右邊，右對齊 center 文本居中和center的區別：對于文本的效果是一樣的對于非文本，center依然可以把內容居中 (7)字體大小 font-size 設置文本的字體大小可能的值： xpx 文本大小為xpx xem 文本大小為xem (8)px和em解釋 px ：像素，計算機上的一個點 em：相對大小，1em，1倍當前字體大小的尺寸，2em，2倍當前字體大小的尺寸。如字體大小是16px,那么1.75em就等于28像素。設置字體大小的時候，xem是相對于父元素的字體大小的x倍來設置。 (9)字體 font-family 設置使用什么類型的字體可能的值：字體名稱 ? 如Times，Georgia，serif等規則：可以定義多種字體，逗號隔開，先使用前面的字體，當前面的字體沒有，使用下一種，以此類推。 (10)字體風格 font-style 設置文本正常或斜體可能的值： normal ?文本正常顯示 italic 文本傾斜顯示 oblique 文本傾斜顯示設置 (11)字體加粗 font-weight 設置文本加粗可能的值： normal 正常字符，默認 bold ? 粗體字符 bolder ?更粗的字符 lighter 更細的字符 100-900 整百值，400相當于normal，700相當于bold20 (12)字母間距 letter-spacing 設置字母之間的間距，默認為0 可能的值： xpx 字母之間的間距是xpx xem 字母之間的間距是xem (13)字間距 word-spacing 設置字(單詞)之間的間距可能的值： xpx 字之間的間距是xpx xem 字之間的間距是xem (14)字符轉換 text-transform 設置字母大小寫可能的值： none 不做任何處理 uppercase ?全部大寫顯示 lowercase ?全部小寫顯示 capitalize 單詞首字母大寫 (15)文本裝飾 text-decoration 設置文本裝飾效果可能的值： none 不作任何處理 underline 文本添加下劃線 overline ?文本添加上劃線 line-through 文字中間添加一個貫穿線 bink 文本閃爍，不推薦使用 (16)字母間距和字間距在中文的區別在中文中的應用在中文中沒有子母和單詞的概念在外國人看來，每個漢字相當于letter 所以，對于中文，我們一般使用letter-spacing 每個漢字在英文中相當于一個字母，因此使用letter-spacing效果起作用，word-spacing對漢字不起作用 (17)列表的標志的類型 list-style-type 設置列表項標志的類型常用的值： none 無標志 disc ?實心圓標志 circle ?空心圓標志 square ?實心方塊標志 decimal 數字標志，從1開始的自然數 lower-roman 小寫羅馬數字 upper-roman ?大寫羅馬數字 lower-alpha 小寫字母 upper-alpha ?大寫字母 (18)表格邊框 boeder屬性設置表格邊框 border-collapse 屬性設置表格邊框折疊為單一邊框： width 和 height 屬性定義表格的寬度和高度。 text-align 和 vertical-align 屬性設置表格中文本的對齊方式。 text-align 屬性設置水平對齊方式，比如左對齊、右對齊或者居中： vertical-align 屬性設置垂直對齊方式，比如頂部對齊、底部對齊或居中對齊： padding 屬性控制表格中內容與邊框的距離 border-spacing設置分隔單元格邊框的距離。 caption-side設置表格標題的位置。 empty-cells設置是否顯示表格中的空單元格。 table-layout設置顯示單元、行和列的算法。 (19)輪廓 outline是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。 outline在一個聲明中設置所有的輪廓屬性 outline-color設置輪廓的顏色 outline-style設置輪廓的樣式 outline-width設置輪廓的寬度 ? ? ?接下來我們就具體演示一下這些CSS樣式的效果： ~~~ <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS樣式樣式</title></head> <style type="text/css"> .test1{ background-color:#FF0000; } .test2{ height:400px; border:1px solid #FF0000; background-image:url('http://zx.kaitao.cn/UserFiles/Image/beijingtupian6.jpg'); background-repeat:no-repeat; background-position:center; } .test3{ color:#0000FF; } .test4{ text-indent:30px; }.test5{ text-align:center; } img{ display:block; } .test6{ font-size:40px; }.test7{ font-family:"華文行楷", "華文仿宋", "黑體"; font-size:24px; } .test8{ font-style:oblique; font-size:36px; } .test9{ font-weight:bold; font-size:36px; } .test10{ letter-spacing:30px; font-size:36px; } .test11{ word-spacing:30px; font-size:36px; } .test12{ letter-spacing:20px; word-spacing:30px; font-size:36px; } .test13{ text-transform:uppercase; font-size:36px; } .test14{ text-decoration:underline; font-size:36px; } .test15{ list-style-type:square; } .test16{ list-style-position:inside; } .test17{ list-style-image:url("01.png"); } table{ width:200px; border-collapse:collapse; } table,tr,th,td{ border:1px solid #0000FF; text-align:center; vertical-align:middle; } th{ background-color:#00FF00; height:50px; } td{ background-color:#999999; } .test18{ border:1px solid #00FF00; outline-color:#FF0000; outline-style:dotted; outline-width:3px; } </style> </head> <body> <p align="center">背景色演示</p> <div class="test1">攻城課堂</div> <hr/> <p align="center">背景圖片演示</p> <div class="test2"></div> <hr/> <p align="center">字體顏色演示</p> <div class="test3">攻城課堂</div> <hr/> <p align="center">文字縮進演示</p> <div class="test4">攻城課堂(只作用于文本第一行)攻城課堂(只作用于文本第一行)攻城課堂(只作用于文本第一行)攻城課堂(只作用于文本第一行) 攻城課堂(只作用于文本第一行)攻城課堂(只作用于文本第一行)攻城課堂(只作用于文本第一行)攻城課堂(只作用于文本第一行)攻城課堂(只作用于文本第一行)攻城課堂(只作用于文本第一行)</div> <div>攻城課堂</div> <hr/> <p align="center">文字對齊方式演示</p> <div class="test5">攻城課堂</div> <div>攻城課堂(瀏覽器默認的效果)</div> <span class="test5">攻城課堂(span標簽是行內元素，因此不會生效)</span> <div class="test5"><span>攻城課堂(嵌套在塊級元素內的可以生效)</span></div> <hr/> <p align="center">與center標簽作比較</p> <div class="test5">攻城課堂</div> <center>攻城課堂(使用center標簽的效果)</center> <div class="test5"><img src="http://zx.kaitao.cn/UserFiles/Image/beijingtupian6.jpg" /></div> <center><img src="http://zx.kaitao.cn/UserFiles/Image/beijingtupian6.jpg" />(使用center標簽居中的效果)</center> <hr/> <p align="center">字體大小演示</p> <div>攻城課堂(瀏覽器默認的字體大小)</div> <div class="test6">攻城課堂(字體大小為40px)</div> <hr/> <p align="center">字體演示</p> <div>攻城課堂(瀏覽器的默認效果)</div> <div class="test7">攻城課堂(華文行楷)</div> <hr/> <p align="center">字體風格演示</p> <div>攻城課堂(瀏覽器的默認效果)</div> <div class="test8">攻城課堂</div> <hr/> <p align="center">字體加粗演示</p> <div>攻城課堂(瀏覽器的默認效果)</div> <div class="test9">攻城課堂</div> <hr/> <p align="center">字母間距演示</p> <div style="font-size:36px">important(瀏覽器的默認效果)</div> <div class="test10">important</div> <hr/> <p align="center">字間距演示</p> <div style="font-size:36px">This is very impotant(瀏覽器的默認效果)</div> <div class="test11">This is very impotant</div> <hr/> <p align="center">字母間距和字間距在中文中的應用演示</p> <div style="font-size:36px">歡迎來到攻城課堂(瀏覽器的默認效果)</div> <div class="test12">歡迎來到攻城課堂(每個漢字在英文中相當于一個字母，因此使用letter-spacing效果起作用，word-spacing對漢字不起作用)</div> <hr/> <p align="center">字符轉換演示</p> <div style="font-size:36px">This is very impotant(瀏覽器的默認效果)</div> <div class="test13">This is very impotant(全部大寫)</div> <hr/> <p align="center">文本裝飾演示</p> <div style="font-size:36px">攻城課堂(瀏覽器的默認效果)</div> <div class="test14">攻城課堂</div> <hr/> <p align="center">列表項標志的類型演示</p> <ol> <li>足球</li> <li>籃球</li> <li>排球</li> </ol> <ul> <li>權利的游戲第一季</li> <li>權利的游戲第二季</li> <li>權利的游戲第三季</li> </ul> <ol class="test15"> <li>足球</li> <li>籃球</li> <li>排球</li> </ol> <ul class="test15"> <li>權利的游戲第一季</li> <li>權利的游戲第二季</li> <li>權利的游戲第三季</li> </ul> <hr/> <p align="center">列表項標志的位置演示</p> <ul> <li>權利的游戲第一季</li> <li>權利的游戲第二季</li> <li>權利的游戲第三季</li> </ul> <ul class="test16"> <li>權利的游戲第一季</li> <li>權利的游戲第二季</li> <li>權利的游戲第三季</li> </ul> <hr/> <p align="center">圖片型列表項標志演示</p> <ul> <li>權利的游戲第一季</li> <li>權利的游戲第二季</li> <li>權利的游戲第三季</li> </ul> <ul class="test17"> <li>權利的游戲第一季</li> <li>權利的游戲第二季</li> <li>權利的游戲第三季</li> </ul> <hr/> <p align="center">表格演示</p> <table align="center"> <tr> <th>姓名</th> <th>性別</th> </tr> <tr> <td>張國慶</td> <td>男</td> </tr> <tr> <td>李思思</td> <td>女</td> </tr> </table> <hr/> <p align="center">輪廓演示</p> <p align="center">落霞與孤鶩齊飛，秋水共長天一色</p> <p align="center" class="test18">落霞與孤鶩齊飛，秋水共長天一色</p> <hr/> </body> </html> </span> ~~~ 火狐瀏覽器運行的結果為： ![](https://box.kancloud.cn/2016-04-28_5721559797ffb.jpg) ![](https://box.kancloud.cn/2016-04-28_57215597b1120.jpg) ![](https://box.kancloud.cn/2016-04-28_57215597c227a.jpg) ![](https://box.kancloud.cn/2016-04-28_57215597e1217.jpg) ![](https://box.kancloud.cn/2016-04-28_5721559802566.jpg) ![](https://box.kancloud.cn/2016-04-28_57215598175b9.jpg) ![](https://box.kancloud.cn/2016-04-28_5721559831209.jpg) ![](https://box.kancloud.cn/2016-04-28_572155984333d.jpg)