層疊樣式表

CSS將網(wǎng)頁內(nèi)容和顯示樣式進(jìn)行分離，提高了顯示功能。

HTML和CSS的結(jié)合方式

1.在每個(gè)html標(biāo)簽上面都有一個(gè)屬性 style，把css和html結(jié)合在一起

<div style="background-color:red;color:green;">

2.使用html的一個(gè)標(biāo)簽實(shí)現(xiàn) <style>標(biāo)簽，寫在head里面

<style type="text/css"> div {background-color:blue;color: red;} </style>

3.在style標(biāo)簽里面使用語句（在某些瀏覽器下不起作用）@import url(css文件的路徑);

<style type="text/css">@import url(div.css); </style>

4.使用頭標(biāo)簽 link，引入外部css文件

<link rel="stylesheet" type="text/css" href="css文件的路徑" />

第3種結(jié)合方式，缺點(diǎn)：在某些瀏覽器下不起作用，一般使用第四種方式

樣式優(yōu)先級(jí)

由上到下，由外到內(nèi)。優(yōu)先級(jí)由低到高。后加載的優(yōu)先級(jí)高

代碼規(guī)范

格式

選擇器名稱 { 屬性名:屬性值;屬性名:屬性值;... }

基本選擇器

選擇器：要對哪個(gè)標(biāo)簽里面的數(shù)據(jù)進(jìn)行操作

標(biāo)簽選擇器

使用標(biāo)簽名作為選擇器的名稱

div {background-color:gray; color:white; }

class選擇器

每個(gè)html標(biāo)簽都有一個(gè)class 屬性

<div class="haha">aaaaaaa</div> .haha {background-color: orange; }

id選擇器

每個(gè)html標(biāo)簽上面有一個(gè)id屬性

<div id="hehe">bbbbb</div> #hehe {background-color: #333300; }

優(yōu)先級(jí)

style > id選擇器 > class選擇器 > 標(biāo)簽選擇器

擴(kuò)展選擇器

關(guān)聯(lián)選擇器

<div><p>hello</p></div>

設(shè)置div標(biāo)簽里面p標(biāo)簽的樣式，嵌套標(biāo)簽里面的樣式

div p { background-color: green; }

組合選擇器

<div>1111</div> <p>22222</p>

把div和p標(biāo)簽設(shè)置成相同的樣式，把不同的標(biāo)簽設(shè)置成相同的樣式

div,p {background-color: orange; }

偽元素選擇器

瀏覽器的兼容性比較差，css里面提供了一些定義好的樣式，可以拿過來使用，比如超鏈接的狀態(tài)

• 原始狀態(tài):link
• 鼠標(biāo)放上去狀態(tài):hover
• 點(diǎn)擊:active
• 點(diǎn)擊之后:visited

總結(jié)

以上是生活随笔為你收集整理的JavaWeb：CSS层叠样式表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。