标签：des style class blog http tar
div+css详解
学习资料：韩顺平div+css视频、css禅意花园、别具光芒、csdn网页设计专栏、开源之祖sourceforeg.net、php开源大全 www.php.open.com
Div+css (sascading style sheets:层叠样式表)是什么?
传统table布局缺点:
1. 显示样式和数据是绑定在一起的
2. 布局的时候灵活度不高
3. 一个页面可能会有大量的<table>元素,代码冗余
4. 增加带宽(200字节)
5. 搜索引擎不喜欢这样的布局
优点
1. 理解比较简单
2. 不同浏览器看到的效果一般是一样的(兼容性)table技术出现比较早
3. 用于显示数据还是很好的
Div+css 是一种目前比较流行的网页布局技术 基本思想:数据和样式要分离
Div 来存放需要显示的数据(文字，图表..) , css 就是用来指定怎样显示， 从而做到数据和显示相互分离的效果
原理图如下 ： 
有时候，我们也可能把css直接嵌入到html文件中，这种方式称为内联css
基本语法:
<style> 
选择器{
属性: 属性值;
…
}
</style>
我们可以简单的这样理解div+css:
div 是用于存放内容(文字,图片,元素)的容器。
css 是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.
快速入门案例(体验案例)
div+css详解
学习资料：韩顺平div+css视频、css禅意花园、别具光芒、csdn网页设计专栏、开源之祖sourceforeg.net、php开源大全 www.php.open.com
Div+css (sascading style sheets:层叠样式表)是什么?
传统table布局缺点:
1. 显示样式和数据是绑定在一起的
2. 布局的时候灵活度不高
3. 一个页面可能会有大量的<table>元素,代码冗余
4. 增加带宽(200字节)
5. 搜索引擎不喜欢这样的布局
优点
1. 理解比较简单
2. 不同浏览器看到的效果一般是一样的(兼容性)table技术出现比较早
3. 用于显示数据还是很好的
Div+css 是一种目前比较流行的网页布局技术 基本思想:数据和样式要分离
Div 来存放需要显示的数据(文字，图表..) , css 就是用来指定怎样显示， 从而做到数据和显示相互分离的效果
原理图如下 ： 
有时候，我们也可能把css直接嵌入到html文件中，这种方式称为内联css
基本语法:
<style> 
选择器{
属性: 属性值;
…
}
</style>
我们可以简单的这样理解div+css:
div 是用于存放内容(文字,图片,元素)的容器。
css 是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.
快速入门案例(体验案例)
Demo.html
<html>
<head>
<title>css入门小案例</title>
<!--引入我们的css-->
<link rel="stylesheet" type="text/css" href="my.css" />
</head>
<body>
<div class="style1">
<img src="2.jpg"/>
</div>
</body>
</html>
My.css
.style1{
/*宽度 */
width: 400px;
height: 300px; /*一定要写一个分号*/
background-color:silver;
border:1px solid red;
margin-left:400px;
margin-top:250px;
padding-top:20px;
padding-left:40px;
}
Demo.html
<html>
<head>
<title>css入门小案例</title>
<!--引入我们的css-->
<link rel="stylesheet" type="text/css" href="my.css" />
</head>
<body>
<div class="style1">
<img src="2.jpg"/>
</div>
</body>
</html>
My.css
.style1{
/*宽度 */
width: 400px;
height: 300px; /*一定要写一个分号*/
background-color:silver;
border:1px solid red;
margin-left:400px;
margin-top:250px;
padding-top:20px;
padding-left:40px;
}
网页设计的三个时期
① table 网页设计
② table+css 网页设计
③ div+css 网页设计
css使用必要性1. 可以很好的统一网站的显示风格.
css使用的基本语法
选择器{
属性1: 属性值;
属性2: 属性值;
….
}
Html文件:
<html>
<!--css 部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件-->
<link rel="stylesheet" type="text/css" href="demo2.css"/>
<body>
<!--span元素通常用于存放小块内容-->
<span class="s1">栏目一</span>
<span class="s1">栏目二</span>
<span class="s1">栏目三</span>
<span class="s1">栏目四</span>
<span class="s1">栏目五</span>
</body>
</html>
Css文件 ：
/*.s1 用术语 类选择器*/
.s1{
color: blue;
font-size: 30px;
font-style:italic;
text-decoration:underline;
}
.s2{
color:yellow;
font-size:12px;
}
.s3{
color:blue;
font-style:italic;
}
.s4{
color:green;
font-weight:bold;
}
.s5{
color:#9C3131;
}
Css必要性2 可以使用滤镜
<html>
<head>
<!--如何把css直接嵌入到html文件(内联css)-->
<style type="text/css">
a:link img{
filter:gray;
}
a:hover img{
filter:"";
}
</style>
</head>
<body>
<a href="3"><img src="2.jpg"/></a>
<a href="3"><img src="3.jpg"/></a>
<a href="3"><img src="4.jpg"/></a>
<a href="3"><img src="cat1.jpg"/></a>
</body>
</html>
一．div+css的介绍
div是用于存放html元素，文字，图片，视频的元素
css 是层叠样式表，用于指定div中的内容的样式
原理图：
<html>
<head>
<title>入门小案例</title>
<!--引入css-->
<link href="my.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="style1">
<img src="3.jpg"/>
</div>
</body>
</html>
.style1{
/*宽度*/
width:400px;
height:300px;/*一定要写分号*/
background-color:blue;
border:2px solid red;
margin-left:300px;
margin-top:200px;
padding-left:100px;
}
div+css的快速体验案例：
test.html：
<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>快速入门</title>
<link href="my.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="style1">
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>
</body>
</html>
my.css中指定：
.style1{
width:300px;
height:200px;
border:1px solid red;
margin:100px 0px 0px 200px;
}
.style1 table{
border:1px solid black;
width:298px;
height:190px;
}
.style1 table td{
border: 1px solid black;
text-align:center;
}
Css的必要性
网页设计的三个时期
① table 网页设计
② table+css 网页设计
③ div+css 网页设计
css使用必要性1. 可以很好的统一网站的显示风格.
css使用的基本语法
选择器{
属性1: 属性值;
属性2: 属性值;
….
}
Html文件:
<html>
<!--css 部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件-->
<link rel="stylesheet" type="text/css" href="demo2.css"/>
<body>
<!--span元素通常用于存放小块内容-->
<span class="s1">栏目一</span>
<span class="s1">栏目二</span>
<span class="s1">栏目三</span>
<span class="s1">栏目四</span>
<span class="s1">栏目五</span>
</body>
</html>
Css文件 ：
/*.s1 用术语 类选择器*/
.s1{
color: blue;
font-size: 30px;
font-style:italic;
text-decoration:underline;
}
.s2{
color:yellow;
font-size:12px;
}
.s3{
color:blue;
font-style:italic;
}
.s4{
color:green;
font-weight:bold;
}
.s5{
color:#9C3131;
}
Css必要性2 可以使用滤镜
<html>
<head>
<!--如何把css直接嵌入到html文件(内联css)-->
<style type="text/css">
a:link img{
filter:gray;
}
a:hover img{
filter:"";
}
</style>
</head>
<body>
<a href="3"><img src="2.jpg"/></a>
<a href="3"><img src="3.jpg"/></a>
<a href="3"><img src="4.jpg"/></a>
<a href="3"><img src="cat1.jpg"/></a>
</body>
</html>
一．div+css的介绍
div是用于存放html元素，文字，图片，视频的元素
css 是层叠样式表，用于指定div中的内容的样式
原理图：
<html>
<head>
<title>入门小案例</title>
<!--引入css-->
<link href="my.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="style1">
<img src="3.jpg"/>
</div>
</body>
</html>
.style1{
/*宽度*/
width:400px;
height:300px;/*一定要写分号*/
background-color:blue;
border:2px solid red;
margin-left:300px;
margin-top:200px;
padding-left:100px;
}
div+css的快速体验案例：
test.html：
<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>快速入门</title>
<link href="my.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="style1">
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>
</body>
</html>
my.css中指定：
.style1{
width:300px;
height:200px;
border:1px solid red;
margin:100px 0px 0px 200px;
}
.style1 table{
border:1px solid black;
width:298px;
height:190px;
}
.style1 table td{
border: 1px solid black;
text-align:center;
}
Css的必要性
Css使用的基本语法: css部分可以单写一个文件(外联),也可以嵌入到html内部(内联)
选择器(
属性1:属性值;
属性2:属性值;
……
)
<html xmlns="http://www.w3.org/1999/xhtml"> 小块用span大块用div
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="demo2.css"/>
</head><!--css部分可以单写一个文件，然后引入，也可以直接嵌入到html文件（内联）-->
<body>
<!--span元素很常用，用于存放小块内容-->
<span class="s1">栏目一</span><br/>
<span class="s2">栏目二</span><br/>
<span class="s3">栏目三</span><br/>
<span class="s4">栏目四</span><br/>
<span class="s5">栏目五</span><br/>
</body>
</html>
/*.s1类选择器*/
.s1{
color:Green;
font-size:30px;
}
.s2{
color:gray;
font-size:12px;
}
.s3{
color:blue;
font-style:italic;
font-size:12px;
}
.s4{
color:green;
font-weight:bold;
}
.s5
{
color:#B427B9;
font-size:12px;
}
text-decoration:underline; 字体样式
使用<span>元素来编写
使用myeclipse来开发，因为myeclipse有提示功能
<span style="font-size:30px;color: blue;">栏目一</span><br/>
从使用span元素我们可以看到，css的基本语法
<元素名 style=”属性名：属性值；属性名：属性值2；”/>
元素可以是html的任意元素：
属性名：属性值要参考 w3c组织给出的参考文档
◆使用css可以统一网站的风格
css分类：外部css 内部css
<!-- DOCTYPE文档类型用于指定 DTD(说明当前 这个html的版本)-->
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css1.html</title>
<!-- 这个 keywords是给搜索引擎看-->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!-- 告诉浏览器文件是什么编码 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入css文件 -->
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.style1{
font-size: 20;
color: green;
font-style: normal;
font-weight: bold;
}
</style>
</head>
<body>
<span class="style1">栏目一</span></br>
<span class="style1">栏目一</span>
</body>
</html>
汶川大地震后所有网页图片变成了灰色
使用滤镜
<style type="text/css">
/*使用滤镜将图片变成黑白色*/
img {
filter:gray;
}
</style>
/*使用滤镜*/
a:link img {
filter:gray; //默认的是灰色
}
a:hover img{ //鼠标悬浮，恢复颜色
filter:"";
}
</style>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<a href="#"><img src="images/1.jpg"width=170px border=1/></a>
<a href="#"><img src="images/2.jpg"width=170px border=1/></a>
</body>
Css内联使用
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="demo2.css"/>
<style type="text/css">
img{
filter:gray;
}
</style>
</head><!--css部分可以单写一个文件，然后引入，也可以直接嵌入到html文件（内联）-->
<body>
<!--span元素很常用，用于存放小块内容-->
<span class="s1">栏目一</span><br/>
<span class="s2">栏目二</span><br/>
<span class="s3">栏目三</span><br/>
<span class="s4">栏目四</span><br/>
<span class="s5">栏目五</span><br/>
<img src="/images/2.jpg"/>
<img src="/images/3.jpg"/>
<img src="/images/3.jpg"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="demo2.css"/>
<style type="text/css">
a:link img{
filter:gray;
}
a:hover img{
filter:"";
}
</style>
</head><!--css部分可以单写一个文件，然后引入，也可以直接嵌入到html文件（内联）-->
<body>
<!--span元素很常用，用于存放小块内容-->
<span class="s1">栏目一</span><br/>
<span class="s2">栏目二</span><br/>
<span class="s3">栏目三</span><br/>
<span class="s4">栏目四</span><br/>
<span class="s5">栏目五</span><br/>
<a href="3"><img src="/images/2.jpg"/></a>
<a href="3"><img src="/images/3.jpg"/></a>
<a href="3"><img src="/images/3.jpg"/></a>
</body>
</html>
Css使用的基本语法: css部分可以单写一个文件(外联),也可以嵌入到html内部(内联)
选择器(
属性1:属性值;
属性2:属性值;
……
)
<html xmlns="http://www.w3.org/1999/xhtml"> 小块用span大块用div
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="demo2.css"/>
</head><!--css部分可以单写一个文件，然后引入，也可以直接嵌入到html文件（内联）-->
<body>
<!--span元素很常用，用于存放小块内容-->
<span class="s1">栏目一</span><br/>
<span class="s2">栏目二</span><br/>
<span class="s3">栏目三</span><br/>
<span class="s4">栏目四</span><br/>
<span class="s5">栏目五</span><br/>
</body>
</html>
/*.s1类选择器*/
.s1{
color:Green;
font-size:30px;
}
.s2{
color:gray;
font-size:12px;
}
.s3{
color:blue;
font-style:italic;
font-size:12px;
}
.s4{
color:green;
font-weight:bold;
}
.s5
{
color:#B427B9;
font-size:12px;
}
text-decoration:underline; 字体样式
使用<span>元素来编写
使用myeclipse来开发，因为myeclipse有提示功能
<span style="font-size:30px;color: blue;">栏目一</span><br/>
从使用span元素我们可以看到，css的基本语法
<元素名 style=”属性名：属性值；属性名：属性值2；”/>
元素可以是html的任意元素：
属性名：属性值要参考 w3c组织给出的参考文档
◆使用css可以统一网站的风格
css分类：外部css 内部css
<!-- DOCTYPE文档类型用于指定 DTD(说明当前 这个html的版本)-->
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css1.html</title>
<!-- 这个 keywords是给搜索引擎看-->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!-- 告诉浏览器文件是什么编码 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入css文件 -->
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.style1{
font-size: 20;
color: green;
font-style: normal;
font-weight: bold;
}
</style>
</head>
<body>
<span class="style1">栏目一</span></br>
<span class="style1">栏目一</span>
</body>
</html>
汶川大地震后所有网页图片变成了灰色
使用滤镜
<style type="text/css">
/*使用滤镜将图片变成黑白色*/
img {
filter:gray;
}
</style>
/*使用滤镜*/
a:link img {
filter:gray; //默认的是灰色
}
a:hover img{ //鼠标悬浮，恢复颜色
filter:"";
}
</style>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<a href="#"><img src="images/1.jpg"width=170px border=1/></a>
<a href="#"><img src="images/2.jpg"width=170px border=1/></a>
</body>
Css内联使用
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="demo2.css"/>
<style type="text/css">
img{
filter:gray;
}
</style>
</head><!--css部分可以单写一个文件，然后引入，也可以直接嵌入到html文件（内联）-->
<body>
<!--span元素很常用，用于存放小块内容-->
<span class="s1">栏目一</span><br/>
<span class="s2">栏目二</span><br/>
<span class="s3">栏目三</span><br/>
<span class="s4">栏目四</span><br/>
<span class="s5">栏目五</span><br/>
<img src="/images/2.jpg"/>
<img src="/images/3.jpg"/>
<img src="/images/3.jpg"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="demo2.css"/>
<style type="text/css">
a:link img{
filter:gray;
}
a:hover img{
filter:"";
}
</style>
</head><!--css部分可以单写一个文件，然后引入，也可以直接嵌入到html文件（内联）-->
<body>
<!--span元素很常用，用于存放小块内容-->
<span class="s1">栏目一</span><br/>
<span class="s2">栏目二</span><br/>
<span class="s3">栏目三</span><br/>
<span class="s4">栏目四</span><br/>
<span class="s5">栏目五</span><br/>
<a href="3"><img src="/images/2.jpg"/></a>
<a href="3"><img src="/images/3.jpg"/></a>
<a href="3"><img src="/images/3.jpg"/></a>
</body>
</html>
二.css的4种选择器 (css文件可以应用到各种文件中php/asp.net/jsp…..)
类选择器 id选择器 html元素选择器 通配符选择器
1．类选择器(class选择器)的基本语法:
.类选择器名{ 点不能少
属性名:属性值;
…
}
my.css文件
.style1{
font-size: 20px;
font-weight: bold;
background-color: purple;
}
select1.html文件
<link rel="stylesheet" href="my.css" type="text/css"></link>
</head>
<body>
<span class="style1">栏目一</span>
<span class="style1">栏目二</span>
<span class="style1">栏目三</span>
<span class="style1">栏目四</span></body>
2．id选择器
基本语法：
#id选择器名{
属性名：属性值；
}
案例：
#style2{
font-size: 30px;
background-color: skyblue;
}
<span id="id1">这是一则非常重要的新闻</span><br/>
在html文件中如果要引用id选择器，则
<元素 id=”id选择器的名称”></元素>
<span id="style2">这是一则重要的新闻</span>
3．Html选择器(html元素选择器)
/*html选择器body(button,input,form...)*/
body{
color:silver;
}
/*html选择器*/
body
{
color:Orange;
}
若同一种元素需要有不同的样式：则需要指定类然后再使用：方法如下：（该知识点非常有用）
/*html元素选择器 对同一种html元素分类*/
p.cls1
{
color:red;
font-size:30px;
}
p.cls2
{
color:green;
font-size:30px;
}
<p>窗前明月光</p>
<p class="cls1">疑是地上霜</p>
<p class="cls2">举头望明月</p>
<p>低头思故乡</p>
结论：当一个元素同时被id选择器 类选择器 html选择器修饰时，优先级为：
id选择器>类选择器>html选择器>通配符选择器
案例：假设，我们希望所有的超链接
默认样式是黑色，24px，没有下划线
当鼠标移动到超链接时，自动出现下划线
点击后，超链接变成红色。
my.css文件
a:link{
color:black;
font-size:24px;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a:visited{
color:red;
}
html文件：
<a href="http://www.baidu.com"target="_blank">百度首页</a><br/>
<a href="http://www.sohu.com"target="_blank">搜狐首页</a>
4．通配符选择器
/*通配符选择器*/
*
{
margin-top:0px;
margin-left:0px;
padding:0px;
}
查文档：外补丁
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。 如果希望所有的元素都符合某一种样式，可以使用通配符选择器。
基本语法：
/*使用通配符选择器对外边距和内边距清零*/
*{
margin: 0;
padding: 0;
}
*{
/*margin: 0; 将外边距清零*/
/*margin-top:10px;分别设置四个方向的外边距
margin-left:10px;
margin-right:0px;
margin-bottom:opx;*/
/*margin:10px 0px 0px 10px;顺时针方向：上，右，下，左 */
margin:10px 0px 0px;/*10表示上，左右，下*/
padding: 0;/*将内边距清零，padding的规范跟margin一样/
}
四个选择器优先级：Id选择器>Class选择器>Html选择器>通配符选择器
5．父子选择器
针对：
<span id="style2">这是一则<span>非常重要</span>的新闻</span><br/>
my.css添加一个父子选择器
/*父子选择器*/
#style2 span{
font-style:italic;
color:red;
}
注意（1）子选择器标签必须是html可以识别的标记
（2）父子选择器可以有多级（实际开发中建议不要超过三层）其次父子选择器有严格的层级关系
#style2 span span{
font-size: 50px;
}
（3）父子选择器可以适用于id选择器和class选择器
父子选择器不局限与什么类型的选择器例如:#id span span .s1 #id span div #id .s2………………可以为任意的父子组合
（4）如果一个元素被id选择器和class选择器同时修饰时，id选择器的优先级>class选择器
（5）一个元素最多有一个id选择器，但是可以有多个类选择器
例 
需求：希望新闻三 下划线，同时斜体
方法1：可以给新闻三配置一个id选择器
方法2：再指定一个类选择器
my.css中添加
.style1{
font-size: 20px;
font-weight: bold;
background-color: green;
}
.style4{
font-style: italic;
text-decoration: underline;
}
Html文件中如何使用多个class选择器：
<span class="style1 style4">新闻三</span>
注意：
在引用多个class选择器的时候，用空格隔开
当class选择器发生冲突时，在css文件中，以最后出现在css文件中的class选择器样式为准
（6）在css文件中，如果有多个类/id选择器，它们都有相同的部分，我们可以把相同的css样式放在一起，看案例：
案例：my.css
.ad_stu{
width :136px;
height:196px;
background-color:#FC7E8C;
margin:5px 0 0 5px;
float:left
}
/*广告2*/
.ad_2{
width :457px;
height:196px;
background-color:#7CF574;
margin:5px 0 0 6px;
float:left
}
/*房地产广告*/
.ad_house{
width :152px;
height:196px;
background-color:#7CF574;
margin:5px 0 0 5px;
float:left
}
在有些css中，我们可以把多个class选择器，id选择器，html选择器，共同的部分提取出来，写在一起，这样的好处是可以简化css文件
我们可以把上面的css文件改写成：
/*把各个类选择器的公共部分，单独抽取写一份，好处是可以减少css的冗余*/
/*招生广告*/
.ad_stu{
width :136px;
background-color:#FC7E8C;
margin:5px 0 0 5px;
}
/*广告2*/
.ad_2{
width :457px;
background-color:#7CF574;
margin:5px 0 0 6px;
}
/*房地产广告*/
.ad_house{
height:196px;
background-color:#7CF574;
margin:5px 0 0 5px;
}
/*公共选择器*/
.ad_stu,.ad_2,.ad_house{
width :152px;
float:left
}
我们可以吧某个css文件中的选择器共有的部分，独立出来写一份，比如：以上案例
二.css的4种选择器 (css文件可以应用到各种文件中php/asp.net/jsp…..)
类选择器 id选择器 html元素选择器 通配符选择器
1．类选择器(class选择器)的基本语法:
.类选择器名{ 点不能少
属性名:属性值;
…
}
my.css文件
.style1{
font-size: 20px;
font-weight: bold;
background-color: purple;
}
select1.html文件
<link rel="stylesheet" href="my.css" type="text/css"></link>
</head>
<body>
<span class="style1">栏目一</span>
<span class="style1">栏目二</span>
<span class="style1">栏目三</span>
<span class="style1">栏目四</span></body>
2．id选择器
基本语法：
#id选择器名{
属性名：属性值；
}
案例：
#style2{
font-size: 30px;
background-color: skyblue;
}
<span id="id1">这是一则非常重要的新闻</span><br/>
在html文件中如果要引用id选择器，则
<元素 id=”id选择器的名称”></元素>
<span id="style2">这是一则重要的新闻</span>
3．Html选择器(html元素选择器)
/*html选择器body(button,input,form...)*/
body{
color:silver;
}
/*html选择器*/
body
{
color:Orange;
}
若同一种元素需要有不同的样式：则需要指定类然后再使用：方法如下：（该知识点非常有用）
/*html元素选择器 对同一种html元素分类*/
p.cls1
{
color:red;
font-size:30px;
}
p.cls2
{
color:green;
font-size:30px;
}
<p>窗前明月光</p>
<p class="cls1">疑是地上霜</p>
<p class="cls2">举头望明月</p>
<p>低头思故乡</p>
结论：当一个元素同时被id选择器 类选择器 html选择器修饰时，优先级为：
id选择器>类选择器>html选择器>通配符选择器
案例：假设，我们希望所有的超链接
默认样式是黑色，24px，没有下划线
当鼠标移动到超链接时，自动出现下划线
点击后，超链接变成红色。
my.css文件
a:link{
color:black;
font-size:24px;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a:visited{
color:red;
}
html文件：
<a href="http://www.baidu.com"target="_blank">百度首页</a><br/>
<a href="http://www.sohu.com"target="_blank">搜狐首页</a>
4．通配符选择器
/*通配符选择器*/
*
{
margin-top:0px;
margin-left:0px;
padding:0px;
}
查文档：外补丁
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。 如果希望所有的元素都符合某一种样式，可以使用通配符选择器。
基本语法：
/*使用通配符选择器对外边距和内边距清零*/
*{
margin: 0;
padding: 0;
}
*{
/*margin: 0; 将外边距清零*/
/*margin-top:10px;分别设置四个方向的外边距
margin-left:10px;
margin-right:0px;
margin-bottom:opx;*/
/*margin:10px 0px 0px 10px;顺时针方向：上，右，下，左 */
margin:10px 0px 0px;/*10表示上，左右，下*/
padding: 0;/*将内边距清零，padding的规范跟margin一样/
}
四个选择器优先级：Id选择器>Class选择器>Html选择器>通配符选择器
5．父子选择器
针对：
<span id="style2">这是一则<span>非常重要</span>的新闻</span><br/>
my.css添加一个父子选择器
/*父子选择器*/
#style2 span{
font-style:italic;
color:red;
}
注意（1）子选择器标签必须是html可以识别的标记
（2）父子选择器可以有多级（实际开发中建议不要超过三层）其次父子选择器有严格的层级关系
#style2 span span{
font-size: 50px;
}
（3）父子选择器可以适用于id选择器和class选择器
父子选择器不局限与什么类型的选择器例如:#id span span .s1 #id span div #id .s2………………可以为任意的父子组合
（4）如果一个元素被id选择器和class选择器同时修饰时，id选择器的优先级>class选择器
（5）一个元素最多有一个id选择器，但是可以有多个类选择器
例 
需求：希望新闻三 下划线，同时斜体
方法1：可以给新闻三配置一个id选择器
方法2：再指定一个类选择器
my.css中添加
.style1{
font-size: 20px;
font-weight: bold;
background-color: green;
}
.style4{
font-style: italic;
text-decoration: underline;
}
Html文件中如何使用多个class选择器：
<span class="style1 style4">新闻三</span>
注意：
在引用多个class选择器的时候，用空格隔开
当class选择器发生冲突时，在css文件中，以最后出现在css文件中的class选择器样式为准
（6）在css文件中，如果有多个类/id选择器，它们都有相同的部分，我们可以把相同的css样式放在一起，看案例：
案例：my.css
.ad_stu{
width :136px;
height:196px;
background-color:#FC7E8C;
margin:5px 0 0 5px;
float:left
}
/*广告2*/
.ad_2{
width :457px;
height:196px;
background-color:#7CF574;
margin:5px 0 0 6px;
float:left
}
/*房地产广告*/
.ad_house{
width :152px;
height:196px;
background-color:#7CF574;
margin:5px 0 0 5px;
float:left
}
在有些css中，我们可以把多个class选择器，id选择器，html选择器，共同的部分提取出来，写在一起，这样的好处是可以简化css文件
我们可以把上面的css文件改写成：
/*把各个类选择器的公共部分，单独抽取写一份，好处是可以减少css的冗余*/
/*招生广告*/
.ad_stu{
width :136px;
background-color:#FC7E8C;
margin:5px 0 0 5px;
}
/*广告2*/
.ad_2{
width :457px;
background-color:#7CF574;
margin:5px 0 0 6px;
}
/*房地产广告*/
.ad_house{
height:196px;
background-color:#7CF574;
margin:5px 0 0 5px;
}
/*公共选择器*/
.ad_stu,.ad_2,.ad_house{
width :152px;
float:left
}
我们可以吧某个css文件中的选择器共有的部分，独立出来写一份，比如：以上案例
见test2.html
一个元素可以同时拥有id选择器和类选择器：但是id选择器最多只能有一个（但是因为Id选择器的优先级高于类选择器
所有两个选择器共有的属性，冲突时：显示的时候显示的是优先级高的选择器限制的属性）
/*对新闻一做一个特别的修饰
(一个元素可以拥有多个id选择器和类选择器
id选择器最多只能有一个，类选择器可以有多个)*/
#news_special
{
color:Red;
|
}
.s1
{
color:Gray;
font-size:30px;
font-style:italic;
}
一个元素可以有多个类选择器：使用方法如下
<span class="s3 cls1">栏目三</span><br/>
.s3
{
color:green;
|
}
/*多个类选择器*/
.cls1
{
font-style:italic;
text-decoration:underline;
color:yellow;
}
两个类选择器冲突时：类选择器在.css文件中出现的先后顺序：声明在后面的属性是冲突属的老大
选择器的深入探讨：
多个css文件可以单独拿出来，减少css的冗余
Css文件本身也会被浏览器从服务器下载到本地，才能显示效果
6．块元素和行内元素—区别
（1）行内元素，又叫内联元素
内联元素只能容纳文本或者其他内联元素（不同浏览器可能允许），常见内联元素<span> <a> <input>
特点是：只占内容的宽度，默认不换行，行内元素一般放文本或者其它的行内元素。
（2）块元素
块元素一般都从新行开始，可以容纳文本，其它内联元素和其它块元素，即使内容不能占满一行，块元素也要把正行占满，常见块元素 <div> <p>
特点：不管内容有多少，都要换行，同时占满整行，块元素可以放文本，行内元素，块元素。
（3）一些css属性对行内元素不生效，比如margin，left，right，width，height，建议尽可能使用块元素定位（div定位）。（与浏览器类版本和类型有关）
<span class="s1">行内元素1</span>
<span class="s1">行内元素2</span>
<div class="s2">块元素1</div>
<div class="s2">块元素2</div>
.s1{
background-color: silver;
font-size:20px;
}
.s2{
background-color: skyblue;
font-size:30px;
font-style: italic;
}
Div块元素会占据整行
小结：从案例我们看出，行内元素（span）它只显示自己内容的宽度，而且它不会占据整行；
块元素（div）它不管自己的内容有多少，会占据整行，而且会换行显示
常见的行内元素：<a> <span> <input type=”xxx”/>
常见的块元素：<div> <p>
<head>
<title></title>
<link href="../css/test2.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<span class="s1">span1</span>
<span class="s1">span2</span>
<span class="s1">span3</span>
|
标准流/非标准流
标准流：在网页布局中，写在前面的元素出现在前面，写在后面的元素，显示在后面，这是默认的布局方式，也称标准流。
非标准流：在实际网页布局中，我们可能需要使用非标准流的方式来布局（让某个元素脱离它本身的位置）。
css盒子模型
盒子模型的原理图
标准流/非标准流
标准流：在网页布局中，写在前面的元素出现在前面，写在后面的元素，显示在后面，这是默认的布局方式，也称标准流。
非标准流：在实际网页布局中，我们可能需要使用非标准流的方式来布局（让某个元素脱离它本身的位置）。
css盒子模型
盒子模型的原理图
盒子模型的经典案例：
语法：
盒子模型的经典案例：
语法：
border : border-width || border-style || border-color
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
定义和用法
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
body
{
border:1px solid red;/*1px表示边框的宽度solid实线 red表示颜色
顺序无所谓*/
width:300px;
height:500px;
/*如何让body自动居中*/
margin:0 auto;/*第一个参数用于上下，第二个参数用于左右。auto表示自动居中*/
font-size:13px;
}
/*盒子模型的概念：margin padding border content*/
.div1
{
width:52px;
height:72px;
border:1px solid blue;
/* margin-top:5px;
margin-left:5px; border-bottom:1px solid blue;*/
margin:5px 0px 0px 5px;
/*padding-top:5px;/*padding 填充会自适应，导致盒子div变大为了不破坏div不适用padding
于是可以认为img也是一个盒子*/
padding:2px;
}
.div1 img
{
width:48px;
height:50px;
margin-top:5px;
margin-left:2px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
<!--告诉浏览器用的是哪个版本的html-->
<head>
<title>盒子模型案例</title>
<link href="../css/Box1.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="div1">
<img src="../images/head3.jpg"/>
<a href="#">详细信息</a>
</div>
</body>
</html>
细节说明：
1）html元素都可以看成一个盒子
盒子模型的参照物不一样，则使用的css属性不一样，比如从div1的角度看，是margin-right，从div2的角度看，则是margin-left
3）如果不希望破坏整个外观，则尽量使用margin布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性），margin如果过大，盒子内容被挤到盒子外边去，但是盒子本身没有变化
案例:
Box1.html:
Html版本要改成下面的：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div class="s1"><img src="images/1.jpg"></img></div>
Box1.css：
body{
border:1px solid red;/*这里我们给body指定了宽度，样式，颜色（顺序可以随意）*/
width: 800px;
height:1000px;
margin:0 auto;/*0表示上下边距为0，auto左右自动居中*/
}
.s1{
border:1px solid blue;
width:80px;
height:70px;
margin-top: 10px;
margin-left: 10px;
}
.s1 img{
width:60px;
height:60px;
margin-left: 10px;
margin-top: 5px;
}
盒子模型的综合案例（可以当做一个模板来使用）
border : border-width || border-style || border-color
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
定义和用法
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
body
{
border:1px solid red;/*1px表示边框的宽度solid实线 red表示颜色
顺序无所谓*/
width:300px;
height:500px;
/*如何让body自动居中*/
margin:0 auto;/*第一个参数用于上下，第二个参数用于左右。auto表示自动居中*/
font-size:13px;
}
/*盒子模型的概念：margin padding border content*/
.div1
{
width:52px;
height:72px;
border:1px solid blue;
/* margin-top:5px;
margin-left:5px; border-bottom:1px solid blue;*/
margin:5px 0px 0px 5px;
/*padding-top:5px;/*padding 填充会自适应，导致盒子div变大为了不破坏div不适用padding
于是可以认为img也是一个盒子*/
padding:2px;
}
.div1 img
{
width:48px;
height:50px;
margin-top:5px;
margin-left:2px;
}
<!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">
<!--告诉浏览器用的是哪个版本的html-->
<head>
<title>盒子模型案例</title>
<link href="../css/Box1.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="div1">
<img src="../images/head3.jpg"/>
<a href="#">详细信息</a>
</div>
</body>
</html>
细节说明：
1）html元素都可以看成一个盒子
盒子模型的参照物不一样，则使用的css属性不一样，比如从div1的角度看，是margin-right，从div2的角度看，则是margin-left
3）如果不希望破坏整个外观，则尽量使用margin布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性），margin如果过大，盒子内容被挤到盒子外边去，但是盒子本身没有变化
案例:
Box1.html:
Html版本要改成下面的：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div class="s1"><img src="images/1.jpg"></img></div>
Box1.css：
body{
border:1px solid red;/*这里我们给body指定了宽度，样式，颜色（顺序可以随意）*/
width: 800px;
height:1000px;
margin:0 auto;/*0表示上下边距为0，auto左右自动居中*/
}
.s1{
border:1px solid blue;
width:80px;
height:70px;
margin-top: 10px;
margin-left: 10px;
}
.s1 img{
width:60px;
height:60px;
margin-left: 10px;
margin-top: 5px;
}
盒子模型的综合案例（可以当做一个模板来使用）
<!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>
<title></title>
<link href="../css/Box2.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<!--div在布局起到一个控制整个内容显示的位置-->
<div class="div1">
<!--ul在布局中作用是可以控制显示内容的多少-->
<ul class="faceul">
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
</ul>
</div>
</body>
</html>
.div1
{
width:500px;
height:300px;
border:1px solid gray;
font-size:12px;
}
.faceul
{
width:405px;
height:250px;
border:1px solid red;
padding-left:5px; ul会有个左边的填充
margin-left:5px;
}
.faceul li
{
list-style:none; 没有li那个点
float:left;/*左浮动,后面会说这个问题*/
width:50px;
height:56px;
border:1px solid red;
margin-left:10px;
margin-top:5px;
}
.faceul li img
{
width:40px;
height:40px;
}
<!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>
<title></title>
<link href="../css/Box2.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<!--div在布局起到一个控制整个内容显示的位置-->
<div class="div1">
<!--ul在布局中作用是可以控制显示内容的多少-->
<ul class="faceul">
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
<li><img src="../images/head4.jpg"/><br/><a href="">查看详情</a></li>
</ul>
</div>
</body>
</html>
.div1
{
width:500px;
height:300px;
border:1px solid gray;
font-size:12px;
}
.faceul
{
width:405px;
height:250px;
border:1px solid red;
padding-left:5px; ul会有个左边的填充
margin-left:5px;
}
.faceul li
{
list-style:none; 没有li那个点
float:left;/*左浮动,后面会说这个问题*/
width:50px;
height:56px;
border:1px solid red;
margin-left:10px;
margin-top:5px;
}
.faceul li img
{
width:40px;
height:40px;
}
补充：background
background
语法：
background : background-color || background-image || background-repeat || background-attachment || background-position
取值：
| 该属性是复合属性。请参阅各参数对应的属性。 |
说明：
设置对象的背景样式。
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如：设置 background : white 等于设置 background : white none repeat scroll 0% 0% 。如果在此之前设置了 background-image 属性，则其设置将被 background-image 的默认值 none 覆盖。
背景样式属性的作用区域为对象的内容区域与内补丁( padding )区域。不包括边框( border )与外补丁( margin )区域。尽管该属性不可继承，但如果未指定，其父对象的背景颜色和背景图将在对象下面显示。
对应的脚本特性为 background 。
background:url("../images/cat3.jpg"); 这样的使用效果是要平铺的x，y均会平铺 若要限制不平铺需要后面跟参数 norepeat
|
background-repeat版本：CSS1 兼容性：IE4+ NS4+ 继承性：无
语法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
取值：
| repeat | : | 默认值。背景图像在纵向和横向上平铺 |
| no-repeat | : | 背景图像不平铺 |
| repeat-x | : | 背景图像仅在横向上平铺 |
| repeat-y | : | 背景图像仅在纵向上平铺 |
|
分析思路：基本结构
<div>
<ul>
<li><img /></li>
</ul>
</div>
Boxzong.html文件 float2.html也实现了这个页面 用不同的方法
<body>
<div class="s1">
<ul class="s2">
<li ><img src="images/4.jpg"></img><a href="#">小龙女</a></li>
<li ><img src="images/4.jpg" ></img></li>
<li ><img src="images/4.jpg" ></img></li>
<li ><img src="images/4.jpg"></img></li>
<li ><img src="images/4.jpg"></img></li>
<li ><img src="images/4.jpg" ></img></li>
<li ><img src="images/4.jpg" ></img></li>
<li ><img src="images/4.jpg"></img></li>
<li ><img src="images/4.jpg" ></img></li>
<li ><img src="images/4.jpg"></img></li>
</ul>
</div>
</body>
Boxzong.css文件
body{
margin: 0;
padding: 0;
}
/*最外面的*/
.s1{
border: red solid 1px;
width:600px;
height:400px;
margin-top: 20px;
margin-left: 100px;
}
/*控制整个图片的区域*/
.s2{
border: red solid 1px;
width:500px;
height:300px;
margin-top: 10px;
margin-left: 20px;
list-style-type: none; /*将点清除*/
padding: 0;
}
/*控制单个图片区域*/
.s2 li{
width:80px;
height:100px;
margin-top: 10px;
margin-left: 10px;
border: red solid 1px;
float: left;/*左浮动*/
}
.s2 a{
margin-left: 15px;
}
/*控制图片的*/
.s2 li img{
width:60px;
height:60px;
margin-top: 10px;
margin-left: 10px;
}
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
案例：
补充：background
background
语法：
background : background-color || background-image || background-repeat || background-attachment || background-position
取值：
| 该属性是复合属性。请参阅各参数对应的属性。 |
说明：
设置对象的背景样式。
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如：设置 background : white 等于设置 background : white none repeat scroll 0% 0% 。如果在此之前设置了 background-image 属性，则其设置将被 background-image 的默认值 none 覆盖。
背景样式属性的作用区域为对象的内容区域与内补丁( padding )区域。不包括边框( border )与外补丁( margin )区域。尽管该属性不可继承，但如果未指定，其父对象的背景颜色和背景图将在对象下面显示。
对应的脚本特性为 background 。
background:url("../images/cat3.jpg"); 这样的使用效果是要平铺的x，y均会平铺 若要限制不平铺需要后面跟参数 norepeat
background:url("../images/cat3.jpg") no-repeat;
background-repeat版本：CSS1 兼容性：IE4+ NS4+ 继承性：无
语法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
取值：
| repeat | : | 默认值。背景图像在纵向和横向上平铺 |
| no-repeat | : | 背景图像不平铺 |
| repeat-x | : | 背景图像仅在横向上平铺 |
| repeat-y | : | 背景图像仅在纵向上平铺 |
分析思路：基本结构
<div>
<ul>
<li><img /></li>
</ul>
</div>
Boxzong.html文件 float2.html也实现了这个页面 用不同的方法
<body>
<div class="s1">
<ul class="s2">
<li ><img src="images/4.jpg"></img><a href="#">小龙女</a></li>
<li ><img src="images/4.jpg" ></img></li>
<li ><img src="images/4.jpg" ></img></li>
<li ><img src="images/4.jpg"></img></li>
<li ><img src="images/4.jpg"></img></li>
<li ><img src="images/4.jpg" ></img></li>
<li ><img src="images/4.jpg" ></img></li>
<li ><img src="images/4.jpg"></img></li>
<li ><img src="images/4.jpg" ></img></li>
<li ><img src="images/4.jpg"></img></li>
</ul>
</div>
</body>
Boxzong.css文件
body{
margin: 0;
padding: 0;
}
/*最外面的*/
.s1{
border: red solid 1px;
width:600px;
height:400px;
margin-top: 20px;
margin-left: 100px;
}
/*控制整个图片的区域*/
.s2{
border: red solid 1px;
width:500px;
height:300px;
margin-top: 10px;
margin-left: 20px;
list-style-type: none; /*将点清除*/
padding: 0;
}
/*控制单个图片区域*/
.s2 li{
width:80px;
height:100px;
margin-top: 10px;
margin-left: 10px;
border: red solid 1px;
float: left;/*左浮动*/
}
.s2 a{
margin-left: 15px;
}
/*控制图片的*/
.s2 li img{
width:60px;
height:60px;
margin-top: 10px;
margin-left: 10px;
}
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
案例：
分析思路：
具体写页面的顺序：
1先写html文件，先搞定页面内容，
2再写css文件控制样式
我们在网页设计中常用的<!DOCTYPE>有两种
HTML Trasitional DTD
XHTML Trational DTD
如何做到不同浏览器的兼容。
在ie5.5 6 7上ul有一个默认的margin-left值
浮动
浮动是一个重要的概念：分为左浮动，右浮动，清除浮动。
浮动必要性，因为默认情况下，div纵向排列：
Float1.html文件
<div class="div1">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
Float1.css文件
body{
border:1px solid silver;
width: 800px;
height:1000px;
margin:0 auto;
}
.div1{
border:1px solid blue;
background-color: pink;
width:150px;
height:100px;
margin-top: 10px;
margin-left: 10px;
}
如果希望div1向右面显示，这时我们使用右浮动： 当div1向右浮动时,它脱离标准流并且向右移动(让出自己的位置),直到它的右边缘碰到包含框的右边缘
所谓右浮动(所谓浮动只有块元素才会生效):指一个元素向右移动,让出自己的空间,向右移动直到碰到包含自己的父元素的最右边的边框.
Float1.html文件
<div class="div1" id="div2">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
Float1.css文件中只许添加一个id选择器
#div2{
float:right; /*使该元素尽量向右移动，直到碰到父元素的右边界*/
}
如果我们希望，所有的元素，横向排列，则使用到左浮动：
这时，对div1的css添加：
float：left；让出自己右边的空间使下一个元素使用
特别注意：如果一行宽度不够排下所有的div，则会自动换行：
当然，如果有某个div的过大，则会卡住别的div(理解：6div认为前面有个div 如果高度异常发生在2div
则6div会往后面排)如果浮动元素高度不同，那么当他们向下移动时可能别其他浮动元素“卡住”
直到有足够的空间
具体写页面的顺序：
1先写html文件，先搞定页面内容，
2再写css文件控制样式
我们在网页设计中常用的<!DOCTYPE>有两种
HTML Trasitional DTD
XHTML Trational DTD
如何做到不同浏览器的兼容。
在ie5.5 6 7上ul有一个默认的margin-left值
浮动
浮动是一个重要的概念：分为左浮动，右浮动，清除浮动。
浮动必要性，因为默认情况下，div纵向排列：
Float1.html文件
<div class="div1">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
Float1.css文件
body{
border:1px solid silver;
width: 800px;
height:1000px;
margin:0 auto;
}
.div1{
border:1px solid blue;
background-color: pink;
width:150px;
height:100px;
margin-top: 10px;
margin-left: 10px;
}
如果希望div1向右面显示，这时我们使用右浮动： 当div1向右浮动时,它脱离标准流并且向右移动(让出自己的位置),直到它的右边缘碰到包含框的右边缘
所谓右浮动(所谓浮动只有块元素才会生效):指一个元素向右移动,让出自己的空间,向右移动直到碰到包含自己的父元素的最右边的边框.
Float1.html文件
<div class="div1" id="div2">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
Float1.css文件中只许添加一个id选择器
#div2{
float:right; /*使该元素尽量向右移动，直到碰到父元素的右边界*/
}
如果我们希望，所有的元素，横向排列，则使用到左浮动：
这时，对div1的css添加：
float：left；让出自己右边的空间使下一个元素使用
特别注意：如果一行宽度不够排下所有的div，则会自动换行：
当然，如果有某个div的过大，则会卡住别的div(理解：6div认为前面有个div 如果高度异常发生在2div
则6div会往后面排)如果浮动元素高度不同，那么当他们向下移动时可能别其他浮动元素“卡住”
直到有足够的空间
特别强调：浮动对块元素和行内元素都是生效的。
一排块,要浮动就全部都浮动,否则会出现诡异的现象
例如:
<!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>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link href="../css/Float1.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="div4">
<div class="div1" >div1</div>
<div class="div2" >div2</div>
<div class="div3" >div3</div>
</div>
</body>
</html>
特别强调：浮动对块元素和行内元素都是生效的。
一排块,要浮动就全部都浮动,否则会出现诡异的现象
例如:
<!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>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link href="../css/Float1.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="div4">
<div class="div1" >div1</div>
<div class="div2" >div2</div>
<div class="div3" >div3</div>
</div>
</body>
</html>
 | |||
 | |||
