早期使用HTML定義文字如何展示,但HTML不應該定義如何展示,應該只定義內容的架構
最簡單的selector就是tag的名稱
一個selector會包含一個或多個屬性
一個屬性會設定一些不同的設定值
selector寫法
selector name後要加左大括號{
屬性名稱和設定值之間要加冒號:
在property的value之後要加分號;
最後在使用右大括號}
代表這個selector以接結束
selector{
property: value;
}
一個selector可以改變多個屬性
selector會讓頁面中所有符合的tag加上屬性
descendent selector可以只選擇在另一個tag之下的tag
例:
ul li {
font-size:24px;
}
代表在<ul>之下的<li>字體大小為24px
descendent selector可以只選擇在另一個tag之下的tag
例:
ul li {
font-size:24px;
}
代表在<ul>之下的<li>字體大小為24px
pseudo-selector在特定條件下才會作用的selector
例:
a:hover {
text-decoration: underline;
color: red;
}
代表當連結被滑鼠滑過(hover)時,連結要有底線、顏色改為紅色
ol li: first child{
color:red;
}
代表在<ol>之下的第一個<li>顏色為紅色
在<head></head>之間使用<style>標籤
例:
<style type=”text/css”>
<style type=”text/css”>
ul li {
font-size:24px;
}
font-size:24px;
}
</style>
type屬性讓瀏覽器知道標籤內寫的是CSS
type屬性讓瀏覽器知道標籤內寫的是CSS