CSS 基礎_第三天

請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。


如果您覺得這篇文章還不錯，可以去H5專題中查看更多相關文章。

CSS 入門

概述

1.樣式定義如何顯示 HTML 元素

2.樣式通常存儲在樣式表中

3.把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題

4.外部樣式表可以極大提高工作效率

5.外部樣式表通常存儲在 CSS 文件中

6.多個樣式定義可層疊為一

0.今日課程預覽

這里寫圖片描述

1.什么是 CSS ？

CSS 指層疊樣式表 (Cascading Style Sheets),或者叫級聯樣式表，是一組格式設置規則，用于控制 web 頁面的外觀。

- css 特點
1 頁面內容與表相分離
2 可以將 CSS 單獨放在一個文件夾中
3 布局非常靈活
4 提高網頁的加載速度
5 降低服務器的維護成本
6 通過 css 的hank 等技術手段實現瀏覽器的全兼容
1.1 樣式解決了一個普遍的問題

HTML 標簽原本被設計為用于定義文檔內容。通過使用 <h1>、<p>、<table>這樣的標簽，HTML 的初衷是表達“這是標題”、“這是段落”、“這是表格”之類的信息。同時文檔布局由瀏覽器來完成，而不使用任何的格式化標簽。

由于兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標簽和屬性（比如字體標簽和顏色屬性）添加到 HTML 規范中，創建文檔內容清晰地獨立于文檔表現層的站點變得越來越困難。

為了解決這個問題，萬維網聯盟（W3C），這個非營利的標準化聯盟，肩負起了 HTML 標準化的使命，并在 HTML 4.0 之外創造出樣式（Style）。

所有的主流瀏覽器均支持層疊樣式表。

1.2 樣式表極大地提高了工作效率

樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標簽和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。

由于允許同時控制多重頁面的樣式和布局，CSS 可以稱得上 WEB 設計領域的一個突破。作為網站開發者，你能夠為每個 HTML 元素定義樣式，并將之應用于你希望的任意多的頁面中。如需進行全局的更新，只需簡單地改變樣式，然后網站中的所有元素均會自動地更新。

1.3 多重樣式將層疊為一個

樣式表允許以多種方式規定樣式信息。樣式可以規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表。

2.CSS 的引入方式

2.1 引入方式

一般來說，我們的引入方式一般分為三種。

內聯樣式表：直接在 HTML 元素內部進行樣式的設置。

內部樣式表：在 <head>標簽內部設置 <style>標簽，設置樣式。

外部樣式表：在 <head>標簽內部設置 <link>標簽，進入外部 CSS 文件。

2.2 不同引入方式的優缺點

2.2.1 內聯樣式表
內聯樣式表 優缺點
1 優先級最高
2 多余代碼多
3 不利于維護
4 配合 JS 使用
2.2.2 內部樣式表
內部樣式表 優缺點
1 速度快，沒有請求壓力
2 相對外部引用代碼較少
3 不宜改版和維護
4 代碼較亂，不方便前后臺溝通
5 主要使用在主頁和活動頁
2.2.3 外部樣式表
外部樣式表 優缺點
1 一個 CSS 樣式可以控制多個頁面
2 方便改版和維護
3 減少代碼量，代碼簡潔，便于分工協作
4 有效利用緩存機制
5 相對單頁來說，會有垃圾代碼，外部引入也會給服務器造成壓力
6 主要使用在內容頁和復雜度較高的頁面

2.3 CSS 引入優先級

我們控制樣式的精確度越高，它相對于其他控制的優先級也就更高。（范圍越小，精確度越高）

也就是 內聯樣式表 > 內部樣式表 ? 外部樣式表.

需要注意，內部樣式表和外部樣式表其實優先級是不確定的，當他們內部樣式設置相同時，判斷他們誰生效，主要是看誰是最后引入的。
但是，如果設置的是不同的，則看誰的內容優先級更高，則哪個生效。

3.CSS 語法

3.1 CSS 規則

一般 CSS 規則 由兩個主要的部分構成：選擇器，以及一條或多條聲明。

selector {declaration1; declaration2; ... declarationN }

選擇器通常是您需要改變樣式的 HTML 元素。

每條聲明由一個屬性和一個值組成。

屬性（property）是您希望設置的樣式屬性（style attribute）。

