前端系列教學(入門篇) - CSS初階（1）

04-06

(預計閱讀時間：35分鐘，推薦使用電腦閱讀)

在閱讀此篇之前，建議已讀過前一篇前端系列教學(入門篇) - HTML初階

CSS - 「我是一個粉刷匠」

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。- 百度百科

如果把前端開發比作蓋房子，HTML是蓋牆碼磚打地基，那CSS就是刷牆吊頂鋪地板了。

Web瀏覽器將CSS規則應用於文檔以影響它們的顯示方式。

CSS實例

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

選擇器：選擇你想要把這些聲明應用到哪個元素上面。
聲明：有一個屬性和一個值組成，中間用冒號(:)分開
CSS聲明總是以分號(;)結束。
聲明組以大括弧({})括起來。
屬性值與單位之間不要留空格。(例如：1px是對的，1 px不可以)

h1 { /* 應用於<h1>元素 */ color: blue; /* 字體顏色設置為藍色 */ background-color: yellow; /* 背景色設置為黃色 */ border: 1px solid black; /* 設置邊框為1像素，黑色，實體線條 */}p { /* 應用於元素 */ color: red; /* 字體顏色設置為紅色 */}

在Web瀏覽器中，上面的代碼將產生以下輸出：

CSS注釋代碼

/* 注釋語句 */

p { color: red; /* 把字體顏色設置為紅色 */ }

什麼是選擇器？

在前面部分我們已經知道CSS規則由選擇器和樣式聲明組成。

選擇器 { 樣式;}

「選擇器」指明了{}中的「樣式」的作用對象，也就是 「樣式」作用於網頁中的哪些元素。

元素選擇器

在 CSS 文檔中，元素選擇器直接以標籤名開頭來定義。用來為以此類標籤命名的元素修改樣式。

p {color: blue;} 

id 選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

在HTML文檔里，我們可以給HTML元素設置id屬性。

Hello World!

在CSS中，我們可以根據id屬性來設置id選擇器。

id 選擇器以 "#" 開頭來定義。

#para { /* 將下面的樣式應用到以「para」為「id」的HTML元素上 */ text-align:center; color:red;}

ID屬性不要以數字開頭。
ID屬性只能在每個 HTML 文檔中只能出現一次。
每個元素只能有一個ID屬性。這是一個段落 <!-- 這是錯誤的 -- >

class 選擇器

class 選擇器用於描述一組元素的樣式，class選擇器有別於id選擇器，class可以在多個元素中使用。

在HTML文檔里，我們可以給HTML元素設置class屬性。

<h1 class="center">標題居中</h1> 段落居中。

在 CSS 文檔中，class選擇器以一個點"."號開頭來定義。

.center { text-align:center; }

一個元素可以同時具有多個class屬性。

這是一個段落

通用選擇器

它的作用是匹配html中所有標籤元素。

使用星號( * )定義所有元素的樣式。

* {color：blue;} /* 所有元素的字體顏色為藍色。*/

子選擇器

使用大於符號( > )，可以選擇指定標籤元素的 第一代子元素。

<ul class="fruit"> <li>Apple</li> <li>Orange</li></ul>

.fruit > li { color: red; /* class屬性為"fruit"的子元素"li"的文字顏色設置為紅色 */}

上面這行代碼會吧class屬性為"fruit"的子元素"li"的文字顏色設置為紅色。

包含(後代)選擇器

包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。

<body> 這裡有一些字 一些字 這是一個段落</body>

body span { color: red;}

上面這行代碼可以讓body元素裡面包含的所有span元素的字體顏色設置為紅色。

與子選擇器不同，子選擇器僅是指它的直接後代，或者你可以理解為作用於子元素的第一代後代。而後代選擇器是作用於所有子後代元素。

分組選擇符

分組選擇符（ , ）可以讓多個標籤元素設置為同一樣式。

h1, p, span { color red;}

上面這行代碼可以把h1元素，p元素，span元素的字體顏色都統一設置為紅色。

如何插入CSS樣式表

插入樣式表的方法有三種:

外部樣式表
內部樣式表
內聯樣式

外部樣式表

當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。

每個頁面使用 <link>標籤鏈接到樣式表。標籤放在HTML文檔的<head>標籤之中。

