您的位置：首页 > Web前端 > CSS

PHP自学之路-----DIV+CSS(第二天）

2013-04-16 22:11 253 查看

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选择器和类选择器

例子：

新闻一

Ø 一个元素最多有一个ID选择器，但可以有多个类选择器。

例子：

新闻三 。

当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> <nput>

Ø 块元素 <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是一样的

效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： DIV CSS

相关文章推荐

新的分享

章节导航