網頁技術

首頁 > 網頁技術目錄 > CSS的數值單位與字型

CSS的數值單位與字型

2020/8/25 , 由 Wanding 編寫發布

分類：

前言

這篇文要介紹的是一切能在css裡完成事情的基礎：影響許多屬性顏色、距離與尺寸的單位，以及用來定義數值的單位。缺少單位就無法宣告圖片周圍必須留下10像素的空白空間，或是標題文字必須有特定的大小。而字型與文字屬性又是樣式表中最常使用的功能，不可諱言，文字的樣式與設定是使用者閱讀網頁時的感受依據，可以說是網頁的靈魂！

1. 數值與單位

數字與百分比

整數(integer value)：15、36、128、10000
數字(number value)：2.7183、3.1416、-5.749
百分比(percentage value)：50％、33％、25％
Fraction數值(fraction value or flex value)：由數字加上fr標記組成，一個等分單位記為1fr

距離

許多CSS的屬性都需要透過長度才能夠是當的表示頁面上的各種元素，所以CSS裡有許多表示長度的單位。接下來，就讓我們來認識CSS的長度單位。

絕對長度單位

英吋(in)：美國常用，一英吋等於2.54公分
公分(cm)：世界通用的公分單位
公釐(mm)：一公分等於10公釐
四分之一公釐(q)：一公釐等於4q
點(pt):點是印表機與活字排版的標準字型測量標準，72點等於一英吋，12點大約六分之一英吋
Pica(pc)：印刷領域使用，一個pica等於12點
像素(px)：像素是螢幕上的小格點，但CSS的定義比較抽象，96像素等於一英吋；不過一般都直接採用螢幕上的像素大小

相對長度單位

<style type=text/css>                            
h1 {font-size:24px;}
p {font-size:12px;}
h1,p {margin-left:1em}
</style>

em：定義為指定型的font-size，如果元素的font-size設為14像素，那麼1em就等於14px，em會隨著元素的不同而改變。下方的設定將會讓h1標籤內容左邊界空出24px，p標籤內容左邊界空出12px，所以em在h1和p的大小是不同的。
rem：依據本身套用的元素的字型為基準，rem是以固定根元素為基準，如果宣告根元素font-size:14px，那麼1rem就等於14px，而且是固定不會變動。
ch：CSS3加入了ch這個單位，廣義來說就是『一個字元』，相當於用來呈現的字體裡『0』這個字形的步進度量 (advance measure)
viewport:視埠就是瀏覽器視窗、可列印區域、行動裝置顯示範圍的大小為依據
- 視埠寬度單位(vw，viewport width unit):如果視埠寬是1024px，那麼1vw就是1024px除於100，就等於10.24px
- 視埠高度單位(vh，viewport height unit):如果視埠高是768px，那麼1vh就是768px除於100，就等於7.68px
- 視埠最小單位(vmin，viewport minimum unit)：vw和vh取較小值，所以1vmin等於7.68px
- 視埠最大單位(vmax，viewport maximum unit)：vw和vh取較大值，所以1vmax等於10.24px

2. 顏色

網頁的顏色該如何設定呢？在HTML裡有兩種作法，可以使用red或green等預先定義好的顏色名稱，或是使用十六進位編碼表示。而在CSS裡，除了這兩種之外，還支援更多的方法。

有名稱的顏色

顏色名稱
aqua	gray	navy	silver
black	green	olive	teal
blue	lime	purple	white
fuchsia	maroon	red	yellow

RGB和RGBa顏色

RGB分別代表紅色、綠色、藍色三個基本色。標示法為RGB(R數值,G數值,B數值)，例如 rgb(255,255,255)或是rgb(0,0,0,)。

RGBa代表在RGB三色之後加入alpha透明度數值，如rgba(255,255,255,0.5)，0.5代表透明度50%。

十六進位RGB色彩

