CSS學習總結 基礎篇 CSS選擇器

2021-10-02 17:41:07 字數 2682 閱讀 6194

選擇器就是根據不同需求把不同的標籤選出來,然後針對性性的進行樣式設定

通過選擇器,我們還可以實現各種複雜的指定,同時也能大量減少樣式表的**書寫量,最終書寫出來的樣式表也會變得簡潔明瞭。

即把某個標籤選擇出來

示例**:

選擇器分為基礎選擇器和復合選擇器兩大類。

基礎選擇器就是由單個選擇器構成

基礎選擇器又可以分為標籤選擇器、類選擇器、id選擇器和通配選擇器

標籤選擇器

標籤選擇器(元素選擇器)是指用html標籤名稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的css樣式。

語法格式:

標籤名

第乙個標籤

第二個標籤

第三個標籤

第四個標籤

< style >寫在< head >標籤裡,直接引用標籤名加大括號。 是對所用使用相同標籤的內容進行樣式設定。如圖:

作用

標籤選擇器可以把某一類標籤全部選擇出來,比如所有的

標籤和所有的

標籤。優點

能快速為頁面中同型別的標籤統一設定樣式。

缺點

不能設計差異化樣式,只能選擇全部的當前標籤。

類選擇器

為了能夠針對某個特定的標籤進行設計,而不是全部同名標籤進行設定,就可以用類選擇器。類選擇器可以差異化選擇不同的標籤,單獨選乙個或某幾個標籤。

語法格式:

.類名

注意是 乙個點**.**加類名

示例**:

"red">第乙個標籤

第二個標籤

"red">第三個標籤

第四個標籤

輸出結果:

就是在head內用樣式點定義,在標籤內用結構類class呼叫,可以乙個或多個標籤呼叫,這是開發時最常用的方法。

點後面的名字可以任意取,但是不能和標籤名相同

注意事項:

①類選擇器使用"."(英文點號)進行標識,後面緊跟類名(自定義).

②可以理解為給這個標籤起了乙個名字,

③長名稱或片語可以使用中橫線來為選擇器命名。

④不要使用純數字、中文等命名,盡量使用英文本母來表示

⑤命名要有意義,盡量使別人-眼就知道這個類名的目的。

類選擇器 多類名

我們可以給乙個標籤指定多個類名 ,從而達到更多的選擇目的。就是乙個標籤有多個名字.每個類名必須用空格分開

格式:

"red box">第乙個是紅色

"green box">第二個是綠色

類名之間必須用空格隔開

示例**:

"red box">第乙個是紅色

"green box">第二個是綠色

"red box">第三個是紅色

"green box">第三個是綠色

樣式結果:

此時可以直接在box裡面修改所有方格的長寬高屬性。

(1)可以把一些標籤元素相同的樣式(共同的部分)放到乙個類裡面.

(2)這些標籤都可以呼叫這個公共的類然後再呼叫自己獨有的類.

(3)從而節省css**,統-修改企非常方便.

id選擇器

id選擇器可以為標有特定id的html元素指定特定的樣式。

html元素以id屬性來設定id選擇器, cs中id選擇器以**"#"**來定義。

語法格式:

#id名

呼叫直接在標籤內呼叫。

注意是先用#id名定義樣式,再在標籤內呼叫

示例**:

"pink">這是乙個用id選擇器設定的標籤

輸出結果:id選擇器只能呼叫一次,其他標籤不能呼叫已經被呼叫的id,而類選擇器是可用被多次呼叫的。

通配選擇器

通配選擇器表示選取頁面內的所有標籤,包括body,head,等等;

不需要呼叫通配選擇器,自動講所有元素標籤使用樣式。

語法格式:

這是乙個標籤

這是二個標籤

這是三個標籤

這是四個標籤

輸出結果:

CSS 再學習,基礎篇

語法 共享宣告 h1,h2,h3,h4,h5,h6繼承 通過 css 繼承,子元素將繼承最高端元素 在本例中是 body 所擁有的屬性 這些子元素諸如 p,td,ul,ol,ul,li,dl,dt,和 dd 不需要另外的規則,所有 body 的子元素都應該顯示 verdana 字型,子元素的子元素也...

CSS基礎學習總結

1.標準文件流 2.塊級標籤和行級標籤 塊級標籤 div form p h1等 行級標籤 span strong input img等 strong 文字加粗 塊級標籤和行級標籤都是盒子模型 3.盒子模型 都有的屬性border margin pading content 四個值 上右下左,順時針方...

CSS學習總結 基礎篇 設計字型屬性

css fonts屬性可以用於定義字型系列,大小,粗細,和文字樣式 斜體,加粗,下劃線等 css使用font family屬性定義文字的字型系列 語法格式 p div 示例 doctype html en utf 8 字型屬性 title h2p style head 標題字型設定為微軟雅黑 h2 ...