學習HTML5和CSS(六)之css背景與三大特性

2021-09-27 06:51:29 字數 3892 閱讀 8649

css三大特性

****

css 可以新增背景顏色和背景,以及來進行設定。

background-color

背景顏色

background-image

背景位址

background-repeat

是否平鋪

background-position

背景位置

background-attachment

背景固定還是滾動

背景的合寫(復合屬性)

background:背景顏色 背景位址 背景平鋪 背景滾動 背景位置

**background-image 屬性:

允許指定乙個展示在背景中(只有css3才可以多背景)可以和 background-color 連用。 如果不重複地話,覆蓋不到地地方都會被背景色填充。 如果有背景平鋪,則會覆蓋背景顏色。

語法:

background-image : none | url (url)
引數:none:  無背景圖(預設的)

url:  使用絕對或相對位址指定背景影象,不加引號

**語法:

background-repeat : repeat | no-repeat | repeat-x | repeat-y
引數:repeat :  背景影象在縱向和橫向上平鋪(預設的)

no-repeat :  背景影象不平鋪

repeat-x :  背景影象在橫向上平鋪

repeat-y :  背景影象在縱向平鋪

**設定或檢索物件的背景影象位置。必須先指定background-image屬性。預設值為:(0% 0%)。

如果只指定了乙個值,該值將用於橫座標。縱座標將預設為50%。第二個值將用於縱座標。

語法:

background-position : length || length

background-position : position || position

引數:length :  百分數 | 由浮點數字和單位識別符號組成的長度值。請參閱長度單位

position :  top | center | bottom | left | center | right

**設定或檢索背景影象是隨物件內容滾動還是固定的。

語法:

background-attachment : scroll | fixed
引數:scroll :  背景影象是隨物件內容滾動

fixed :  背景影象固定

background:背景顏色 背景位址 背景平鋪 背景滾動 背景位置

css3支援背景半透明的寫法語法格式是:

background: rgba(0,0,0,0.3);
最後乙個引數是alpha 透明度取值範圍 0~1之間

a) 可以設定長度單位(px)或百分比(設定百分比時,參照盒子的寬高)

b) 設定為cover時,會自動調整縮放比例,保證始終填充滿背景區域,如有溢位部分則會被隱藏。我們平時用的cover 最多

c) 設定為contain會自動調整縮放比例,保證始終完整顯示在背景區域。

以逗號分隔可以設定多背景,可用於自適應布局 做法就是 用逗號隔開就好了。

效果實現**如下:

我是凸起的文字

我是凹下的文字

文字的裝飾text-decoration 通常我們用於給鏈結修改裝飾效果值描述

none

預設。定義標準的文字。

underline

定義文字下的一條線。下劃線 也是我們鏈結自帶的

overline

定義文字上的一條線。

line-through

定義穿過文字下的一條線。 **

層疊 繼承 優先順序 是我們學習css 必須掌握的三個特性。

**所謂層疊性是指多種css樣式的疊加

是瀏覽器處理衝突的乙個能力,如果乙個屬性通過兩個相同選擇器設定到同乙個元素上,那麼這個時候乙個屬性就會將另乙個屬性層疊掉。

比如先給某個標籤指定了內部文字顏色為紅色,接著又指定了顏色為藍色,此時出現乙個標籤指定了相同樣式不同值的情況,這就是樣式衝突

一般情況下,如果出現樣式衝突,則會按照css書寫的順序,以最後的樣式為準。

(1)樣式衝突,遵循的原則是就近原則。 那個樣式離著結構近,就執行那個樣式;

(2)樣式不衝突,不會層疊;

**所謂繼承性是指書寫css樣式表時,子標籤會繼承父標籤的某些樣式,如文字顏色和字型大小。想要設定乙個可繼承的屬性,只需將它應用于父元素即可。

定義css樣式時,經常出現兩個或更多規則應用在同一元素上,這時就會出現優先順序的問題。

在考慮權重時,初學者還需要注意一些特殊的情況,具體如下:

繼承樣式的權重為0。即在巢狀結構中,不管父元素樣式的權重多大,被子元素繼承時,他的權重都為0,也就是說子元素定義的樣式會覆蓋繼承來的樣式。

行內樣式優先。應用style屬性的元素,其行內樣式的權重非常高,可以理解為遠大於100。總之,他擁有比上面提高的選擇器都大的優先順序。

權重相同時,css遵循就近原則。也就是說靠近元素的樣式具有最大的優先順序,或者說排在最後的樣式優先順序最大。

css定義了乙個!important命令,該命令被賦予最大的優先順序。也就是說不管權重如何以及樣式位置的遠近,!important都具有最大優先順序。

總結優先順序:

使用了 !important宣告的規則。

內嵌在 html 元素的 style屬性裡面的宣告。

使用了 id 選擇器的規則。

使用了類選擇器、屬性選擇器、偽元素和偽類選擇器的規則。

使用了元素選擇器的規則。

只包含乙個通用選擇器的規則。

同一類選擇器則遵循就近原則。

學習HTML5和CSS(八)之定位

2.靜態定位 static 3.相對定位 relative 4.絕對定位 absolute 5.固定定位fixed 6.疊放次序 z index 7.四種定位總結 元素的定位屬性主要包括定位模式和邊偏移兩部分。邊偏移邊偏移屬性 描述top 頂端偏移量,定義元素相對於其父元素上邊線的距離 bottom...

學習HTML5和CSS(三)

css cascading style sheets css通常稱為css樣式表或層疊樣式表 級聯樣式表 主要用於設定html頁面中的文字內容 字型 大小 對齊方式等 的外形 寬高 邊框樣式 邊距等 以及版面的布局等外觀顯示樣式。css以html為基礎,提供了豐富的功能,如字型 顏色 背景的控制及整...

HTML5學習之 HTML 5 拖放

拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性,即抓取物件以後拖到另乙個位置。在 html5 中,拖放是標準的一部分,任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...