將三個範圍在00到FF之間的十六進位字串連結在一起，就能夠設定顏色，一般的語法表示為#RRGGBB，如＃ffffff、＃f9a4ca、#62b2c6。

十六進位RGBa色彩

加入了alpha通道值的第四個十六位元值，如＃f9a4ca33、＃f9a4ca66、＃f9a4ca99。

角度

deg(角度degree)：一個圓有360度
grad(梯度gradians)：將一個圓切成400等份，為一個梯度，也稱為grade或gon!
rad(弧度radian)：一個圓等於2＊3.1416
turn(轉turn)：轉一個圓就是一轉，所以動畫10圈，就是10turn(turn不能加s)

3. 字型

一般提到字型，人們總會想到粗體字、斜體字等樣貌。比如我們熟悉的Times包含了TimesRegular、TimesBold、TimesItalic、TimesBoldItalic等變體的組合，各種不同的Times字型變體是fontface，而我們一般所謂的Times則是這些各種字貌的組合。

為了涵蓋所有的範圍，CSS定義了五種通用字型：

Serif：是指每個筆畫開頭或結束的裝飾。如大寫A底下的橫線。
Sans-serif：無襯線的比例自型，如Helvetic、Geneva、Verdana、Arial。
Monospace：等寬字型不是比例字型，通常用來顯示程式碼或是表格資料，每個字元都佔據相同的水平寬度，可能有襯線、也可能無襯線，但都為等寬字型。如Courier、Courier New、Consolas、Andale Mono。
Cursive：草書字型模仿手寫字，通常包含大量的曲線或比襯線字型更多的筆劃裝飾。如Zapf Chancery、Author與Comic Sans。
Fantasy：花俏字型並沒有任何獨特的特性，不屬於前四類的字型都歸類為花俏字型。如Western、Wooblock與Klingon。

使用通用字型

使用font-family屬性使用任何可用的字型。如下所示：

<style type=text/css>
body {font-family: serif;}
h1,h2,h3,h4 {font-family: sans-serif;}
code,pre,tt,kbd {font-family: monospace;}
p.signature {font-family: cursive;}
</style>

指定字型

網頁作者可以更明確的指定文件或元素顯示時所使用的字型。比如想讓所有h1元素都使用Georgia字型，可以宣告以下規則：

h1 {font-family:Georgia;}

使用引號

h2 {font-family:Times,'Times New Roman',serif;}

字體粗細(font-weight)

font-weight的數值有：

normal | bold | bolder | lighter
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

通常Regular為400、Lighter為400以下、Medium為500、Bold為600和700、Extra Bold為800和900。

<style type=text/css>
p {font-weight:normal;}
p span {font-weight:400;}
strong {font-weight:bolder;}
strong b {font-weight:bolder;}
</style>

字型大小尺寸

一般常用的尺寸對照表

大小名稱	xx-small	x-small	small
數值	10px	12px	14px
medium	large	x-large	xx-large
16px	19px	24px	32px

字型尺寸與繼承

下列語法中，strong元素繼承的是12px，這個數值再經由宣告的135%作用之後達到16.2px。

<style type=text/css>
p {font-size: 12px;}
em {font-size: 120%}
strong {font-size:135%}
</style>

使用長度單位

font-size可以使用所有的長度數值，以下所有的font-size宣告有相同的效果：

<style type=text/css>
p.one {font-size:36pt}
p.two {font-size:3pc;}
p.three {font-size:0.5in;}
p.four {font-size:1.27cm;}
P.five {font-size:12.7mm;}
</style>

小結

CSS的數值、單位、與字型的熟悉與運用，是網頁設計師或前端工程師所必須具備的技巧。 CSS的快速成長，允許對網頁顏色或字型做更精密的控制，控制的範圍也更加廣泛。透過不斷的調校與嘗試，才能做出更美觀更好的網頁！

返回目錄

網頁技術

首頁 > 網頁技術目錄 > CSS的數值單位與字型

