當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

03-CSS样式表和选择器

發布時間：2023/12/14 CSS 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 03-CSS样式表和选择器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文主要內容

CSS概述
CSS和HTML結合的三種方式：行內樣式表、內嵌樣式表、外部樣式表
CSS四種基本選擇器：標簽選擇器、類選擇器、ID選擇器、通用選擇器
CSS幾種擴展選擇器：后代選擇器、交集選擇器、并集選擇器
CSS樣式優先級

前言

現在的互聯網前端分三層：

HTML：超文本標記語言。從語義的角度描述頁面結構。
CSS：層疊樣式表。從審美的角度負責頁面樣式。
JS：JavaScript 。從交互的角度描述頁面行為。

CSS 概述

CSS：Cascading Style Sheet，層疊樣式表。CSS的作用就是給HTML頁面標簽添加各種樣式，定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。

css的最新版本是css3，我們目前學習的是css2.1。因為css3和css2.1不矛盾，必須先學2.1然后學3。

接下來我們要講一下為什么要使用CSS。

HTML的缺陷：

不能夠適應多種設備

要求瀏覽器必須智能化足夠龐大

數據和顯示沒有分開

功能不夠強大

CSS 優點：

使數據和顯示分開

降低網絡流量

使整個網站視覺效果一致

使開發效率提高了（耦合性降低，一個人負責寫html，一個人負責寫css）

比如說，有一個樣式需要在一百個頁面上顯示，如果是html來實現，那要寫一百遍，現在有了css，只要寫一遍。現在，html只提供數據和一些控件，完全交給css提供各種各樣的樣式。

CSS的重點知識點

盒子模型、浮動、定位

CSS 整體感知

我們先來看一段簡單的css代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>p{color:red;font-size: 30px;text-decoration: underline;font-weight: bold;text-align: center;font-style: italic;}h1{color:blue;font-size: 50px;font-weight: bold;background-color: pink;}</style> </head> <body><h1>我是大標題</h1><p>我是內容</p></body> </html>

解釋如下：

我們寫css的地方是style標簽，就是“樣式”的意思，寫在head里面。后面的課程中我們將知道，css也可以寫在單獨的文件里面，現在我們先寫在style標簽里面。

如果在sublime中輸入<st或者<style然后按tab鍵，可以自動生成的格式如下：（建議）

type表示“類型”，text就是“純文本”，css也是純文本。

但是，如果在sublime中輸入st或者style然后按tab鍵，可以自動生成的格式如下：（不建議）

css對換行不敏感，對空格也不敏感。但是一定要有標準的語法。冒號，分號都不能省略。

CSS語法

語法格式：（其實就是鍵值對）

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

或者可以寫成：

選擇器{k:v;k:v;k:v;k:v; } 選擇器{k:v;k:v;k:v;k:v; }

解釋：

選擇器代表頁面上的某類元素，選擇器后一定是大括號。
屬性名后必須用冒號隔開，屬性值后用分號（最后一個屬性可以不用分號）。
屬性名和冒號之間最好不要有空格（經驗）。
如果一個屬性有多個值的話，那么多個值用空格隔開

舉例：

p{color: red;}

完整版代碼舉例：

效果：

css代碼的注釋

格式：

注意：CSS只有/* */這種注釋，沒有//這種注釋。而且注釋要寫在<style>標簽里面才算生效哦。

接下來，我們要開始真正地講css的知識咯。

css怎么學？CSS有兩個知識部分：
1）選擇器，怎么選；
2）屬性，樣式是什么

CSS的一些簡單常見的屬性

我們先來接觸CSS的一些簡單常見的屬性，因為接下來需要用到。后期會專門用一篇文章來寫CSS的屬性。

以下屬性值中，括號中的內容表示sublime中的快捷鍵。

字體顏色：（c）

color:red;

color屬性的值，可以是英語單詞，比如red、blue、yellow等等；也可以是rgb、十六進制(后期詳細講)。

