Css樣式沖突的示例分析

這篇文章主要介紹了Css樣式沖突的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

CSS樣式的沖突:

1.ID選擇器 > 類選擇器 > 標簽選擇器

2.行級樣式表 > 內嵌樣式表 > 外部樣式表

外部樣式表的ID選擇器 > 內嵌樣式表的標簽選擇器

原則： 就近原則

CSS的各種屬性(掌握)

CSS中尺度單位的介紹

CSS的單位:

a. 絕對單位 1in=2.54cm=25.4mm=72pt=6pc , pt是點或者磅，pc是派卡

b. 相對單位：px, em(印刷單位相當于12個點), %(相對周圍的文字)

*字體設置

p{

font-size:50px; /*字體大小*/

font-style:italic ; /*斜體*/

font-weight:bold; /*粗體*/

font-family:幼圓; /*字體類型*/

font-variant:small-caps; /*小寫變大寫*/

}

*文本設置

p{

letter-spacing:0.5cm ; /*字母間距*/

word-spacing:1cm; /*單詞間距*/

text-align:center; /*在所包含容器的中間*/

text-decoration:overline; /*字體修飾 underline下劃線 line-through中劃線 overline上劃線*/

text-transform:lowercase; /*單詞字體大小寫*/

color:red ;

}

*背景設置

body{

background-color:#ff99ff ; /*背景顏色*/

background-image:url(images/2.gif) ; /*背景圖片*/

background-repeat: no-repeat; /*no-repeat不要平鋪，repeat-x,橫向平鋪，repeat-y 縱向平鋪*/

background-position:center right; /*背景位置*/

background-attachment: scroll ; /*背景的移動 ,fixed跟著滾動條一起移動，scroll 不動*/

}

*列表設置

ul li{

list-style:none; /*列表前樣式*/

list-style-image:url(images/2.gif) ; /*列表項前圖片*/

margin-left:80px;

}

*盒子模型(border margin padding)

padding:是內容到邊的距離

border: 是邊的粗細

margin:是控件到控件的距離

*定位設置(position,float,clear,z-index)

#d{

position: absolute; /*

1.絕對定位: 定義橫縱坐標 .脫離了本身的順序流

2.相對定位: 相對的是自己在順序流中原來的位置

*/

left:100px; /*橫坐標*/

top:100px; /*縱坐標*/

border:1px solid red ;

width:100px;

height:100px;

background-color:#ff66ff;

}

#d1{

position: relative; /*相對位置*/

left:100px;

top:100px;

border:1px solid green ;

width:100px;

height:100px;

background-color:#339900;

}

span{

position: relative;

left:20px;

top:20px;

}

z-index:值任意，值越大離我們越近

float : 浮動

overflow: 超出范圍怎么辦

鼠標樣式設置(cursor)

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Css樣式沖突的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!