精通CSS+DIV網頁樣式與佈局--初探CSS
接下來，小編會從最基礎的CSS.DIV網頁樣式與佈局，開始慢慢的介紹，一點點的深入，然後結合例子，慢慢分析，希望對大家有所幫助。通常我們在學習CSS時，應該儘量的參照其她網站的編寫CSS。比如百度，谷歌等，通過學習其她網站的CSS程式碼，可以很快的對頁面設計有不一樣的心動感覺，更容易上手。這個我們叫做“站在巨人的肩膀上。” 今天小編主要簡單的介紹一下CSS的基本概念以及CSS的基本語法，首先我們來看一張圖：
接著，小編會順著這張圖的脈絡，依次減少CSS的基本知識。
初探CSS
概念：CSS(Cascading Style Sheet),中文譯為層疊樣式表，是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。
使用CSS控制頁面：CSS控制頁面的方法有四種：分別為行內樣式，內嵌式，連結式和匯入樣式。對於稍微龐大的網頁我們都會使用連結樣式，這是因為其將HTML和CSS分開編寫，便於後期維護，而且明朗清晰。
基本語法
對於CSS選擇器，也就是我們選擇哪個html物件進行CSS樣式控制，有三種：分別為標記選擇器，類別選擇器和ID選擇器，接下來，小編對這三個選擇器進行詳細介紹。
標記選擇器：
我們來看一個例子的程式碼及其顯示效果：
<!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>Untitled Document</title> <style type="text/css"> h1{ color:#0000FF; font-size:40px; } </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>
我們看的出來，這個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>
<p id="one two">ID選擇器3</p>
</body>
</html>
CSS的宣告
對於CSS的宣告這裡有三種，集體宣告，全域性宣告和巢狀宣告，看下邊兩個例子：
<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>
CSS的繼承，詳情請點選，我們來看一個例子的程式碼以及執行的效果：
<html>
<head>
<title>父子關係</title>
<base target="_blank">
<style>
<!--
h1{
color:red; /* 顏色 */
text-decoration:underline; /* 下劃線 */
}
h1 em{ /* 巢狀選擇器 */
color:#004400; /* 顏色 */
font-size:40px; /* 字型大小 */
}
-->
</style>
</head>
<body>
<h1>祖國的首都<em>北京</em></h1>
<p>歡迎來到祖國的首都<em>北京</em>，這裡是全國<strong>政治、<a href="economic.html"><em>經濟</em></a>、文化</strong>的中心</p>
<ul>
<li>在這裡，你可以：
<ul>
<li>感受大自然的美麗</li>
<li>體驗生活的節奏</li>
<li>領略首都的激情與活力</li>
</ul>
</li>
<li>你還可以：
<ol>
<li>去八達嶺爬長城</li>
<li>去香山看紅葉</li>
<li>去王府井逛夜市</li>
</ol>
</li>
</ul>
<p>如果您有任何問題，歡迎<a href="contactus">聯絡我們</a></p>
</body>
</html>
小編寄語：該博文，小編主要介紹了CSS的一些基礎知識，總的來說分為兩個部分進行介紹，一個是初探CSS，一個是CSS的基本語法，初探CSS包括概念和使用CSS控制頁面，CSS的基本語法包括三個方面的內容，分別是CSS的選擇器，CSS宣告，CSS繼承。有了CSS讓我們的介面瞬間活了起來，動了起來，讓我們的網際網路世界更加的豐富多彩，美麗無限，BS學習，未完，待續......