<head> <link rel="stylesheet" href="mystyle.css"></head>

在這個例子中，瀏覽器會從文件mystyle.css中讀到樣式聲明，並根據它來格式文檔。

在定義<link>元素時，如果要鏈接CSS文檔，需要定義rel屬性為stylesheet。href屬性定義被連接文檔位置。

外部樣式表可以在任何文本編輯器中進行編輯。但注意CSS文檔需要保存在一個獨立的擴展名為" .css "的文件中

內部樣式表

使用內部樣式表。你可以使用<style>標籤在文檔頭部定義內部樣式表，就像這樣:

<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style></head>

內聯樣式

使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。內聯樣式一次只能應用到一個元素上。樣式聲明為style屬性的屬性值。

這是一個段落。

內聯樣式在正式開發中不被推薦使用。因為如果以後要批量更改樣式的話，開發者就需要一個一個的改，費力費時，不容維護。

繼承

CSS的某些樣式是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。

意思就是說，父元素的樣式可以傳給子元素。

 我是一個段落 我是一段文字

p{color:red;}

在上面的例子中，如果不單獨設置元素字體顏色的情況下，元素字體顏色繼承父元素，也是紅色。

權值

如果我們為同一個元素設置了不同的CSS樣式代碼，那麼元素會啟用哪一個CSS樣式呢?

比如：

我是一個段落

p { color:red; }.para { color:green; }

在上面這個例子中，元素被兩次設置顏色。那麼這個時候我們要根據權值來判斷使用哪種css樣式。

下面是權值的規則：

標籤的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。

p { color:red; } /*權值為1*/p span { color:green; } /*權值為1+1=2*/.para { color:blue; } /*權值為10*/p span.para { color:purple; } /*權值為1+1+10=12*/#myNote .notePage p { color:yellow; } /*權值為100+10+1=111*/

多重樣式

如果某些屬性在不同的樣式表中被同樣的選擇器定義，且權值相同，那麼屬性值改遵循哪一個呢？

一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。

瀏覽器默認樣式
外部樣式表
內部樣式表（位於 head 標籤內部）
內聯樣式（在 HTML 元素內部）

因此，內聯樣式（在 HTML 元素內部）擁有最高的優先權，也可以理解為離HTML元素越近的樣式，擁有越高的優先權。

!important 規則例外

當 !important規則被應用在一個樣式聲明中時，該樣式聲明會覆蓋CSS中任何其他的聲明，無論它處在聲明列表中的哪裡。!important規則還是與優先順序毫無關係。但是使用!important不是一個好習慣，因為它改變了你樣式表本來的級聯規則，從而使其難以調試。

p { color: red !important;}

文本樣式 (「text」)

通過CSS的Text屬性，你可以改變頁面中文本的顏色、字元間距、對齊文本、裝飾文本、對文本進行縮進等等。

font-family (字體)

我們可以通過CSS為元素內文本設置字體
在這裡需要注意，如果瀏覽者電腦里有你設置的字體，字體才能正常顯示。如果沒有就顯示瀏覽器默認字體。
代碼示例：body{ font-family:"微軟雅黑"; } body{ font-family:"Microsoft Yahei"; }

color （顏色）

顏色屬性被用來設置文字的顏色。
代碼示例：h1 { color: red; } /* h1字體顏色設置為紅色 */

代碼示例：p { font-size: 12px; } /* p字體大小設置為12px */ （CSS中使用的單位大小，會在後面介紹）

font-weight (粗體)

使用font-weight屬性，我們可以把字體加粗。
代碼示例：span { font-weight: bold; } /* 把span內的字體加粗 */

font-style (斜體)

使用font-weight屬性，我們可以把字體傾斜。
代碼示例：a { font-style: italic; }

text-decoration: underline (下劃線)

把元素的text-decoration屬性設置為underline，我們可以給元素內文本加上下劃線。
#underSpan { text-decoration: underline; } /* 為class屬性為「underSpan」的元素內文本加上一條下劃線 */

text-decoration: line-through (刪除線)

元素的text-decoration屬性設置為line-through，我們可以給元素內文本加上刪除線。
代碼示例：#deleteSpan { text-decoration: line-through; } /* 為class屬性為「deleteSpan」的元素內文本加上一條刪除線 */

text-indent (縮進)

