CSS：修訂版本之間的差異

2024年7月7日 (日) 16:40的最新修訂版本

Cascading Style Sheets(串接樣式表)

選擇器

一、多選擇器

(一)定義

1. .one .two{}：兩個 class 之間有空格，必須要是在 one 裡面的 two，才會被選擇到。
2. .one.two{}：兩個 class 中沒有空格，對象必須同時具有 one 和 two 的 class 時，才能被 CSS 選擇到到。
3. .one,.two{}：兩個 class 中出現逗號，是指對象有 class one 或有 class two，都會被 CSS 選擇到。

(二)引用

<div class='one two'>同時有 one 和 two</div>
<div class='one'><div class='two'>one 裡面的 two</div></div>

二、列表

a:link / a:visited / a:hover / a:active 須依如上順序定義，a:hover 需放置在 a:link 跟 a:visited 之後， a:active 放置在 a:hover 之後。

CSS 簡表

'CSS' 列指示該屬性是在哪個 CSS 版本（CSS1、CSS2 或 CSS3）中定義的。

CSS3 動畫屬性（Animation）

CSS 背景屬性（Background）

CSS 邊框屬性（Border 和 Outline）

Box 屬性

Color 屬性

Content for Paged Media 屬性

CSS 尺寸屬性（Dimension）

可伸縮框屬性（Flexible Box）

CSS 字體屬性（Font）

內容生成（Generated Content）

Grid 屬性

Hyperlink 屬性

CSS 列表屬性（List）

CSS 外邊距屬性（Margin）

Marquee 屬性

多列屬性（Multi-column）

CSS 內邊距屬性（Padding）

Paged Media 屬性

CSS 定位屬性（Positioning）

CSS 打印屬性（Print）

CSS 表格屬性（Table）

CSS 文本屬性（Text）

2D/3D 轉換屬性（Transform）

過渡屬性（Transition）

用戶界面屬性（User-interface）

單位

語法

特殊字元

1. 空格：
   •  ：十六進制20
   •  ：不換行空格(No-Break Space)，值160(十六進制A0)
2. &#9;：TAB，只在<PRE>...</PRE>之間有效
3. &#10;：換行，只在<PRE>...</PRE>之間有效

文字

font-size 文字大小

1. large 表示絕對大小，是瀏覽器預設字體大小的 1.5 倍(這點可能因瀏覽器而異)。
2. larger 表示相對大小，是父元素字體大小的 1.2 倍(這點可能因瀏覽器而異)。

font-family 字形：分襯線、無襯線兩個大類，兩大類之下又可分手寫、夢幻、等寬。

1. 襯線字(serif)：末端加粗、擴張或尖細末端，以文字末端的襯線結尾。在字號比較小時仍然好辨認，增強了可讀性。
   典型的字型有：Times New Roman、MS Georgia、細明體……
   衍生出兩種字型族：petit-serif(小襯線字型族，末端變化不明顯)、slab-serif(雕版襯線字型族，末端變化非常明顯)
2. 無襯線字(sans-serif)：線條粗線均勻，末端圓滑，適合做藝術字、標題等，與「襯線字型」相比，如果字號比較小，看起來就會有些吃力。
   典型的字型有：MS Trebuchet、MS Arial、MS Verdana、幼圓、隸書、楷體……
3. 手寫字(cursive)：像手寫的。
   典型的字型有：Caflisch Script、Adobe Poetica、迷你簡黃草、華文行草……
4. 夢幻字(fantasy)：主要用在圖片中，字型看起來很藝術，實際網頁上用得不多。
   典型的字型有：WingDings、WingDings 2、WingDings 3、Symbol……
5. 等寬字(monospace)：英文字母不等寬， monospace 讓字母等寬，可以像中文一樣排版。
   典型的字型有：Courier、MS Courier New、Prestige……

顏色

(一)十六進位顏色

這是最常用的一種顏色表現形式。十六進位顏色值的規定格式是：

#RRGGBB

