層疊樣式表

CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。

HTML和CSS的結合方式

1.在每個html標簽上面都有一個屬性 style，把css和html結合在一起

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

2.使用html的一個標簽實現 <style>標簽，寫在head里面

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

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

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

4.使用頭標簽 link，引入外部css文件

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

第3種結合方式，缺點：在某些瀏覽器下不起作用，一般使用第四種方式

樣式優先級

由上到下，由外到內。優先級由低到高。后加載的優先級高

代碼規范

格式

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

基本選擇器

選擇器：要對哪個標簽里面的數據進行操作

標簽選擇器

使用標簽名作為選擇器的名稱

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

class選擇器

每個html標簽都有一個class 屬性

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

id選擇器

每個html標簽上面有一個id屬性

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

優先級

style > id選擇器 > class選擇器 > 標簽選擇器

擴展選擇器

關聯選擇器

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

設置div標簽里面p標簽的樣式，嵌套標簽里面的樣式

div p { background-color: green; }

組合選擇器

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

把div和p標簽設置成相同的樣式，把不同的標簽設置成相同的樣式

div,p {background-color: orange; }

偽元素選擇器

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

• 原始狀態:link
• 鼠標放上去狀態:hover
• 點擊:active
• 點擊之后:visited

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。