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