05 CSS从原理到熟练 - 1

最新推荐文章于 2024-08-17 22:24:13 发布

YY大数据

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量257

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_40737011/article/details/106862787

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一 CSS简介

CSS作用和发展

什么是CSS？
（1）CSS（Cascading Style Sheet），称之为层叠样式单。
（2）它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等。
（3）在传统的web网页设计里，使用CSS能让单调的HTML网页更富表现力。
CSS与传统HTML描述数据方式比较有哪些优势？
（1）表达效果丰富
（2）文档体积比较小
（3）便于信息检索
（4）可读性好
现要求显示效果如下：

使用HTML传统描述数据方式：

<body>
   <h2>
   	<font color="#FF0000" face="黑色">CSS标记1</font>
   </h2>
   <p>CSS标记的正文内容1</p>
   <h2>
   	<font color="#FF0000" face="黑色">CSS标记2</font>
   </h2>
   <p>CSS标记的正文内容2</p>
   <h2>
   	<font color="#FF0000" face="黑色">CSS标记3</font>
   </h2>
   <p>CSS标记的正文内容3</p>
   <h2>
   	<font color="#FF0000" face="黑色">CSS标记4</font>
   </h2>
   <p>CSS标记的正文内容4</p>
</body>

使用CSS传统描述数据方式：
表现和结构分离

<head>
<style>
<!--
h2{
		font-family : 黑体;
		color : red;
}
-->
</style>
</head>
//表现形式

<body>
	<h2>CSS标记1</h2>
	<p>CSS标记的正文内容1</p>
	<h2>CSS标记2</h2>
	<p>CSS标记的正文内容2</p>
	<h2>CSS标记3</h2>
	<p>CSS标记的正文内容3</p>
	<h2>CSS标记4</h2>
	<p>CSS标记的正文内容4</p>
</body>
//文档结构

CSS发展历程
（1）CSS1.0：1996年12月，CSS1.0作为第一个正式规范面世，其中已经加入了字体、颜色等相关属性。
（2）CSS2.0：1998年5月，CSS2.0规范正式推出，这个版本的CSS也是最广为人知的一个版本，以前的前端开发者使用的一般就是这个CSS规范。
（3）CSS2.1：2004年2月，CSS2.1对原来的CSS2.0进行了一些小范围的修改，删除了一些浏览器支持不成熟的属性，我们可以认为CSS2.1是CSS2.0的修订版。
（4）CSS3.0：2010年CSS3规范推出，这个版本完善了前面CSS存在的一些不足，例如：颜色模块增加了色彩校正、透明度等功能，还增加了变形和动画模块等。

二 CSS的基本使用

CSS的引入方式

CSS可以控制HTML文档的显示。但在控制文档显示之前，首先应需要显示的HTML文档中引入CSS样式单，HTML提供了以下四种引入方式：

使用内联样式：这种方式将样式内联定义到具体的HTML元素上，通常用于精确控制一个HTML元素的表现。
使用内部样式定义：这种方式是通过在HTML文件头定义样式单部分来实现，在这种方式下，每批CSS样式只控制一份HTML文档。
链接外部样式文件：这种方式将样式文件彻底与HTML文档分离，样式文件需要额外引入。在这种方式下，一份样式可控制多份文档。
导入外部样式文件：这种方式与第三种方式类似，只是使用@import来引入外部样式表文件。

使用内联样式（行内样式）

内联样式是所有样式中最为直接的一种，它直接对HTML标签使用style属性。
.示例效果：

<html>
	<head>
		<title>页面标题</title>
	</head>

	<body>
		<p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p>
		<p style="color:#000000; font-style:italic;">正文内容2</p>
		<p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p>
	</body>
</html>

使用内部样式定义（内嵌样式）

内部样式是将CSS写在与之间，并且用标记进行声明。
.示例效果：

<html>
<head>
	<title>页面标题</title>
	<style type="text/css">
	<!--
	p{
		color : #FF00FF;
		text-decoration:underline;
		font-weight:bold;
		font-size:25px;
	}
	-->
	</style>
</head>

<body>
	<p>紫色、粗体、下划线、25px的效果1</p>
	<p>紫色、粗体、下划线、25px的效果2</p>
	<p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>

引入外部样式文件

此种方式使用频率最高，也是最使用的方式，让结构与表现分离。
语法：<link type="text/css" rel="stylesheet" href="外部样式文件">
示例效果：

<html>
	<head>
		<title>页面标题</title>
		<link href="1.css" type="text/css" rel="stylesheet">
	</head>

	<body>
		<h2>CSS标题1</h2>
		<p>紫色、粗体、下划线、25px的效果1</p>
		<h2>CSS标题2</h2>
		<p>紫色、粗体、下划线、25px的效果2</p>
	</body>