每個屬性有一個值。屬性和值被冒號分開。

selector {property: value}

css 結構

3.2 值的不同寫法和單位

除了英文單詞 red，我們還可以使用十六進制的顏色值 #ff0000：

p { color: #ff0000; }

為了節約字節，我們可以使用 CSS 的縮寫形式：

p { color: #f00; }

我們還可以通過兩種方法使用 RGB 值：

p { color: rgb(255,0,0); }

p { color: rgb(100%,0%,0%); }

請注意，當使用 RGB 百分比時，即使當值為 0 時也要寫百分比符號。

但是在其他的情況下就不需要這么做了。

比如說，當尺寸為 0 像素時，0 之后不需要使用 px 單位，因為 0 就是 0，無論單位是什么。

3.3 記得寫引號

提示：如果值為若干單詞，則要給值加引號：

p {font-family: "sans serif";}

3.4 多重聲明：

提示：如果要定義不止一個聲明，則需要用分號將每個聲明分開。

下面的例子展示出如何定義一個紅色文字的居中段落。

最后一條規則是不需要加分號的，因為分號在英語中是一個分隔符號，不是結束符號。

然而，大多數有經驗的設計師會在每條聲明的末尾都加上分號，這么做的好處是，

當你從現有的規則中增減聲明時，會盡可能地減少出錯的可能性。就像這樣：

p {text-align:center; color:red;}

你應該在每行只描述一個屬性，這樣可以增強樣式定義的可讀性，就像這樣：

p {
  text-align: center;
  color: black;
  font-family: arial;
}

3.5 空格和大小寫

大多數樣式表包含不止一條規則，而大多數規則包含不止一個聲明。

多重聲明和空格的使用使得樣式表更容易被編輯：

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

是否包含空格不會影響 CSS 在瀏覽器的工作效果，

同樣，與 XHTML 不同，CSS 對大小寫不敏感。

不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。

4 CSS 基礎設置

4.1 字體的設置

- 字體的設置
1 font-family
2 font-size
3 font-weight
4 font-style
4.1.1 font-family

font-family規定元素的字體系列。

font-family 可以把多個字體名稱作為一個“回退”系統來保存。

如果瀏覽器不支持第一個字體，則會嘗試下一個。

也就是說，font-family 屬性的值是用于某個元素的字體族名稱或/及類族名稱的一個優先表。

瀏覽器會使用它可識別的第一個值。

有兩種類型的字體系列名稱：

指定的系列名稱：具體字體的名稱，比如："times"、"courier"、"arial"。

通常字體系列名稱：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

提示：使用逗號分割每個值，并始終提供一個類族名稱作為最后的選擇。

注意：使用某種特定的字體系列（Geneva）完全取決于用戶機器上該字體系列是否可用；

這個屬性沒有指示任何字體下載。因此，強烈推薦使用一個通用字體系列名作為后路。

p
  {
  font-family:"Times New Roman",Georgia,Serif;
  }
值 描述
family-name,generic-family 用于某個元素的字體族名稱或/及類族名稱的一個優先表。默認值：取決于瀏覽器。
inherit 規定應該從父元素繼承字體系列。

使用通用字體系列

如果你希望文檔使用一種 sans-serif 字體，但是你并不關心是哪一種字體，以下就是一個合適的聲明：

body {font-family: sans-serif;}

這樣用戶代理就會從 sans-serif 字體系列中選擇一個字體（如 Helvetica），并將其應用到 body 元素。

因為有繼承，這種字體選擇還將應用到 body 元素中包含的所有元素，除非有一種更特定的選擇器將其覆蓋。

指定字體系列

除了使用通用的字體系列，您還可以通過 font-family 屬性設置更具體的字體。

下面的例子為所有 h1 元素設置了 Georgia 字體：

h1 {font-family: Georgia;}

這樣的規則同時會產生另外一個問題，如果用戶代理上沒有安裝 Georgia 字體，就只能使用用戶代理的默認字體來顯示 h1 元素。

我們可以通過結合特定字體名和通用字體系列來解決這個問題：

h1 {font-family: Georgia, serif;}

如果讀者沒有安裝 Georgia，但安裝了 Times 字體（serif 字體系列中的一種字體），

用戶代理就可能對 h1 元素使用 Times。

盡管 Times 與 Georgia 并不完全匹配，但至少足夠接近。

因此，我們建議在所有 font-family 規則中都提供一個通用字體系列。

這樣就提供了一條后路，在用戶代理無法提供與規則匹配的特定字體時，就可以選擇一個候選字體。

如果您對字體非常熟悉，也可以為給定的元素指定一系列類似的字體。

要做到這一點，需要把這些字體按照優先順序排列，然后用逗號進行連接：

p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}

根據這個列表，用戶代理會按所列的順序查找這些字體。如果列出的所有字體都不可用，就會簡單地選擇一種可用的 serif 字體。

使用引號
您也許已經注意到了，上面的例子中使用了單引號。

只有當字體名中有一個或多個空格（比如 New York），

或者如果字體名包括 # 或 $ 之類的符號，才需要在 font-family 聲明中加引號。

單引號或雙引號都可以接受。

但是，如果把一個 font-family 屬性放在 HTML 的 style 屬性中，

則需要使用該屬性本身未使用的那種引號：

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;">...</p>

4.1.2 font-size

font-size 屬性可設置字體的尺寸。

說明

該屬性設置元素的字體大小。

注意，實際上它設置的是字體中字符框的高度；

實際的字符字形可能比這些框高或矮（通常會矮）。

各關鍵字對應的字體必須比一個最小關鍵字相應字體要高，并且要小于下一個最大關鍵字對應的字體。

h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%}
值 描述
xx-small,x-small,small,medium,large,x-large,xx-large 把字體的尺寸設置為不同的尺寸，從 xx-small 到 xx-large。默認值：medium。
smaller 把 font-size 設置為比父元素更小的尺寸。
larger 把 font-size 設置為比父元素更大的尺寸。
length 把 font-size 設置為一個固定的值。
% 把 font-size 設置為基于父元素的一個百分比值。
inherit 規定應該從父元素繼承字體尺寸。

