close
所謂的CSS(Cascading Style Sheet) 串接樣式表大致上就是把「視覺呈現」和「網頁架構」給分開的一種技術。
可以想像CSS就是衣服而WebSite就是一個人。
人的架構當然是通常不會亂便啦!除非你去裝機械手臂(洛克砲) 囧"
如果說「人」Web還像原始的動物一樣只有最本來的樣式那不是遜斃了嘛!
這樣的比喻很貼切吧!XD
萬事起頭難,或許有很多人對CSS感受到很容易,感覺只是調調屬性值就搞定了。
但小弟看過比較多人遇到的狀況是,他不知道怎麼把偉大的創意實體化。
這邊有些建議:你可以選擇在Potoshop中做好視覺規畫再用網頁工具切割版型,不過也有很多設計師可以直接無中生有。
先寫好屬性在畫區塊。
-----------------------------------
Selectors 選擇器:(參考W3C資料)
對CSS有超基本的觀念之後就要進入正題,CSS的規則主要是兩個部分。
就是選擇器和屬性,要怎麼解釋呢?你可以把選擇器這個專業名詞想像成頭,手,腳。
就是一個名稱,如以下這樣的範例;(CSS檔案中)
頭 {
帽子:黑色鴨舌帽;
眼鏡:粗框;
}
手 {
手錶:SEIKO錶;
戒指:骷髏樣式;
}
「頭」指的就是選擇器,告訴伺服器這個Div裡面有的屬性該設什麼值。
所以可想而知這些屬性大多是規定好的,你總不會告訴我,我的頭要穿一雙黑色球鞋吧!?
非正式的解釋一次再來一次正式的:
h1{
font-size:12px;
}
selector {
propery : value;
}
這樣就會指定h1這個選擇器裡面的字體大小為12px。
選擇器的種類:
對選擇器有了概念上的瞭解,接下來就要認識選擇器的種類,就像小弟比喻的,CSS就像是人的裝扮,你可以直接在Body上作花樣。
當然也可以在配件上在改良嚕~
選擇器一般分為
1. 類型選擇器(Type Selector) :要樣式化的HTML標籤,就是Selector的部分是h1或者p,em。
p {color : red;}
2. 類「別」選擇器(Class Selector):如下這樣宣告
.i_am_class { font-size:120%; }
用最前面的那個「.」宣告。然後在HTML裡面
<div class="i_am_class">如此這段文字就會照上面的設定了~Cool ! </div>
3. ID選擇器(ID Selector):跟Class差不多只是「.」變成「#」
#i_am_id { font-size:120%; }
下面是HTML唷
<div id="i_am_id">如此這段文字就會用ID的設定了~Good ! </div>
4. 後代選擇器(Descendant Selector):這比較難說明,有點像是我只要換A衣服上B圖的顏色。
例如下面指定在li 底下的a 才會變動。
li a {
text-decoration:none;
}
<div>
<a>我是有底線的連結。</a>
<li><a>我在<li>底下所以我的底線會不見喔!?</a></li>
</div>
注意:後代選擇器會壓過類型及類別選擇器,意思就是說即使
<li class="有設定"><a>我在 li 底下所以我的底線會不見喔!?</a></li>
它並不會執行class的屬性 反而會執行 li a 沒有底線的設定喔
5. 子選擇器(Child Selector):子選擇器使用「>」符號設定
div > #i_am_child{
color : green;
}
只有當 i_am_child直接跟在div下層才會執行,若裡面多了其他元素就不會執行。
<div>
<p>
<div id="i_am_child">我沒有直接跟在DIV下面所以我的字不會變色</div>
</p>
<div id="i_am_child">直接跟在DIV下面所以我的字會變色<div>
</div>
注意:這部分要注意瀏覽器是否支援喔。
6. 全域選擇器(Universal Selector):就是整個網頁都要接受這個設定。
*{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
7. 相鄰選擇器(Adjacent Silbing Selector) 請參考
a [href]{
text-decoration:none;
}
每當HTML的a標籤裡有href就會用這個設定,就是這個超連結!
9. 虛擬類別(Pseudo-Classes):很重要就是滑鼠移過去等等的效果。
如下 滑鼠移過去(hover)就會變成下面的設定,沒底線,顏色變紅色。
a:hover{
text-decoration:none;
color:#FF0000;
}
10. 虛擬元素(Pseudo-Elements):這個比較少瀏覽器支援,作一些比較特別的設定如:
p:first-letter{
font-size:150%;
font-weight:700;
}
用在下面的html就會只有一個字被設定
<p>我 ←只有我會變大喔!</p>
本篇對所有的懸則器做了大略的介紹,有點長之後會針對需要慢慢對一些比較特別的作法在做介紹。
另外也可以參考W3C提供的解釋。最新最正確~
有任何寫得不好的地方也請各位先進指教!(謙虛一下)
後記:
每次都是這樣想寫的詳細一點卻又很懶惰。哇哩勒趕走懶惰蟲呀!
不過也可能是寫Blog有點在半作義工吧!XDDD
可以想像CSS就是衣服而WebSite就是一個人。
人的架構當然是通常不會亂便啦!除非你去裝機械手臂(洛克砲) 囧"
如果說「人」Web還像原始的動物一樣只有最本來的樣式那不是遜斃了嘛!
這樣的比喻很貼切吧!XD
萬事起頭難,或許有很多人對CSS感受到很容易,感覺只是調調屬性值就搞定了。
但小弟看過比較多人遇到的狀況是,他不知道怎麼把偉大的創意實體化。
這邊有些建議:你可以選擇在Potoshop中做好視覺規畫再用網頁工具切割版型,不過也有很多設計師可以直接無中生有。
先寫好屬性在畫區塊。
-----------------------------------
Selectors 選擇器:(參考W3C資料)
對CSS有超基本的觀念之後就要進入正題,CSS的規則主要是兩個部分。
就是選擇器和屬性,要怎麼解釋呢?你可以把選擇器這個專業名詞想像成頭,手,腳。
就是一個名稱,如以下這樣的範例;(CSS檔案中)
頭 {
帽子:黑色鴨舌帽;
眼鏡:粗框;
}
手 {
手錶:SEIKO錶;
戒指:骷髏樣式;
}
「頭」指的就是選擇器,告訴伺服器這個Div裡面有的屬性該設什麼值。
所以可想而知這些屬性大多是規定好的,你總不會告訴我,我的頭要穿一雙黑色球鞋吧!?
非正式的解釋一次再來一次正式的:
h1{
font-size:12px;
}
selector {
propery : value;
}
這樣就會指定h1這個選擇器裡面的字體大小為12px。
選擇器的種類:
對選擇器有了概念上的瞭解,接下來就要認識選擇器的種類,就像小弟比喻的,CSS就像是人的裝扮,你可以直接在Body上作花樣。
當然也可以在配件上在改良嚕~
選擇器一般分為
- 類型選擇器(Type Selector)
- 類「別」選擇器(Class Selector)
- ID選擇器(ID Selector)
- 後代選擇器(Descendant Selector)
- 子選擇器(Child Selector)
- 全域選擇器(Universal Selector)
- 相鄰選擇器(Adjacent Silbing Selector)
- 屬性選擇器(Attribute Selector)
- 虛擬類別(Pseudo-Classes)
- 虛擬元素(Pseudo-Elements)
1. 類型選擇器(Type Selector) :要樣式化的HTML標籤,就是Selector的部分是h1或者p,em。
p {color : red;}
2. 類「別」選擇器(Class Selector):如下這樣宣告
.i_am_class { font-size:120%; }
用最前面的那個「.」宣告。然後在HTML裡面
<div class="i_am_class">如此這段文字就會照上面的設定了~Cool ! </div>
3. ID選擇器(ID Selector):跟Class差不多只是「.」變成「#」
#i_am_id { font-size:120%; }
下面是HTML唷
<div id="i_am_id">如此這段文字就會用ID的設定了~Good ! </div>
4. 後代選擇器(Descendant Selector):這比較難說明,有點像是我只要換A衣服上B圖的顏色。
例如下面指定在li 底下的a 才會變動。
li a {
text-decoration:none;
}
<div>
<a>我是有底線的連結。</a>
<li><a>我在<li>底下所以我的底線會不見喔!?</a></li>
</div>
注意:後代選擇器會壓過類型及類別選擇器,意思就是說即使
<li class="有設定"><a>我在 li 底下所以我的底線會不見喔!?</a></li>
它並不會執行class的屬性 反而會執行 li a 沒有底線的設定喔
5. 子選擇器(Child Selector):子選擇器使用「>」符號設定
div > #i_am_child{
color : green;
}
只有當 i_am_child直接跟在div下層才會執行,若裡面多了其他元素就不會執行。
<div>
<p>
<div id="i_am_child">我沒有直接跟在DIV下面所以我的字不會變色</div>
</p>
<div id="i_am_child">直接跟在DIV下面所以我的字會變色<div>
</div>
注意:這部分要注意瀏覽器是否支援喔。
6. 全域選擇器(Universal Selector):就是整個網頁都要接受這個設定。
*{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
7. 相鄰選擇器(Adjacent Silbing Selector) 請參考
[CSS]瀏覽器解讀CSS迷思?
8. 屬性選擇器(Attribute Selector):a [href]{
text-decoration:none;
}
每當HTML的a標籤裡有href就會用這個設定,就是這個超連結!
9. 虛擬類別(Pseudo-Classes):很重要就是滑鼠移過去等等的效果。
如下 滑鼠移過去(hover)就會變成下面的設定,沒底線,顏色變紅色。
a:hover{
text-decoration:none;
color:#FF0000;
}
10. 虛擬元素(Pseudo-Elements):這個比較少瀏覽器支援,作一些比較特別的設定如:
p:first-letter{
font-size:150%;
font-weight:700;
}
用在下面的html就會只有一個字被設定
<p>我 ←只有我會變大喔!</p>
本篇對所有的懸則器做了大略的介紹,有點長之後會針對需要慢慢對一些比較特別的作法在做介紹。
另外也可以參考W3C提供的解釋。最新最正確~
有任何寫得不好的地方也請各位先進指教!(謙虛一下)
後記:
每次都是這樣想寫的詳細一點卻又很懶惰。哇哩勒趕走懶惰蟲呀!
不過也可能是寫Blog有點在半作義工吧!XDDD
全站熱搜
留言列表