</html>

//======================  1.css  ======================//
h2{
	color : #0000FF;//蓝色
}
p{
	color : #FF00FF;//紫色
	text-decoration : underline;
	font-weight : bold;
	font-size : 20px;
}
//外部样式文件可以给多个html所使用

导入外部样式文件

这种导入方式和方式功能类似，就是语法不同，在之间使用。
语法：@import "样式文件"或@import url ("样式文件")
示例效果：

<html>
	<head>
		<title>页面标题</title>
		<style type="text/css">
		<!--
			@import url (1.css);
		-->
		</style>
	</head>

	<body>
		<h2>CSS标题1</h2>
		<p>紫色、粗体、下划线、25px的效果1</p>
		<h2>CSS标题2</h2>
		<p>紫色、粗体、下划线、25px的效果2</p>
		<h3>CSS标题3</h3>
		<p>紫色、粗体、下划线、25px的效果3</p>
	</body>
</html>

// ======================  1.css  ====================== //
h2{
	color : #0000FF;//蓝色
}
p{
	color : #FF00FF;//紫色
	text-decoration : underline;
	font-weight : bold;
	font-size : 20px;
}

各种方式的优先级问题

一个HTML文件中可以同时使用以上四种样式方式，当四种方式中有相同的属性的时候，它们的优先级是怎样的？
优先级顺序：内联 > 内部 > import > link

提示：
虽然各种CSS样式加入页面的方式有先后的优先级，但在设计网站的时候，最好只使用1-2种，这样既有利于后期的维护和管理，也不会出现各种各样的 “ 撞车 ” 的情况，便于设计者理顺设计的整体思路。

三 CSS选择器

CSS常用选择器的介绍

CSS定义的语法格式：

Selector{
	property : value1;
	property : value2;
}

上面的语法可分为两个部分
（1）Selector(选择器)：选择器决定该样式定义对哪些元素起作用。
（2）{property : value1 ; property : value2} (属性定义)：属性定义部分决定这些样式起怎样的作用（字体、颜色、布局等）。

总结：学习CSS大致需要掌握两个部分的内容：

掌握选择器定义的用法；
掌握各种CSS属性的定义。

标记选择器（元素选择器）
E{······} /* 其中E代表有效的HTML元素 */

示例效果：

<html>
	<head>
		<title>页面标题</title>
		<style>
			p{color:red;font-size:18px;}				/* 字体红色，大小18px */
			div{background-color:gray;font-size:25px;}
		</style>
	</head>
	<body>
		<p>正文内容1</p>
		<p>正文内容2</p>
		<div>正文内容3</div>
	</body>
</html>

类选择器
[E] . classValue{······} /*其中E代表有效的HTML元素*/
示例效果：

<html>
	<head>
		<title>页面标题</title>
		<style>
			.one{color:red;font-size:18px;}					/*字体红色，大小18px*/
			div.two{background-color:gray;font-size:25px;}
		</style>
	</head>
	<body>
		<p class="one">正文内容1</p>
		<p>正文内容2</p>
		<p class="two">正文内容2</p>
		<div class="two">快内容1</div>
		<div class="one">快内容2</div>
	</body>
</html>

同时运用多个类选择控制器的运行效果：

<html>
	<head>
		<title>同时使用两个class</title>
		<style type="text/css">
			.one{   color:blue;   }			/* 颜色 */
			.two{ font-size:22px; }		/* 字体大小 */
		</style>
	</head>

	<body>
		<h4>一种都不使用</h4>
		<h4 class="one">同时使用两种class，只使用第一种</h4>
		<h4 class="two">同时使用两种class，只使用第二种</h4>
		<h4 class="one two">同时使用两种class，同时使用</h4>
		<h4>一种都不使用</h4>
	</body>
</html>

ID选择器
[E] # idValue {······} /*其中E代表有效的HTML元素*/

示例效果：

<head>
	<title>ID选择器</title>
	<style type="text/css">
		#one{font-weight:bold;}					/*粗体*/
		#two{font-size:30px;color:#009900;}		/*颜色*/
		div#three{border:2px dotted black		/*边框 粗细2px  虚线  黑色*/
					background color:#888}
</head>
<body>
	<p id="one">ID选择器1</p>
	<p id="two">ID选择器2</p>
	<div>布局块1</div>
	<p id="one two">ID选择器3</p>
	<div id="three">布局块2</div>
</body>

选择器组合
Selector1, Selector2, Selector3, {······} /* 其中Selector1等都是有效选择器 */

