CSS相關

2022-08-05 11:42:14 字數 3600 閱讀 7286

css:cascading style sheet,層疊樣式表。css的作用就是給html頁面標籤新增各種樣式,定義網頁的顯示效果。簡單一句話:css將網頁內容和顯示樣式進行分離,提高了顯示功能。

我是一個段落

連結式

匯入式

標籤選擇器

可以選中所有的標籤元素,比如div,ul,li ,p等等,不管標籤藏的多深,都能選中,選中的是所有的,而不是某一個,所以說 "共性" 而不是 ”特性“

body

/*標籤選擇器

*/pspan

#選中id

#box#s1#s2

任何的標籤都可以加類,但是類是可以重複,屬於歸類的概念。同一個標籤中可以攜帶多個類,用空格隔開

一定要有”公共類“的概念

.lv.big.line

段落1段落2段落3

使用空格表示後代選擇器。顧名思義,父元素的後代(包括兒子,孫子,重孫子)

.container p.container .item p

使用》表示子代選擇器。比如div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p

.container>p

多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標籤。一些共性的元素,可以使用並集選擇器集選擇器

/*

並集選擇器

*/h3,a

比如豆瓣的首頁使用並集選擇器

body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote

使用.表示交集選擇器。第一個標籤必須是標籤選擇器,第二個標籤必須是類選擇器 語法:div.active

比如有一個這樣的標籤。

那麼

h4.active

/*交集選擇器

*/h4.active

它表示兩者選中之後元素共有的特性

根據標籤中的屬性,選中當前的標籤

語法:

/*根據屬性查詢*/

/*[for]*/

/*找到for屬性的等於username的元素 字型顏色設為紅色*/

/*[for='username']*/

/*以....開頭 ^*/

/*[for^='user']*/

/*以....結尾 $*/

/*[for$='vvip']*/

/*包含某元素的標籤*/

/*[for*="vip"]*/

/**/

/*指定單詞的屬性*/

label[for~='user1']

input[type='text']

一般用在超連結a標籤中

/*

沒有被訪問的a標籤的樣式

*/.box ul li.item1 a:link

/*訪問過後的a標籤的樣式

*/.box ul li.item2 a:visited

/*滑鼠懸停時a標籤的樣式

*/.box ul li.item3 a:hover

/*滑鼠摁住的時候a標籤的樣式

*/.box ul li.item4 a:active

/*設定第一個首字母的樣式*/

p:first-letter

/* 在....之前 新增內容 這個屬性使用不是很頻繁 瞭解 使用此偽元素選擇器一定要結合content屬性*/

p:before

/*在....之後 新增內容,使用非常頻繁 通常與咱們後面要講到佈局 有很大的關聯(清除浮動)*/

p:after

使用a標籤的偽類選擇器,我們一定要遵循"愛恨準則"  love hate

面嚮物件語言都會存在繼承的概念,在面嚮物件語言中,繼承的特點:繼承了父類的屬性和方法。那麼我們現在主要研究css,css就是在設定屬性的。不會牽扯到方法的層面。

繼承:給父級設定一些屬性,子級繼承了父級的該屬性,這就是我們的css中的繼承。

記住:有一些屬性是可以繼承下來 : color 、 font-*、 text-*、line-* 。主要是文字級的標籤元素

但是像一些盒子元素屬性,定位的元素(浮動,絕對定位,固定定位)不能繼承

權重的標籤覆蓋掉了權重小的標籤,說白了 ,就是被幹掉了

權重:誰的權重大,瀏覽器就會顯示誰的屬性

誰的權重大? 非常簡單就是小學的數數。

數:id的數量 class的數量 標籤的數量,順序不能亂

/*

1 0 0

*/顯示紅色

#box

/*0 1 0

*/.container

/*0 0 1*/p

/*依次按順序數,若同位的大,後面的就不用比較了,這個是第一個權重大

*/

權重一樣時,以後來設定的屬性為準,前提必須權重一樣 ,‘後來者居上 ’

#box2 .wrap3 p#box1 .wrap2 p

/*以後來的屬性為準,所以是紅色的

*/

若第一條css設定的屬性值,是通過繼承性設定成的顏色,那麼繼承來的屬性,它的權重為0。它沒有資格跟我們下面選中的標籤對比

#box1 #box2 .wrap3#box2 .wrap3 p

/*繼承的紅色,權重為0,所以按下面的,它是綠色

*/

權重都是0,那麼就是"就近原則" : 誰描述的近,就顯示誰的屬性。所謂描述的近,就是選中到最內層的距離越近

總結:

先看標籤元素有沒有被選中,如果選中了,就數數 (id,class,標籤的數量) 誰的權重大 就顯示誰的屬性。權重一樣大,後來者居上

如果沒有被選中標籤元素,權重為0。

如果屬性都是被繼承下來的 權重都是0 。權重都是0:"就近原則" : 誰描述的近,就顯示誰的屬性

#box2 .wrap3 p#box1 .wrap2 p

/*此時顯示的是紅色的

*/

所以 繼承來的元素 權重為0。跟選中的元素沒有可比性

#box1 #box2 .wrap3#box2 .wrap3 p

/*此時顯示的是綠色的

*/

#box1 #box2 .wrap3.wrap1 #box2

/*此時顯示的是紅色

*/

CSS css定位

css定位 position 屬性規定元素的定位型別。 這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成一個塊級框,而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。 position主要的值 static 預設 預設值。沒有定位,元素出...

CSS 背景 css background

屬性 background css手冊查詢 background手冊 background color 設定顏色作為物件背景顏色 background image 設定作為背景 background repeat 設定背景平鋪重複方向 background attachment 設定或檢索背景影象是...

CSS技巧(二) CSS hack

什麼是css hack css hack由於不同的瀏覽器,比如ie6 ie7 firefox等,對css的解析認識不一樣,因此會導致生成的頁...