1.結構,樣式,行為的分離

 !--樣式--  style type= text/css  background-color:green; height:100px; width:400px; border:1px solid red; background-color:#aaa; height:100px; width:400px; border:1px solid red; !--選擇器--  .yellow{ background-color:yellow; height:300px; width:600px; border:1px solid red; /style  !--行為--  script type= text/javascript  !--當頁面加載完畢,我們就執行一個函數,來完成對h2的操作--  window.onload()=function(){ !--獲取要操作的h2標簽--  h2Node=document.getElementById( tt  !--當鼠標經過,我們就改變h2的外觀--  h2Node. unction(){ this.html' target='_blank'>className= yellow  !--鼠標離開,就恢復h2的外觀和大小--  h2Node.onmouseout=function(){ this.className=  /script  body  h2 id= tt 靜夜思 /h2  p 床前明月光 /p  /body 

2.css的分類
(1)id選擇器
(2)標簽選擇器
(3)類選擇器
(4)分組選擇器
(5)通配符選擇器
(6)偽類選擇器(對超鏈接的操作)
(7)派生選擇器,也稱復合選擇器
選擇器的優先級:就近原則,范圍越小,優先級越高
可以使用!important改變優先級

 style  /*id選擇器*/ #a01{ color:red; /*標簽選擇器*/ color:blue; /*類選擇器*/ .c01{ background:green; /*分組選擇器*/ h1,h2,h3{ color:yellow /*通配符選擇器*/ background:#aaa /*派生選擇器*/ li strong{ color:orange; /style  body  li strong 無序列表選項1 /strong /li  li 無序列表選項2 /li  li 無序列表選項3 /li  li 無序列表選項4 /li  /ul  h1 id= a01 靜夜思 /h1  h2 >
偽類選擇器 
支持css的瀏覽器中,鏈接的不同狀態都可以不同的方式顯示,這些狀態包括:活動狀態,已被訪問狀態,未被訪問狀態,和鼠標懸停狀態 
偽類的順序:link,visited,hover,active
 style type= text/css  a:link{ /*未被訪問狀態*/ color:#000000; text-decoration:none; a:visited{ /*已訪問過的*/ color:#FF6633; a:hover{ /*鼠標懸停*/ color:#00FF66; rext-decoration:underline; a:active{ color:#CCFF6; /style  body  a href= # 構造css規則 /a  /body 
focus偽類 
在元素獲得焦點時向元素添加特殊樣式
 style  input:focus{ background-color:#FF0066 /style  body  input type= text size= 20 /  /body 
3.css的使用方式 
(1)內嵌式
 style  color:red /style  body  li strong 無序列表選項1 /strong /li  li 無序列表選項2 /li  li 無序列表選項3 /li  li 無序列表選項4 /li  /ul  /body 
(2)行內式
 body  p span >
(3)導入式
 style type= text/css  @import 文件路徑  /style  body  li strong 無序列表選項1 /strong /li  li 無序列表選項2 /li  li 無序列表選項3 /li  li 無序列表選項4 /li  /ul  h1 id= a01 靜夜思 /h1  h2 >
創建.css文件
 #a01{ color:red; color:blue; }
(4) 鏈接式
 link href= 文件路徑 rel= stylesheet type= text/css  body  li strong 無序列表選項1 /strong /li  li 無序列表選項2 /li  li 無序列表選項3 /li  li 無序列表選項4 /li  /ul  h1 id= a01 靜夜思 /h1  h2 >
創建 .css文件
 #a01{ color:red; color:blue; }
 
相關推薦：
詳細說明CSS層疊樣式表
CSS層疊樣式表_html/css_WEB-ITnose
以上就是HTML---CSS層疊樣式表的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。