CSS的數值單位與字型

2020/8/25 , 由 Wanding 編寫發布

CSS

前言

1. 數值與單位

數字與百分比

整數(integer value)：15、36、128、10000
數字(number value)：2.7183、3.1416、-5.749
百分比(percentage value)：50％、33％、25％
Fraction數值(fraction value or flex value)：由數字加上fr標記組成，一個等分單位記為1fr

距離

許多CSS的屬性都需要透過長度才能夠是當的表示頁面上的各種元素，所以CSS裡有許多表示長度的單位。接下來，就讓我們來認識CSS的長度單位。

絕對長度單位

英吋(in)：美國常用，一英吋等於2.54公分
公分(cm)：世界通用的公分單位
公釐(mm)：一公分等於10公釐
四分之一公釐(q)：一公釐等於4q
點(pt):點是印表機與活字排版的標準字型測量標準，72點等於一英吋，12點大約六分之一英吋
Pica(pc)：印刷領域使用，一個pica等於12點
像素(px)：像素是螢幕上的小格點，但CSS的定義比較抽象，96像素等於一英吋；不過一般都直接採用螢幕上的像素大小

相對長度單位

<style type=text/css>                            
h1 {font-size:24px;}
p {font-size:12px;}
h1,p {margin-left:1em}
</style>

em：定義為指定型的font-size，如果元素的font-size設為14像素，那麼1em就等於14px，em會隨著元素的不同而改變。下方的設定將會讓h1標籤內容左邊界空出24px，p標籤內容左邊界空出12px，所以em在h1和p的大小是不同的。
rem：依據本身套用的元素的字型為基準，rem是以固定根元素為基準，如果宣告根元素font-size:14px，那麼1rem就等於14px，而且是固定不會變動。
ch：CSS3加入了ch這個單位，廣義來說就是『一個字元』，相當於用來呈現的字體裡『0』這個字形的步進度量 (advance measure)
viewport:視埠就是瀏覽器視窗、可列印區域、行動裝置顯示範圍的大小為依據
- 視埠寬度單位(vw，viewport width unit):如果視埠寬是1024px，那麼1vw就是1024px除於100，就等於10.24px
- 視埠高度單位(vh，viewport height unit):如果視埠高是768px，那麼1vh就是768px除於100，就等於7.68px
- 視埠最小單位(vmin，viewport minimum unit)：vw和vh取較小值，所以1vmin等於7.68px
- 視埠最大單位(vmax，viewport maximum unit)：vw和vh取較大值，所以1vmax等於10.24px

2. 顏色

有名稱的顏色

顏色名稱
aqua	gray	navy	silver
black	green	olive	teal
blue	lime	purple	white
fuchsia	maroon	red	yellow

RGB和RGBa顏色

RGB分別代表紅色、綠色、藍色三個基本色。標示法為RGB(R數值,G數值,B數值)，例如 rgb(255,255,255)或是rgb(0,0,0,)。

RGBa代表在RGB三色之後加入alpha透明度數值，如rgba(255,255,255,0.5)，0.5代表透明度50%。

十六進位RGB色彩

將三個範圍在00到FF之間的十六進位字串連結在一起，就能夠設定顏色，一般的語法表示為#RRGGBB，如＃ffffff、＃f9a4ca、#62b2c6。

十六進位RGBa色彩

加入了alpha通道值的第四個十六位元值，如＃f9a4ca33、＃f9a4ca66、＃f9a4ca99。

角度

deg(角度degree)：一個圓有360度
grad(梯度gradians)：將一個圓切成400等份，為一個梯度，也稱為grade或gon!
rad(弧度radian)：一個圓等於2＊3.1416
turn(轉turn)：轉一個圓就是一轉，所以動畫10圈，就是10turn(turn不能加s)

3. 字型

為了涵蓋所有的範圍，CSS定義了五種通用字型：

