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 支援拖放。注釋...