Css樣式?jīng)_突的示例分析

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

CSS樣式的沖突:

1.ID選擇器 > 類(lèi)選擇器 > 標(biāo)簽選擇器

2.行級(jí)樣式表 > 內(nèi)嵌樣式表 > 外部樣式表

外部樣式表的ID選擇器 > 內(nèi)嵌樣式表的標(biāo)簽選擇器

原則： 就近原則

CSS的各種屬性(掌握)

CSS中尺度單位的介紹

CSS的單位:

a. 絕對(duì)單位 1in=2.54cm=25.4mm=72pt=6pc , pt是點(diǎn)或者磅，pc是派卡

b. 相對(duì)單位：px, em(印刷單位相當(dāng)于12個(gè)點(diǎn)), %(相對(duì)周?chē)奈淖?span lang="EN-US">)

*字體設(shè)置

p{

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

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

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

font-family:幼圓; /*字體類(lèi)型*/

font-variant:small-caps; /*小寫(xiě)變大寫(xiě)*/

}

*文本設(shè)置

p{

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

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

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

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

text-transform:lowercase; /*單詞字體大小寫(xiě)*/

color:red ;

}

*背景設(shè)置

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 ; /*背景的移動(dòng) ,fixed跟著滾動(dòng)條一起移動(dòng)，scroll 不動(dòng)*/

}

*列表設(shè)置

ul li{

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

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

margin-left:80px;

}

*盒子模型(border margin padding)

padding:是內(nèi)容到邊的距離

border: 是邊的粗細(xì)

margin:是控件到控件的距離

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

#d{

position: absolute; /*

1.絕對(duì)定位: 定義橫縱坐標(biāo) .脫離了本身的順序流

2.相對(duì)定位: 相對(duì)的是自己在順序流中原來(lái)的位置

*/

left:100px; /*橫坐標(biāo)*/

top:100px; /*縱坐標(biāo)*/

border:1px solid red ;

width:100px;

height:100px;

background-color:#ff66ff;

}

#d1{

position: relative; /*相對(duì)位置*/

left:100px;

top:100px;

border:1px solid green ;

width:100px;

height:100px;

background-color:#339900;

}

span{

position: relative;

left:20px;

top:20px;

}

z-index:值任意，值越大離我們?cè)浇?span lang="EN-US" style="font-size:14.0pt;font-family:宋體;mso-hansi-font-family:Calibri; mso-bidi-font-family:宋體">

float : 浮動(dòng)

overflow: 超出范圍怎么辦

鼠標(biāo)樣式設(shè)置(cursor)

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Css樣式?jīng)_突的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!