熟悉 CSS

首先我們要先知道如何把CSS套用到網頁上。

Inline (最不建議使用)

<div style="color: white; font-size: 20px;">...</div>

Embed

<head>
   <style type="text/css">
      div {
         color: white;
      }
   </style>
</head>

<div>...</div>

在前面已經提到，CSS語法必須由一選擇器，來指定屬性樣式。

而選擇器主要有三種：

ID 選擇器：使用者自訂

#container {
  background-color: blue;
}

後代選擇器

但有時候css設定並沒有想像中這麼簡單。例如今天html如下這樣呈現時

<ul>
  <li>
    first
  </li>
  <li>
    second
  </li>
  <li>
    third
  </li>
</ul>

當想改變ul中li的字型顏色，難道要為每個li都加上class嗎？這樣豈不是太麻煩了？這時候CSS就可以這樣設定：

ul li {
  color: red;
}

這樣頁面上所有在ul中的li都會套用到以上樣式。

<div>
    <span>Blue</span>
    <p>
        <span>Black</span>
    </p>
</div>

CSS若使用子代選擇器，如下表示：

div > span { 
  color: blue; 
}

只有div 下一層 的span會套用樣式。因此p中的字樣並不會套用樣式。

若使用後代選擇器，如下表示：

div span { 
  color: blue; 
}

則所有div下的span都會套用樣式。

假若html如下這樣呈現：

<button id="first-btn">First</button>
<button id="second-btn">Second</button>

如果要分別更改兩個不同的button，則CSS可以這樣設定：

button#first-btn {
  color: red;
}
button.second-btn {
  color: blue;
}

承上例，如果要一次設定多個元素為同一個CSS樣式，可以這樣設定：

button#first-btn ,button.second-btn {
  color: red;
}

我們也可以在一個元素同時套用數個 class。

舉例來說，若我們有以下的 HTML，

<button class="large-btn red-btn">這是多重 Class 的例子。</button>

那麼CSS可以如下：

.large-btn { 
  width: 150px;
  height: 50px;
  font-size:20px; 
}

.red-btn { 
  color: white; 
  background: red;
}

今天有一html如下：

<input type="text">
<input type="button" value="送出">

若只想更改input type是button的樣式，則CSS可以這樣設定：

input[type="button"] {
  color: red;
}

偽類 (pseudo class) 就是在選已經存在的東西。

在支援 CSS 的瀏覽器中，連結的不同狀態都可以不同的方式顯示。

:active / 已選定 /

a:link {color: #FF0000}        
a:visited {color: #00FF00}    
a:hover {color: #FF00FF}    
a:active {color: #0000FF}

:last-child

p:first-child {font-weight: bold;}
p:last-child {font-weight: 300;}

p:nth-child(2) {color: red;}
p:nth-child(odd/even) {background: grey;}

input:focus {border-color: blue;}

Last updated 7 years ago