font-size 值可以是絕對或相對值。

絕對值：

1.將文本設置為指定的大小

2.不允許用戶在所有瀏覽器中改變文本大小（不利于可用性）

3.絕對大小在確定了輸出的物理尺寸時很有用

相對大小：

1.相對于周圍的元素來設置大小

2.允許用戶在瀏覽器改變文本大小

注意：如果您沒有規定字體大小，普通文本（比如段落）的默認大小是 16 像素 (16px=1em)。

使用像素來設置字體大小

通過像素設置文本大小，可以對文本大小進行完全控制：

實例

h1 {font-size:60px;}

h2 {font-size:40px;}

p {font-size:14px;}

在 Firefox, Chrome, and Safari 中，可以重新調整以上例子的文本大小，但是在 Internet Explorer 中不行。

雖然可以通過瀏覽器的縮放工具調整文本大小，但是這實際上是對整個頁面的調整，而不僅限于文本。

使用 em 來設置字體大小
如果要避免在 Internet Explorer 中無法調整文本的問題，許多開發者使用 em 單位代替 pixels。

W3C 推薦使用 em 尺寸單位。

1em 等于當前的字體尺寸。如果一個元素的 font-size 為 16 像素，那么對于該元素，1em 就等于 16 像素。

在設置字體大小時，em 的值會相對于父元素的字體大小改變。

瀏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。

可以使用下面這個公式將像素轉換為 em：pixels/16=em

（注：16 等于父元素的默認字體大小，假設父元素的 font-size 為 20px，那么公式需改為：pixels/20=em）

實例

h1 {font-size:3.75em;} /* 60px/16=3.75em */

h2 {font-size:2.5em;} /* 40px/16=2.5em */

p {font-size:0.875em;} /* 14px/16=0.875em */

在上面的例子中，以 em 為單位的文本大小與前一個例子中以像素計的文本是相同的。

不過，如果使用 em 單位，則可以在所有瀏覽器中調整文本大小。

不幸的是，在 IE 中仍存在問題。在重設文本大小時，會比正常的尺寸更大或更小。

結合使用百分比和 EM

在所有瀏覽器中均有效的方案是為 body 元素（父元素）以百分比設置默認的 font-size 值：

實例

body {font-size:100%;}

h1 {font-size:3.75em;}

h2 {font-size:2.5em;}

p {font-size:0.875em;}

我們的代碼非常有效。在所有瀏覽器中，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。

