【转载】CSS 入门精要（一）
本教程取名為"入門精要"，首先是為入門讀者準(zhǔn)備的，如果你想在本文中找到關(guān)于CSS的高級(jí)知識(shí)，請(qǐng)繞行！其次，"精要"二字表明本文只講述關(guān)于CSS的入門要點(diǎn)，力求精簡(jiǎn)，不求廣博。
我假設(shè)你已掌握HTML，并有所實(shí)踐。若假設(shè)不成立，請(qǐng)先學(xué)習(xí)并實(shí)踐HTML……
本教程分為四個(gè)部分，第（一）部分是基礎(chǔ)知識(shí)，第（二）部分介紹浮動(dòng)（float）與 盒模型，第（三）部分介紹CSS選擇符，第（四）部分則是一個(gè)簡(jiǎn)單的綜合示例。
邊看教程邊實(shí)驗(yàn)大概需要3 ~ 5小時(shí)，剩下的就需要讀者大量的實(shí)踐與經(jīng)驗(yàn)積累了。
個(gè)人觀點(diǎn)：HTML主要用于描述網(wǎng)頁里的元素"是什么（內(nèi)容）"，CSS主要用于描述網(wǎng)頁里的元素"什么樣（外觀）"，而JavaScript用于增強(qiáng)網(wǎng)頁的交互能力和邏輯控制能力。因此，應(yīng)只使用HTML來說明網(wǎng)頁中的元素是什么，而盡量避免使用HTML來描述元素的外觀。極端點(diǎn)說，諸如：<font>、<b>、<u>、<i>這樣的標(biāo)簽就是HTML標(biāo)簽中的"怪胎"，應(yīng)避免使用。
曾經(jīng)聽到兩位同學(xué)的這樣一段對(duì)話：
A：<p>標(biāo)簽是干什么用的？
B：就是讓文字另起一行……
筆者認(rèn)為，B同學(xué)完全忽視的<p>標(biāo)簽真正的作用是"定義一個(gè)段落"，換句話說是說明"這是一個(gè)段落"。而"讓文字另起一行"這只是<p>標(biāo)簽作為塊標(biāo)記的一個(gè)"副作用"而已，我們完全可以使用CSS令其不另起一行。況且，"讓文字另一起行"這是在控制元素顯示效果（外觀），這不應(yīng)該是HTML標(biāo)簽的主要作用，而應(yīng)該由CSS來承擔(dān)。
（上述綠色部分言論完全是個(gè)人觀點(diǎn)，若有異議，歡迎討論，若打擊到了某人，敬請(qǐng)海涵 :)?
? ?? ? ?
OK，進(jìn)入正題（請(qǐng)邊閱讀，邊實(shí)驗(yàn)）……
CSS是英文Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，CSS目前最新版本為CSS3。CSS與HTML、JavaScript構(gòu)成了網(wǎng)頁設(shè)計(jì)的三大基礎(chǔ)。
? ??
1. CSS基本使用方法與語法
首先，為保證你所寫的代碼在各個(gè)瀏覽器中均可以正常顯示，請(qǐng)?jiān)陧撁娴拈_關(guān)部分寫入如下代碼：
<!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">
上述代碼為DTD聲明，目的在于告訴瀏覽器，你使用的是XHTML 1.0標(biāo)準(zhǔn)，這樣瀏覽器才能較好地支持后續(xù)我們將要學(xué)習(xí)的東東。（事實(shí)上，若你使用Dreamweaver，新建一個(gè)HTML文檔時(shí)它會(huì)自動(dòng)幫你寫下上面那段代碼）
OK，下面看例子：
<p style="color:red;font-size:18px">段落中文字是紅色，大小為18像素</p>
上述代碼告訴瀏覽器，<p></p>中的文字顯示為紅色，大小為18像素。（快試一下吧！）
我們看到，要為一個(gè)標(biāo)簽說明樣式，只需在標(biāo)簽中插入"style"屬性即可。上例中紅色部分即為樣式說明。
語法格式：樣式屬性1:值1;樣式屬性2:值2;……
屬性與值之間使用冒號(hào)分隔，多個(gè)樣式說明之間使用分號(hào)分隔。
好了，現(xiàn)在的問題是，到底有些什么樣式屬性可以使用呢？關(guān)于這個(gè)問題，本文不作闡述，讀者可以查閱別的資料?；蛘?#xff0c;最簡(jiǎn)單的辦法，使用Dreamweaver的提示功能，如下圖所示：
相信你在實(shí)驗(yàn)上面的例子時(shí)已經(jīng)發(fā)現(xiàn)了怎么把這個(gè)提示框調(diào)出來了吧……
從頭至尾瀏覽一下提示框中顯示的所有樣式屬性，中學(xué)英語水平應(yīng)該可以足以看懂了，不行就查下字典嘛！ （花5~10分鐘時(shí)間瀏覽完了再繼續(xù)往下讀...）
?
瀏覽的目的在于了解有些什么樣式屬性可用。就像你知道了有些什么材料，當(dāng)你要蓋房子時(shí)你就能靈活使用了。
當(dāng)然能逐個(gè)試一下就更好了 :)
本人非常反對(duì)一開始就找一本厚厚的參考書，看完了才來實(shí)踐！大膽猜測(cè)、大膽實(shí)驗(yàn)才是王道，又不會(huì)把電腦試壞了。別成天抬著嘴到處問，動(dòng)不動(dòng)就問別人"推薦一本書"。（哎，又上火了，打擊到你的話，我只能說 sorry了:）
應(yīng)該注意，Dreamweaver的提示框里出現(xiàn)的那些樣式屬性不是所有屬性在所有瀏覽器里都有效，所以要避免使用那些"非主流"的樣式。
下面是本人小結(jié)的"主流"樣式屬性，分了類，方便記憶：("*"表示0個(gè)或任意多個(gè)字符)
序號(hào) | 類別 | 說明 |
1 | background* | 以background開頭的一組，修飾元素的背景 |
2 | font* | 修飾元素中的文字外觀 |
3 | text* | 修飾文字 |
4 | border* | 修飾元素的邊框 |
5 | margin* | 設(shè)置元素外邊距寬度 |
6 | padding* | 設(shè)置元素內(nèi)邊距寬度 |
7 | list* | 設(shè)置<li>的外觀 |
8 | 其它 | left/right/top/bottom、width/height、display/visibility color、line-height、overflow、cursor、float、clear、position、z-index |
下文依次對(duì)常用屬性簡(jiǎn)要說明。讓我們直接舉例，請(qǐng)對(duì)照實(shí)踐，并注意觀察和總結(jié)。
（1）background*
以background開頭的這一組樣式屬性主要說明元素的背景。例：
代碼 | 說明 |
background-color : red; | 背景為紅色，支持RGB表示的顏色，如:#FF00AB |
background-image : url("bg.jpg"); | 設(shè)置背景圖片為bg.jpg（相對(duì)路徑表示） |
background-repeat : repeat-x; | 背景圖只在X方向（水平方向）上重復(fù)，還有其它幾個(gè)值，請(qǐng)自行實(shí)驗(yàn) |
background-attachment : fixed; | 背景圖固定，不隨滾動(dòng)條滾動(dòng) |
background-position : 5px 10px; | 設(shè)置背景圖相對(duì)于元素左上角向右移動(dòng)5px,向下移動(dòng)10px?？扇∝?fù)值。 |
可以把上面的代碼簡(jiǎn)寫為： background : red url('bg.jpg') repeat-x fixed 5px 10px;
? ?
（2）font*、text*、color、line-height
這一組屬性均是說明文字的表現(xiàn)形式，因此就一起舉例說明了：
代碼 | 說明 |
font-size : 12px; | 設(shè)置文字大小為12像素 (請(qǐng)查閱其它資料了解其它單位) |
font-family : 宋體; | 設(shè)置文字字體為"宋體"。應(yīng)避免使用非主流字體，原因此處暫略，請(qǐng)自行思考 |
font-weight : bold; | 文字加粗 |
text-align : center; | 文字水平居中 |
text-decoration : underline; | 文字加下劃線 |
text-indent : 24px; | 首行縮進(jìn)24像素 |
color : red; | 文字為紅色，支持RGB表示的顏色，如:#FF00AB |
line-height : 24px; | 每行文字的行高為24像素 |
請(qǐng)實(shí)驗(yàn)下面2段代碼（省略號(hào)部分請(qǐng)自行填充不少于200字的一段文字）：
<p>……</p>
<p style="font-size:12px; line-height:22px">……</p>
第二段是否比第一段要美觀，呵呵，自行小結(jié)一下吧！
? ?
再實(shí)驗(yàn)下面這段代碼：
<div style="border:1px solid blue; width:200px; height:100px; text-align: center; line-height:100px;">文字</div>
文字是否在div里居中了? 注意紅色部分代碼，又可以小結(jié)一下了！
? ?
（3）border*
以border開頭的這一組修飾元素的邊框。邊框分上、右、下、左四個(gè)方向，每個(gè)方向的邊框可分別修飾"型"、"色"、"寬"。
看例子(例子中要同時(shí)說明"型"、"色"、"寬"才有效)：
代碼 | 說明 |
border-left-color: red; border-left-style: solid; border-left-width:2px; | 設(shè)置元素左邊框?yàn)?/span>2像素寬的紅色實(shí)線邊 |
border-left : 2px solid red; | 設(shè)置元素左邊框?yàn)?/span>2像素寬的紅色實(shí)線邊(上例的簡(jiǎn)寫形式) |
border : 1px dotted red; | 設(shè)置元素四周邊框?yàn)?/span>1像素寬的紅色虛線邊 |
border : 1px solid red; border-width : 2px 5px 10px 15px; | 四周邊框均為紅色實(shí)線邊，上、右、下、左邊框?qū)挾确謩e為2px、5px、10px、15px 小結(jié)： (1) 第2行的代碼覆蓋了第1行中關(guān)于寬度的說明（后說明的樣式會(huì)覆蓋先說明的樣式） (2) 四個(gè)方向的邊框可屬性可一起簡(jiǎn)寫說明，中間以空格分隔，順序?yàn)閺?/span>"上"開始順時(shí)針方向一周 |
border : 1px solid red; border-width : 5px 10px; | 四周邊框均為紅色實(shí)線邊，上下邊為5px寬，左右邊為10px。 （發(fā)現(xiàn)了什么規(guī)律? 自己小結(jié)一下！） |
border : 1px solid red; border-width : 5px 10px 15px; | 等同于 border-width : 5px 10px 15px 10px; |
? ?
（4）margin*、padding*
margin指的是元素邊框之外的空白，而padding則指元素邊框之內(nèi)與內(nèi)容之間的空白。
是不是看得一頭霧水? 沒關(guān)系，暫時(shí)放一下，我們繼續(xù)往下看，等讀完"CSS入門精要（二）"就明白了。
? ?
（5）list*
以list開頭的這一組屬性修飾<li>的外觀，其中，list-style-type和list-style-image由字面即可猜到其用途，不行么試一下就知道了。
下面只討論list-style-position，直接看圖：
左圖為list-style-position:outside的情形，右圖為list-style-position:inside的情形。
可以看到，未設(shè)置margin、padding時(shí)：
a) outside（默認(rèn)值）：li元素內(nèi)容緊靠相鄰元素，項(xiàng)目符（那黑點(diǎn)）深入到了相鄰元素內(nèi)部
b) inside: li元素項(xiàng)目符緊靠相鄰元素，內(nèi)容相應(yīng)后縮。
? ?
（6）其它
這一組相對(duì)零散，下面配合例子說明：
代碼 | 說明 |
width:50px;height:100px; | 定義元素寬50px，高100px |
color: red; | 設(shè)置元素中文字為紅色，支持RGB表示的顏色，如:#FF00AB |
line-height:24px; | 設(shè)置元素中文字行高24px |
cursor: pointer; | 鼠標(biāo)處于元素上方時(shí)顯示為手指形狀，類似處于超鏈接上方的效果 |
display: none; | 隱藏元素。 注意下面2行代碼的作用： display: block; 設(shè)置元素以塊標(biāo)簽方式顯示 display: inline; 元素以行內(nèi)標(biāo)簽方式顯示 ? 還記得本文開頭那兩位同學(xué)的對(duì)話嗎? 實(shí)驗(yàn)一下： <p style="display:inline">段落文字1</p> <p style="display:inline">段落文字2</p> 現(xiàn)在P標(biāo)記不再是換行的作用了吧…… |
visibility: hidden; | 隱藏元素。 與display: none的區(qū)別在于： 使用visibility: hidden隱藏元素后元素原來占據(jù)的空間仍然保留，相鄰元素并不侵占若原有空間。 而display: none將元素隱藏后，原來占據(jù)的空間不再保留（試試就知道了） |
position: absolute; | 設(shè)置元素的定位方式為絕對(duì)定位。 關(guān)于position屬性的幾個(gè)取值及作用相對(duì)復(fù)雜，本文作為精簡(jiǎn)入門不再贅述，請(qǐng)參閱其它資料。 |
left:50px; | 設(shè)置元素左外邊距邊界與其父容器左邊界之間的偏移為50px left、top、right、bottom 4個(gè)屬性的效果與position屬性的取值有很大關(guān)系 |
z-index:999; | 設(shè)置元素的疊放層次，z-index值越大，就越靠上層。 |
float:left; | 元素向左浮動(dòng)。（參閱CSS入門精要（二）） |
clear:both; | 清除浮動(dòng)效果（參閱CSS入門精要（二）） |
overflow:scroll; | 若元素中的內(nèi)容超出了元素本身的大小，則顯示滾動(dòng)條。 關(guān)于此屬性的幾個(gè)取值有一些讓人很迷惑的效果和用途，讀者可先實(shí)驗(yàn)，再上網(wǎng)搜索別的文檔看看。 |
?
好了，至此我們已經(jīng)初步了解了CSS的基本語法，以及常用樣式屬性的用途。
還是那句話，由于是精要入門教程，所以未對(duì)所有樣式屬性進(jìn)行說明，即使文中提到的樣式也未對(duì)其每一個(gè)取值用途進(jìn)行詳述，讀者可自行實(shí)驗(yàn)、總結(jié)或查閱別的資料以學(xué)習(xí)本文未盡之處……
前文中提到的的float、clear、border、margin、padding幾個(gè)屬性還有更多的內(nèi)容需要討論，如果你已經(jīng)基本理解了前文所述內(nèi)容，那就繼續(xù)看"CSS入門精要（二）"吧！
轉(zhuǎn)載于:https://www.cnblogs.com/toge/p/6114739.html
總結(jié)
以上是生活随笔為你收集整理的【转载】CSS 入门精要（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： fir.im Weekly - 让 iO
- 下一篇： 一个栗子上手CSS3动画