字號大小：（fos）

font-size:40px;

font就是“字體”，size就是“尺寸”。px是“像素”。單位必須加，不加不行。

背景顏色：（bgc）

background-color: blue;

background就是“背景”。

加粗：（fwb）

font-weight: bold;

font是“字體” weight是“重量”的意思，bold粗。

不加粗：（fwn）

font-weight: normal;

normal就是正常的意思。

斜體：（fsi）

font-style: italic;

italic就是“斜體”。

不斜體：（fsn）

font-style: normal;

下劃線：（tdu）

text-decoration: underline;

decoration就是“裝飾”的意思。

沒有下劃線：（tdn）

text-decoration:none;

PS：css沒啥難的，就是要把屬性給記憶準確。

CSS和HTML結合的方式（樣式表）

CSS和HTML結合的方式，其實就是問你css的代碼放在哪里比較合適。CSS代碼理論上的位置是任意的，但通常寫在<style>標簽里。只要是<style>標簽里的代碼，那就是css代碼，瀏覽器就是這樣來進行解析的。

CSS和HTML的結合方式有3種：

行內樣式：在某個特定的標簽里采用style屬性。范圍只針對此標簽。
內嵌樣式表：在頁面的head里采用<style>標簽。范圍針對此頁面。
引入外部樣式表css文件的方式。這種方式又分為兩種：
- 1、采用<link>標簽。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
- 2、采用import，必須寫在<style>標簽中，并且必須是第一句。例如：@import url(a.css) ;

兩種引入樣式方式的區別：外部樣式表中不能寫標簽,但是可以寫import語句。

下面來詳細的講一講這三種方式。

1、CSS和HTML結合方式一：行內樣式

采用style屬性。范圍只針對此標簽適用。

該方式比較靈活，但是對于多個相同標簽的同一樣式定義比較麻煩，適合局部修改。

舉例：

<p style="color:white;background-color:red">我不會就這樣輕易的狗帶</p>

效果：

2、CSS和HTML結合方式二：內嵌樣式表

在head標簽中加入<style>標簽，對多個標簽進行統一修改，范圍針對此頁面。

該方式可以對單個頁面的樣式進行統一設置，但對于局部不夠靈活。

舉例：

3、CSS和HTML結合方式三：引入外部樣式表css文件

引入樣式表文件的方式又分為兩種：

（1）采用<link>標簽。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
（2）采用import，必須寫在<style>標簽中，并且必須是第一句。例如：@import url(a.css) ;

兩種引入樣式方式的區別：外部樣式表中不能寫標簽，但是可以寫import語句。

具體操作如下：
我們先在html頁面的同級目錄下新建一個a.css文件，那說明這里面的代碼全是css代碼，此時就沒有必要再寫<style>標簽這幾個字了。
a.css的代碼如下：

p{border: 1px solid red;font-size: 40px; }

上方的css代碼中，注意像素要帶上px這個單位，不然不生效。
然后我們在html文件中通過<link>標簽引入這個css文件就行了。效果如下：

這里再講一個補充的知識：link標簽的rel屬性
<link>標簽的rel屬性：
其屬性值有以下兩種：

stylesheet：定義的樣式表
alternate stylesheet：候選的樣式表

看字面意思可能比較難理解，我們來舉個例子，一下子就明白了。
舉例：

現在定義我們來定義3種樣式表：
a.css：定義一個實線的黑色邊框

div{width: 200px;height: 200px;border: 3px solid black; }

ba.css：藍色的虛線邊框

div{width: 200px;height: 200px;border: 3px dotted blue; }

c.css：來個背景圖片

div{width: 200px;height: 200px;border: 3px solid red;background-image: url("1.jpg"); }

然后我們在html文件中引用三個樣式表：

上面引入的三個樣式表中，后面兩個樣式表作為備選。注意備選的樣式表中，title屬性不要忘記寫，不然顯示不出來效果的。現在來看一下效果：（在IE中打開網頁）

