從零開始學 Web 之 CSS（一）選擇器

時間 2019-11-17

標籤開始 web css 選擇器欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公衆號，歡迎你們訂閱關注。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！css

1、CSS概念

一、什麼是 CSS？

CSS 全稱爲 Cascading Style Sheets，中文翻譯爲「層疊樣式表」，簡稱 CSS 樣式表，因此稱之爲層疊樣式表（Cascading Stylesheet）簡稱 CSS。在網頁製做時採用 CSS 技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分，或者頁數不一樣的網頁的外觀和格式。html

二、CSS 的做用

簡單地來說，CSS 能對你製做的網頁進行佈局、顏色、背景、寬度、高度、字體進行控制，讓網頁按您的美工設計佈局的更加美觀漂亮。樣式是用來控制頁面外觀、設置元素對象屬性的工具，使用樣式可以使頁面產生各類特殊的效果。前端

三、樣式表書寫位置

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* 樣式表內容 */
    </style>
</head>

2、選擇器

選擇器是一個選擇誰（標籤）的過程。瀏覽器

選擇器{屬性:值; 屬性:值; ......}

解釋	屬性：值
寬	width: 20px;
高	height: 20px;
背景顏色	background-color: red;
文字大小	font-size: 24px;
內容的水平對齊方式	text-align: left center right
首行縮進(1em = 一個漢字的長度16px)	text-indent: 2em;
文字顏色	color: red;

一、基礎選擇器

a. 標籤選擇器

標籤{屬性：值;}

特色：標籤選擇器定義以後，會將頁面全部的元素都執行這個標籤樣式。服務器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            font-size: 50px;
            color: red
        }
    </style>
</head>
<body>
    <div>等你下課</div>
</body>
</html>

顏色的顯示方式工具

直接寫顏色的名稱（好比：red，green等）
十六進制顯示顏色

（#000000; 前2爲表明紅色，中間2位表明綠色，後邊2位表明藍色。 PS： #EEE == #EEEEEE； #333 == #333333）佈局

rgb(120, 120, 120)
A表明alpha 不透明度，值 0~1（好比：rgb(120,120,120. 0.5)）PS：不透明度也可使用：opacity:0.2; 來設置。

b. 類選擇器（重點）

.自定義類名{屬性:值;  屬性:值; }

一、誰調用，誰生效。post

二、一個標籤能夠調用多個類選擇器。多個標籤能夠調用同一個類選擇器。學習

類選擇器命名規則字體

不能用純數字或者數字開頭來定義類名；
不能使用特殊符號或者特殊符號開頭（_ 除外）來定義類名；
不建議使用漢字來定義類名；
不推薦使用屬性或者屬性的值來定義類名。

類選擇器經常使用的命名

c. ID選擇器

#自定義名稱{屬性:值;}

特色：
一、一個 ID 選擇器在一個頁面只能使用一次。若是使用2次或者2次以上，不符合 w3c 規範，JS 調用會出問題。
二、一個標籤只能使用一個 ID 選擇器。
3.一個標籤能夠同時使用類選擇器和 ID 選擇器。

d. 通配符選擇器

*{屬性:值;}

特色：給全部的標籤都使用相同的樣式。
PS：★不推薦使用，增長瀏覽器和服務器負擔。

二、複合選擇器

兩個或者兩個以上的基礎選擇器經過不一樣的方式鏈接在一塊兒。

a. 交集選擇器

標籤+類（ID）選擇器{屬性：值；}

特色：即要知足使用了某個標籤，還要知足使用了類選擇器或者ID選擇器。

b. 後代選擇器（重點）

選擇器+空格+選擇器{屬性：值;}

後代選擇器首選要知足包含（嵌套）關係。

父集元素在前邊，子集元素在後邊。

特色：無限制隔代。（下面都會生效）

只要能表明標籤，標籤、類選擇器、ID選擇器自由組合。

c. 子代選擇器

選擇器>選擇器{屬性:值;}

選中直接下一代元素，下下一代就選不中了。

d. 並集選擇器

選擇器+，+選擇器+，選擇器{屬性:值;}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。