<head>
	<title>集体声明</title>
	<style type="text/css">h1,h2,h3,h4,h5,p{
		color:purple;
		font-size:15px;
	}
	</style>
</head>

<body>
	<h1>集体声明h1</h1>
	<h2 class="special">集体声明h2</h2>
	<h3>集体声明h3</h3>
	<h4>集体声明h4</h4>
	<h5>集体声明h5</h5>
	<p>集体声明p1</p>
	<p class="special">集体声明p2</p>
	<p id="one">集体声明p3</p>
</body>

选择器嵌套
Selector1 Selector2 {······} / * 其中Selector1等都是有效选择器 * /

示例效果：

<html>
	<head>
		<title>CSS选择器的嵌套声明</title>
		<style type="text/css">
			<!--
			p b{
				color:maroon;
				text-decoration:underline;
			}
		-->
		</style>
	</head>
	
	<body>
		<p>嵌套使<b>用<b>CSS</b></b>标记的方法</p>
		嵌套式之外的<b>标记</b>不生效
	</body>
</html>

四 CSS常用样式属性设置

CSS字体和文本相关属性

CSS为控制文本的字体提供了大量的属性，这些属性主要用于设置的字体大小、样式、粗细、类型。常用属性如下：

字体属性标签	描述
font-family	规定文本的字体。比如：“serif”、“sans-serif”等
font-size	规定文本的字体尺寸
font-style	规定文本的字体样式。主要有normal、italic、oblique
font-weight	规定字体的粗细。主要有normal、bold、自定义粗细

<style>
	h2{font-family:黑体，幼圆;}
	p.article{
		font-size:20px;
		font-style:italic;
	}
	p.kaiti{
		font-family:楷体_GB2312;
		font-style:normal;
		font-weight:bold;
	}
</style>

<body>
	<h2>风</h2>
	<p class="article">解落三秋叶，能开二月花</p>
	<p>过江千尺浪，入竹万竿斜</p>
	<p class="kaiti">作者：陈豪</p>
</body>

代码显示

CSS为控制文本提供了大量的属性，这些属性主要用于控制文本颜色、修饰、字符间距等外观。常用属性如下：

文本属性标签	描述
color	设置文本颜色
letter-spacing	设置字符间距
line-height	设置文本行高
text-align	设置文本的对齐方式，只要有left、right、center
text-decoration	设置文本的装饰效果，主要有overline、underline、linethrough
text-indent	设置文本块首行缩进
text-transform	控制文本的大小写，主要有uppercase、lowercase、capitalize
word-spacing	设置单词间距

<html>
	<head>
		<title>文字下划线、顶划线、删除线</title>
		<style>
			p.one{color:red;text-decoration:underline;text-align:center}
			p.two{text-decoration:overline;text-indent:20px;line-height:50px}
			p.three{text-decoration:line-through;text-transfrom:uppercase}
			p.four{word-spacing:20px;letter-spacing:5px}
		</style>
	</head>
	<body>
		<p class="one">我是段落1</p>
		<p class="two">我是段落2</p>
		<p class="three">my name is zhangsan</p>
		<p class="four">my name is lisi</p>
		<p>正常文字对比</p>
	</body>
</html>

CSS边框和背景相关属性

在HTML中有很多元素都有边框的属性，比如img元素、块级标签元素等。CSS常用边框属性如下：

边框属性标签	描述
border	在一个声明中设置所有边框属性
border-width	设置四条边框的宽度
border-style	设置四条边框的样式，主要有dotted、solid、double、dashed
border-color	设置四条边框的颜色
border-left	在声明中设置所有左边框属性，对应还有border-right等
border-left-color	设置左边框颜色，对应还有border-right-color等三边的颜色
border-left-style	设置左边框样式，对应还有border-right-style等三边的样式
border-left-width	控制左边框宽度，对应还有border-right-width等三边的宽度

<style>
	<!--
		img{
			border-left-style:dotted;
			boder-left-color:#FF9900;
			border-left-width:5px;
			border-right-style:dashed;
			boder-right-color:#FF00FF;
			border-right-width:5px;
			border-top-style:solid;
			boder-top-color:#CC00FF;
			border-top-width:10px;
			border-bottom-style:groove;
			boder-bottom-color:#666666;
			border-bottom-width:15px;
		}
	-->
</style>
<body>
	<img src="grape.jpg">
</body>