CSS的四種基本選擇器

CSS選擇器：就是指定CSS要作用的標簽，那個標簽的名稱就是選擇器。意為：選擇哪個容器。

CSS的選擇器分為兩大類：基本選擇題和擴展選擇器。

基本選擇器：

標簽選擇器：針對一類標簽
ID選擇器：針對某一個特定的標簽使用
類選擇器：針對你想要的所有標簽使用
通用選擇器（通配符）：針對所有的標簽都適用（不建議使用）

下面來分別講一講。

1、標簽選擇器：選擇器的名字代表html頁面上的標簽

標簽選擇器，選擇的是頁面上所有這種類型的標簽，所以經常描述“共性”，無法描述某一個元素的“個性”。

舉例：

p{font-size:14px; }

上方選擇器的意思是說：所有的<p>標簽里的內容都將顯示14號字體。

效果：

再比如說，我想讓“生命壹號學完了安卓，繼續學前端喲”這句話中的“前端”兩個變為紅色字體，那么我可以用<span>標簽把“前端”這兩個字圍起來，然后給<span>標簽加一個標簽選擇器。

代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">span{color: red;}</style> </head> <body><p>生命壹號學完了安卓，繼續學<span>前端</span>喲</p> </body> </html>

【總結】需要注意的是：

（1）所有的標簽，都可以是選擇器。比如ul、li、label、dt、dl、input。

（2）無論這個標簽藏的多深，一定能夠被選擇上。

（3）選擇的所有，而不是一個。

2、ID選擇器：規定用#來定義

針對某一個特定的標簽來使用，只能使用一次。css中的ID選擇器以”#”來定義。

舉例：

#mytitle{border:3px dashed green; }

效果：

id選擇器的選擇符是“#”。

任何的HTML標簽都可以有id屬性。表示這個標簽的名字。這個標簽的名字，可以任取，但是：

（1）只能有字母、數字、下劃線。
（2）必須以字母開頭。
（3）不能和標簽同名。比如id不能叫做body、img、a。

另外，特別強調的是：HTML頁面，不能出現相同的id，哪怕他們不是一個類型。比如頁面上有一個id為pp的p，一個id為pp的div，是非法的！

一個標簽可以被多個css選擇器選擇：

比如，我們可以同時讓標簽選擇器和id選擇器作用于同一個標簽。如下：

然后我們通過網頁的審查元素看一下效果：

現在，假設選擇器沖突了，比如id選擇器說這個文字是紅色的，標簽選擇器說這個文字是綠色的。那么聽誰的？
實際上，css有著非常嚴格的計算公式，能夠處理沖突.

一個標簽可以被多個css選擇器選擇，共同作用，這就是“層疊式”的第一層含義（第一層含義和第二層含義，放到css基礎的第三篇文章里講）。

3、類選擇器：規定用圓點.來定義

、針對你想要的所有標簽使用。優點：靈活。

css中用.來表示類。舉例如下：

.one{width:800px; }

效果：

和id非常相似，任何的標簽都可以攜帶id屬性和class屬性。class屬性的特點：

特性1：類選擇器可以被多種標簽使用。
特性2：同一個標簽可以使用多個類選擇器。用空格隔開。舉例如下：（正確）

<h3 class="teshu zhongyao">我是一個h3啊</h3>

初學者常見的錯誤，就是寫成了兩個class。舉例如下：（錯誤）

<h3 class="teshu" class="zhongyao">我是一個h3啊</h3>

類選擇器使用的舉例：

類選擇器的使用，能夠決定一個人的css水平。

比如，我們現在要做下面這樣一個頁面：

正確的思路，就是用所謂“公共類”的思路，就是我們類就是提供“公共服務”，比如有綠、大、線，一旦攜帶這個類名，就有相應的樣式變化。對應css里的代碼如下：

