CSS ID选择器(三)
2015-04-08 21:26
381 查看
一、ID选择器
ID选择器使用"#"前缀标识符进行标识,后面紧跟指定的元素的ID名称。如
#box{ width:100px; height:100px;}
元素的ID名称是唯一的,只能对应于文档中一个具体的元素。在HTML中,用来构建整体框架的标签应该定义ID属性,因为这此对象一般在页面中都是比较唯一的,固定的,不会重复,如Logo包含框,导航条,主体包含框,版权区域等。
二、ID设置页面布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="css/test4.css" /> <title>测试ID</title> </head> <body> <div id="header"><!--头部模块--> <div id="logo"></div><!--网站logo--> <div id="banner"></div><!--广告条--> <div id="nav"></div><!--导航条--> </div> <div id="main"><!--主体模块--> <div id="left"></div><!--左侧通栏--> <div id="content"></div><!--内容--> </div> <div id="footer"><!--底部模块--> <div id="copyright"></div><!--版权信息--> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ #header{ margin:0 auto; width:960px; height:210px; border:solid 1px #000000; } #logo{ width:100px; height:100px; border:solid 1px #000000; float:left; } #banner{ margin-left:30px; float:left; width:800px; height:100px; border:solid 1px #000000; } #nav{ clear:both; margin:0 auto; width:800px; height:100px; border:solid 1px #000000; }
三、外部ID内部class属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="css/test3.css" /> <title>ID选择器</title> </head> <body> <div id="father"> <div class="child1"></div> <div class="child2"></div> <div class="child3"></div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ /* 父级样式*/ #father{ width:500px; height:500px; border:solid 2px blue; margin:5px; } /* 通过父级样式设置父级样式下的标签div模式*/ #father div{ width:100px; height:100px; border:solid 1px red; padding:10px; margin:10px; background-color:#0000FF; } /* 通过父级样式设置父级样式下的类*/ #father .child1{ width:100px; height:100px; margin:20px; padding:10px; border:solid 5px #FF00FF; background-color:#66FF00; } /* 通过父级样式设置父级样式下的类*/ #father .child2{ width:100px; height:100px; margin:10px; padding:10px; border:solid 5px #00FF00; background-color:#FF0000; } /*这里直接设置类样式不起作用因为上面通过#father div已经设置过了,这里的类选择器优先级小于标签选择器*/ .child3{ width:100px; height:100px; margin:10px; padding:10px; border:solid 10px #0000FF; background-color:#FF00FF; }
相关文章推荐
- css基础 id选择器 简单示例
- css基础之 id和选择器
- CSS ID选择器与CLASS选择器
- css基础 id选择器 简单示例
- css各种选择器,元素标签选择器,类选择器,id选择器,选择器的组合
- CSS id 选择器
- CSS ID选择器与CLASS选择器
- css笔记10:多个id选择器/类选择器包含相同部分问题的探讨
- css中的ID选择器和CLASS选择器的区别
- css id选择器详解
- css基础-html中使用css、基本选择器、类选择器、id选择器、通用选择器、符合选择器、css权重
- CSS 7.2 选择器-类选择器和id选择器
- CSS用Id选择器在本页写样式
- CSS中id和class选择器注意点
- CSS的Class以及ID选择器
- css中id选择器和class选择器的区别?
- 10006---CSS id 和 class 选择器
- css的id选择器
- CSS中的id选择器和类选择器的用法
- css中id选择器和class选择器