前端知識 之 CSS

2022-09-02 03:51:09 字數 2818 閱讀 6633

css(cascadingstylesheet,層疊樣式表)定義如何顯示html元素。

當瀏覽器讀到乙個樣式表,它就會按照這個樣式表來對文件進行格式化(渲染)。

2.1 css例項

每個css樣式由兩個組成部分:選擇器和宣告。宣告又包括屬性和屬性值。每個宣告之後用分號結束。

3.1 行內樣式

行內式是在標記的style屬性中設定css樣式。不推薦大規模使用。

hello world.

3.2 內部樣式嵌入式是將css樣式集中寫在網頁的標籤對的標籤對中。格式如下:

3.3 外部樣式外部樣式就是將css寫在乙個單獨的檔案中,然後在頁面進行引入即可。推薦使用此方式

4.1 基本選擇器4.1.1 元素選擇器

p
4.1.2 id選擇器

#i1
4.1.3 類選擇器

.c1 

p.c1

注意:樣式類名不要用數字開頭(有的瀏覽器不認)。

標籤中的class屬性如果有多個,要用空格分隔。

4.1.4 通用選擇器

*
4.2 組合選擇器4.2.1 後代選擇器

/*li內部的a標籤設定字型顏色*/

li a

4.2.2 兒子選擇器

/*選擇所有父級是 元素的 元素*/

div>p

4.2.3 毗鄰選擇器

/*選擇所有緊接著元素之後的元素*/

div+p

4.2.4 弟弟選擇器

/*i1後面所有的兄弟p標籤*/

#i1~p

4.3 屬性選擇器

/*用於選取帶有指定屬性的元素。*/

p[title]

/*用於選取帶有指定屬性和值的元素。*/

p[title="213"]

4.4 分組和巢狀4.4.1 分組

當多個元素的樣式相同的時候,我們沒有必要重複地為每個元素都設定樣式,我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設定元素樣式。

例如:

div, p
上面的**為div標籤和p標籤統一設定字型為紅色。

通常,我們會分兩行來寫,更清晰:

div,

p

4.4.2 巢狀

多種選擇器可以混合起來使用,比如:.c1類內部所有p標籤設定字型顏色為紅色。

.c1 p
4.5 偽類選擇器

/* 未訪問的鏈結 */

a:link

/* 已訪問的鏈結 */

a:visited

/* 滑鼠移動到鏈結上 */

a:hover

/* 選定的鏈結 */

a:active

/*input輸入框獲取焦點時樣式*/

input:focus

4.6 偽元素選擇器4.6.1 first-letter

常用的給首字母設定特殊樣式:

p:first-letter
4.6.2 before

/*在每個元素之前插入內容*/

p:before

4.6.3 after

/*在每個元素之後插入內容*/

p:after

before和after多用於清除浮動。

4.7 選擇器的優先順序

4.7.1 css繼承

繼承是css的乙個主要特徵,它是依賴於祖先-後代的關係的。繼承是一種機制,它允許樣式不僅可以應用於某個特定的元素,還可以應用於它的後代。例如乙個body定義了的字型顏色值也會應用到段落的文字中。

body
此時頁面上所有標籤都會繼承body的字型顏色。然而css繼承性的權重是非常低的,是比普通元素的權重還要低的0。

我們只要給對應的標籤設定字型顏色就可覆蓋掉它繼承的樣式。

p
此外,繼承是css重要的一部分,我們甚至不用去考慮它為什麼能夠這樣,但css繼承也是有限制的。有一些屬性不能被繼承,如:border, margin, padding, background等。

4.7.2 選擇器的優先順序

我們上面學了很多的選擇器,也就是說在乙個html頁面中有很多種方式找到乙個元素並且為其設定樣式,那瀏覽器根據什麼來決定應該應用哪個樣式呢?

其實是按照不同選擇器的權重來決定的,具體的選擇器權重計算方式如下圖:

除此之外還可以通過新增 !important方式來強制讓樣式生效,但並不推薦使用。因為如果過多的使用!important會使樣式檔案混亂不易維護。

萬不得已可以使用!important

前端知識之css樣式

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

前端開發知識點之 css

css兩個性質 1 繼承性。有一些屬性給祖先元素,所有的後代元素都整合上了。2 層疊性。層疊性是一種能力,就是處理衝突的能力。當不同選擇器,對乙個標籤的同乙個樣式,有不同的值,聽誰的?這就是衝突。css有著嚴格的處理衝突的機制 以下是權重的規則 標籤的權重為1,class的權重為10,id的權重為1...

必備前端知識 二css

2.css cascading style sheets 層疊樣式表 層疊 多個樣式可以作用在同乙個html元素上,同時生效 好處 1.功能比較強大 2.將元素展示和樣式控制分離降低耦合度。解耦,讓分工合作更容易,提高開發效率 css的使用 css 與html的結合方式 1.內聯 hello css...