然后讓每個標簽去選取自己想要用的類選擇器：

也就是說：

（1）不要去試圖用一個類名，把某個標簽的所有樣式寫完。這個標簽要多攜帶幾個類，共同完成這個標簽的樣式。

（2）每一個類要盡可能小，有“公共”的概念，能夠讓更多的標簽使用。

問題：到底用id還是用class？

答案：盡可能的用class，除非極特殊的情況可以用id。

原因：id是js用的。也就是說，js要通過id屬性得到標簽，所以css層面盡量不用id，要不然js就很別扭。另一層面，我們會認為一個有id的元素，有動態效果。

舉例如下：

上圖所示，css和js都在用同一個id，會出現不好溝通的情況。

我們記住這句話：類上樣式，id上行為。意思是說，class屬性交給css使用，id屬性交給js使用。

上面這三種選擇器的區別：

標簽選擇器針對的是頁面上的一類標簽。
ID選擇器是只針對特定的標簽(一個)，ID是此標簽在此頁面上的唯一標識。
類選擇器可以被多種標簽使用。

4、通配符*：匹配任何標簽

通用選擇器，將匹配任何標簽。不建議使用，IE有些版本不支持，大網站增加客戶端負擔。

效率不高，如果頁面上的標簽越多，效率越低，所以頁面上不能出現這個選擇器。

舉例：

*{margin-left:0px;margin-top:0px; }

效果：

CSS的幾種高級選擇器

高級選擇器：

后代選擇器：用空格隔開
交集選擇器：選擇器之間緊密相連
并集選擇器（分組選擇器）：用逗號隔開
偽類選擇器

下面詳細講一下這幾種高級（擴展）選擇器。

1、后代選擇器: 定義的時候用空格隔開

對于E F這種格式，表示所有屬于E元素后代的F元素，有這個樣式。空格就表示后代。

后代選擇器，就是一種平衡：共性、特性的平衡。當要把某一個部分的所有的什么，進行樣式改變，就要想到后代選擇器。

后代選擇器，描述的是祖先結構。

看定義可能有點難理解，我們來看例子吧。

舉例1：

空格就表示后代。.div1 p 表示.div1的后代所有的p。

這里強調一下：這兩個標簽不一定是連續緊挨著的，只要保持一個后代的關聯即可。也就是說，選擇的是后代，不一定是兒子。

舉例：

上方代碼的意思是說：定義了<h3>標簽中的<b>標簽中的<i>標簽的樣式。
同理：h3和b和i標簽不一定是連續緊挨著的，只要保持一個后代的關聯即可。

效果：

或者還有下面這種寫法：

上面的這種寫法，<h3>標簽和<i>標簽并不是緊挨著的，但他們保持著一種后代關系。

還有下面這種寫法：（含類選擇器、id選擇器都是可以的）

我們在開頭說了：后代選擇器，描述的是一種祖先結構。我們舉個例子來說明這句話：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">div div p{color: red;}</style> </head> <body><div><div class="div2"><div class="div3"><div class="div4"><p>我是什么顏色？</p></div></div></div></div> </body> </html>

上面css中的div div p，也能使文字的顏色變紅。通過瀏覽器的審查元素，我們可以看到 p元素的祖先列表：

講到這里，我們再提一個sublme的快捷鍵。

在sublime中輸入p#haha，按tab鍵后，會生成<p id="haha"></p>。

在sublime中輸入p.haha，按tab鍵后，會生成<p class="haha"></p>。

2、交集選擇器：定義的時候緊密相連

定義交集選擇器的時候，兩個選擇器之間緊密相連。一般是以標簽名開頭，比如div.haha，再比如p.special。

如果后一個選擇器是類選擇器，則寫為div.special；如果后一個選擇器id選擇器，則寫為div#special。

來看下面這張圖就明白了：

h3.special{color:red; }

選擇的元素要求同時滿足兩個條件：必須是h3標簽，然后必須是special標簽。

