CSS

Cascading Style Sheets (CSS)

2019/10/27 (增加連結)

基本概念

Cascading Style Sheets (CSS)是用來描述HTML的樣式，例如，我們想設定一些標籤的基本樣式，我們可以寫以下的定義:

body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

p {
    font-size: 20px;
}

上面的範例定義了body的背景顏色、h1的文字顏色並將文字置中、p的字體大小。

Internal Style Sheet

完整的html如下，請記得這些內容要放在<head> </head>中，而不是放在<body> </body>中:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

p {
    font-size: 20px;
}
</style>
</head>
<body>

<h1>吳濟聰</h1>
<p>輔大資管系助理教授</p>
<p>印地安那大學博士</p>

</body>
</html>

External Style Sheet

HTML的最後談到了樣式，那樣的使用方式稱為Inline style。使用以上的寫法稱為Internal Style Sheet，所有的樣式設定只適用於這個網頁，如果我們希望同樣的設定能適用在多個網頁，就應該使用External Style Sheet。使用External Style Sheet的方法是將定義單獨的儲存在一個檔案，如: my.css，再修改html如下:

**注意** 為了效率的關係，browser會快取(Cache)External Style Sheet，所以，當我們更改CSS內容時，是不會馬上看到更改後的效果，一般而言，可以利用Ctrl-F5來清除cache。(詳參: CSS changes are not getting reflected. Why? 、Force Reload Even the Most Stubbornly Cached CSS Files)

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="my.css"/>
</head>
<body>

<h1>吳濟聰</h1>
<p>輔大資管系助理教授</p>
<p>印地安那大學博士</p>

</body>
</html>

my.css的內容則不需要有<style></style>，如下面的範例:

body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

p {
    font-size: 20px;
}

CSS語法

CSS的語法是一開始是selector(選取器)，也就是要定義的對象，後面大括號中間就是不同屬性的值，以下面範例為例，background-color、color、text-align都是屬性，冒號後面的lightblue、white、center就是各自對應的值。這樣的設定是套用到整個頁面的，以下面範例為例，整頁的背景顏色、h1的樣式都會被改變的。

body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

selector可以是

  1. html的基本元素(element)，如:body、h1等等。上面的範例就是針對基本元素定義樣式。
  2. 當我們希望只針對某一個特定元件定義樣式，我們可以利用在html中所定義的id定義樣式。
  3. 當我們希望只針對某一群元件定義樣式，我們可以利用在html中所定義的class定義樣式。

要針對id定義樣式的話，在selector前加「#」:

#primaryHeading {
    text-align: center;
    color: red;
}

完整的html如下 (同一個網頁中id是不能重複):

<!DOCTYPE html>
<html>
<head>
<style>
#primaryHeading {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 id="primaryHeading">HTML</h1>
<h1>CSS</h1>

</body>
</html>

因為在同一個網頁中id是不能重複，如果有多個元件要套同一個樣式，那就要使用class，要針對class定義樣式的話，在selector前加「.」:

.importantHeadings {
    text-align: center;
    color: red;
}

完整的html如下:

<!DOCTYPE html>
<html>
<head>
<style>
.importantHeadings {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="importantHeadings">HTML</h1>
<h1 class="importantHeadings">CSS</h1>
<h1>JavaScript</h1>
<h1>jQuery</h1>

</body>
</html>

雖然以上範例都使用internal style sheet，external style sheet也是可以的。

div vs. span

雖然div及span都算是html的基本語法，但是，通常是用在樣式的設定上。div與span的差別在於div是可以用來定義一個區塊的樣式，而且在<div></div>前後會換行。而span只能在一行之中，而且不會換行。另外，如果把span當div用，就會發現整個的樣式會亂掉(如:背景顏色出不來或padding無效)。

<!DOCTYPE html>
<html>
<body>

<div style="background-color:black;color:red;padding:20px">
<h1>My Important Heading</h1>
<h1>My Second Heading</h1>
</div>

<p>hello</p>
</body>
</html>

使用span時，就必須每一個<h1></h1>都要加。

<!DOCTYPE html>
<html>
<body>

<h1><span style="background-color:black;color:red;padding:20px">My Important Heading</span></h1>
<h1><span style="background-color:black;color:red;padding:20px">My Second Heading</span></h1>
<p>hello</p>


</body>
</html>

雖然感覺起來span不好用，但是，span的用途是設定部份內容的樣式，如:

<!DOCTYPE html>
<html>
<body>

<h1>My <span style="color:red">Important</span> Heading</h1>

</body>
</html>

那如果將span以div取代，會發現如同前面所說的，My Important Heading會被切為三行，所以，效果其實是不同的。

<!DOCTYPE html>
<html>
<body>

<h1>My <div style="color:red">Important</div> Heading</h1>

</body>
</html>

常用的樣式

常用的樣式:文字顏色(color)、背景顏色(background-color)、邊界 (border)、內外邊界距離(margin & padding) (詳參: https://www.w3schools.com/cssref/default.asp 或 https://www.w3schools.com/css/default.asp)。

顏色有不同的表達方式:

以紅色為例，顏色名字是Red, RGB值是rgb(255,0,0),十六進位值為#FF0000。

在CSS3及CSS4又多了兩種顏色的表達方式: HSL及HWB。

大小(尺寸)也有不同的表達方式:

  • 相對
    • 字 (em)，會依照目前字體大小而相對調整
    • 百分比 (%)，會依照目前螢幕大小而相對調整
  • 絕對
    • 畫素 (pixel, px)，會因為目前螢幕的解析度在視覺上會有大小的不同
    • 公分 (centimeter, cm)
    • 公厘 (millimeters, mm)
    • 英吋 (inch, in)

參考資料