CSS ID Selector (3)_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS ID Selector (3)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:46:39

Original

1178 people have browsed it

1. ID selector

The ID selector is identified by the "#" prefix identifier, followed by the ID name of the specified element.

Such as

#box{ width:100px; height:100px;}

Copy after login

The ID name of the element is unique and can only correspond to a specific element in the document. In HTML, tags used to build the overall framework should define ID attributes, because these objects are generally unique, fixed, and will not be repeated on the page, such as logo containing boxes, navigation bars, body containing boxes, and copyrights. area etc.

2. ID setting page layout

<!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>

Copy after login

@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;}

Copy after login

3. External ID internal class attribute

<!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>

Copy after login

@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;}

Copy after login