<html>
	<head>
		<title>合并各CSS值</title>
		<style>
			<!--
				img.test1{border:5px double #FF00FF;}
				img.test2{border-right:5px double #FF00FF;
						    border-left:8px solid #0033FF;}
			-->
		</style>
	</head>
	
	<body>
		<img src="peach.jpg" class="test1">
		<img src="peach.jpg" class="test2">
	</body>
</html>

网页背景除了使用颜色同样可以使用图片，CSS提供了相关属性来对背景图片进行精确的控制，常用属性如下：

背景图片属性设置	描述
background	在一个声明中设置所有的背景属性
background-attachment	设置背景图图像是否固定或者随着页面的其余部分滚动。主要有fixed和scroll两个值
background-color	设置元素的背景颜色
background-imag	设置元素的背景图像。主要有url和none两个属性。
background-position	设置背景图像的开始位置。可以指定too left等，也可以指定具体的像素位置
background-repeat	设置是否及如何重复背景图像。主要有repeat、repeat-x ,repeat-y，no-repeat

<style>
	body{
		background-img:url (bg5.jpg);
		background-repeat:no-repeat;
		background-position:200px 25px;
	}
</style>
<body>
	<p>CSS(Cascading Style Sheet)，中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网
	页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是
	为了	使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字
	体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括
	显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用
	CSS设计的优秀页面层出不穷。
	</p>
</body>

提示：同样我们可以把这些背景样式属性组合起来写，更简洁。
background : url (bg5.jpg) no-repeat 200px 25px ;

CSS列表和表格相关属性

CSS为列表元素提供了相关的属性来进行操作，常用属性如下：

列表元素属性标签	描述
list-style	在一个声明中设置所有的列表属性。
list-style-image	将图像设置为列表项标记。主要有URL值。
list-style-position	设置列表项标记的放置位置，主要有outside和inside两个值
list-style-type	设置列表项标记的类型。主要有disc、circle、square、decimal、 decimal-leading-zero、lower-roman、 upper-roman、lower-greek、lower-latin、 upper-latin、armenian、georgian、none

<html>
	<head>
		<title>图片符号</title>
		<style>
			<!--
				body{background-color:#c1daff;}
				li{background-color:#aaa}
			-->
		</style>
	</head>
	
	<body>
		<p>使用图标作为列表项标记</p>
		<ul style="list-style-image:url(icon1.jpg)">
			<li>Road cycling 公路自行车赛</li>
			<li>Track cycling 场地自行车赛</li>
			<li>sprint 追逐赛</li>
		</ul>
		<p>使用数字作为列表项标记，并将列表项标记放在列表元素内</p>
		<ol style="list-style-type:decimal;list-style-position:inside">
			<li>java技术</li>
			<li>android技术</li>
			<li>c技术</li>
		</ol>
	</body>
</html>

CSS为表格元素提供了相关的属性来进行操作，常用属性如下

表格元素属性	描述
border-collapse	设置是否把表格边框合并为单一边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。

<style type="text/css">
	#customers
		{font-family:"Trebuchet MS";
		 width:100%;
		 border-collapse:collapse;
		 }
	#customers td, #customers th
		{font-size:13px;
		 border:1px solid #98bf21;
		 }
	#customers th
		{font-size:14px;
		 text-align:left;
		 background-color:#A7C942;
		 color:#FFFFFF
		 }
	#customers tr.alt td
		{
		 color:#000000;
		 background-color:#EAF2D3;
		 }
</style>

<table id="customers">
	<tr>
		<th>Company</th>
		<th>Contact</th>
		<th>Country</th>
	</tr>

	<tr>
		<td>Apple</td>
		<td>Steven Jobs</td>
		<td>USA</td>
	</tr>

	<tr class="alt">
		<td>Baidu</td>
		<td>Li YanHong</td>
		<td>China</td>
	</tr>

	<tr>
		<td>Google</td>
		<td>Larry Page</td>
		<td>USA</td>
	</tr>
</table>

CSS常用伪类别属性

对<a>标签提供了相关可制动态效果的CSS伪类别属性，常用属性如下：

`<a>`伪类别属性	描述
`a:link`	超链接的普通样式
`a:visited`	被点击过的超链接样式
`a:hover`	鼠标指针经过超链接上时的样式
`a:active`	在超链接上单击时，即 “当前激活” 时超链接的样式

<body>
	<table class="charal">
		<tr>
			<td><a href="#">首页</a></td>
			<td><a href="#">心情日记</a></td>
			<td><a href="#">Free</a></td>
			<td><a href="#">一起走到</a></td>
			<td><a href="#">从明天起</a></td>
			<td><a href="#">纸飞机</a></td>
			<td><a href="#">下一站</a></td>
		</tr>
	</table>
</body>

<style>
	<!--
		.charal{
			font-size:15px;
			background-color:#90bcff;
			width:600px;
			}

		.charal td{
			text-align:center;
			}

		a:link{
			color:#005799;
			text-decoration:none;
			}

		a:visited{
			color:#000000;
			text-decoration:none;
			}

		a:hover{
			color:#FFFF00;
			text-decoration:underline;
			}

		a:active{
			color:#FF0000;
			text-decoration:underline;
			}
	-->
</style>

五 CSS定位与DIV布局

盒子模型

我们可以把页面中的元素都看成一个盒子，占据着一定的页面空间，这些占据的空间往往比单纯的内容要大，换句话说，我们可以调整盒子的边框和距离的参数来调节盒子的位置。

注意：
从图中可以分析得出：一个盒子的宽度（或高度）是由content + padding + border + margin，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding、margin。因此我们可以利用好盒子的这些属性，就能很好的实现各种各样的排版效果。

border的属性主要有3个，分别为color、width、style。通常在设置border时常常将三个属性进行很好的配合，才能达到良好的效果。

<html>
	<head>
		<title>border-style</title>
		<style type="text/css">
		<!--
		div{
			border-color:#000000;
			border-width:6px;
			margin:20px;
			padding:5px;
			background-color:#FFFFCC;
		 }
		-->
	</head>
	<body>
		<div style="border-style=dashed">The border-style of dashed.</div>
		<div style="border-style=dotted">The border-style of dotted.</div>
		<div style="border-style=double">The border-style of double.</div>
		<div style="border-style=solid">The border-style of solid.</div>
	</body>
</html>

padding用于控制content与border之间的距离。

<head>
	<style type="text/css">
	<!--
	.outside{
		padding:10px 30px 50px 100px;
		border:1px solid #000000;
		background-color:#fffcd3;
		}
	.inside{
		background-color:#66b2ff;
		border:1px solid #000000;
		width:100%; line-height:40px;
		text-align:center;
		font-family:Arial;
		}
	-->
	</style>
</head>
<body>
	<div class="outside">
		<div class="inside">padding</div>
	</div>
</body>

在这里插入图片描述

总结：
padding的属性概念就这么简单，但在CSS中与margin配合使用，就能使页面千变万化。

margin指的是元素与元素之间的距离。

<html>
	<head>
		<style type="text/css">
		<!--
		span{
			background-color:#a2d2ff;
			text-align:center;
			font-family:Arial, Helvetica, sans-serif;
			font-size:12px;
			padding:10px;
			}
		span.left{
			margin-right:30px;
			background-color:#a9d6ff;
			}
		span.right{
			margin-left:40px;
			background-color:#eeb0b0;
			}
		-->
		</style>
	</head>

<body>
	<span class="left">行内元素1</span><span class="right">行内元素2</span>
</body>
</html>

<html>
	<head>
		<title>两个块级元素的margin</title>
		<style type="text/css">
		<!--
		div{
			background-color:#a2d2ff;
			text-align:center;
			font-family:Arial, Helvetica, sans-serif;
			font-size:12px;
			padding:10px;
			}
		-->
		</style>
	</head>

<body>
	<div style="margin-bottom:50px">块元素1</div>
	<div style="margin-top:30px">块元素2</div>
</body>
</html>

注意：
两个块级标签之间的距离不再是margin-top与margin-bottom的和，而是两者之中的较大者。

其实margin除了设置正数以外，也可以设置为复数，当设置为负数时，会使得块向反方向移动，甚至覆盖在另外的块上。

<style type="text/css">
	<!--
		span{
			text-align:center;
			font-family:Arial,Helvetica,sans-serif;
			font-size:12px;
			padding:10px;
			border:1px dashed #000000;
			}
		span.left{
			margin-right:30px;
			background-color:#eeb0b0;
			}
		span.right{
			margin-right:-53px;
			background-color:#eeb0b0;
			}
	-->
</style>

<body>
	<span class="left">行内元素1</span><span class="right">行内元素2</span>
</body>

网页中各种元素都必须有自己的位置，从而搭建出整个页面的结构。在这里我们介绍使用CSS的float、position和z-index属性来进行块元素的定位。
float定位是CSS排版中重要的手段。属性float的值很简单，可以设置为left, right或者默认值none，当设置了元素向左或向右浮动时，元素会向其父元素的左侧或右侧靠紧。

强调：
float属性在文字排版和布局排版中经常使用到，要想学好页面的布局，float属性必须用的很熟练。

元素定位

查看示例：

<style type="text/css">
<!--
	body{
		margin:15px;
		font-family:Arial;
		font-size:12px;
		}
	.father{
		background-color:#fffea6;
		border:1px solid #111111;
		padding:25px;
		}
	.son1{
		padding:10px;
		margin:5px;
		background-color:#70baff;
		border:1px dashed #111111;
		float:left;
		}
	.son2{
		padding:5px;
		margin:0px;
		background-color:#ffd270;
		border:1px dashed #111111;
		}
-->
</style>

<body>
	<div class="father">
		<div class="son1">float1</div>
		<div class="son2">float2</div>
	</div>
</body>

当son1设置列float之后，son1的宽度仅仅是它的内容本身加上自己的padding，对于父容器而言它已经不属于父块了，所以在其下面的son2会上来，它内部的内容围绕在son1周围，并且保持着son1所设置的margin距离。

倘若将子块son1与子块son2都向左浮，并且给son2添加内容便会发现子块son2不再环绕son1，效果如下：

经验之谈：
如果son1作为菜单导航，son2作为正文内容，然后将父块的边框和背景都隐藏起来，这样就是一种很流行的排版方式。

在CSS中可以通过设置块元素的clear属性来清除对float的影响，主要可以设置一下三个值，left、right、both。
position定位与float一样，也是CSS排版中非常重要的概念。position从字面意思上看就是制定块的位置。即块相对于其父块的位置和相对它自身应该在的位置。

总结：
当将子块的position设置为absolute时，子块已经不再从属于父块，其左边框设置的距离是相对页面body的距离，而不是父块的距离。

一个父块包含两个子块，其中一子块设置position属性值为absolute。

总结：
子块1一旦设置position为absolute时，它就已经不在隶属于父块了，因此子块2成了父块中的第一个子块，移到了父块的最上面。

当将块的position参数设置为relative时，与将其设置为absolute时完全不同，这时子块是相对于自身在父块的原先位置来进行定位的

总结：
将子块position属性设置为relative时，子块仍然属于父块，只是相对于自己在夫块中的原先位置有了移动改变。

z-index属性用于调整定位时重叠块的上下位置，当块设置了position属性时，该值便可设置各块之间的重叠高低关系。默认值为0。

DIV+CSS布局实战

从页面的整体排版出发，介绍CSS排版观念和具体方法，包括CSS的排版的整体思路，最终通过实战案例，巩固所学知识。

CSS排版观念
（1）CSS的排版是一种流行的排版理念。它将页面首先在整体上进行

标记分块，然后对各个块进行CSS定位，最后再在这个块中添加相应的内容。
（2）通过CSS排版的页面，更新十分容易，甚至是页面的拓扑结构，都可以通过修改CSS属性来重新定位。
制作一个旅游地介绍的页面实战
（1）对页面整体进行分析
（2）确定整个页面主要分几大块
（3）通过DIV标签进行结构化
（4）通过CSS来美化定位每个模块

将页面用DIV分块，将整个页面分为banner、globallink、left、middle、right、footer几个组成部分，各个部分用自己的id来进行标识。整体分块效果如下：

banner就是一张已经制作好的一张图片：

globallink就是一张无序列表，每一个列表是一个超链接实现：

<ul>
	<li><a href="#">首页</a></li>
	<li><a href="#">新疆简介</a></li>
	<li><a href="#">风土人情</a></li>
	<li><a href="#">吃在新疆</a></li>
	<li><a href="#">线路选择</a></li>
	<li><a href="#">自助行</a></li>
	<li><a href="#">摄影摄像</a></li>
	<li><a href="#">游记精选</a></li>
	<li><a href="#">资源下载</a></li>
	<li><a href="#">雁过留声</a></li>
</ul>

页面实战：
html

/*********************************** css_html.html ***********************************/
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="yangyuan">
  <meta name="Keywords" content="新疆，美丽的地方">
  <meta name="Description" content="新疆是一个美丽的地方，让人神往的地方，每年都会有很多游人来此游玩">
  <title>新疆旅游网</title>
  <link href="css.css" rel="stylesheet" type="text/css">
 </head>

 <body>
  
  <!--整体外层容器-->
  <div id="container">
  	<!--banner条-->
	<div id="banner">
		<img src="bannerjpg.jpg" alt="新疆风光">
	</div>
	<!--全局导航条-->
	<div id="globallink">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">新疆简介</a></li>
			<li><a href="#">风土人情</a></li>
			<li><a href="#">吃在新疆</a></li>
			<li><a href="#">线路选择</a></li>
			<li><a href="#">自助行</a></li>
			<li><a href="#">摄影摄像</a></li>
			<li><a href="#">游记精选</a></li>
			<li><a href="#">资源下载</a></li>
			<li><a href="#">雁过留声</a></li>
		</ul>
	</div>
	<!--左侧栏-->
	<div id="left">
		<div id="weather">
			<h3><span>天气查询</span></h3>
			<ul>
				<li>乌鲁木齐&nbsp;&nbsp;&nbsp;雷阵雨 20℃~31℃</li>
				<li>吐鲁番&nbsp;&nbsp;&nbsp;多云转阴 20℃~28℃</li>
				<li>喀什&nbsp;&nbsp;&nbsp;阵雨转多云 25℃~32℃</li>
				<li>库尔勒&nbsp;&nbsp;&nbsp;阵雨转阴 21℃~28℃</li>
				<li>克拉玛依&nbsp;&nbsp;&nbsp;雷阵雨 26℃~30℃</li>
			</ul>
		</div>
		<div id="today">
		<h3><span>今日推荐</span></h3>
		<ul>
			<li><a href="#"><img src="jiang1.jpg"></a></li>
			<li><a href="#">喀纳斯河</a></li>
			<li><a href="#"><img src="jiang2.jpg"></a></li>
			<li><a href="#">布尔津</a></li>
			<li><a href="#"><img src="jiang3.jpg"></a></li>
			<li><a href="#">天山之路</a></li>
		</ul>
		</div>
	</div>
	<!--中间内容栏-->
	<div id="middle">
		<div id="ghost"><a href="#" title="魔鬼城探秘"><img src="ghost.jpg" border="0"></a></div>
		<div id="beauty">
			<h3><span>美景寻踪</span></h3>
			<ul>
				<li><a href="#"><img src="beauty1.jpg"></a></li>
				<li><a href="#"><img src="beauty2.jpg"></a></li>
				<li><a href="#"><img src="beauty3.jpg"></a></li>
				<li><a href="#"><img src="beauty4.jpg"></a></li>
			</ul>
		</div>
		<div id="route">
			<h3><span>线路精选</span></h3>
			<ul>
				<li><a href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a></li>
				<li><a href="#">乌鲁木齐——天池——克拉玛依——乌伦古湖——喀纳斯</a></li>
				<li><a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a></li>
				<li><a href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a></li>
			</ul>
		</div>
	</div>
	<!--右侧栏-->
	<div id="right">
		<div id="map">
			<h3><span>新疆风光</span></h3>
			<p><a href="#" title="点击看大图"><img src="image1.jpg"></p>
			<p><a href="#" title="点击看大图"><img src="image2.jpg"></p>
		</div>
		<div id="food">
			<h3><span>小吃推荐</span></h3>
			<ul>
				<li><a href="#">17号抓饭</a></li>
				<li><a href="#">大盘鸡</a></li>
				<li><a href="#">五一夜市</a></li>
				<li><a href="#">水果</a></li>
			</ul>
		</div>
		<div id="life">
			<h3><span>宾馆酒店</span></h3>
			<ul>
				<li><a href="#">美丽华大饭店</a></li>
				<li><a href="#">海德大饭店</a></li>
				<li><a href="#">银都大饭店</a></li>
				<li><a href="#">鸿福大饭店</a></li>
				<li><a href="#">友好大饭店</a></li>
				<li><a href="#">棉麻宾馆</a></li>
				<li><a href="#">电信宾馆</a></li>
			</ul>
		</div>
	</div>
	<!--脚注-->
	<div id="footer">
		<p>艾萨克&copy;版权所有 <a href="mailto:demo@demo.com">demo@demo.com</a></p>
	</div>
  </div>
 </body>
</html>

/*********************************** css.css ***********************************/
body{
	background:#2286c6;
	margin:0px;
	padding:0px;
	font-size:12px;
	font-family:Arial;
}

#container{
	width:780px;
	height:600px;
	text-align:left;
	background:#123456;
	margin:0px auto;
}


#banner{
	margin:0px;
	padding:0px;
	background:#789;
	height:250px;
	width:100%;
}

#globallink{
	margin:0px;
	padding:0px;
}

#globallink ul{
	list-style-type:none;
	padding:0px;
	margin:0px;
}

