[新手前端]從平面設計前進 CSS-2 選擇器之.class #ID
上一篇簡介了如何在HTML內使用CSS，簡單來說有3種引入CSS的方法：
一是行內，如：
<img src=”” style=”border:1px soild red”>
二是頁面插入式：
<sytle>
E{font-size:14px; color:red;}
</style>
三是鍊入式：
<link href=”../css.css” rel=”stylesheet” type=”text/css” />
然後在css.css的檔案裡寫
E{樣式類別:參數;} E2{border: 1px soild red ; color: red;}
可以很簡單的知道在HTML裡因為 style是直接寫在 HTML的tag裡，所以不需要特別去指定想要套用的樣式該放在哪個元素上。不過頁面式、鍊入式的CSS就會需要特別指定好你想在哪一個元素E 上套用樣式，表示法就變成 E{類別:參數;}
在{}前方的是元素，{}中間是想要指定的樣式，對不同的元素可以分別指定不同的樣式。
除了直接指定元素E 的tag之外，CSS還可以幫元素任易取名字class 或 ID
因為在HTML裡所以還是用HTML的規則
<p class=”mainText”>
<div id=”index”>
.class 的表示法為 .mainText{font-size:14px;}
#ID 的表示法為 #index {widht:600px;}
.class 和 #ID 最大的不同在於 #ID是唯一的，表示你一個頁面裡只有一個這種名字的元素，ID的唯一性是程式很需要的，在早期的javascript也只能抓有ID的物件，因為是唯一的(電腦很笨你知道…)。
.class 是可以共用的，以上面的例子來說，表示你這一個 <p>(段落)樣式是 .mainText，你也可以在其他地方的 <p> 上面也使用相同的 .class，這樣一來只要套用了 .mainText的任何一個HTML元素 他的字型大小都會是14px。
雖然我這裡都拿 <p> tag 來舉例，但是相同的 .class 不一定要套在同一種 元素E 上面，你可以套用在 <H1>(標題1)、 <div>(分隔)、 <em>(強調)等等元素上，你想要套在 <img> 裡變成 <img class=”mainText”> 也行，只不過 <img> 裡沒有文字所以看不出效果，總之 .class是可以共用的。
同一個 E 也可以同時套用1個 #ID 及多個 .class 但是ID仍是唯一的，如下：
<div id=”main” class=”mainArea tab”>
不同的 .class 之間用空格分開。
其實這和平面設計時用PS是一樣，選到你需要的圖層然後在圖層上設定特效，唯一不同的是必需用文字來指定，而且也和PS設計時一樣，樣式可以互相套用，只要讓不同的 E 都有相同的 .class就行了。
想要讓好幾個元素共用樣式，表示的方法也很簡單，只要在元素之間加上,就行了，很簡單吧~
[b]h1 , p , .mainText {color:red;}[/b]
標題1, 段落、 樣式.mainText {字型顏色:紅色;}
剛才提到”選到你要設定特效的圖層”，CSS裡也有一樣的情況，如何指定你需要的元素E?
除了直接在 HTML裡增加樣式然後直接在{}前面指定那個.class之外，CSS也可以使用繼承的技巧，就像我們把特效圖層蓋在上方一樣或是用資料夾收在一起然後一起移動位置一樣。
HTML裡會出現元素E 像箱子一樣一層層包在一起的情況。
最簡單的就是一個 .html 的文件，由最上方先宣告文件的類型再來用 <html> tag 包起來，裡面有 <head>、 <body>、 <div>、 <h1>、 <p>…..
一個HTML包起來的範例：
<!DOCTYPE html>
<head>我是網頁的資訊，只有瀏覽器看到我，使用者不會看見 </head>
<body>我是網頁的身體，使用者會看見body裡的內容
<div class=”divA”>我是分隔內容用的容器.divA，只是用來把東西分裝的箱子
<h1>我是標題一 </h1>
<p>我是段落 </p>
</div>
<div class=”divB”>我是分隔內容用的容器.divB，只是用來把東西分裝的箱子
<h2>我是標題二 </h2>
<p class=”red”>我是段落2 </p>
</div>
</body>
</html>
注意到我故意放了 標題一 <h1>、標題二 <h2>，及每一行之間的空格了嗎? 就是為了介紹繼承。
在這裡可以看到 <div> 裡面包了 <h1> , <h2>, <p>
假如我下了一個 CSS叫做
div{color:blue;}
所有叫做的div的元素{字型顏色為: 藍色;}
結果會是什麼呢? 就是所有被 div包住的元素E 包括 <h1> , <h2>, <p>的字型顏色都變成藍色了，就算我沒有指定他們也一樣。 這讓你在設計時可以很方便的去重覆使用相同的元素去套用在比較大的區塊，而不用各別指定。
如果我是把選擇器指定在 .divA 上像這樣： .divA{color:blue;}
就只有包在 <div class=”divA”> </div> 裡面的內容會變成藍色了。
相同的，如果你把樣式選擇器直接設定在 body 會如何? 答案是整個網頁裡所有的字都變成藍色的了。
body{color:blue;}
這就叫做CSS的繼承，像圖層越高越上方的會把效果往下蓋一樣，CSS的繼承是由最外面的 tag 往裡面一層層的包下去。所以被包住的 E 叫做子元素，包住別人的 F (father)叫做父元素。
所以當你將樣式指定給HTML裡的 tag元素 <body> 時，body會拿到樣式，同時把 body 當成 父元素F 的所有子元素E 都會繼承到 F 拿到的樣式。這其實和我們的親子關係是一樣的啦~ 會有祖先、父親、E自己及子元素。
有繼承很方便，但是也會造成困擾，就是當你設計好樣式時，倒底要給誰? 的問題就會出現了。
選擇器在這個部分有點複雜，明天再和權重一起講好了
(本來今天就在講權重的=..=+ 但發現選擇器不先解釋完無法解釋權重啊…Orz)