舉例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>交集選擇器測試</title><style type="text/css">h3.special {color: red;}</style> </head> <body><h3 class="special zhongyao">標題1</h3><h3 class="special">我也是標題</h3><p>我是段落</p> </body> </html>

效果如下：

注意，交集選擇器沒有空格。所以，沒有空格的div.red（交集選擇器）和有空格的div .red（后代選擇器）不是一個意思。

交集選擇器可以連續交：（一般不要這么寫）

h3.special.zhongyao{color:red; }

上面這種寫法，是 IE7 開始兼容的，IE6 不兼容。

3、并集選擇器：定義的時候用逗號隔開

三種基本選擇器都可以放進來。

舉例：

p,h1,#mytitle,.one{color:red; }

效果：

一些 CSS3 選擇器

所有的css3選擇器，我們放在HTML5和CSS3課上介紹。暫時先接觸一部分。

PS：我們可以用IETester這個軟件測一下CSS在各個版本IE瀏覽器上的顯示效果。

瀏覽器的兼容性問題

IE：微軟的瀏覽器，隨著操作系統安裝的。所以每個windows都有IE瀏覽器。各版本如下：

windows xp 操作系統安裝的IE6
windows vista 操作系統安裝的IE7
windows 7 操作系統安裝的IE8
windows 8 操作系統安裝的IE9
windows10 操作系統安裝的edge

瀏覽器兼容問題，要出，就基本上就是出在IE6、7身上，這兩個瀏覽器是非常低級的瀏覽器。

為了測試瀏覽器CSS 3的兼容性，我們可以在網上搜"css3 機器貓"關鍵字，然后在不同的瀏覽器中打開如下鏈接：

http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/

測試結果如下：

我們可以在百度統計里查看瀏覽器的市場占有率：

IE9 5.94%
IE8 21.19%
IE7 4.79%
IE6 4.11%

我們可以在http://html5test.com/results/desktop.html中查看

我們要知道典型的IE6兼容問題（面試要問），但是做項目我們兼容到IE8即可。不解決IE8以下的兼容問題，目的在于：培養更高的興趣和眼光，別天天的跟IE6較勁。

我們可以用「IETester」軟件看看css在各個瀏覽器中的顯示效果。

1.子代選擇器，用符號>表示

IE7開始兼容，IE6不兼容。

div>p{color:red; }

div的兒子p。和div的后代p的截然不同。

能夠選擇：

<div><p>我是div的兒子</p></div>

不能選擇：

<div><ul><li><p>我是div的重孫子</p></li></ul></div>

2.序選擇器

IE8開始兼容；IE6、7都不兼容

設置無序列表<ul>中的第一個<li>為紅色：

設置無序列表<ul>中的最后一個<li>為紅色：

ul li:last-child{color:blue;}

序選擇器還有更復雜的用法，以后再講。

由于瀏覽器的更新需要過程，所以現在如果公司還要求兼容IE6、7，那么就要自己寫類名：

用類選擇器來選擇第一個或者最后一個：

ul li.first{color:red;}ul li.last{color:blue;}

3.下一個兄弟選擇器

IE7開始兼容，IE6不兼容。

+表示選擇下一個兄弟

上方的選擇器意思是：選擇的是h3元素后面緊挨著的第一個兄弟。

<h3>我是一個標題</h3><p>我是一個段落</p><p>我是一個段落</p><p>我是一個段落</p><h3>我是一個標題</h3><p>我是一個段落</p><p>我是一個段落</p><p>我是一個段落</p><h3>我是一個標題</h3><p>我是一個段落</p><p>我是一個段落</p><p>我是一個段落</p><h3>我是一個標題</h3>

效果如下：

這種選擇器作用不大。

總結

以上是生活随笔為你收集整理的03-CSS样式表和选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： vscode 配置 pascal环境
下一篇： html 字体图标大小,CSS ICO