#globallink ul li{
	float:left;
	text-align:center;
	width:78px;
}

#globallink ul li a{
	display:block;
	padding:9px 6px 11px 6px;
	margin:0px;
	background:url("button1.jpg") no-repeat;
}

#globallink a:link, #globallink a:visited{
	color:#004a87;
	text-decoration=underline;
}

#globallink a:hover, #globallink a:visited{
	color:#111111;
	text-decoration=none;
	background:url(button1_bg.jpg) no-repeat;
}

#left{
	margin:0px;
	padding:0px 0px 5px 0px;
	background:#ffffff;
	height:590px;
	width:200px;
	color:#d8ecff;
	float:left;
}

#weather{
	background:url("weather.jpg") no-repeat -5px 0px;
	margin:0px 5px;
	background-color:#5ea6eb;
}

#weather h3{
	font-size:12px;
	padding:24px 0px 0px 74px;
	color:#ffffff;
	margin:0px;
}

#weather ul{
	margin:8px 5px 0px 5px;
	padding:10px 0px 8px 5px;
	list-style-type:none;
}

#weather ul li{
	background:url("icon1.jpg") no-repeat 0px 6px;
	padding:1px 0px 0px 10px
}


#middle{
	margin:0px 2px;
	padding:5px 0px 5px 0px;
	background:#ffffff;
	width:400px;
	float:left;
}