Serif：是指每個筆畫開頭或結束的裝飾。如大寫A底下的橫線。
Sans-serif：無襯線的比例自型，如Helvetic、Geneva、Verdana、Arial。
Monospace：等寬字型不是比例字型，通常用來顯示程式碼或是表格資料，每個字元都佔據相同的水平寬度，可能有襯線、也可能無襯線，但都為等寬字型。如Courier、Courier New、Consolas、Andale Mono。
Cursive：草書字型模仿手寫字，通常包含大量的曲線或比襯線字型更多的筆劃裝飾。如Zapf Chancery、Author與Comic Sans。
Fantasy：花俏字型並沒有任何獨特的特性，不屬於前四類的字型都歸類為花俏字型。如Western、Wooblock與Klingon。

使用通用字型

使用font-family屬性使用任何可用的字型。如下所示：

<style type=text/css>
body {font-family: serif;}
h1,h2,h3,h4 {font-family: sans-serif;}
code,pre,tt,kbd {font-family: monospace;}
p.signature {font-family: cursive;}
</style>

指定字型

網頁作者可以更明確的指定文件或元素顯示時所使用的字型。比如想讓所有h1元素都使用Georgia字型，可以宣告以下規則：

h1 {font-family:Georgia;}

使用引號

h2 {font-family:Times,'Times New Roman',serif;}

字體粗細(font-weight)

font-weight的數值有：

normal | bold | bolder | lighter
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

通常Regular為400、Lighter為400以下、Medium為500、Bold為600和700、Extra Bold為800和900。

<style type=text/css>
p {font-weight:normal;}
p span {font-weight:400;}
strong {font-weight:bolder;}
strong b {font-weight:bolder;}
</style>

字型大小尺寸

一般常用的尺寸對照表

大小名稱	xx-small	x-small	small
數值	10px	12px	14px
medium	large	x-large	xx-large
16px	19px	24px	32px

字型尺寸與繼承

下列語法中，strong元素繼承的是12px，這個數值再經由宣告的135%作用之後達到16.2px。

<style type=text/css>
p {font-size: 12px;}
em {font-size: 120%}
strong {font-size:135%}
</style>

使用長度單位

font-size可以使用所有的長度數值，以下所有的font-size宣告有相同的效果：

<style type=text/css>
p.one {font-size:36pt}
p.two {font-size:3pc;}
p.three {font-size:0.5in;}
p.four {font-size:1.27cm;}
P.five {font-size:12.7mm;}
</style>

小結

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 如何開始使用CSS ?

如何開始使用CSS ?

2020/8/24 , 由 Wanding 編寫發布

分類：

CSS

編輯HTML文件，開始納入CSS樣式

當我們認識了CSS並且了解它的功能之後，我們該如何使用CSS來美化我們正在編寫的網頁呢？以下有四種方式：

使用<style>標籤定義樣式
在標籤中使用style的屬性
將樣式表定義在CSS檔案，並以<link>標籤連結該檔案
將樣式表定義在CSS檔案，並以＠import指令匯入該檔案

接下來分別說明這四種方式

1. 使用<style>標籤定義樣式

第一種方式是比較入門簡易的方法，或是只針對特殊頁面進行單獨的樣式設定。如果網頁頁數很多，可能用其他方式會比較適合。

用法為在<head>與</head>的段落之中，使用<style>標籤來定義樣式表，在style之後要加上type=text/css，意思就是告知瀏覽器，從這一行開始是定義CSS的樣式，直到</style> 出現為止。

<!DOCTYPE html>
<html lang="en">
   <head>
       <style type=text/css>
             h1 {
                 color: #fc5203;
                 font-size: 30px;
                 font-family: 標楷體;
                }
            body {
                 color: darkcyan;
                 font-size: 20px;
                 font-family: 微軟正黑體;
                }
       </style>
   </head>
