PHP自学之路-----DIV+CSS(第二天）
CSS常用的四种选择器
n 类选择器
.类选择器名{
属性名：属性值；
}
n ID选择器
#选择名{
属性名：属性值；
}
n HTML元素选择器
表单{
属性名：属性值；
}
n 通配符选择器
适用于全局，但优先级最低
*{
属性名：属性值；
}
优先级排列：ID》类》HTML》通配符
Ø 父子选择器
/*父子选择器*/
#id1 span{
color:red;
font-style:italic;
}
#id1 span span{
color:green;
}
注意：
1、父子选择器可以有多级，但是在实际开发中不要超过3层
2、有严格的层级关系；
3、类选择器和ID选择器都可以有父子选择器，，可以组合，如 #id .s1 span ;
Ø 一个元素可以同时有ID选择器和类选择器
例子：
<span class="s1" id="id2">新闻一</span>
Ø 一个元素最多有一个ID选择器，但可以有多个类选择器。
例子：
<span class="s1 s2"id="id2">新闻三</span> 。
当s1s2有冲突时，以那个为准：以他们在CSS文件中的位置，以位置靠后的哪个。
综合实例：
<html> <head> <title>CSS四种常用选择器</title> <!--引入我们的CSS--> <link rel="stylesheet" type="text/css" href="slector.css"/> </head> <body> 类选择器：<br/> <span class="s1" id="id2">新闻一</span> <span class="s1">新闻二</span> <span class="s1 s2" id="id2">新闻三</span> <span class="s1">新闻四</span><br/> ID选择器：<br/> <span id="id1">这是一条<span>很<span>重要</span></span>的新闻</span><br/> 北京你好！！！！！！<br/> <!--控制连接--> <a href="">点我点我快点</a> <a href="">点我点我快点</a> <a href="">点我点我快点</a><br/> <p class="one">从来没有对你这么认真过！</p><br/> <p class="two">从来没有对你这么认真过！!!!!</p><br/> </body> </html>
.s1{
background-color:pink;
font-weight:bold;
font-size:20px;
color:black;
}
/*ID选择器*/
#id1{
background-color:silver;
font-size:50px;
color:black;
}
/*HTML选择器*/
body{
color:orange;
}
/*a超链接标记*/
a:link{
font-size:24px;
color:black;
text-decoration:none;
}
a:hover{
text-decoration:underline;
font-size:40px;
color:green;
}
a:visited{
color:red;
}
p.one{
color:blue;
font-size:50px;
}
p.two{
color:green;
font-size:20px;
}
/*通配符选择器*/
*{
/*margin-top:0px;
margin-left:0px;*/
margin: 10px 30px;
/*margin :如果一个值（上右下左 顺时针）
2 上下，左右
3
*/
}
/*父子选择器*/
#id1 span{
color:red;
font-style:italic;
}
#id1 span span{
color:green;
}
/*对新闻1做特别的修饰*/
#id2{
color:red;
font-style:italic;
}
/*新闻三再配置一个类选择器*/
.s2{
font-style:italic;
text-decoration:underline;
}
n 行内元素及块元素
从案例可以看出行内元素它只占显示自己内容的宽度并不换行
块元素不管自己的内容右多少，会占据正行，换行显示。
Ø 常见的行内元素<a> <span> <nput>
Ø 块元素 <p> <div>
Display:block 转换为块元素
Display:inline 转换为行内元素
n CSS 之间的相互引用
n 标准流和非标准流
流：html元素在网页中显示顺序
标准流:在html文件，写在前面的元素在前面显示，写在元素后面的在后面显示
非标准流：在html中，当某个元素脱离的标准流。
n CSS中的盒子模型
简单案例
body{
/*1px 边框宽度 solid 实线 red 颜色*/
border:1px solid red;
width:500px;
height:500px;
font-size:12px;
/*让body自动居中*/
margin:0 auto;/*第一个用于上下，第二个用于左右。 auto 表示自动居中*/
}
/*盒子模型*/
.div1{
width:70px;
height:77px;
border:1px solid blue;
/*margin-top:5px;
margin-left:5px;
*/
margin:5px 0px 0px 5px;
}
/*子模型*/
.div1 img{
width:50px;
height:50px;
margin:5px 0px 0px 10px;
padding-bottom:5px;
}
a{
margin-left:10px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 盒子模型案例 </title>
<link rel="stylesheet" type="text/css" href="box1.css"/>
</head>
<body>
<div class="div1">
<img src="3.jpg"/><br/>
<a href="">雅安祈福</a>
</div>
</body>
</html>
子模型img相对于div1又是一个盒子模型。所以这里使用padding和margin是一样的
效果 图
