Web前端開發 CSS樣式之CSS選擇器

2021-10-02 12:10:59 字數 2324 閱讀 9282

css選擇器可分為標籤選擇器、類別選擇器、id選擇器,這裡的三種型別主要針對內嵌樣式和單獨檔案樣式而言

正文段落

標籤選擇器會作用用該檔案的所有同種標籤,同種標籤需要定義不通過的樣式時可通過下列的型別來定義

類別型別的選擇器在定義的時候,它的名字點開頭,後面帶有的樣式名稱,如測試**中head標籤內的「.one」,樣式名稱可以自行根據含義來進行定義,比如下列**中把類別1定義成one,類別2定義成two

樣式的引用,我們是在對應的要作用的標籤之內,採用它的class屬性來進行類別樣式的引用,給它設定的屬性的取值,就是類別樣式的名稱,而且要注意這個時候要把點去掉,如body標籤內p標籤class屬性的值為」one「

類別1類別1

類別2類別2

段落中的普通文字

可以看到:

body內引用了類別選擇器的的p標籤顯示出了對應類別的畫素大小(圖中的類別1和類別2),

沒有引用類別選擇器的p標籤顯示出了標籤選擇器的畫素大小(圖中」段落中的普通文字「)

id型別的選擇器在定義的時候,除了它的名字以#開頭外,其餘同類別選擇器

id選擇器樣式的引用唯一與類別選擇器不同是的將類別選擇器的class改為id,且每個標籤的id屬性值唯一

文字1文字2

可以看到:文字1引用了名為one的id樣式,文字2引用了名為two的id樣式

id選擇器具有唯一性,它樣式被定義出來,它在當前頁面的html**裡面,要被唯一的引用一次;

而類別型別的祥式,它可以多次被引用,作用於多個網頁元素上面。

選擇器宣告方法有巢狀宣告、集體宣告、全域性宣告、混合宣告

比如說當前我們想將段落文字當中的某一部分文字讓它採取單獨的樣式時,可以考慮用巢狀宣告的方法

天使投資是投資方式的一種

p標籤空格隔開span標籤,它就表示個巢狀的關係,p標籤內部的span標籤會出現定義的樣式

集體宣告是指多個樣式統一宣告成一種樣式,當然也可以引用型別選擇器達到同樣效果

p標籤空格隔開span標籤,它就表示個巢狀的關係,p標籤內部的span標籤會出現定義的樣式

全域性宣告是指無論是什麼樣的標籤或者什麼樣的元素,都具有相同的樣式

用乙個星號作為樣式的名字

無論是類別型別的樣式,還是id型別的樣式等等,這些樣式我們可以混合的疊加在一起,作用在某個元素上

這裡的文字,18px紅色,右對齊

這裡的文字,18px黃色,左對齊

這裡的文字,18px黃色,左對齊,有背景色

web前端 CSS樣式

一 樣式 a css cascading style sheet 層疊樣式表 b 樣式的引入方式 行內樣式 內容 內部樣式 在頁面頭部 外部樣式 在頁面頭部以link標籤鏈入 c 樣式的基本語法 1.選擇器 2.基本選擇器的種類 1.標籤選擇器 標籤名稱 同名標籤自動響應 2.類選擇器 類選擇器名稱...

web前端之CSS樣式書寫方法

回顧之前寫的內容 1.認識編譯軟體和html 2.html中的標籤和特殊字元 3.html中的頭部標籤和常用標籤 4.超連結 錨鏈結和功能性鏈結 之前介紹過修飾網頁需要用到css樣式,但是在 寫css樣式呢?這篇帖子就介紹如何書寫。本篇帖子的目錄 1.內部css樣式 書寫 2.外部css樣式 書寫 ...

前端知識之css樣式

前端之css樣式 css注釋 css的幾種引入方式 內部樣式 外部樣式 推薦使用 css選擇器 組合選擇器 屬性選擇器 根據標籤中屬性的具體值給定樣式 div title hello 分組和巢狀 不常用的選擇器 偽類選擇器 visited 已訪問的鏈結 hover 滑鼠移動到鏈結上才改變樣式 act...