<body>
<h1>如果有來生　◎三毛</h1>
如果有來生，要做一棵樹，<br>
站成永恆。沒有悲歡的姿勢，<br>
一半在塵土裡安詳，<br>
一半在風裡飛揚；<br>
一半灑落蔭涼，<br>
一半沐浴陽光。<br>
非常沉默，非常驕傲。<br>
從不依靠，從不尋找。<br>
<p></p>
如果有來生，要化成一陣風，<br>
一瞬間也能成為永恆。<br>

沒有善感的情懷，沒有多情的眼睛。<br>
一半在雨裡灑脫，<br>
一半在春光裡旅行；<br>
寂寞了，孤自去遠行，<br>
把淡淡的思念統帶走，<br>
從不思念，從不愛戀；<br>
..................
</body>
</html>

上面的原始碼在瀏覽器會輸出成如下所示：

2. 在HTML標籤中使用style屬性

第一種定義樣式的方法，影響的範圍是整個網頁。如果我們想要各別標籤進行CSS的調整，該如何做呢？這時，就可以直接在HTML標籤內使用style來定義樣式。

<p style="color:red; fontsize:20px;">文字內容在這裡</p>

這種方式的效力只有到</p>為止，下一個標籤則需另外再定義，容易看來雜亂，當宣告數量多時，避免使用這方法。

3. 用link標籤連結到css檔(外部樣式)

我們進一步把CSS定義另外存成一個檔案，然後再以<link>標籤來讀取css檔案的內容。 CSS的寫法如下：

h2 {color:red;
    font-size:20px;
    font-family:微軟正黑;
    text-align:center;
   }

網頁的部份，需在head段落中，以<link>標籤呼叫CSS檔案，語法如下：

<head>
    <link rel="stylesheet" type="text/css" href="CSS檔案的URL">
</head>

4. 用@import指令匯入CSS檔(外部樣式)

網頁中的@import必須在head段落的<style>和</style>之間，語法如下：

<head>
    <style>
    @import url(css檔案的url)
    </style>
</head>

小結

透過CSS的導入，能夠完全改變HTML網頁呈現元素的方式，這能夠透過display屬性在基本層級執行，也可以藉由連結鍵的方式來達成。網頁使用者不需要知道是透過外部樣式、內部樣式、或行內樣式。而外部樣式真正的重要性，在於提供作者集中放置網站呈現資訊的方式，讓所有的文件都指向相同的地方，不只讓網站更新與維護更加簡單，也能節省頻寬！

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 如何開始使用CSS ?

如何開始使用CSS ?

2020/8/24 , 由 Wanding 編寫發布

CSS

編輯HTML文件，開始納入CSS樣式

當我們認識了CSS並且了解它的功能之後，我們該如何使用CSS來美化我們正在編寫的網頁呢？以下有四種方式：

使用<style>標籤定義樣式
在標籤中使用style的屬性
將樣式表定義在CSS檔案，並以<link>標籤連結該檔案
將樣式表定義在CSS檔案，並以＠import指令匯入該檔案

接下來分別說明這四種方式

1. 使用<style>標籤定義樣式

第一種方式是比較入門簡易的方法，或是只針對特殊頁面進行單獨的樣式設定。如果網頁頁數很多，可能用其他方式會比較適合。

<!DOCTYPE html>
<html lang="en">
   <head>
       <style type=text/css>
             h1 {
                 color: #fc5203;
                 font-size: 30px;
                 font-family: 標楷體;
                }
            body {
                 color: darkcyan;
                 font-size: 20px;
                 font-family: 微軟正黑體;
                }
       </style>
   </head>
<body>
<h1>如果有來生　◎三毛</h1>
如果有來生，要做一棵樹，<br>
站成永恆。沒有悲歡的姿勢，<br>
一半在塵土裡安詳，<br>
一半在風裡飛揚；<br>
一半灑落蔭涼，<br>
一半沐浴陽光。<br>
非常沉默，非常驕傲。<br>
從不依靠，從不尋找。<br>
<p></p>
如果有來生，要化成一陣風，<br>
一瞬間也能成為永恆。<br>

