大前端應用開發與架構設計-使用CSS美化Web站點(一)

07-13

來自專欄大前端應用開發與架構設計

3.1 CSS概述

CSS(Cascading Style Sheets)即層疊樣式表，是用來控制HTML頁面元素的外觀樣式(例如字體顏色、大小以及元素的定位等等)，目前最新的版本是CSS3。

網頁中使用HTML+CSS能夠實現網頁的元素與外觀樣式分離,也就是HTML只負責頁面元素以及語義部分,CSS負責頁面的外觀樣式，這也是W3C組織推薦的做法:盡量使用CSS取代HTML屬性，因為如果讓HTML既負責頁面結構，又要負責頁面樣式，那樣結構和樣式會顯得十分臃腫和混亂，可維護性和可重用性降低。

為了更加直觀的理解CSS在網站中的作用，這裡以淘寶網為例子。

帶CSS的淘寶網首頁

不帶CSS的淘寶網首頁

如何刪除樣式呢?如下圖所示

只要在開發者工具的Elements選項中刪除<header></header>標籤中的<style></style>內容即可

3.2 CSS樣式分類

CSS樣式按照書寫位置的使用方式分類有三種，分別是行內樣式，內部樣式表和外部樣式表。

3.2.1 行內樣式表

行內樣式表用於控制頁面中局部(例如某篇文章的一段內容)的內容樣式，使用方式是在標籤中定義屬性stylex="屬性:值;屬性:值;"即可，日常開發中較少使用。

行內樣式應用案例(css_row_type.html)如下所示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width_=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS行內樣式的使用</title></head><body> <h3 stylex="font-size: 24px;">江雪</h3> <p>唐代：柳宗元</p> <p stylex="font-size: 18px;"> 千山鳥飛絕，萬徑人蹤滅。</p> <p stylex="color: #ccc;">孤舟蓑笠翁，獨釣寒江雪。</p></body></html>

3.2.2 內部樣式表

內部樣式表用於控制當前頁面的內容樣式，使用方式是在<head></head>標籤內使定義<style></style>元素，然後將樣式定義寫在<style></style>元素內即可，此方式用於控制單頁面，無法實現多個頁面復用樣式。

