CSS

Cascading Style Sheets (CSS)

2021/06/29 (重整內容)

基本概念

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;

background-color: darkblue;

}

p {

font-size: 20px;

}

</style>

</head>

<body>

<p>輔大資管系助理教授</p>

<p>印地安那大學博士</p>

</body>

</html>

External Style Sheet

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

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>輔大資管系助理教授</p>

<p>印地安那大學博士</p>

</body>

</html>

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

body {

background-color: lightblue;

}

h1 {

color: white;

text-align: center;

background-color: darkblue;

}

p {

font-size: 20px;

}

CSS語法

CSS的語法是一開始是selector(選取器)，也就是要定義的對象。

body {

background-color: lightblue;

}

h1 {

color: white;

text-align: center;

background-color: darkblue;

}

後面大括號中間就是不同屬性的值，以下面範例為例，background-color、color、text-align都是屬性，冒號後面的lightblue、white、center就是各自對應的值。這樣的設定是套用到整個頁面的，以下面範例為例，整頁的背景顏色、h1的樣式都會被改變的。但是，因為h1重新定義了背景顏色，就會蓋掉body的背景顏色。

body {

background-color: lightblue;

}

h1 {

color: white;

text-align: center;

background-color: darkblue;

}

selector可以是

html的基本元素(element)，如:body、h1等等。上面的範例就是針對基本元素定義樣式。
當我們希望只針對某一個特定元件定義樣式，我們可以利用在html中所定義的id定義樣式。
當我們希望只針對某一群元件定義樣式，我們可以利用在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>

</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>JavaScript</h1>

<h1>jQuery</h1>

</body>

</html>

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

利用 * 代表所有的元素都適用 (Universal Selector)

* {

text-align: center;

color: red;

}

CSS Selectors

Combinator

當多個selector要使用同一個樣式 (condition1 || condition2)

condition1, condition2 {

// styles here

}

condition1所包含的所有condition 2使用某一個樣式(Descendant Selector)

condition1 condition2 {

// styles here

}

condition1所包含第一層condition 2使用某一個樣式(Child Selector)

condition1 > condition2 {

// styles here

}

condition1之後(同一層)的第一個condition 2 使用某一個樣式(Adjacent Sibling Selector)

condition1 + condition2 {

// styles here

}

condition1之後(同一層)的condition 2使用某一個樣式 (General Sibling Selector)

condition1 ~ condition2 {

// styles here

}

CSS Combinators
Understanding use of the +, >, and ~ symbols in CSS selectors
- There are four different combinators in CSS:
  - Descendant Selector (space)
  - Child Selector (>)
  - Adjacent Sibling Selector (+)
  - General Sibling Selector (~)

當不是condition1時使用某一個樣式

:condition1 {

// styles here

}

div vs. span

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

<!DOCTYPE html>

<style>

.importantHeadings {

text-align: center;

color: red;

background-color:black;

padding:20px

}

</style>

</head>

<body>

<h1>My Important Heading</h1>

<h1>My Second Heading</h1>

</div>

<p>hello</p>

</body>

</html>

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

<!DOCTYPE html>

<html>

<head>

<style>

.importantHeadings {

text-align: center;

color: red;

background-color:black;

padding:20px

}

</style>

</head>

<body>

<h1><span class="importantHeadings">My Important Heading</span></h1>

<h1><span class="importantHeadings">My Second Heading</span></h1>

<p>hello</p>

</body>

</html>

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

<!DOCTYPE html>

<html>

<head>

<style>

.importantHeadings {

text-align: center;

color: red;

background-color:black;

padding:20px

}

</style>

</head>

<body>

<h1>My <span class="importantHeadings">Important</span> Heading</h1>

</body>

</html>

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

<!DOCTYPE html>

<html>

<style>

.importantHeadings {

text-align: center;

color: red;

background-color:black;

padding:20px

}

</style>

</head>

<body>

<h1>My <div class="importantHeadings">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, black, white, lightblue) (詳參: https://www.w3schools.com/colors/colors_names.asp)，一般的browser支援140個顏色名字。
以RGB值來表達
以RGB值但是用十六進位數值為表達方式

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

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

尺寸

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

相對
- 字 (em)，會依照目前字體大小而相對調整
- 百分比 (%)，會依照目前螢幕大小而相對調整
絕對
- 畫素 (pixel, px)，會因為目前螢幕的解析度在視覺上會有大小的不同
- 公分 (centimeter, cm)
- 公厘 (millimeters, mm)
- 英吋 (inch, in)
過去元件的高度會直接設定px值，現在會採用vh、vw或者vmin。vh就是高度的百分比、vw就是高度的百分比、vmin就是為了我們在使用手機或平板時可能會常常轉來轉去，在vh或vw中取較小的值。如:40vmin就是取vh或vw中取較小的值的40%。

height: 40vmin;

過去字體會直接設定px值，現在會採用rem或em，或者利用螢幕的尺寸做一些調整。

font-size: calc(10px + 2vmin);

參考資料

CSS: 吳濟聰老師專題知識分享網站
http://www.w3schools.com/css/
Proactive線上教材-CSS-基本 (中文youtube影片)
Proactive線上教材-CSS-資料夾及圖片 (中文youtube影片)
Proactive線上教材-CSS-div (中文youtube影片)
Proactive線上教材-CSS-selector (中文youtube影片)
CSS沒有極限 - CSS的新"文字"及"尺寸"單位