沒有善感的情懷，沒有多情的眼睛。<br>
一半在雨裡灑脫，<br>
一半在春光裡旅行；<br>
寂寞了，孤自去遠行，<br>
把淡淡的思念統帶走，<br>
從不思念，從不愛戀；<br>
..................
</body>
</html>

上面的原始碼在瀏覽器會輸出成如下所示：

2. 在HTML標籤中使用style屬性

<p style="color:red; fontsize:20px;">文字內容在這裡</p>

這種方式的效力只有到</p>為止，下一個標籤則需另外再定義，容易看來雜亂，當宣告數量多時，避免使用這方法。

3. 用link標籤連結到css檔(外部樣式)

我們進一步把CSS定義另外存成一個檔案，然後再以<link>標籤來讀取css檔案的內容。 CSS的寫法如下：

h2 {color:red;
    font-size:20px;
    font-family:微軟正黑;
    text-align:center;
   }

網頁的部份，需在head段落中，以<link>標籤呼叫CSS檔案，語法如下：

<head>
    <link rel="stylesheet" type="text/css" href="CSS檔案的URL">
</head>

4. 用@import指令匯入CSS檔(外部樣式)

網頁中的@import必須在head段落的<style>和</style>之間，語法如下：

<head>
    <style>
    @import url(css檔案的url)
    </style>
</head>

小結

返回目錄

網頁技術

首頁 > 網頁技術目錄 > CSS是什麼？

CSS是什麼？

2020/8/21 , 由 Wanding 編寫發布

分類：

CSS

下面的六張圖片，各自代表不同的網頁視覺風格。但是，您知道嗎？它們是出自同一個網頁HTML檔案，只是搭配不同的CSS就能做出如此不同風格的網頁。

CSS到底是什麼呢？用居住的房屋來比喻，HTML就是梁柱、牆壁、門窗等結構，但是它只是個毛坯屋而已，並不適合居住。人們在要搬進去住之前，需要花一點時間為牆壁上色粉刷、進行隔間、燈光配置..等，讓屋子更舒適點。這些改變顏色、形狀、視覺、修飾的功能就是提昇要提昇房子的美感和可住性。相同道理，在網頁的世界裡，CSS就是網站美感的裝潢，提昇網頁的可看性！

CSS是由Cascading Style Sheets（階層樣式表）各取單字第一個字母組成，是一種程式語言，主要用來控制如何顯示網頁。所以目前的網頁趨勢，就是HTML負責網頁的架構，控制網頁外觀的部份則交給CSS來做。

W3C組織於1996年制定了CSS的標準，為CSS1；後來於1998年公佈CSS2標準。到了2011年公佈CSS3標準，大幅支援動畫及立體效果，過去依靠圖片或Flash物件來呈現動態按鈕文字..等，現在只要透過CSS3的功能就辦得到。

CSS的優點

1. 讓網頁的內容與格式脫鉤

早期的網頁設計常採用一些特殊技巧來呈現外觀，雖然表顯很亮眼，但因為內容與格式的依賴性太高，導致一旦要更新文字或圖片內容，格式也必須隨之修改，其結果需耗費大量的時間和人力去維護網頁。

近年來的作法是撰寫HTML檔時，只使用與內容結構相關的HTML標籤。例如<p>、<h1>、<span>，與格式相關的標籤盡量不要用，如<font>、<small>、<big>等標籤。凡是涉及變更格式的工作，一律改由CSS來做。

網頁的內容與格式脫鉤，當我們要改變網站所有按鈕的大小和特效，或是更改主要文字內容的顏色，只要在CSS進行相關屬性的修改，就會所有的網頁全部一起改，方便有效率的管理及維護。

2. 避免重複撰寫程式碼