有的時候我們想在段落開始前加兩個空格，用text-indent屬性可以實現。
代碼示例：p {text-indent: 2em;} ( 2em的意思就是文字的2倍大小。)

line-height (行間距 / 行高)

通過line-height屬性，我們可以為段落設置行間距。
代碼示例：p { ine-height: 1em; } 這句代碼意思就是說行高為文字大小1倍，也就是相同。那麼行與行之間就沒有間隙了。
代碼示例：p { line-height: 2em; }這句代碼意思就是說行高為文字大小2倍。

letter-spacing (字間距 / 字母間距)

通過letter-spacing屬性，我們可以為字與字之間設置距離。
代碼示例：p { line-spacing: 10px; } 這句代碼意思是，每個字母或者文字之間距離為10px。

text-align（文本排列）

text-align屬性可以為塊級元素中的文本、圖片設置對齊方法。( 塊級元素這個概念會在後面講 )
文本可居中或對齊到左或右,兩端對齊。( "left", "right", "center" )
代碼示例：h1{ text-align: center; }

文本簡寫屬性

我們可以講上面這些屬性全部簡寫到font屬性里。

body{ font-style:italic; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋體",sans-serif;}

就可以縮寫成：

body{ font:italic bold 12px/1.5em "宋體",sans-serif; }

可以按順序設置如下屬性：

font-style
font-variant
font-weight
font-size/line-height
font-family

使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性

其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用默認值。

在縮寫時 font-size 與 line-height 中間要加入「/」斜扛。

小練習

請在CodePen裡面設置如下樣式。

開頭一個<h1>元素，居中排列。
元素字體為「微軟雅黑」。
元素字體顏色為「藍色」。
元素字體大小為「15px」。
元素段落開頭「2em」縮進。
元素行高為「1.5em」。
元素字間距為「2px」。
其中包含一個元素設置為「加粗」字體。
其中包含一個元素設置為「斜體」字體。
其中包含一個元素文字有一條下劃線。
其中包含一個元素文字有一條刪除線。

這是我的示例，可以作為參考。

背景樣式 ("background")

CSS 背景屬性用於定義HTML元素的背景。

background-color : 設置元素的背景顏色。
background-image : 設置元素的背景圖像。
background-repeat : 設置背景圖像是否及如何重複。
background-position : 設置背景圖像的起始位置。
background-attachment : 背景圖像是否固定或者隨著頁面的其餘部分滾動。

那麼下面我們結合實例分別來講解一下每個屬性的用法：

background-color

background-color 屬性定義了元素的背景顏色。

h1 { background-color: green;}p { background-color: rgb(0,0,255);}a { background-color: #ffff00;}

background-image

background-image 屬性描述了元素的背景圖像。

默認情況下，背景圖像進行平鋪重複顯示，以覆蓋整個元素實體。

body { background-image: url("http://p2fuh27b9.bkt.clouddn.com/18-1-13/17000740.jpg");}

默認情況下圖片會這樣排列，很多時候我們是不希望這樣的，所有就需要設置background-repeat屬性

background-repeat

該屬性的屬性值說明如下：

repeat：背景圖像將向垂直和水平方向重複。這是默認
repeat-x：只有水平位置會重複背景圖像
repeat-y：只有垂直位置會重複背景圖像
no-repeat：background-image不會重複
inherit：指定background-repea屬性設置應該從父元素繼承

大家可以在CodePen裡面嘗試一下每個屬性值所帶來的不同效果。

background-position

background-position 屬性改變圖像在背景中的位置

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

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

其次，可以使用長度值，如 100px 或 5cm；

最後也可以使用百分數值。不同類型的值對於背景圖像的放置稍有差異。

關鍵字

圖像放置關鍵字最容易理解的作用就像其名字的意義。
例如，top left 使圖像放置在元素內邊距區的左上角。
只要保證不超過兩個關鍵字：一個對應水平方向，另一個對應垂直方向，那麼你可以設置位置關鍵字以任何順序出現。（關鍵字前後順序無所謂）
如果只有一個關鍵字，則會默認另一個關鍵字為 center。（例：：「center = center center」，「top = top center 或 center top」）
如果希望每個段落的中部上方出現一個圖像，只需聲明 background-position:top;其中水平關鍵字默認為 center。

百分數值

百分數值的表現方式更為複雜。假設你希望用百分數值將圖像在其元素中居中，你可以按照下面的代碼進行設置background-position:50% 50%;
圖像中心與其元素的中心對齊，如果你想把一個圖像放在水平方向 2/3、垂直方向 1/3 處，可以這樣聲明：background-position:66% 33%;

長度值

長度值解釋的是圖像左上角與元素內邊距左上角的偏移距離。（內邊距會在後面「盒模型」部分講解）
比如，如果設置值為 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上。

background-attachment

background-attachment設置背景圖像是否固定或者隨著頁面的其餘部分滾動。

屬性值:

scroll：背景圖片隨頁面的其餘部分滾動。這是默認
fixed：背景圖像是固定的
inherit：指定background-attachment的設置應該從父元素繼承
local：背景圖片隨滾動元素滾動

background-repeat:no-repeat;background-attachment:scroll; /* 默認值，不設置的情況下就是這個值。背景圖片隨頁面的其餘部分滾動。*/

background-repeat:no-repeat;background-attachment:fixed;\背景圖像是固定的。

背景簡寫屬性

在以上實例中我們可以看到頁面的背景樣式可以通過很多不同屬性來控制。

為了簡化這些屬性的代碼，我們可以將這些屬性合併在同一個屬性中.

背景顏色的簡寫屬性為 "background":

body { background: #ffffff url(img_tree.png) no-repeat right top; }

當使用簡寫屬性時，屬性值的順序為：:

background-color
background-image
background-repeat
background-attachment
background-position

以上屬性無需全部使用，你可以按照頁面的實際需要使用。

小練習

請在CodePen中，試著做下列練習。

把一個元素背景設置為藍色。
在另一個元素上，把一張圖片設置為背景。
圖片不重複
圖片不隨段落滾動而滾動。
圖片位於段落背景中上部。

這是我的示例，可以作為參考。

顏色值

大家可能注意到了，在前面寫顏色屬性值的時候，我用了幾種不同的寫法。

CSS中，顏色值通常以以下方式定義: （不區分大小寫）

顏色名稱 : 這種是我們最熟悉的，就是想要什麼顏色就寫什麼顏色的英文就好了。（例：「red」，「green」）
RGB顏色表示法 : 就是紅(R:red),綠(G:green),藍(B:blue),，這三原色混合後呈現出的顏色，其中每種顏色的取值為0~255。（例：「rgb(255,0,0)」，「rgb(0,255,0)」）
RGB百分比顏色表示法 ：就是利用百分比來表示RGB顏色，其中RGB中的0就代表百分比中的0%，RGB中的255就代表百分比中的100%。（例：「rgb(0%, 0%, 100%)」，「rgb(0%, 100%, 0%)」）
16進位顏色表示法 : 就是使用三對十六進位數分別表示RGB中的三原色。

比如「#125AFF」，等價於rgb(18,90,255)。
16進位與十進位的對照關係（1到9和十進位一樣，之後 A - 10, B - 11, C - 12, D - 13, E- 14, F - 15）。如果16進位數字為「D3」，那麼它對應的十進位數字為 13 x 16 + 3 = 211。
當 16進位顏色表示法中的兩個表示顏色值的數字一樣的時候可以簡寫，比如「color:#ff0000」，就可以簡寫為「color:#f00」。

在這裡 16進位顏色對照表可以很方便查看你想要的顏色的16進位代碼。

長度值

總結一下，目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。

像素

像素為什麼是相對單位呢？因為像素指的是顯示器上的小點（CSS規範中假設「90像素=1英寸」）。實際情況是瀏覽器會使用顯示器的實際像素值有關，在目前大多數的設計者都傾向於使用像素（px）作為單位。

就是元素給定字體的 font-size 值，如果元素的 font-size 為 14px ，那麼 1em = 14px；

但當給 font-size 設置單位為 em 時，此時計算的標準以其父元素的 font-size 為基礎。

百分比

p { font-size:12px; line-height:130%; }

設置行高（行間距）為字體的 130%（12px * 1.3 = 15.6px）。

好啦，今天的教程就告一段落啦。下一篇教學中，我會介紹CSS的盒模型，布局，以及一些CSS實用小技巧。

如果喜歡的話就點個關注吧！謝謝各位的支持！