#middle div{
	margin:0px 5px 0px 5px;s	
}

#middle h3{
	margin:0px;
	padding:0px;
	height:41px;
}

#middle h3 span{
	display:none;/*去掉文字*/

}

#beauty{
	margin:15px 0px 0px 0px;
	padding:0px;
}

#beauty h3{
	background:url("icon2.jpg") no-repeat;
	margin:8px 0px 0px 0px;
}

#beauty ul, #route ul{
	list-style-type:none;
	margin:16	px 1px 0px 1px;
	padding:0px;
}

#beauty ul li{
	float:left;
	width:97px;
	text-align:center;
}

#beauty ul li img{
	border:1px solid #4ab0ff;

}

#route h3{
	background:url(icon3.jpg) no-repeat;
	margin:6px 0px 0px 0px;
}

#route{
	clear:both;
	margin:0px;
	padding:5px 0px 15px 0px;
}


#route ul li{
	padding:3px 0px 0px 30px;
	background:url("icon4.jpg") no-repeat 12px 6px;
}

#route ul li a:link, #route ul li a:visited{
	text-decoration:none;
	color:#004e8a;
}

#route ul li a:hover{
	text-decoration:underline;
	color:#000000;
}

#today h3{
	color:#003973;
	font-size:12px;
	background:#bbbbff url("icon2.gif") no-repeat;
	padding: 4px 0px 0px 15px;
	margin:0px 0px 5px 0px;
}

