顯示廣告
隱藏 ✕
看板 Knuckles
作者 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 標籤包起來,例如
<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;
	
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 
分享網址: 複製 已複製
amyhuang 轉錄至看板 TaiwanRich (使用複製) 時間:2012-04-06 09:44:02
e)編輯 d)刪除 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