CSS 筆記

CSS 筆記

CSS 外部載入

<style> @import url(URL) </style>

CSS 選擇器

元素(標籤)

element {}
範例:所有使用 div 的元素
div {...}
<div>

類別

.class {}
範例:使用class名稱為 myCLASS
.myCLASS {...}
<p class = 'myCLASS'>

ID

#id {}
範例:id 為 myTEST
#myTEST {...}
<p id = 'myTEST'>

屬性

[attribute] {}
範例:有使用 class 屬性
[class] {...}
<p class = 'test'>

屬性 + 判斷式 (＝)

[attribute = "條件"] {}
範例:有使用 class 屬性，而且條件為 myCLASS
[class = 'myCLASS'] {...}
<p class = 'myCLASS'>
<p class = 'myABC'> 不符合 myCLASS 將不會成立

屬性 + 判斷式 (^)

[attribute ^= "條件"] {}
範例:有使用 class 屬性，而且開頭為 my
[class ^= 'my'] {...}
<p class = 'myCLASS'> 開頭為my成立
<p class = 'myABC'> 開頭為my成立

選擇器搭配使用

空格 = 依序包含之內的元素

範例: 設定 classname = "myCLASS" 之後的 table
.myCLASS table {}
<div class="myCLASS"><table>...</table></div>
<table> 不包含在 myCLASS 裡面,將不會成立

逗號 (，) = 多種選擇器並用

範例: 設定 p 及 classname = "myCLASS"
p , .myCLASS {}
<p>
<a> 不符合 p 及 myCLASS 將不會成立
<a class="myCLASS">

大於 (＞) = 指定下一層為指定的元素

範例: 設定 div 的下一層為 p
div>p {}
<div><p></div>
<div><table>...</table><p><div> p仍在div的下一層,所以成立
<div></div><p> 不符合 div 將不會成立

加號 (＋) = 緊接之後的元素

範例: 設定 div 緊接的 p
div+p {}
<div><p></div> 不成立
<div><table>...</table><p><div> 不成立
<div></div><a></a><p> 沒有緊接不成立
<div></div><p> 緊接在div之後,所以成立

(～) = 之後的元素

範例: 設定 div 之後的 p
div+p {}
<div><p></div> 不成立
<div><table>...</table><p><div> 不成立
<div></div><a></a><p> 在div之後,所以成立
<div></div><p> 在div之後,所以成立

選擇器後面接冒號 (：)

注意 !! 這邊會有順序問題,寫在最下面的將會最優先處理
尚未連結 <a>

a:link {}

已連結 <a>

a:visited {}

執行中

:active {}

取得駐點

:focus {}

滑鼠移到上方

:hover {}

移動到目標時的狀態

:target {}

判斷螢幕大小

@media 類型 and 特性

判斷螢幕 and 最大寬度 <= 480
@media screen and (max-width:480px) {
element {}
.class {}
#id {}
}
width 跟 height 可接 max- , min-

留言