#today{
	background:#5ea6ef;
	margin:0px 5px 0px 5px;
	padding:0px 0px 10px 0px;
}

#today ul{
	list-style-type:none;
	padding:0px 0px 0px 0px;
	margin:-1px 0px 0px 0px;
}


#today ul li{
	text-align:center;
}

#today ul li img{
	border:1px solid #ffffff;
	margin:8px 0px 0px 0px;
}

#today ul li a:link, #today ul li a:visited{
	color:#d8ecff;
	text-decoration:none;
}

#today ul li a:hover{
	color:#ffff00;
	text-decoration:underline;
}

#right{
	margin:0px;
	padding:0px 0px 5px 0px;
	background:#ffffff;

	width:176px;
	color:#d8ecff;
	float:left;
}


#right div{
	margin:0px 5px;
	background:#5ea6eb;
}


#right h3{
	font-size:12px;
	padding:4px 0px 2px 15px;
	color:#003973;
	margin:0px 0px 5px 0px;
	background:#bbddff url("button1_bg.jpg") no-repeat 5px 7px;
}

#map p{
	text-align:center;
	margin:0px;
	padding:2px 0px 5px 0px;
}

#map p img{
	border:1px solid #ffffff;
	text-align:center;
}

#food ul, #life ul{
	list-style-type:none;
	padding:0px 0px 10px 0px;
	margin:10px 10px 0px 10px;
}