如果不用CSS，而是個別在HTML標籤上設定屬性，如<h2 color=blue>，如果<h2>出現100次，那麼color=blue也會一併出現100次。如此寫出來的程式碼會變得肥腫，無形中增加網頁運作的時間。

若使用CSS來做，只需要在CSS檔案定義一次，之後的<h2>標籤就會自動呈現CSS設定的屬性。如此，既可減少設計師重複編碼，程式碼更精簡，網頁開啟的速度會更快。

CSS的語法

CSS的使用方法由選擇器(Selector)和宣告(Declaration)兩個部份所組成，而宣告又分為屬性(Property)和值(Value)，如下圖所示：

選擇器種類

選擇器是用來選擇這條規則要套用的對象，因對象不同，選擇器常被分為三類：

標籤選擇器(Tag Selector)

HTML的元素作為選擇對象，所以他的名稱必定是某一個HTML的元素名稱。如：p、div、span等等，不可以使用自訂的名稱。
類別選擇器(Class Selector)

此種選擇器的格式為.xxx，而xxx為自訂的名稱。比如：.navbar、.col-md-6、.my-5等。使用類別選擇器，代表以xxx類別為套用對象。例如：<p class="my-5">內容文字</p>，這樣寫法，則文字區塊的上面會空出2rem的邊界(margin)，同樣文字區塊的下方也會空出2rem的邊界。
識別碼選擇器(ID Selector)

這種選擇器的格式為#xxx，其中xxx為自訂的名稱。如:#type1、#gifstyle等。使用id選擇器，代表以id＝xxx的元素為套用的對象。也就是，對於名稱為xxx的元素，套用此規則。

宣告

宣告(Declaration)是用來指定某個屬性(Property)的設定值(Value)，屬性和設定值之間使用冒號:，跟HTML使用等號是不同的。

規則合併

具有相同宣告的規則可以合併
```
h2{color:blue;}
h3{color:blue;}
h4{color:blue;}
```
由於h2、h3、h4都有相同的宣告，所以我們可以把它們合併為ㄧ
```
h1,h2,h3{color:blue;}
```

相同選擇器的規則可以合併

body{color:brown;}
body{text-align:center;}
body{padding:2rem;}

選擇器都是body，所以我們可以把不同的宣告合併為一

body{color:brown;
text-align:center;
padding:2 rem;
}

使用CSS的注意事項

所有的宣告都必須包含再大括弧{ }之中。
每一種宣告最後都必須用分號;結束，包含最後一個宣告也是
若要加上註解，必須用/* 和 */圍住註解的文字。
若屬性值包含空格，必須用英文雙引號("")或英文('')單引號包圍起來

例如：

 body{color:brown;    /*褐色字體*/
 text-align:center;   /*字體居中*/
 padding:2 rem;   /*邊界2rem*/
 }

返回目錄

網頁技術

首頁 > 網頁技術目錄 > CSS是什麼？

CSS是什麼？

2020/8/21 , 由 Wanding 編寫發布

CSS

下面的六張圖片，各自代表不同的網頁視覺風格。但是，您知道嗎？它們是出自同一個網頁HTML檔案，只是搭配不同的CSS就能做出如此不同風格的網頁。

CSS的優點

1. 讓網頁的內容與格式脫鉤

2. 避免重複撰寫程式碼

CSS的語法

CSS的使用方法由選擇器(Selector)和宣告(Declaration)兩個部份所組成，而宣告又分為屬性(Property)和值(Value)，如下圖所示：

選擇器種類

選擇器是用來選擇這條規則要套用的對象，因對象不同，選擇器常被分為三類：

標籤選擇器(Tag Selector)

HTML的元素作為選擇對象，所以他的名稱必定是某一個HTML的元素名稱。如：p、div、span等等，不可以使用自訂的名稱。
類別選擇器(Class Selector)

