CSS是串接樣式表(Cascade style sheet)，顧名思義就是用串接表的方式美化(style)網頁
使用方法
引入CSS有三種方式
(1). inline style (style屬性)
任何HTML tag都可以使用style屬性來進行inline style
例如
<p sytle="color:red; front-size:20px;"> this paragraph is red \</p>
(2).style tag
HTML有style element供一次選擇某些種的元素
Style tag 需放置於<head>部分中
注意與上述方法格式上的差異
如
<head>
<style>
p {
color:red;
front-size:20px;
}
</style>
</head>
這個設定會使所有<p>內的文字為紅色，並字形大小為20個pixel
(3). link the .css file (分檔)
正式的大網頁會分開HTML與CSS檔 (管理、易讀)
並且使用放置於<head>部分的link element 取用
link介紹
(a)<link> 沒有closing tag
(b)<link>有三個重要屬性
href 放入連結位置 */myStyle.css，也可以用相對路徑 ./myStyle.css
type 輸入檔案類型，CSS為 text/css
rel 檔案間的關係， CSS為 stylesheet
如
<link href="./myStyle.css type="text/css" rel="stylesheet">
CSS語法
(1).CSS code synax
CSS code 的語法寫於CSS選擇器中
格式為
property:value;
- 注意中間是用 :
- 注意打完一行要加 ;
- 這也是CSS是一種sheet的原因(表格語言)
property可以是size、color等想要設計的style
value則為18px、blue等設定值
(2). CSS 選擇器
是除了直接在html tag裡設定以外的方法都需要用到的
格式為
selector{
}
則所有此element都會被選擇，然後套用{ }內的CSS style
selector則可以針對元素、id、class … 選取
上面程式碼例子就是一個針對<p>的選擇器
(2-1)選擇器類型
-
選擇tag
elementName{ } 則所有此element都會被選擇，然後套用{ }內的CSS style
例如
p{} 就是選擇所有<p> -
選擇class Class 名前要加 . (dot)
eg
.randomClass{ }
選擇了所有有class="randomClass"的標籤
(可彌補element一次選擇所有的缺點)
(class 屬性可給多個值，中間用空白隔開即可) -
選擇id id名前要加#
eg
#idName{} id是唯一的
- Note:class vs id
class通常會用來reuse (比如顏色)，因class可多值能達到互相搭配的作用(就像調色)
id是處理特例時使用，所以對元素是唯一的，可以覆蓋其他選擇的style效果
(CSS權重大小: property加上!important >id >組合選擇 >class >element) - Note2:在property rule中可加入!important阻止被覆蓋
例如:
p{
color:red !important;
}
-
子孫selector
選擇器中間用空白隔開，就成為選前者的子孫element
*例如:
h1 .article (選h1中class為article的)
(當然也可以h1#id，但id是唯一的所以直接#id就可)
*也可以
.article h1 (選class為article 中child是h1的) -
子選擇器 選擇器中間用>隔開，就成為選前者的直屬child的element
-
多重selector
可以一次選多個元素，用逗號，隔開 (省重複code)
eg: p,.myClassA,#id{color:blue;} -
*選擇
選擇所有元素，通常用於快速將margin、padding歸零
*{ margin:0; paddig:0; } -
屬性選擇器
elem[attri]
如a[href]
關於排版與配色
由於細枝末節較多，參考原始版筆記:
點此開啟pdf