一、选择器类型。
1.分组选择器:有一组选择选择器构成的,中间用逗号隔开。
一组一组的都是同一级别的。
egg:
<style >
.s1{ color:red}
#d1{color: red;}</style >
可以合并,成:
<style >
.s1, #d1{color: red;}
</style >
2.后代选择器:由父子选择器构成的一种选择器,就像分级一样,body在html内,span、p、选择器class、id在body中。
有上下级之分,先找到大标签再找到小标签,一级一级往下找,中间用空格隔开
<head>
<meta charset="UTF-8">
<title></title>
<style >
html body p,span{color: red;}
</style>
</head>
<body>
<span class="s1">河南</span>
<p id="d1">计科</p>
</body>
3.通配符选择器:通用全部标签。
形式:*{ }
egg: <style >
*{margin: 0px; padding: 0px;}
</style>
二、新浪网页以及各种网页都分区域。
由好几个分割开的区域,写好几个<div></div>区域。
<head>
<meta charset="utf-8" />
<title></title>
<style >
*{margin: 0px; padding: 0px;}
div{border: 1px solid aqua;}
#header{
padding: 20px;
padding-bottom: 26px;
width: 1200px;
margin: 0px auto;}
#header #logo{float: left;}
#header #int{
height: 47px;
line-height: 47px;
float: right;}
#header #logo a img{vertical-align: middle;}
</style>
</head>
<body>
<div id="header" >
<div id="logo">
<a href="http://www.sina.com.cn/" target="_blank"><img src="img/logo.png" alt="logo"></a></div>
<div id="int">国际化</div>
<div style="clear: both;"></div>
</div>
<div id="container" >zhong</div><div id="footer" >wei</div>
</body>