### 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是一样的
效果 图
- 前言
- HTML（第一天）
- HTML（第二天）
- DIV+CSS(第一天）
- DIV+CSS(第二天）
- DIV+CSS(第三天）
- DIV+CSS(第四天）
- PHP开发环境配置说明
- PHP基础数据类型及运算符介绍
- 走进PHP函数
- 走进位运算
- 走进数组及相关数组函数
- 面向对象的编程（类与对象)
- 面向对象的编程(类成员方法用法）
- 构造方法，析构方法
- static，global用法
- 静态方法
- 面向对象的编程方法
- 接口方法
- 接口VS继承、final、const
- 错误及异常处理机制、错误日志
- HTTP协议深度剖析
- 文件下载
- PHP数据库编程
- 数据库编程（2）
- 超全局变量
- Zend studio 开发环境入门
- 雇员管理系统（1）
- 雇员管理系统（2）
- 会话技术(cookie session)
- 会话技术 session场景使用介绍！
- PHP.in中session和cookie的配置说明
- PHP文件编程
- 报表及绘图技术
- 报表及绘图技术（jpgraph库使用，Linux安装及配置说明）
- XML基本语法及DTD介绍
- XML编程（Dom技术）
- XML编程（Xpath技术,simpleXml技术）基础入门
- 网上支付平台PHP版本
- javascript基础入门