? 如果使用浮动属性 ：则该元素不管是不是块元素，都会按照 display: block来显示.
小总结:
你可以这么理解浮动:如果一个元素右/左浮动则:
①它本身会尽可能向右/左移动，直到碰到边框或者
别的浮动元素,特别强调浮动对块元素和行内元素都
生效!
②元素向右/左浮动，就相当于让出自己的左/右边,别
的元素就会在它的左/右边排列。
再一个案例:
字包图小案例：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<img style="float:left;margin-right:5px;" src="2.jpg"/>爱克发kadlkaflksaflkas;lfkaslfksa;lfksafkas;lf爱克发
</body>
</html>
如何清除浮动，我们在项目中说明
知识点：
如果一个元素一旦被浮动修饰了，则相当于该元素会以display：block来显示
如果使用了浮动，则该元素不管是不是块元素，都会按照display：block来显示
清除浮动：如果不希望别的元素在某个元素的左边或者右边，可以使用清除浮动的方法
Clear：right；clear：left；clear：both
css定位
css的定位有以下几种：4
1.static定位
这个是默认的方式，对static而言，left和right是不生效的。
2.relative定位（相对定位）
元素框偏离某个位置（left 和 top），元素仍然保持为定位前的形状，它原本所占的空间仍保留，从这一角度看，好像该元素仍然在文档流/标准流中一样。
特别说明：1.relative的参照点是它原来的位置，进行移动
案例：
改为：
? 如果使用浮动属性 ：则该元素不管是不是块元素，都会按照 display: block来显示.
小总结:
你可以这么理解浮动:如果一个元素右/左浮动则:
①它本身会尽可能向右/左移动，直到碰到边框或者
别的浮动元素,特别强调浮动对块元素和行内元素都
生效!
②元素向右/左浮动，就相当于让出自己的左/右边,别
的元素就会在它的左/右边排列。
再一个案例:
字包图小案例：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<img style="float:left;margin-right:5px;" src="2.jpg"/>爱克发kadlkaflksaflkas;lfkaslfksa;lfksafkas;lf爱克发
</body>
</html>
如何清除浮动，我们在项目中说明
知识点：
如果一个元素一旦被浮动修饰了，则相当于该元素会以display：block来显示
如果使用了浮动，则该元素不管是不是块元素，都会按照display：block来显示
清除浮动：如果不希望别的元素在某个元素的左边或者右边，可以使用清除浮动的方法
Clear：right；clear：left；clear：both
css定位
css的定位有以下几种：4
1.static定位
这个是默认的方式，对static而言，left和right是不生效的。
2.relative定位（相对定位）
元素框偏离某个位置（left 和 top），元素仍然保持为定位前的形状，它原本所占的空间仍保留，从这一角度看，好像该元素仍然在文档流/标准流中一样。
特别说明：1.relative的参照点是它原来的位置，进行移动
案例：
改为：
代码：
<body>
<div class="style1">内容一</div>
<div id="special" class="style1">内容二</div>
<div class="style1">内容三</div>
<div class="style1">内容四</div>
</body>
在css中：
.style1{
width:100px;
height:70px;
background-color:silver;
float:left;
margin-left:10px;
}
#special{
position:relative; /*使用相对定位*/
left:40px; /*在原来的位置的基础上，向右移动的大小（如果希望向左移动，则值就是负数）*/
top:100px; /*在原来的位置的基础上，向下移动的大小（如果希望向上移动，则值就是负数）*/
}
从以上案例我们可以看出：所谓相对定位，是指相对该元素应当显示的左上角重新定位，虽然它脱离了标准流但是它的空间
不能被占用
代码：
<body>
<div class="style1">内容一</div>
<div id="special" class="style1">内容二</div>
<div class="style1">内容三</div>
<div class="style1">内容四</div>
</body>
在css中：
.style1{
width:100px;
height:70px;
background-color:silver;
float:left;
margin-left:10px;
}
#special{
position:relative; /*使用相对定位*/
left:40px; /*在原来的位置的基础上，向右移动的大小（如果希望向左移动，则值就是负数）*/
top:100px; /*在原来的位置的基础上，向下移动的大小（如果希望向上移动，则值就是负数）*/
}
从以上案例我们可以看出：所谓相对定位，是指相对该元素应当显示的左上角重新定位，虽然它脱离了标准流但是它的空间
不能被占用
3.absolute定位（绝对定位）
相当于元素从原来的位置脱离，并让出自己的空间，后面的元素就会占有让出的空间。
改为：
代码：
<body>
<divclass="style1">内容一</div>
<div id="special" class="style1">内容二</div>
<divclass="style1">内容三</div>
<divclass="style1">内容四</div>
</body>
在css中：
.style1{
width:100px;
height:70px;
background-color:silver;
float:left;
margin-left:10px;
}
#special{
position:absolute;/*使用绝对定位*/
left:40px; /*（正数）向右移动的大小（如果希望向左移动，则值就是负数）*/
top:100px; /*（正数）向下移动的大小（如果希望向上移动，则值就是负数）*/
}
从上图看，所谓绝对定位是指：对该元素最近的那个脱离了标准流的元素定位
如果没有父元素，则相对于body左上角定位
特别说明：
这里特别强调一点，absolute定位是相对于离自己最近的那个非标准流盒子而言的。
案例说明：
Htm
<!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 href="../css/DingWei.css" type="text/css" rel="stylesheet"/>
<title></title>
</head>
<body>
|
内容1
</div>
<div id="special" class="div1">
内容2
<div class="div1">
内容3
</div>
<div class="div1">
内容4
</div>
<div class="div2">
测试
</div>
</div>
</body>
</html>
.div1
{
width:70px;
height:30px;
background:pink;
float:left;
margin-left:5px;
}
#special
{
position:absolute;/*相对原来应该在的位置重新定位*/
left:40px;
top:100px;
}
.div2
{
width:200px;
height:150px;
background:green;
float:left;
}
运行结果为：
但是如果更改div2 position：relative(脱离标准流的位置) left:100px; top:100px;
.div2
{
width:200px;
height:150px;
background:green;
float:left;
position:relative;
left:100px;
top:100px;
}
解释：（怎么理解：这里特别强调一点，absolute定位是相对于离自己最近的那个非标准流盒子而言的。）
如果没有父元素，（或者有父元素，但是父元素没有脱离标准流）则相对于body左上角定位
4.fixed定位
元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。
.div1
{
width:70px;
height:30px;
background:pink;
float:left;
|
}
#special
{
/*position:absolute;/*相对原来应该在的位置重新定位*/
position:fixed;
left:40px;
top:100px;
}
.div2
{
width:200px;
height:150px;
background:green;
float:left;
position:relative;
left:100px;
top:100px;
}
不管包不包我，我永远相对于body左上角定位
所谓fixed定位就是不管怎样，总是以视窗的左上角定位
Left 或者top属性对static没有效果：
例如给div1设置一个id选择器special2
<div id="special2" class="div1">
内容1
</div>
#special2
{
left:30px;
top:20px;
}
此时的div1是static的，此时div1不会有任何变化，
Static定位是靠margin-left和margin-top来移动位置的
Z-index:设置对象层叠顺序：用于设置对象（div）显示的时候层叠的顺序，z-index值越小则越在下层显示
跟着传智播客学习asp.net之DIV+CSS,布布扣,bubuko.com
标签：des style class blog http tar
原文地址：http://www.cnblogs.com/seclusively/p/3789441.html
