HTML---CSS层叠样式表

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教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。