一直都想寫一個CSS+DIV系列的文章，但是總想找個合適點時間，整理整理。再寫個系列，但是現在覺得什麼事都不要推，有些東西，能當天做完就當天做完，要不過了，你也許不想做了，或許有一種錯覺覺得意義就不大了，所以這個css+div控制網頁樣式與布局，我覺得我要是再不寫，過兩天就真寫不出來了。送大家一句話：當天能做完的事情，絕不留給第二天。
我們從最基礎，一點點的深入，然後結合例子，慢慢分析，希望對大家有所協助。通常我們在學習CSS時，應該盡量的參照其他網站的編寫CSS。我們看看百度的：通過學習其他網站的CSS代碼，可以很快的對頁面設計有感覺，更容易上手。這個我們叫做“站在巨人的肩膀上。”
CSS的基本文法：
CSS選取器：包括標記選取器、類別選取器、ID選取器。我們先看看標記選取器：
在這裡邊，只要符合命名規則，就能輕易的達到了要求。我們看看兩句代碼和效果：
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>標記選取器</title><style type="text/css">h1{color:#FF0000;font-size:50px;}</style></head><body><h1>CSS選取器</h1><h1>選取器CSS</h1></body></html>
效果：
這個很簡單，我們就接下來，繼續講類別選取器：也就是我們常說的.class。
我們看的出來，就一個h1變成了.class；別的看不出變化，那我們看看代碼裡邊怎麼應用：
<html><head><title>class選取器</title><style type="text/css"><!--.one{color:red;/* 紅色 */font-size:18px;/* 文字大小 */}.two{color:green;/* 綠色 */font-size:20px;/* 文字大小 */}.three{color:cyan;/* 青色 */font-size:22px;/* 文字大小 */}--></style> </head><body><p class="one">class選取器1</p><p class="two">class選取器2</p><p class="three">class選取器3</p><h3 class="two">h3同樣適用</h3></body></html>
我們每一個P標記都用一個class進行控制，一個class="one"對應一個.one{},然後在.one裡邊添加屬性，就完成了。
我們看的出來，這個h3跟.two是一個效果，只是字型不一樣，那就是h3預設的字型與class的區別。採用class的好處是可以讓使用者充分的自訂並且這個class可以重複的被使用，這就是咱們的p標誌和h3標誌所顯示的那樣。
我們繼續看ID選取器：
跟咱們之前說的標記選取器與類別選取器，大同小異。看看代碼：
<html><head><title>ID選取器</title><style type="text/css"><!--#one{font-weight:bold;/* 粗體 */}#two{font-size:30px;/* 字型大小 */color:#009900;/* 顏色 */}--></style> </head><body><p id="one">ID選取器1</p><p id="two">ID選取器2</p><p id="two">ID選取器3</p></body></html>
這個跟類別選取器，就一個"."與"#"的區別，我們看看效果
ID與class的區別是：ID不允許出現兩個同樣的ID；
這個是錯誤的做法，原因在於ID不但適用於css代碼，還是用javascript代碼，在javascript代碼中，如果一個ID同時出現在兩個標記中，則會造成文法混亂。
選取器聲明：
集體聲明，我們看看代碼：
<html><head><title>集體聲明</title><style type="text/css"><!--h1, h2, h3, h4, h5, p{/* 集體聲明 */color:purple;/* 文字顏色 */font-size:15px;/* 字型大小 */}h2.special, .special, #one{/* 集體聲明 */text-decoration:underline;/* 底線 */}--></style> </head><body><h1>集體聲明h1</h1><h2 class="special">集體聲明h2</h2><h3>集體聲明h3</h3><h4>集體聲明h4</h4><h5>集體聲明h5</h5><p>集體聲明p1</p><p class="special">集體聲明p2</p><p id="one">集體聲明p3</p></body></html>
效果如下：
集體聲明有一個好處，就是當我們需要顯示同一個效果的時候，那麼集體聲明就幫了我們很大的忙。
我們再看看選取器的嵌套：代碼如下：
<html><head><title>CSS選取器的嵌套聲明</title><style type="text/css"><!--p b{/* 嵌套聲明 */color:maroon;/* 顏色 */text-decoration:underline;/* 底線 */}--></style> </head><body><p>嵌套使<b>用CSS</b>標記的方法</p>嵌套之外的<b>標記</b>不生效</body></html>
我們看看效果：
從效果我們可以看的出來，選取器裡邊的p標記裡邊的b的用CSS已經加上了我們的效果，但是p標記外的“標記”就不生效。
CSS的繼承：
<html><head><title>父子關係</title><base target="_blank"><style><!--h1{color:red;/* 顏色 */text-decoration:underline;/* 底線 */}h1 em{/* 嵌套選取器 */color:#FFFF00;/* 顏色 */font-size:40px;/* 字型大小 */}--></style> </head><body><h1>我在寫<em>部落格</em></h1></body></html>
我們從代碼裡邊看的出來：h1裡邊加了紅色、底線。h1 em加了也加了顏色。
效果：我們看的出來，em的顏色覆蓋了h1定義的顏色了，但是直接繼承了底線。這就是繼承的好處，可以從父標記中統一設計好大的規模，然後把子標記中的區別於副標誌的給填充上，就完成了這個效果。
這是很基礎的東西，但是想要基礎抓牢，就必須得從這裡開始。稍後會繼續完善這個部落格。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
