程式設計師都必掌握的前端教程之CSS基礎教程（上）

2021-10-24由 IT管理局發表于科技

閱讀本文約需要10分鐘，您可以先關注我們，避免下次無法找到。

本篇文章成哥繼續帶大家來學習前端教程之CSS（層疊樣式表），它一般被用來對網頁的樣式進行設定（如頁面佈局、顏色、字型等），可以說一個網頁是否美觀協調很大程度取決於CSS樣式的設計。下面我們就一起來學習下吧！

01 CSS簡介

（1）概述

CSS 表示層疊樣式表，定義如何渲染 HTML 標籤，設計網頁顯示效果，它由 W3C 定義和維護。

（2）語法

CSS的語法主要由兩部分構成，分別為選擇器與樣式規則，樣式規則也是由兩部分構成分別為屬性名稱與屬性值。具體如下所示：

CSS也有兩種註釋方式，一種是單行註釋一種為多行註釋，具體如下

1。 /* 我是單行註釋，為當前HTML頁面的div模組設定樣式*/ 2。 div { 3。 color： red； 4。 font-size： 10px； 5。 } 6。 7。 /* 我是多行註釋，註釋內容如下 8。 p { 9。 background-color： #46a6ff； 10。 } 11。 */

02 CSS標籤應用

將CSS的樣式應用到指定標籤上主要有三種方式：

1）行內式

行內式就是將樣式設定直接寫在標籤的屬性處，該方法在這三種方式中優先順序最高，編寫方便，但不能複用，在實際開發過程中一般不推薦該方法。行內式的編寫具體如下所示

1。 <！—— 行內式的樣式編寫 ——> 2。成哥的CSS教程

2）head標籤中應用

該方式就是將CSS寫在head標籤中的style標籤內，該方法可以複用於當前HTML中所有的標籤，其優先順序在三種方式中排第二僅次於行內式，在實際開發過程中比較推薦該編寫方法。head中使用具體示列如下

1。 <！DOCTYPE html> 2。 3。 4。 14。 15。 16。

成哥前端教程系列

17。

CSS教程

18。 19。

3）CSS檔案定義

該方法將所有的樣式放在一個或多個以。CSS 為副檔名的外部樣式表文件中，透過 link 標籤將外部樣式表文件連結到 HTML 文件中。該方法可以複用在多個HTML頁面中，其優先順序也是三種方式的最低的，在實際開發過程中比較推薦該方法。其具體示列如下：

1。 <！DOCTYPE html> 2。 3。 4。 <！—— link中的href用於指定css檔案的路徑 ——> 5。 6。 7。 8。

成哥前端教程系列

9。

CSS教程

10。 11。

03 CSS選擇器

CSS的基礎選擇器具體如下表所示

下面我們對上表常用的選擇器進行示列演示

（1）標籤選擇器

標籤選擇器就是在HTML中找到所有指定標籤，如查詢h1、p、span標籤等，具體示列如下

1。 <！DOCTYPE html> 2。 3。 4。 <！—— 這邊注意如果不設定UTF-8編碼在遊覽器中渲染中文會出現亂碼 ——> 5。 6。 18。 19。 20。

成哥前端教程系列

21。

CSS教程

22。 23。

（2）Class選擇器

Class選擇器是在HTML中找到所有class屬性值匹配的標籤，具體示列如下

1。 <！DOCTYPE html> 2。 3。 4。 <！—— 這邊注意如果不設定UTF-8編碼在遊覽器中渲染中文會出現亂碼 ——> 5。 6。 14。 15。 16。成哥前端教程系列 17。 CSS教程

18。 19。

（3）ID選擇器

ID選擇器是在HTML中找到與指定id匹配的標籤，id標籤在html頁面中需唯一，如果你不小心設定成了重複值，在執行時並不會報錯，且這兩個相同的id的標籤樣式也是一致的。id選擇器具體示列如下：

1。 <！DOCTYPE html> 2。 3。 4。 <！—— 這邊注意如果不設定UTF-8編碼在遊覽器中渲染中文會出現亂碼 ——> 5。 6。 14。 15。 16。成哥前端教程系列 17。 18。

（4）標籤Class選擇器

標籤Class選擇器用於選擇標籤的Class名稱為指定名稱的標籤，具體示例如下

1。 <！DOCTYPE html> 2。 3。 4。 <！—— 這邊注意如果不設定UTF-8編碼在遊覽器中渲染中文會出現亂碼 ——> 5。 6。 13。 14。 15。我會變紅

16。我不會class名稱不一致

17。我會變紅

18。我不會標籤名稱不一致

19。 20。

（5）巢狀選擇器

巢狀選擇器是在指定標籤內查詢需要應用樣式的標籤，具體如下：

1。 <！DOCTYPE html> 2。 3。 4。 <！—— 這邊注意如果不設定UTF-8編碼在遊覽器中渲染中文會出現亂碼 ——> 5。 6。 13。 14。 15。

16。

我會變色

17。我不會變色 18。

19。 20。

（6）子標籤選擇器

子標籤選擇器用於選擇指定標籤內所有子標籤，具體示列如下

1。 <！DOCTYPE html> 2。 3。 4。 <！—— 這邊注意如果不設定UTF-8編碼在遊覽器中渲染中文會出現亂碼 ——> 5。 6。 13。 14。 15。

16。

子標籤1會變色

17。

子標籤2會變色

18。 19。

孫子標籤1不會變色

20。 21。

22。 23。

（7）屬性選擇器

屬性選擇器有兩種型別，一種是隻查屬性名稱，一種是同時查屬性名稱及其對應的屬性值，具體示列如下

1。 <！DOCTYPE html> 2。 3。 4。 <！—— 這邊注意如果不設定UTF-8編碼在遊覽器中渲染中文會出現亂碼 ——> 5。 6。 18。 19。 20。

21。會變紅色

22。會變紅色

23。 24。會變藍色

25。不會變色

26。 27。

28。 29。

（8）分組選擇器

分組選擇器就是將不同標籤需要設定成相同屬性放入一個組進行相關樣式設定，具體示列如下

1。 <！DOCTYPE html> 2。 3。 4。 <！—— 這邊注意如果不設定UTF-8編碼在遊覽器中渲染中文會出現亂碼 ——> 5。 6。 13。 14。 15。

我是紅色

16。

我是紅色

17。我是紅色 18。 19。

04 總結

至此我們《CSS基礎教程上篇》就講完了，下篇內容主要講解CSS屬性樣式及偽類等相關知識，敬請期待。最後如果喜歡本篇文章不要忘了點贊、關注與轉發哦！

-END-

@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等型別的原創內容。期待與你相遇，和你一同成長。

文章推薦：

程式設計師都必掌握的前端教程之HTML基礎教程（上）

IT工程師都需要掌握的容器技術之掃盲篇

TAG：標籤選擇器 CSS Color 10

相關推薦