4.1.3 font-weight

font-weight 屬性設置文本的粗細。

說明

該屬性用于設置顯示元素的文本中所用的字體加粗。

數字值 400 相當于 關鍵字 normal，700 等價于 bold。

每個數字值對應的字體加粗必須至少與下一個最小數字一樣細，而且至少與下一個最大數字一樣粗。

值 描述
normal 默認值。定義標準的字符。
bold 定義粗體字符。
bolder 定義更粗的字符。
lighter 定義更細的字符。
100-900 定義由粗到細的字符。400 等同于 normal，而 700 等同于 bold。
inherit 規定應該從父元素繼承字體的粗細。

使用 bold 關鍵字可以將文本設置為粗體。

關鍵字 100 ~ 900 為字體指定了 9 級加粗度。

如果一個字體內置了這些加粗級別，那么這些數字就直接映射到預定義的級別，

100 對應最細的字體變形，900 對應最粗的字體變形。

數字 400 等價于 normal，而 700 等價于 bold。

如果將元素的加粗設置為 bolder，瀏覽器會設置比所繼承值更粗的一個字體加粗。

與此相反，關鍵詞 lighter 會導致瀏覽器將加粗度下移而不是上移。

實例

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
4.1.4 font-style

font-style屬性最常用于規定斜體文本。

該屬性有三個值：

normal - 文本正常顯示

italic - 文本斜體顯示

oblique - 文本傾斜顯示

實例

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

該屬性設置使用斜體、傾斜或正常字體。

斜體字體通常定義為字體系列中的一個單獨的字體。

理論上講，用戶代理可以根據正常字體計算一個斜體字體。

值 描述
normal 默認值。瀏覽器顯示一個標準的字體樣式。
italic 瀏覽器會顯示一個斜體的字體樣式。
oblique 瀏覽器會顯示一個傾斜的字體樣式。
inherit 規定應該從父元素繼承字體樣式。

4.2 文本的設置

- 文本的設置
1 color
2 text-align
3 line-height
4 text-decoration
5 text-indent
4.2.1 color

color 屬性規定文本的顏色。

這個屬性設置了一個元素的前景色（在 HTML 表現中，就是元素文本的顏色）；

光柵圖像不受 color 影響。

這個顏色還會應用到元素的所有邊框，除非被 border-color 或另外某個邊框顏色屬性覆蓋。

body
  {
  color:red;
  }
h1
  {
  color:#00ff00;
  }
p
  {
  color:rgb(0,0,255);
  }
4.2.2 text-align

text-align 屬性規定元素中的文本的水平對齊方式。

該屬性通過指定行框與哪個點對齊，從而設置塊級元素內文本的水平對齊方式。

通過允許用戶代理調整行內容中字母和字之間的間隔，可以支持值 justify；

不同用戶代理可能會得到不同的結果。

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
4.2.3 line-height

line-height 屬性設置行間的距離（行高）。

注釋：不允許使用負值。

說明

該屬性會影響行框的布局。

在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。

line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，

分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。

原始數字值指定了一個縮放因子，后代元素會繼承這個縮放因子而不是計算值。

p.small {line-height:90%}
p.big {line-height:200%}
4.2.4 text-decoration

text-decoration屬性規定添加到文本的修飾。

注釋：修飾的顏色由 "color" 屬性設置。

說明

這個屬性允許對文本設置某種效果，如加下劃線。

如果后代元素沒有自己的裝飾，祖先元素上設置的裝飾會“延伸”到后代元素中。

不要求用戶代理支持 blink。

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
4.2.5 text-indent

text-indent屬性規定文本塊中首行文本的縮進。

注釋：允許使用負值。如果使用負值，那么首行會被縮進到左邊。

注意：在 CSS 2.1 之前，text-indent 總是繼承計算值，而不是聲明值。

p
  {
  text-indent:50px;
  }

4.3 背景的設置

- 背景的設置
1 background-color
2 background-image
3 background-repeat
4 background-position
5 background-attachment
4.3.1 background-color背景色

屬性為元素設置背景色。

這個屬性接受任何合法的顏色值。

這條規則把元素的背景設置為灰色：

p {background-color: gray;}

如果您希望背景色從元素中的文本向外少有延伸，只需增加一些內邊距：

p {background-color: gray; padding: 20px;}