RR表示紅色；GG表示綠色；BB表示藍色。它們的取值範圍都介於00～FF之間。

例如：

1. 紅色的十六進位顏色表現形式為：#FF0000
   RR為FF，GG為00，BB為00。
2. 綠色的十六進位顏色表現形式為：#00FF00
   RR為00，GG為FF，BB為00。
3. 藍色的十六進位顏色表現形式為：#0000FF
   RR為00，GG為00，BB為FF。

(二)RGB顏色

RGB顏色值的規定格式是：

RGB(x,x,x)

第一個x表示紅色；第二個x表示綠色；第三個x表示藍色。它們都可以定義為0～255之間的整數，或者百分比為0%～100%之間的整數。

例如：

1. 紅色的RGB顏色值的表現形式為：RGB(255,0,0) 或者 RGB(100%,0%,0%)
2. 綠色的RGB顏色值的表現形式為：RGB(0,255,0) 或者 RGB(0%,100%,0%)
3. 藍色的RGB顏色值的表現形式為：RGB(0,0,255) 或者 RGB(0%,0%,100%)

(三)基本色

(四)系統色(CSS3後不建議再使用)

表格(table)

• 文件

display

• display:block：區塊，元素會以區塊方式呈現，除非設定 position 或 float。
  1. 可以設定高度(height)、寬度(width)、上方與下方距離
  2. div、p、ul、li 均屬 block。
• display:inline：所有文字或圖片均不換行，也就是全部都會是同一行的意思。
  1. 高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度
  2. span、a、input、img、em 均屬 inline。
• display:table-cell：假裝表格，其中的子元素可以輕易垂直置中

範例一：

1. <div style= 'display:block'>元素一</div>
   <div style= 'display:block'>元素二</div>
2. 元素一
   元素二

範例二：

1. <div style= 'display:inline'>元素一</div>
   <div style= 'display:inline'>元素二</div>
2. 元素一
   元素二

水平置中

1. 樣式 margin:0px auto;(上下為 0，左右自動調整) 或 屬性 align=center，兩者作用一樣。對 img 沒用，要將 img 裝進以下容器中才能水平置中。
2. 母元素 div 設 style='width:100%;' ，子元素 table 設 align='center' (不是 style='text-align:center;')
3. 母元素 th ，子元素 table 設 align=center
4. 母元素 text-align:center 子元素的 display 為 inline、inline-block
5. 母子元素均為 block ，第一個子元素設 float:left;margin-left:calc(50% - 適當值px); ，calc()中的減號前後都要有空白

垂直置中

(一)設定行高 ( line-height )

適用於子元素「單行」的「行內元素」( inline、inline-block )，例如單行的標題，或是已經設為 inline-block 屬性的 div。若將母元素的 line-height 設成和高度一樣的數值，則母元素內部的行內元素就會被垂直置中。因為是行高，所以會在行內元素的上下都加上行高的 1/2 ，所以就垂直置中了！不過由此就可以看出，為什麼必須要單行的行內元素，因為如果多行，第二行與第一行的間距會變超大，就不是我們所期望的效果了。

範例一：Div設 height 、 line-height 設同值，文字自然會垂直置中

1. <DIV style='width:200px;height:100px;line-height:100px;background:#CF9;text-align:center;'>
   測試文字垂直置中
   </DIV>
2. 測試文字垂直置中

範例二：外層 Div 的 height 、 line-height 設不同值，並不會置中

1. <Div style='width:200px;height:100px;line-height:150px;border:1px solid #000;text-align:center;'>
   <div style='display:inline-block;width:30px;height:30px;background:#c00;'></div>
   </Div>

(二)vertical-align

vertical-align 垂直方向的對齊，用於「圖照」或「表格欄位內的文字」垂直對齊效果，諸參數：

1. baseline：基礎線，約在文字的中間位置
2. sub：下標
3. super：上標
4. top：該行元素的最高處
5. text-top：該行文字的最高處
6. middle：置中
7. bottom：該行元素的最低處
8. text-bottom：該行文字的最低處
9. 百分比(%)：以百分比來讓圖片垂直對齊該行文字，可以有負值

