2015年1月24日 星期六

2015.01.20 CSS學習(Selector)

CSS selector
早期使用HTML定義文字如何展示,但HTML不應該定義如何展示,應該只定義內容的架構


最簡單的selector就tag的名稱
一個selector會包含一個或多個屬性
一個屬性會設定一些不同的設定值

selector寫法
selector name後要加左大括號{
屬性名稱和設定值之間要加冒號:
propertyvalue之後要加分號;
最後在使用右大括號}
代表這個selector以接結束
selector{
        property: value;
}
一個selector可以改變多個屬性
selector會讓頁面中所有符合的tag加上屬性

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>顏色為紅色

套用CSS的方式
在<head></head>之間使用<style>標籤
例:
<style type=”text/css”>
ul li {
    font-size:24px;
}
</style>
type屬性讓瀏覽器知道標籤內寫的是CSS