#food ul li,#life ul li{
	background:url("icon4.jpg") no-repeat -3px 7px;
	padding:3px 0px 3px 12px;
	border-bottom:1px dashed #eeeeee;
}

#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited{
	color:#d8ecff;
	text-decoration:none;
}

#food ul li a:hover, #life ul li a:hover{
	color:#000000;
	text-decoration:underline;
}

#food, #life {
	padding-top:11px;
}


#footer{
	background:#ffffff;
	margin:0px;
	padding:1px 0px 5px 0px;
	clear:both;
}

#footer p{
	text-align:center;
	padding:0px;
	margin:4px 5px 4px 5px;
	background:#5ea6eb;

}

#footer p a{
	color:#ffffff;
	text-decoration:none;
}

YY大数据

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
05 CSS从原理到熟练 - 1

一 CSS简介CSS作用和发展什么是CSS？（1）CSS（Cascading Style Sheet），称之为层叠样式单。（2）它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等。（3）在传统的web网页设计里，使用CSS能让单调的HTML网页更富表现力。CSS与传统HTML描述数据方式比较有哪些优势？（1）表达效果丰富（2）文档体积比较小（3）便于信息检索（4）可读性好现要求显示效果如下：使用HTML传统描述数据方
复制链接

扫一扫

专栏目录