玩轉CSS系列-CSS簡介及添加
大家可能都知道，如果一個網頁只是使用HTML代碼進行編寫。在默認情況下是沒有任何樣式可言的，就像我們蓋好一幢樓，但是還沒有裝修那樣，而HTML就相當於我們剛蓋好樓的主體，而咱們開始學習的CSS就是裝修，只不過CSS是針對HTML實現美化，當然不只是美化，還有佈局。
CSS 全稱：Cascading Style Sheets中文翻譯為層疊樣式表 ，定義HTML中的標記以何種方式顯示。如：我們想讓網頁中H1標記的文字顯示的不要那麼大，或者換個顏色等等諸如一系列這樣的問題，都可以通過CSS來實現。目前所有的主流瀏覽器均支持CSS。
我們通過下邊兩張圖對比一下：
我們先看一下添加過CSS樣式的網頁如下圖
現在我們把CSS樣式表文件去掉
通過這兩種這兩張圖大家可以明顯的看到。加完CSS的可以按照我們設計的想法實現我們網頁元素的擺放
下邊我們先學習如何把CSS添加到網頁中去，而其還要注意學習CSS要明白一個重要的問題，CSS主要是解決與實現表現（CSS）與結構（HTML）的分離。我們編寫完HTML之後，如何通過CSS對HTML實現控制呢。
行內樣式
內嵌樣式
鏈接樣式
導入樣式
我們這一節課的示例就先從行內樣式開始
行內樣式：就是直接在HTML上寫樣式，就是HTML上加屬性style=””這種形式。如
<p style=”color:#f00”>dushuwu</p>，但是這種方法並不是被我們推薦的，因為不利於實現表現與結構分離。也為後期維護帶來很多不必要的困難。我們只需要知道即可。
內嵌樣式：針對當前一個網頁可以使用的樣式，一般寫在html的<head></head>標記中。而且要使用一個示明，我們的樣式都要寫到這個聲明中如下：
<style type=”text/css”>寫我們的樣式</style>
我們看一個示例文件為我們段落文字改成紅色的：
<!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>
<title>dushuwu第一示例</title>
<style type="text/css">
p
{
color:#f00;
}
</style>
</head>
<body>
<p>dushuwu</p>
<h2>www.</h2>
</body>
</html>
我們在這裡又有一個新的知識點。如果我們想給段落添加一個樣式的話。我們可以通過兩步實現，第一步先找到這個段落，第二步添加CSS樣式屬性（PS：這些屬性咱們現在可以理解為已經提供好的，咱們使用即可）。
那咱們現在就看一下這個CSS選擇器：
CSS選擇器的分類：
HTML標籤選擇器
群組選擇器
包含選擇器
自定義選擇器有可以分為兩種
Class選擇器
ID選擇器
HTML標籤選擇器：就是直接使用BODY中的HTML標記做為選擇符,就像我們第一示例那樣。
但是這種選擇器有一種侷限性。假設我們有兩個段落。要設置不一樣的效果。那怎麼辦呢？當然我們選擇器必須結合起來用才可以。
假如我們要為網頁中的H2和P的文字都要改成紅色的，怎麼辦呢？這時候群組選擇器就派上用場了。我們看個示例文件
<!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>
<title>dushuwu第一示例</title>
<style type="text/css">
h2,p
{
color:#f00;
}
</style>
</head>
<body>
<p>dushuwu</p>
<h2>dushuwu提供CSS教程</h2>
</body>
</html>
語法規範就是
選擇器,選擇器{屬性:屬性值;}
總結：我們記得只要我們CSS屬性一致的時候，都可以使用群組選擇符。
包含選擇器：找到含有的內容，就像我們HTML中UL LI a（PS：列表上加鏈接） 這種形式，如果我們要為列表中鏈接添加樣式。這時候我們就能使用包含選擇器
<!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>
<title>dushuwu第三示例</title>
<style type=”text/css”>
ul li a{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href=”#”>項目編號1</a></li>
<li><a href=”#”>項目編號2</a></li>
</ul>
<a href=”#”>我不會被改變</a>
</body>
</html>
語法規範是：
選擇器 選擇器{屬性:屬性值;}
注意：這裡面是空格隔開的 HTML中的父級空格HTML中的子級
自定義選擇器
引入：如果網頁中有多個P標籤，我們想為其中某一個P添加樣式。該怎麼辦呢，之前的選擇器都不能滿足。
ID選擇器：為網頁中某一個標籤添加屬於自己的選擇器，而且規範要求我們這個ID名稱的選擇器只能使用一次。（PS：也是為了以後JS好調用）
<!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>
<title>示例</title>
<style type="text/css">
#diyi li a{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href="#">項目編號1</a></li>
<li><a href="#">項目編號2</a></li>
</ul>
<ul id="diyi">
<li><a href="#">項目編號1</a></li>
<li><a href="#">項目編號2</a></li>
</ul>
<a href="#">我不會被改變</a>
</body>
</html>
語法規範就是：
#選擇器名稱{CSS屬性：屬性值;}
而在HTML中就是 id=”選擇器名稱”
相關推薦
