看板 Knuckles
作者 標題 鄉民也能懂的 CSS
時間 2012年04月05日 Thu. PM 05:15:32
延續上一篇 鄉民也能懂的 HTML
這次要來講講什麼是 CSS (Cascading Style Sheets, 串接樣式表)
樣式表
在說明 HTML 的 CSS 之前,要先知道「樣式」是什麼東西
大家應該都會用 word 吧,其實 word 裡面也有樣式的功能喔
他的功能簡單來說就是“字體與段落格式設定的群組”
例如我有一篇文章,每個段落前面都有個標題
我想把這些標題設定為字體30、粗體、標楷體、藍色、置中、前後段距離1列...
如果要每打一次標題,就要點一遍上面那些設定,實在是太麻煩了
更別提說要是我哪天想把標題換個顏色,又要全部一個一個改...
能不能把那堆設定編成一個群組,以後只要打標題時選一下這個群組就行了呢
沒錯,這個群組就叫做樣式
這上圖這樣,我只要把每個標題都套用上「標題1」的樣式
之後我只要改「標題1」的設定,所有的標題都會自動變成新的設定了
HTML的樣式表
回到寫網頁這邊,在古早以前,要對字體設定格式,是利用各種 HTML 標籤包起來,例如
可以把 "第一段" 設為粗體、藍色、標楷體、大小為7
例如 HTML 中有個 <h1> 標籤就是專門給標題1用的,我只要像這樣
用 <h1> 把每個標題1的文字給包起來,然後在前面加上一段 CSS
所有標題1的格式就會變成CSS裡設定的樣式了
查看 CSS 設定
如果把字體樣式寫到別的地方去了,那我要怎麼知道某一段文字到底被套用了什麼樣式呢?
其實很簡單,例如像這個網頁
我想要知道左邊那個圓角按鈕是怎麼做的?色彩值是多少?
只要開 Google Chrome 連到這個網頁後,按F12打開內建的「開發人員工具」
點一下左下角的放大鏡按鈕,再點一下網頁上的「所有商家」的按鈕
右下角就會顯示這個按鈕的 CSS 設定了
在左下角我們可以看到這個按鈕的 HTML 為
代表這個 <div> 被套用上了 menu1 與 btn 兩種class的樣式
右邊就會列出這兩種class的樣式設定,例如 menu1 為
其中 menu1 的前面有個 . 代表 class ,是要給有設定 class="menu1" 的元素用的
串接樣式表
從上面那個圖,可以看到這個按鈕其實被套用了一大堆的樣式
只是很多前面的樣式設定都被劃掉了
這就 CSS 串接樣式表其中「串接」的意思
每個元素可以被重覆加上同一種格式設定,只是最後只會依照階層及先後的順序選擇一種來顯示
像是 color 這個設定字體顏色的設定,在 body、a、.menu1、.btn 都有設定
最後是選了 .btn 的 color:white; 來顯示,其他的都被劃掉了
參考資料
這次要來講講什麼是 CSS (Cascading Style Sheets, 串接樣式表)
樣式表
在說明 HTML 的 CSS 之前,要先知道「樣式」是什麼東西
大家應該都會用 word 吧,其實 word 裡面也有樣式的功能喔
他的功能簡單來說就是“字體與段落格式設定的群組”
例如我有一篇文章,每個段落前面都有個標題
我想把這些標題設定為字體30、粗體、標楷體、藍色、置中、前後段距離1列...
如果要每打一次標題,就要點一遍上面那些設定,實在是太麻煩了
更別提說要是我哪天想把標題換個顏色,又要全部一個一個改...
能不能把那堆設定編成一個群組,以後只要打標題時選一下這個群組就行了呢
沒錯,這個群組就叫做樣式
這上圖這樣,我只要把每個標題都套用上「標題1」的樣式
之後我只要改「標題1」的設定,所有的標題都會自動變成新的設定了
HTML的樣式表
回到寫網頁這邊,在古早以前,要對字體設定格式,是利用各種 HTML 標籤包起來,例如
<font color="blue" size="7" face="標楷體"><b>第一段</b></font>
可以把 "第一段" 設為粗體、藍色、標楷體、大小為7
然後又是一樣的問題,如果每個標題都要打一串這個,以後要改的話要又要一個一個改,多累啊,所以就產生了 CSS ,主要目的就是把格式設定從 HTML 中獨立出來
例如 HTML 中有個 <h1> 標籤就是專門給標題1用的,我只要像這樣
<h1>第一段</h1>
用 <h1> 把每個標題1的文字給包起來,然後在前面加上一段 CSS
<style type="text/css">
h1{
color:blue;
}
</style>
h1{
color:blue;
font-family:"標楷體";
font-weight:bold;
font-size:30px;
}
</style>
所有標題1的格式就會變成CSS裡設定的樣式了
查看 CSS 設定
如果把字體樣式寫到別的地方去了,那我要怎麼知道某一段文字到底被套用了什麼樣式呢?
其實很簡單,例如像這個網頁
我想要知道左邊那個圓角按鈕是怎麼做的?色彩值是多少?
只要開 Google Chrome 連到這個網頁後,按F12打開內建的「開發人員工具」
點一下左下角的放大鏡按鈕,再點一下網頁上的「所有商家」的按鈕
右下角就會顯示這個按鈕的 CSS 設定了
在左下角我們可以看到這個按鈕的 HTML 為
<div class="menu1 btn">所有商家</div>
代表這個 <div> 被套用上了 menu1 與 btn 兩種class的樣式
右邊就會列出這兩種class的樣式設定,例如 menu1 為
.menu1 {
}
margin: 5px;
cursor: pointer;
text-align: center;
background-color: #008;
color: #CCC;
font-size: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
其中 menu1 的前面有個 . 代表 class ,是要給有設定 class="menu1" 的元素用的
串接樣式表
從上面那個圖,可以看到這個按鈕其實被套用了一大堆的樣式
只是很多前面的樣式設定都被劃掉了
這就 CSS 串接樣式表其中「串接」的意思
每個元素可以被重覆加上同一種格式設定,只是最後只會依照階層及先後的順序選擇一種來顯示
像是 color 這個設定字體顏色的設定,在 body、a、.menu1、.btn 都有設定
最後是選了 .btn 的 color:white; 來顯示,其他的都被劃掉了
參考資料
--
※ 作者: Knuckles 時間: 2012-04-05 17:15:32
※ 編輯: Knuckles 時間: 2013-08-09 16:52:26
※ 看板: Knuckles 文章推薦值: 0 目前人氣: 0 累積人氣: 500
回列表(←)
分享