vertical-align:middle 雖然是垂直置中，不過卻是指在外框內的所有元素垂直位置互相置中，並不是相對於外框的高度垂直置中。

1. <Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
   <div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'></div>
   <div style='width:30px;height:60px;background:#0c0;display:inline-block;vertical-align:middle;'></div>
   <div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'></div>
   </Div>

如果有一個方塊變成了高度 100%，那麼其他的方塊就會真正的垂直置中。

1. <Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
   <div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'></div>
   <div style='width:30px;height:100%;background:#0c0;display:inline-block;vertical-align:middle;'></div>
   <div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'></div>
   </Div>

但是：

1. 我們總不能每次要垂直置中，都要添加一個奇怪的 div 在裏頭
2. 所以我們就使用「偽元素」 ::before 和 ::after 添加 div 進到框框內，
3. 讓這個「偽」div的高度 100% 就可以輕鬆地讓其他的 div 都置中。
4. 偽 div 的 display 須為 inline-block，畢竟 vertical-align:middle; 是針對行內元素

依上述要領實作如下，添置偽元素 ::before ：

1. .div0::before{
   width:0;content:'';
   vertical-align:middle;height:100%;
   display:inline-block;position:relative;
   }

(三)動態計算

不是處處都能用 inline-block，block也可使用 top 樣式來垂直置中，其值為 calc(50% - 半高px)：

1. calc 為動態計算，50% 代表母元素高度之半，「-」是減號，前後都必須是空白，再減去自身高度之半。
2. 自身元素的 position 必須為 relative，不然 top 失去作用
3. 只能用 top 不能用 margin-top ，因為 margin-top 的 50% 代表的是母元素的寬度之半。
4. float:left;是各相鄰區塊向左漂移靠攏；第一個區塊取適當的左距。

依以上要領實作如下：

1. <Div style='width:200px;height:100px;border:1px solid #000;'>
   <div style='width:30px;height:30px;background:#c00;position:relative;top:calc(50% - 15px);float:left;margin-left:calc(50% - 45px);'></div>
   <div style='width:30px;height:60px;background:#0c0;position:relative;top:calc(50% - 30px);float:left;'></div>
   <div style='width:30px;height:40px;background:#00f;position:relative;top:calc(50% - 20px);float:left;'></div>
   </Div>
   

(四)假裝表格

td 中下一行 vertical-align:middle 就可以垂直置中，而其 display 樣式是 table-cell 。所以我們只要將母元素設為 display:table-cell;vertical-align:middle; ，其子元素就會置中。

1. <Div style='width:200px;height:100px;display:table-cell;vertical-align:middle;border:1px solid #000;text-align:center;'>
   假表格垂直置中
   </Div>
2. 假表格垂直置中

(五)margin:auto

母元素設 position:relative; ，子元素設 position:absolute;margin:auto;自動置中

1. <Div style='position:relative;width:200px;height:100px;border:1px solid #000;'>
   	<div style='position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:100px;height:50px;background:#f60;'></div>
   </Div>

(六)垂直位移 CSS3

CSS3可以使用transform樣式，對子元素做如下操作：

1. 用 top:50%; 下降母元素的 50% 。
2. 用 transform:translateY(-50%) 上升子元素的 50% ， transform 管位移、旋轉、變形， translateY 為垂直位移
3. position:relative

依以上要領實作如下：

1. <Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
   <div style='top:50%;transform:translateY(-50%);position:relative;width:100px;height:50px;background:#095;display:inline-block;'></div>
   </Div>

(七)flexbox CSS3

display 設 flex、垂直 align-items 設 center、水平 justify-content 設 center：

1. <Div style='display:flex;align-items:center;justify-content:center;width:200px;height:100px;border:1px solid #000;'>
   <div style='width:100px;height:50px;background:#099;'></div>
   </Div>