內部樣式應用案例(css_inner_style.html)如下所示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width_=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS內部樣式</title>  <style> /* 所有的文字都使用居中的樣式 */ body{ text-align: center; } /* 使用標籤選擇器定義h3標題的樣式 */ h3{ font-size: 24px; font-weight: 700; font-family: Courier New, Courier, monospace; } p{ font-size: 18px; font-family:Segoe UI, Tahoma, Geneva, Verdana, sans-serif; line-height: 26px; } div{ color: #ccc; font-size: 14px; } </style></head><body> <h3>登鸛雀樓</h3> <div>唐代：王之渙</div> <p>白日依山盡，黃河入海流。</p> <p> 欲窮千里目，更上一層樓。</p></body></html>

3.2.3 外部樣式表

外部樣式表用於控制網站的內容樣式，使用方式是使用<link href="樣式路徑" type="text/css" rel="stylesheet"/>即可，真正實現了網頁的結構和內容樣式的分離,也便於提高復用性(即多個網頁使用同一個樣式文件)和維護性，也是日常開發中最常用的樣式使用方式。

外部樣式應用案例(css_out_type.html)如下所示

首先在web/css路徑下建立外部樣式文件(out.css)

body{ text-align: center;}h3{ color: #ff8000; font-size: 24px; font-family: Courier New, Courier, monospace;}p{ color: #0080ff; font-size: 18px; font-family: Courier New, Courier, monospace; line-height: 26px;}

然後在web/module/css/type/ 下定義css_out_type.html,完整實現如下所示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width_=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS外部樣式的使用</title></head><link rel="stylesheet" href="../../../css/out.css"><body> <h3>靜夜思</h3> <p>唐代：李白</p> <p> 床前明月光，疑是地上霜。</p> <p> 舉頭望明月，低頭思故鄉。</p> </body></html>

3.3 CSS樣式的使用規則

選擇器:{

屬性名:屬性值;

屬性名:選擇器;

}

選擇器用於指定CSS樣式作用的HTML對象，花括弧({})內是該對象設置的具體樣式
屬性和屬性值之間以「鍵值對」的形式出現
屬性是對指定的對象設置的樣式屬性，例如顏色，大小等等。
屬性和屬性值之間使用「:」連接
多個"鍵值對"之間使用「;」隔開

3.4 CSS基本選擇器

在大型門戶網站(騰訊、網易、新浪、搜狐)中，HTML元素成千上萬，如果想要修改某些元素的樣式，那麼首先必須得找到元素。在CSS中，選擇需要添加樣式的元素稱為選擇器。

3.4.1 標籤選擇器

標籤選擇器是用來更改頁面指定標籤(元素)的外觀樣式,其語法格式為

標籤名稱{

屬性名:屬性值;

}

標籤選擇器最大的優點是能快速為頁面中同類型的標籤統一樣式，同時這也是他的缺點，不能設計差異化樣式，應用案例(tag_selector.html)如下所示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width_=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>標籤選擇器的使用</title> <style> /*標籤選擇器:修改指定標籤的樣式,會更改所有指定標籤的樣式*/ p{ color: #0080ff; font-size:18px; font-family: Courier New, Courier, monospace; } </style></head><body> <h1>前端學習技術指南</h1> <hr/> <p> 主要技術棧:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup </p> <p> 開發環境:Visual Studio Code+Git+WebStorm+Chrome+Apache </p> <h3>學習編程的方法</h3> <p>看視頻、看書、寫代碼、寫博客</p> <p>與行內人交流，參加行業大會</p> <p>分析開源項目</p></body></html>

3.4.2 類選擇器

類選擇器用於解決標籤選擇器不能實現個性化樣式，其定義格式為

.類選擇器名稱{屬性名:屬性值}

如果想要在HTML標籤中使用類樣式，只需要在HTML元素的開始標籤中加上class=類型選擇器名稱即可,在定義類選擇器時命名不能使用中文，建議命名見名知意,多個單詞之間使用-隔開，應用案例(class_selector.html)如下所示。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width_=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>類選擇器的使用</title> <style> /*定義三個類選擇器，用於改變字體的顏色*/ .color-aqua{ color: aqua; } .color-chartreuse{ color: chartreuse; } .color-deepskyblue{ color: deepskyblue; } </style></head><body> <div> <h1>前端三大主流框架</h1>  <p class="color-aqua">vue</p> <p class="color-chartreuse">angular</p> <p class="color-deepskyblue">react</p> </div></body></html>

接下來結合標籤選擇器和類選擇器實現Google的Logo,應用案例(google.html)如下所示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width_=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>使用標籤和類樣式選擇器實現Google logo</title> <style> span{ font-size: 150px; font-family: Courier New, Courier, monospace; font-weight: normal; font-style:italic; } .blue{ color:blue; } .red{ color: red; } .orange{ color: orange; } .green{ color: green; } </style></head><body> <span class="blue">G</span> <span class="red">o</span> <span class="orange">o</span> <span class="blue">g</span> <span class="green">l</span> <span class="red">e</span></body></html>

在日常開發中，多類選擇器可以作用在同一個HTML元素中，以便HTML元素能夠實現更多的樣式效果，如下圖淘寶首頁所示便使用了多類選擇器

多個類選擇器使用空格隔開，類選擇器的順序不會影響頁面效果，應用案例(multi_class_selector.html)如下所示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width_=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>多個類選擇器的使用</title> <style> h3{ font-size: 24px; font-family: Courier New, Courier, monospace; color:chartreuse; } .font-size{ font-size: 14px; } .color{ color: aqua; } .font-weight{ font-weight: 700; } </style></head><body> <div> <h3>四大天王</h3>  <p class="font-family font-size color">劉德華</p> <p class="font-weight">張學友</p> <p class="font-size">黎明</p> <p class="font-family">郭富城</p> </div></body></html>

3.4.3 id選擇器

ID選擇器用於改變頁面中HTML元素中相同ID的元素的外觀樣式，其定義格式為

#ID名稱{

屬性名:屬性值;

}

應用案例(id_selector.html)如下所示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width_=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>id選擇器的使用</title> <style> #card_number{ color: #ccc; font-size: 18px; } </style></head><body> <h3>id選擇器</h3> <label 愛好:> <input type="checkbox" name="hobby" value="1">編程  <input type="checkbox" value="2" name="hobby" >旅遊  <input type="checkbox" value="3" name="hobby">登山   </label> <br /> <label> 身份證號<input type="text" id="card_number" name="card_number"></label></body></html>

ID選擇器和類選擇器的區別是當前頁面中基於HTML元素的id屬性值是唯一的，因此id選擇器的樣式只能使用一次，而類選擇器可以反覆使用。

3.4.4 通配符選擇器

通配符*用於匹配任意元素,而通配符選擇器用於設置頁面所有元素的統一樣式，通配符選擇器的格式為

* {

屬性:屬性值；

屬性:屬性值;

}

通配符選擇器應用案例(wildcardcharacter_selector.html)如下所示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width_=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>通配符選擇器</title> <style> /* 定義通配符選擇器，改變字體大小和顏色 */ *{ color: #0080ff; font-size: 18px; } </style></head><body> <h1>前端學習技術指南</h1> <hr/> <p> 主要技術棧:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup </p> <p> 開發環境:Visual Studio Code+Git+WebStorm+Chrome+Apache </p> <h3>學習編程的方法</h3> <p>看視頻、看書、寫代碼、寫博客</p> <p>與行內人交流，參加行業大會</p> <p>分析開源項目</p> </body></html>

CSS基礎選擇器中，最常用的就是類選擇器、多類選擇器、元素選擇器。id選擇器和通配符選擇器在日常開發使用較少。

3.5 CSS字體

字體樣式屬性主要用於控制字體的大小(font-size)、字體類型(font-family)、顏色(color)、加粗(font-weight)、傾斜(font-style)等外觀樣式。

font-size屬性用於控制字體的大小，通常網頁中使用的字體大小為14px+,在日常開發時盡量使用偶數(例如14，16，18)數字字型大小，如下代碼片段所示，修改h1標題的字體大小為26px。

h1{

/*設置字體大小*/ font-size: 26px;

}

font-family屬性用於設置字體，Windows系統默認是微軟雅黑，當然網頁也可以設置多個字體，字體之間使用逗號(,)隔開即可。

如果字體是中文(例如宋體)或者英文字體包含空格，#和$時必須使用引號("")括起來，例如Microsoft YaHei,Courier New, Courier, monospace，如果多個字體中包含了中文和英文字體，那麼英文字體必須在中文字體之前。

在日常開發中推薦使用系統默認的字體，那樣可以在任何瀏覽器中都能夠正確的顯示。

需要注意的是在舊版本(例如Windows XP)系統中不支持將font-family的屬性值設置為類似微軟雅黑或者宋體的中文，這裡可以使用Unicode編碼5B8B4F53和5FAE8F6F96C59ED1分別來表示宋體和微軟雅黑中文字體，這兩種字體也是最常用的中文字體。如下代碼片段所示展示了字體設置的常用案例

p{ font-family: Microsoft YaHei,Courier New, Courier, monospace,"5B8B4F53","5FAE8F6F96C59ED1" }

font-weight屬性用於設置字體的粗細，常用屬性值有normal和bold,屬性值還可以使用數字(100-900)表示,其中normal等價於400,bold等價於700。

span{ font-weight: 400; }

font-style屬性用於設置字體的風格(主要是傾斜或者不傾斜)，當屬性值為normal時表示不傾斜，當屬性值為italic時表示傾斜。

/*設置超鏈接標籤的文本加粗和傾斜*/ div a{ font-weight: 700; font-style: italic; } div em{ /*讓斜體擺正*/ font-style: normal; }

字體的應用案例(font_style.html)如下所示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width_=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>字體樣式的使用</title> <style> h1{ /*設置字體大小*/ font-size: 26px; /*設置字體顏色*/ color: aquamarine; /*設置字體*/ font-family:"微軟雅黑"; } p{ /*網頁中普遍使用14px+的字體大小*/ font-size: 14px; /*如果有多個字體，使用逗號分隔，字體名包含空格使用引號括起來*/ font-family: Microsoft YaHei,Courier New, Courier, monospace } h3{ font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif; font-size :22px; color: aqua; } /*設置div下的p標籤樣式*/ div p{ font-family: "5B8B4F53","5FAE8F6F96C59ED1"; font-size: 18px; color:red; } span{ font-weight: 400; } /*設置超鏈接標籤的文本加粗和傾斜*/ div a{ font-weight: 700; font-style: italic; } div em{ /*讓斜體擺正*/ font-style: normal; } </style></head><body> <h1>前端學習技術指南</h1> <hr/> <p> 主要技術棧:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup </p> <p> 開發環境:Visual Studio Code+Git+WebStorm+Chrome+Apache </p> <div> <h3>學習編程的方法</h3> <p>看視頻、看書、寫代碼、寫博客</p> <span>與行內人交流，參加行業大會</span> <p>分析開源項目</p> </div> <div> <h4>程序員常去的網站</h4> <a href="https://www.csdn.net">csdn</a> <a href="https://www.cnblogs.com">cnblogs</a> <a href="https://www.51cto.com">51cto</a> <a href="http://www.chinaunix.net">chinaunix</a> <a href="https://www.oschina.net">oschina</a> </div> <div> <em>斜體內容</em> </div></body></html>

在設置font屬性時可以採用一種比較簡單的寫法，如下所示

選擇器{font:font-style font-weight font-size font-family},需要注意的是屬性值順序是固定不變的,其中font-size和font-family屬性值是必須設置的。