此種選擇器的格式為.xxx，而xxx為自訂的名稱。比如：.navbar、.col-md-6、.my-5等。使用類別選擇器，代表以xxx類別為套用對象。例如：<p class="my-5">內容文字</p>，這樣寫法，則文字區塊的上面會空出2rem的邊界(margin)，同樣文字區塊的下方也會空出2rem的邊界。
識別碼選擇器(ID Selector)

這種選擇器的格式為#xxx，其中xxx為自訂的名稱。如:#type1、#gifstyle等。使用id選擇器，代表以id＝xxx的元素為套用的對象。也就是，對於名稱為xxx的元素，套用此規則。

宣告

宣告(Declaration)是用來指定某個屬性(Property)的設定值(Value)，屬性和設定值之間使用冒號:，跟HTML使用等號是不同的。

規則合併

具有相同宣告的規則可以合併
```
h2{color:blue;}
h3{color:blue;}
h4{color:blue;}
```
由於h2、h3、h4都有相同的宣告，所以我們可以把它們合併為ㄧ
```
h1,h2,h3{color:blue;}
```

相同選擇器的規則可以合併

body{color:brown;}
body{text-align:center;}
body{padding:2rem;}

選擇器都是body，所以我們可以把不同的宣告合併為一

body{color:brown;
text-align:center;
padding:2 rem;
}

使用CSS的注意事項

所有的宣告都必須包含再大括弧{ }之中。
每一種宣告最後都必須用分號;結束，包含最後一個宣告也是
若要加上註解，必須用/* 和 */圍住註解的文字。
若屬性值包含空格，必須用英文雙引號("")或英文('')單引號包圍起來

例如：

 body{color:brown;    /*褐色字體*/
 text-align:center;   /*字體居中*/
 padding:2 rem;   /*邊界2rem*/
 }

返回目錄

Subscribe to CSS

前言

1. 數值與單位

數字與百分比

距離

絕對長度單位

相對長度單位

2. 顏色

有名稱的顏色

RGB和RGBa顏色

十六進位RGB色彩

十六進位RGBa色彩

角度

3. 字型

使用通用字型

指定字型

使用引號

字體粗細(font-weight)

字型大小尺寸

字型尺寸與繼承

使用長度單位

小結

前言

1. 數值與單位

數字與百分比

距離

絕對長度單位

相對長度單位

2. 顏色

有名稱的顏色

RGB和RGBa顏色

十六進位RGB色彩

十六進位RGBa色彩

角度

3. 字型

使用通用字型

指定字型

使用引號

字體粗細(font-weight)

字型大小尺寸

字型尺寸與繼承

使用長度單位

小結

編輯HTML文件，開始納入CSS樣式

1. 使用<style>標籤定義樣式

2. 在HTML標籤中使用style屬性

3. 用link標籤連結到css檔(外部樣式)

4. 用@import指令匯入CSS檔(外部樣式)

小結

編輯HTML文件，開始納入CSS樣式

1. 使用<style>標籤定義樣式

2. 在HTML標籤中使用style屬性

3. 用link標籤連結到css檔(外部樣式)

4. 用@import指令匯入CSS檔(外部樣式)

小結

CSS的優點

1. 讓網頁的內容與格式脫鉤

2. 避免重複撰寫程式碼

CSS的語法

選擇器種類

標籤選擇器(Tag Selector)

類別選擇器(Class Selector)

識別碼選擇器(ID Selector)

宣告

規則合併

具有相同宣告的規則可以合併

相同選擇器的規則可以合併

使用CSS的注意事項

CSS的優點

1. 讓網頁的內容與格式脫鉤

2. 避免重複撰寫程式碼

CSS的語法

選擇器種類

標籤選擇器(Tag Selector)

類別選擇器(Class Selector)

識別碼選擇器(ID Selector)

宣告

規則合併

具有相同宣告的規則可以合併

相同選擇器的規則可以合併

使用CSS的注意事項