4.3.2 background-image背景圖像

要把圖像放入背景，需要使用 background-image 屬性。

background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。

如果需要設置一個背景圖像，必須為這個屬性設置一個 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

大多數背景都應用到 body 元素，不過并不僅限于此。

下面例子為一個段落應用了一個背景，而不會對文檔的其他部分應用背景：

p.flower {background-image: url(/i/eg_bg_03.gif);}

您甚至可以為行內元素設置背景圖像，下面的例子為一個鏈接設置了背景圖像：

a.radio {background-image: url(/i/eg_bg_07.gif);}

4.3.3 background-repeat背景重復

如果需要在頁面上對背景圖像進行平鋪，可以使用 background-repeat 屬性。

屬性值 repeat 導致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。

repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重復，

no-repeat 則不允許圖像在任何方向上平鋪。

默認地，背景圖像將從一個元素的左上角開始。請看下面的例子：

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }
4.3.4 background-position背景定位

可以利用 background-position 屬性改變圖像在背景中的位置。

下面的例子在 body 元素中將一個背景圖像居中放置：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

為 background-position 屬性提供值有很多方法。

首先，可以使用一些關鍵字：top、bottom、left、right 和 center。

通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，

如 100px 或 5cm，最后也可以使用百分數值。不同類型的值對于背景圖像的放置稍有差異。

關鍵字

圖像放置關鍵字最容易理解，其作用如其名稱所表明的。

例如，top right 使圖像放置在元素內邊距區的右上角。

根據規范，位置關鍵字可以按任何順序出現，只要保證不超過兩個關鍵字.

一個對應水平方向，另一個對應垂直方向。

如果只出現一個關鍵字，則認為另一個關鍵字是 center。

所以，如果希望每個段落的中部上方出現一個圖像，只需聲明如下：

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

下面是等價的位置關鍵字：

單一關鍵字 等價的關鍵字
center center center
top top center 或 center top
bottom bottom center 或 center bottom
right right center 或 center right
left left center 或 center left

百分數值
百分數值的表現方式更為復雜。假設你希望用百分數值將圖像在其元素中居中，這很容易：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

這會導致圖像適當放置，其中心與其元素的中心對齊。

換句話說，百分數值同時應用于元素和圖像。

也就是說，圖像中描述為 50% 50% 的點（中心點）與元素中描述為 50% 50% 的點（中心點）對齊。

如果圖像位于 0% 0%，其左上角將放在元素內邊距區的左上角。

如果圖像位置是 100% 100%，會使圖像的右下角放在右邊距的右下角。

因此，如果你想把一個圖像放在水平方向 2/3、垂直方向 1/3 處，可以這樣聲明：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

如果只提供一個百分數值，所提供的這個值將用作水平值，垂直值將假設為 50%。

這一點與關鍵字類似。

background-position 的默認值是 0% 0%，在功能上相當于 top left。

這就解釋了背景圖像為什么總是從元素內邊距區的左上角開始平鋪，除非您設置了不同的位置值。

長度值

長度值解釋的是元素內邊距區左上角的偏移。偏移點是圖像的左上角。

比如，如果設置值為 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

注意，這一點與百分數值不同，因為偏移只是從一個左上角到另一個左上角。

也就是說，圖像的左上角與 background-position 聲明中的指定的點對齊。

4.3.5 background-attachment背景關聯

如果文檔比較長，那么當文檔向下滾動時，背景圖像也會隨之滾動。

當文檔滾動到超過圖像的位置時，圖像就會消失。

您可以通過 background-attachment 屬性防止這種滾動。

通過這個屬性，可以聲明圖像相對于可視區是固定的（fixed），因此不會受到滾動的影響：

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }
這里寫圖片描述

這里寫圖片描述
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,784評論 1贊 92
  • 學習CSS的最佳網站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,081評論 0贊 1
  • CSS基礎 本文包括CSS基礎知識選擇器（重要！！！）繼承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,113評論 0贊 40
  • 1.塊級元素和行內元素 塊級(block-level)元素；行內(內聯、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,036評論 1贊 4
  • 十年前就買了的一本書，以前想看卻看不進去，現在看，卻覺得句句在理，看似簡單，也是我們生活中常見的問題，但是很多人只...
    Angelia小鯉魚閱讀 222評論 0贊 0