前端基础 CSS 第十一章使用CSS样式表 ----暑假学习第七、八天

最新推荐文章于 2024-01-11 05:07:30 发布

奇迹是执着的人创造的

最新推荐文章于 2024-01-11 05:07:30 发布

阅读量702

点赞数

文章标签： javaweb基础前端CSS

本文链接：https://blog.csdn.net/hza419763578/article/details/81002765

版权

前端CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第十一章使用CSS样式表

通过CSS样式定义,可以将网页制作得更加绚丽多彩。采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。用CSS不仅可以做出令浏览者赏心悦目的网页，还能给网页添加许多特效。

11.1 认识CSS

CSS(Cascading Style Sheet,层叠样式表) 是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一。

网页最初是用HTML标记来定义页面文档及格式，如标题<hl>、段落<p>、表格<table>等，但这些标记不能满足更多的文档样式需求。为了解决这个问题，在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1.

样式表的首要目的是为网页上的元素精确定位。其次，它可以把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式来控制。内容结构和格式控制相分离，使得网页可以仅由内容构成，而将所有的网页的格式通过CSS样式表文件来控制。

CSS主要有以下优点:

利用CSS制作和管理网页都非常方便
CSS可以更加精确地控制网页的内容形式，如前面学过的<font>标签的size属性，它用来控制文字的大小，但它控制的字体只有七级，如果出现需要使用10像素或100像素大的字体的情况，HTML标记就无能为力了。CSS可以办到，它可以随意设置字体的大小。
CSS样式是丰富多彩的，比HTML更加丰富，如滚动条的样式定义、鼠标光标的样式定义等
CSS的定义样式灵活多样，可以根据不同的情况，选用不同的定义方法，如可以在HTML文件内部定义，可以分标签定义，分段定义，也可以在HTML文件外部定义，基本上都能满足要求。

11.2 使用CSS

现在CSS已经广泛应用于各种网页的制作当中，在CSS的配合下，HTML语言能发挥出更大的作用。

11.2.1 CSS的基本语法

CSS的语法结构仅由三部分组成，选择符、样式属性和值，基本语法如下：

选择符{样式属性：取值；样式属性：取值；样式属性：取值；......}

选择符(selector) 指这组样式编码所要针对的对象，可以是一个XHTML标签，如body、hl;也可以是定义了特定id或class的标签，如#lay选择符表示选择<div id=lay>，即一个被指定了lay为id的对象。浏览器将对CSS选择符进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。
属性(Property)是CSS样式控制的核心，对于每一个XHTML中的标签，CSS都提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。
值(value)是指属性的值，形式有两种，一种是指定范围的值，如float属性，只能使用left、right、none三种值。另一种为数值，如width能够使用0~9999px，或者其他数学单位来指定。

在实际应用中，往往使用以下类似的应用形式：

body{background-color:red} 表示选择符为body，即选择了页面中的<body> 标签，属性为background-color,这个属性用于控制对象的背景色，而值为red。页面中的body对象的背景色通过使用这组CSS编码，被定义为红色。

除了定义单个属性外，同样可以为一个标签定义多个属性，每个属性之间用分号隔开。

11.2.2 添加CSS的方法

添加CSS有四种方法：链接外部样式表、内部样式表、导入外部样式表和内嵌样式。

1.链接外部样式表

链接外部样式表就是在网页中调用已经定义好的样式表来实现样式表的应用，它是一个单独的文件，在页面中用<link>标记链接到这个样式表文件，<link>标记必须放到页面的<head>标签内。这种方法最适合大型网站的CSS样式定义。如下：

<head>
....
<link rel=stylesheet type=text/css href=slstyle.css>
...
</head>

上面的这个例子表示浏览器从slstyle.css文件中以文档格式读出定义的样式表。

rel=stylesheet是指在页面中使用外部的样式表

type=text/css 是指文件的类型是样式表文件

href=slstyle.css是文件所在位置

一个外部样式表文件可以应用于多个页面。因而可以达到一改全改的效果，有利于后期修改编辑

2.内部样式表

内部样式表一般位于<head></head>中，以<style>开始，以</style>结束，即<head><style>XXX</style></head>.

eg：

<html>
<head>
	<meta charset="UTF-8">
	<title>图像域</title>	
	<style type="text/css">
		body{
			margin-left: 0px;
			margin-top: 0px;
			margin-right: 0px;
			margin-bottom: 0px;			
		}
		.style1{
			color: #fbe334;
			font-size: 13px;
		}
	</style>
</head>
<body>
	<span class="style1">...</span>
</body>
</html>	<meta charset="UTF-8">
	<title>图像域</title>	
	<style type="text/css">
		body{
			margin-left: 0px;
			margin-top: 0px;
			margin-right: 0px;
			margin-bottom: 0px;			
		}
		.style1{
			color: #fbe334;
			font-size: 13px;
		}
	</style>
</head>
<body>
	<span class="style1">...</span>
</body>
</html>

3.导入外部样式表

指在内部样式表的<style>里导入一个外部样式表，导入时用@import

eg:

<head>
	...
	<style type="text/css">
		@import slstyle.css
		其他样式表的声明
	</style>	
</head>

此例中@import slstyle.css 表示导入slstyle.css样式表，注意使用时外部样式表的路径、方法和链接外部样式表的方法类似，但导入外部样式表输入方式更有优势。实质上它相当于存在于内部样式表中。

4.内嵌样式

内嵌样式是混合在HTML表签里使用的，可以很简单地对某个元素单独定义样式，它主要是在body内实现。内嵌样式的使用是直接在HTML标签里添加style参数，而style参数的内容就是CSS的属性和值，在style参数后面的引号里的内容相当于在样式表大括号里的内容。

eg:

<table style=color:red; margin-right:220px>
	...
</table>

这种方法使用简单，显示很直观，但无法发挥样式表的优势，因此不推荐使用。

11.3字体属性

前面的HTML中已经介绍了网页中文字的常见标记，下面将以CSS样式定义的方法来介绍文字的设置。使用CSS定义的文字样式更加丰富，实用性更强。

11.3.1 字体font-family

在HTML中，设置文字的字体属性需要通过<font>标记中的face属性，而在CSS中则使用font-family属性。

语法: font-family: "字体1"，"字体2"，...

说明:如果在font-family属性中定义了多种字体，在浏览器中会由前向后选择第一个支持的字体。若全部不支持，显示系统默认字体

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>字体 font-family</title>	
	<style type="text/css">
		.h{
			font-family: "宋体";
		}
	</style>
</head>
<body>
	<span class="h">
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
	</span>
	<hr>
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
</body>
</html>

运行结果：

11.3.2 字号font-size

在HTML中，字体的大小是由<font>标记中的size属性来控制的，且只有七级大小。在CSS里可以使用font-size属性来自由控制字体的大小。

语法：font-size: 大小的取值

说明:

font-size取值
取值	含义
xx-small	绝对字体尺寸，最小
x-small	绝对字体尺寸，较小
small	绝对字体尺寸，小
medium	绝对字体尺寸，正常默认值
large	绝对字体尺寸，大
x-large	绝对字体尺寸，较大
xx-large	绝对字体尺寸，最大
larger	相对字体尺寸，相对于父对象中字体尺寸进行相对增大
smaller	相对字体尺寸，相对于父对象中字体尺寸进行相对减小
length	可采用百分比或长度值，不可为负值，其百分比值是基于父对象中字体的尺寸

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>字体 font-family</title>	
	<style type="text/css">
		.h{
			font-family: "宋体";
			font-size: 1cm;<!--或者50px-->
		}
		.h1{
			font-family: "宋体";
			font-size: 10px;
		}
		.h2{
			font-family: "宋体";
			font-size: 50px;
		}
		.h3{
			font-family: "宋体";
			font-size: 80px;
		}
		.h4{
			font-family: "宋体";
			font-size: 100px;
		}
	</style>
</head>
<body>
	<span class="h">
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
	</span>
	<hr>
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
	<hr>
	<p class="h1">自古无鱼不成宴</p>
	<p class="h2">自古无鱼不成宴</p>
	<p class="h3">自古无鱼不成宴</p>
	<p class="h4">自古无鱼不成宴</p>
</body>
</html>

运行结果：

11.3.3 字体风格 font-style

设置字体是否为斜体

语法：font-style:样式的取值

说明：样式取值三种：normal 默认正常字体

italic 斜体

oblique 中间状态，偏斜体显示

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>字体 font-family</title>	
	<style type="text/css">
		.h{
			font-family: "宋体";
			font-size: 30px;
			font-style: italic;
		}
	</style>
</head>
<body>
	<span class="h">
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
	</span>
	<hr>
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
</body>
</html>

运行结果：

11.3.4 加粗字体 font-weight

在HTML里使用<b>或<strong>设置粗体，在CSS中用font-weight属性设置字体的粗细

语法：font-weight:字体粗细值

说明：font-weight的取值范围包括normal、bold、bolder、lighter、number。

normal:正常粗细

bold:粗体

bolder:特粗体

lighter:特细体

number:不是真正取值，其范围是100~900，一般情况下都是整百的数字，如200、300

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>字体 font-family</title>	
	<style type="text/css">
		.h1{
			font-family: "宋体";
			font-size: 30px;
			font-weight: normal
		}
		.h2{
			font-family: "宋体";
			font-size: 30px;
			font-weight: bold；
		}
		.h3{
			font-family: "宋体";
			font-size: 30px;
			font-weight: bolder;
		}
		.h4{
			font-family: "宋体";
			font-size: 30px;
			font-weight: lighter;
		}
		.h5{
			font-family: "宋体";
			font-size: 30px;
			font-weight: 200;
		}
		.h6{
			font-family: "宋体";
			font-size: 30px;
			font-weight: 500
		}
		.h7{
			font-family: "宋体";
			font-size: 30px;
			font-weight: 900
		}
	</style>
</head>
<body>
	<p class="h1">我命由我不由天</p>
	<p class="h2">我命由我不由天</p>
	<p class="h3">我命由我不由天</p>
	<p class="h4">我命由我不由天</p>
	<p class="h5">我命由我不由天</p>
	<p class="h6">我命由我不由天</p>
	<p class="h7">我命由我不由天</p>
</body>
</html>

运行结果：

11.3.5 小写字母转大写字母 font-variant

语法：font-variant:取值

说明：

可能的值

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。（小写字母转大写）
inherit	规定应该从父元素继承 font-variant 属性的值。

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>字体 font-family</title>	
	<style type="text/css">
		.h{
			font-family: "宋体";
			font-size: 30px;
			font-variant: small-caps;
		}
		
	</style>
</head>
<body class="h">
	I love to collect the pens with all kinds of cartoons. 
	I use pens every day. When I buy the pen that has colorful pictures, 
	I will be very excited. In the future, I want to own a pen,
	which can changes the color and pictures. Then when I use it, 
	I feel like owning the new pen. 
</body>
</html>

运行结果：

11.3.6 字体复合属性

可以设置font的复合属性，用来简化CSS代码

语法：font:字体取值

说明：复合属性取值字体族科、字体大小、字体风格、加粗字体等，各值之间用空格连接

顺序：

font-style （使用斜体、倾斜或正常字体）

font-variant （设置小型大写字母的字体显示文本）

font-weight （设置文本的粗细）

font-size/line-height （设置字体的尺寸和行高）

font-family （规定元素的字体系列）

可以不需要每个都写(没写的使用默认值)，但是顺序还是要的

eg：

<html>
<head>
	<meta charset="UTF-8">
	<title>font复合属性</title>	
	<style type="text/css">
		.h{
			font: italic bold 1cm "宋体"
		}		
	</style>
</head>
<body>
	<span class="h">
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
	</span>
</body>
</html>

运行结果：

11.4 颜色和背景属性

11.4.1 颜色属性color

语法：color: 颜色取值

说明：可以使用颜色关键字如red,yellow

可以使用16进制数来设置颜色，16进制数正好能表示1~255之间的数值（F0=16^2=256）。使用此种方法可以设置1677万种颜色(256^3=16777216)。在完全表示颜色的时候使用#加上16进制数即可如下所示：

color: #ff0000 表示红色

color: #000099 表示蓝色

color: #ffff00 表示黄色

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>font复合属性</title>	
	<style type="text/css">
		.h1{
			font-family: "宋体"；
			font-size: 12px;
			color: #9900ff;
		}		
		.h2{
			font-family: "宋体"；
			font-size: 12px;
			color: red;		
		}		
		.h3{
			font-family: "宋体"；
			font-size: 12px;
			color: #000000
		}		
	</style>
</head>
<body>
	<p class="h1">我命由我不由天</p>
	<p class="h2">我命由我不由天</p>
	<p class="h3">我命由我不由天</p>
</body>
</html>

运行结果：

11.4.2 背景颜色 background-color

在HTML中使用<body>的bgcolor属性可以设置网页的背景颜色，而在CSS中使用background-color属性不但可以设置网页的背景颜色，还可以设置文字的背景颜色。

语法： background-color:颜色取值

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>字体 font-family</title>	
	<style type="text/css">
		.h{
			font-family: "宋体";
			font-size: 1cm;
			color: #9900ff;
			background-color: #ff99ff;
		}	
		body{
			background-color: #ff99cc;
		}
	</style>
</head>
<body>
	<span class="h">
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
	</span>
</body>
</html>

运行结果：

整个页面的背景颜色，文字的颜色，文字背景颜色，各不相同

11.4.3 背景图像 background-image

使用background-image 属性可以设置元素的背景图像

语法：background-image: url (图像地址)

说明：图像地址可以使绝对地址，也可以是相对地址

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>背景图像background-images</title>	
	<style type="text/css">
		.l{
			font-family: "宋体";
			font-size: 1cm;
			background-image: url(images/snow.gif);
		}
		.h{
			color: red;
		}
	</style>
</head>
<body class="l">
	<span class="h">
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
	</span>
</body>
</html>

运行结果：

11.4.4 背景重复 background-repeat

使用background-repeat属性可以设置背景图像是否平铺，并且可以设置如何平铺

语法：background-repeat:取值

说明：no-repeat表示背景图像不平铺；repeat表示背景图像平铺排满整个页面(默认情况)；repeat-x表示背景图像只在水平方向平铺；repeat-y表示背景图像只在垂直方向平铺。

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>背景重复background-repeat</title>	
	<style type="text/css">
		.l{
			font-family: "宋体";
			font-size: 1cm;
			background-image: url(images/snow.gif);
			background-repeat: repeat;
			<!--依次改为repeat-x  repeat-y-->
		}
		.h{
			color: red;
		}
	</style>
</head>
<body class="l">
	<span class="h">
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
	</span>
</body>
</html>

no-repeat运行结果:

repeat-x运行结果：

repeat-y运行结果：

11.4.5 背景附件 background-attachment

使用背景附件属性background-attachment可以设置背景图像是随对象滚动(条)还是固定不动

语法：background-attachment: scroll/fixed

说明：scroll表示背景图像随对象滚动而滚动，默认选项；fixed表示背景图像固定在页面上不动，只有其他的内容随滚动条滚动

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>背景附件background-attachment</title>	
	<style type="text/css">
		.l{
			font-family: "宋体";
			font-size: 3cm;
			background-attachment: scroll;
			<!--scroll改成fixed-->
			background-image: url(images/snow.gif);
			background-repeat: no-repeat;
			
			
		}
		.h{
			color: red;
		}
	</style>
</head>
<body class="l">
	<span class="h">
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
	</span>
</body>
</html>

fixed运行结果：

sroll默认运行结果：

11.4.6 背景位置 background-position

背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。替换元素包括img,input、textarea、select、和object。

常见注：

行内元素有：heda meat title lable span br a style em b i strong

块级元素有：body from select textarea h1-h6 html table button hr p ol ul dl cnter div

行内块元素常见的有： img input td

语法：background-position:位置取值

说明：位置取值包含两种，一种是采用数字，另一种是关键字描述

background-position属性的长度设置值
设置值	说明
X(数值)	设置网页的横向位置，其单位可以是所有尺寸单位
Y(数值)	设置网页的纵向位置，其单位可以是所有尺寸单位

background-position属性的百分比设置值
设置值	说明
0% 0%	左下位置
50% 0%	靠上居中位置
100% 0%	右上位置
0% 50%	靠左居中位置
50% 50%	正中位置
100% 50%	靠右居中对齐
0% 100%	右下位置
50% 100%	靠下居中对齐
100% 100%	右下位置

background-position属性的关键字设置值
设置值	说明
Top left	左上位置
Top center	靠上居中位置
Top right	右上位置
Left center	靠在居中位置
Center center	正中位置
Right center	靠右居中对齐
Bottom left	左下位置
Bottom center	靠下居中对齐
Bottom right	右下位置

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>背景位置background-position</title>	
	<style type="text/css">
		.l{
			font-family: "宋体";
			font-size: 3cm;
			background-attachment: fixed;
			background-image: url(images/snow.gif);
			background-position: center center;
			background-repeat: no-repeat;
			
			
		}
		.h{
			color: red;
		}
	</style>
</head>
<body class="l">
	<span class="h">
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
	</span>
</body>
</html>

运行结果：

正中位置，强悍的background-position

14.4.7 背景复合属性 background

使用背景复合属性可以简化CSS代码

语法：background:取值

说明：取值范围包括背景颜色，背景图像，背景重复，背景附件和背景位置，各值之间用空格相连

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

可能的值

值	描述	CSS
background-color	规定要使用的背景颜色。	1
background-position	规定背景图像的位置。	1
background-size	规定背景图片的尺寸。	3
background-repeat	规定如何重复背景图像。	1
background-origin	规定背景图片的定位区域。	3
background-clip	规定背景的绘制区域。	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	规定要使用的背景图像。	1
inherit	规定应该从父元素继承 background 属性的设置。	1

eg：

<html>
<head>
	<meta charset="UTF-8">
	<title>复合背景属性background  一次设置完</title>	
	<style type="text/css">
		.l{
			font-family: "宋体";
			font-size: 3cm;
			background: url(images/snow.gif) no-repeat center center;
		}
		.h{
			color: red;
		}
	</style>
</head>
<body class="l">
	<span class="h">
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
	</span>
</body>
</html>

运行结果：

11.5 段落属性

利用CSS还可以控制段落的属性，主要包括单词间隔、字符间隔、文字修饰、纵向排列、文本转换、文本排列、文本缩进和行高等。

11.5.1 单词间隔 word-spacing 字母汉字间隔letter-spacing

语法：word-spacing:取值

说明：取值可以使用normal，也可以使用长度值。normal指正常间隔，长度具体设置单词间隔的数值及单位，可以用负值。

可能的值

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。
inherit	规定应该从父元素继承 word-spacing 属性的值。

注意

word-spacing==>单词间隔

letter-spacing==>字母/汉字间隔

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>单词间隔</title>	
	<style type="text/css">
		p.df{
			font-family: "宋体";
			font-size: 20px;
			word-spacing: 25px;
		}
		.hz{
			font-family: "宋体";
			font-size: 20px;
			letter-spacing: 25px;
		}
	</style>
</head>
<body>
	<p class="df">
		It is the 15th year that i have been in the city of harbin in heilongjiang province.So it is also the 15th summer that i have experienced.
	 This summer is nothing special than before. Trees are still a wild profusion of vegetation;Grass is still green enough;Birds are still flying and singing all the time; 
	 Still so many people walking、laughing and shopping on the central street; Water of Songhua River is still so clean that attracts many fishing men.
	 And the most beautiful scenery line is the delicious food street where there are generous dishes and food to enjoy.
　  　Everything almost never change this summer，but for me it is a bit different. Because a new member is added to my life which is a female cat named dimple.
	 Dimple is adopted by me from a Vagrant Animals Association,and she is nearly five months old till now.Dimple is very cute and lovely,and i like her very much.
	 When i was in my house,she is very sticky and always stay with me together.Although this is the first time that i adopt animal,i suppose if i have enough patience ,
	 i can give this little life a warm home.So this summer for me is special and meaningful.
	</p>
	<hr>
	<p class="hz">
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
	</p>
</body>
</html>

运行结果：

11.5.2 字符间隔 letter-spacing

汉字当字符处理，前面已经实现了一次

11.5.3 文字修饰 text-decoration

对文本进行修饰，如下划线、删除线等

语法：text-decoration:取值

说明：

可能的值

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。即删除线
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>单词间隔</title>	
	<style type="text/css">
		h1{text-decoration: underline}
		h2{text-decoration: overline}
		h3{text-decoration: line-through}
		h4{text-decoration: blink}
		a{text-decoration: none}
	</style>
</head>
<body>
	<h1>我命由我不由天</h1>
	<h2>我命由我不由天</h2>
	<h3>我命由我不由天</h3>
	<h4>我命由我不由天</h4>
	<a href="http://www.w3school.com.cn/index.html">这是一个不带下划线的链接</a>
	
</body>
</html>

运行结果：

11.5.4 垂直对齐方式 vertical-align

语法：vertical-align:排列取值

说明：

可能的值

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	文本的下标。
super	文本的上标
top	垂直靠上对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>垂直对齐方式</title>	
	<style type="text/css">
	img.top {vertical-align:text-top}
	img.bottom {vertical-align:text-bottom}
	.ch{vertical-align:super}
	</style>
</head>

<body>
	<p>这是一副<img class="top" border="0" src="images/eg_cute.gif">位于段落中的画像</p>
	<p>这是一副<img class="bottom" border="0" src="images/eg_cute.gif">位于段落中的画像</p>
	<hr>
	5<span class="ch">2</span>-2<span class="ch">2</span>=21
</body>
</html>

运行结果：

11.5.5 文本转换 text-transform

转换英文字母大小写

语法：text-transform:转换值

说明：

可能的值

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>垂直对齐方式</title>	
	<style type="text/css">
	.zh{font-size: 14px;text-transform:none;}
	.zh1{font-size: 14px;text-transform:capitalize;}
	.zh2{font-size: 14px;text-transform:uppercase;}
	.zh3{font-size: 14px;text-transform:lowercase;}
	</style>
</head>

<body>
	<p class="zh">happy new year!</p>
	<p class="zh1">happy new year!</p>
	<p class="zh2">happy new year!</p>
	<p class="zh3">happy new year!</p>
</body>
</html>

运行结果：

11.5.6 水平对齐方式 text-align

语法：text-align:排列值

说明：

可能的值

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。★
inherit	规定应该从父元素继承 text-align 属性的值。

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>水平对齐方式</title>	
	<style type="text/css">
		h1{text-align:left}
		h2{text-align:center}
		h3{text-align:right}
		h4{text-align-last:justify}
		<!--text-align:justify不起作用  改成text-align-last:justify 但不是所有浏览器都支持-->
	</style>
</head>

<body>
	<h1>我命由我不由天</h1>
	<h2>我命由我不由天</h2>
	<h3>我命由我不由天</h3>
	<h4>我命由我不由天</h4>
</body>
</html>

运行结果：

11.5.7 文本首行缩进 text-indent

在HTML中只能控制段落的整体向右缩进，如果不进行设置，浏览器则默认为不缩进，而在CSS中可以控制段落的首行缩进以及缩进的距离

语法：text-indent:缩进值

说明：

可能的值

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>复合背景属性background  一次设置完</title>	
	<style type="text/css">
		.l{
			font-family: "宋体";
			font-size: 25px;
			text-indent: 50px;
		}
		.h{
			color: red;
		}
	</style>
</head>
<body class="l">
	<span class="h">
		姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。
		而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。
		终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？
		若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。
		多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
	</span>
</body>
</html>

运行结果：

11.5.8 文本行高 line-height

设置段落中行与行之间的距离

语法：line-height:行高值

说明：

可能的值

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。（倍数）
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>复合背景属性background  一次设置完</title>	
	<style type="text/css">
		p.small{line-height: 90%}
		p.big{line-height: 200%}
		p.gu{line-height: 20px}
		p.bei{line-height: 1}
	</style>
</head>
<body>
	<p>
		这是拥有标准行高的段落。
		在大多数浏览器中默认行高大约是 110% 到 120%。
		这是拥有标准行高的段落。
		这是拥有标准行高的段落。
		这是拥有标准行高的段落。
		这是拥有标准行高的段落。
		这是拥有标准行高的段落。
	</p>
	<hr>
	<p class="small">
		这个段落拥有更小的行高。
		这个段落拥有更小的行高。
		这个段落拥有更小的行高。
		这个段落拥有更小的行高。
		这个段落拥有更小的行高。
		这个段落拥有更小的行高。
		这个段落拥有更小的行高。
	</p>
	<hr>
	<p class="big">
		这个段落拥有更大的行高。
		这个段落拥有更大的行高。
		这个段落拥有更大的行高。
		这个段落拥有更大的行高。
		这个段落拥有更大的行高。
		这个段落拥有更大的行高。
		这个段落拥有更大的行高。
	</p>
	<hr>
	<p class="gu">
		这个段落固定行距的行高。
		这个段落固定行距的行高。
		这个段落固定行距的行高。
		这个段落固定行距的行高。
		这个段落固定行距的行高。
		这个段落固定行距的行高。
	</p>
	<hr>
	<p class="bei">
		这个段落具有1倍字体大小的行高。
		这个段落具有1倍字体大小的行高。
		这个段落具有1倍字体大小的行高。
		这个段落具有1倍字体大小的行高。
		这个段落具有1倍字体大小的行高。
		这个段落具有1倍字体大小的行高。
	</p>

</body>
</html>

运行结果：

11.5.9 处理空白 white-space

设置页面内空白的处理方式

语法：white-space:值

说明：

可能的值

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>处理空白 white-space</title>	
	<style type="text/css">
		p.pre{white-space: pre}
		p.nowrap{white-space: nowrap}
		p.pre-wrap{white-space: pre-wrap}
		p.pre-line{white-space: pre-line}
	</style>
</head>
<body>
	<p>
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	<hr>
	<p class="pre">
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	<hr>
	<p class="nowrap">
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	<hr>
	<p class="pre-wrap">
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	<hr>
	<p class="pre-line">
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>

</body>
</html>

运行结果：

对比一下，还是pre最好用

11.5.10 文本反排 unicode-bidi、direction

unicode-bidi和direction属性经常一起使用，用来设置对象的阅读顺序

1.unicode-bidi属性

语法： unicode-bidi：bidi-override | normal | embed

说明：

可能的值

normal

默认值

embed

如果是一个行内元素，这个值对于双向算法会打开附件的一层嵌套。这个嵌套层的方向由 direction 属性指定。会在元素内部隐式地完成顺序重排。

bidi-override

顺序重排在元素内部严格按照 direction 属性进行

2.direction属性

语法：direction:ltr | rtl |inherit

说明：

可能的值

值	描述
ltr	默认。文本方向从左到右。
rtl	文本方向从右到左。
inherit	规定应该从父元素继承 direction 属性的值。

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>处理空白 white-space</title>	
	<style type="text/css">
		p.rev{
			direction:rtl;
			unicode-bidi:bidi-override
		}
	</style>
</head>
<body>
	<p>
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	<hr>
	<p class="rev">
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
</body>
</html>

运行结果：

11.6 边框与填充属性

使用边距属性可以设置周围的边界宽度，包括上、下、左、右4个边界的距离。填充属性用于设置边框和元素内容之间的间距，同样包括上、下、左、右4个方向的填充值。它们的设置都是一样的，都为数值，单位可以是长度单位，也可以是百分比单位。

11.6.1 上边距 margin-top

上边距也叫顶端边距，使用上边距可以设置元素的上边界，可以使用长度值或百分比。

语法：margin-top: 边距值

说明：

可能的值

值	描述
auto	浏览器设置的上外边距。
length	定义固定的上外边距。默认值是 0。
%	定义基于父对象总高度的百分比上外边距。
inherit	规定应该从父元素继承上外边距。

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>margin-top 上边距</title>	
	<style type="text/css">
		img{
			margin-top: 30pt;
		}
	</style>
</head>
<body>
	<img src="images/3.jpeg" width="119" height="188" align="left">
	<p>
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	
</body>
</html>

运行结果：

注：

pt——点。一般为网页中标识字体的单位。
px——象素。一般也为网页中标识字体的单位。
两种关系：一英寸=72pt(点)=96px(像素)，网页中最常用到的：9pt=12px。

11.6.2 其他边距 margin-bottom、margin-left、margin-right

分别表示下、左、右边距

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>margin-top 上边距</title>	
	<style type="text/css">
		img{
			margin-top: 30pt;
			margin-right: 50pt;
			margin-bottom: 10pt;
			margin-left: 50pt;			
		}
	</style>
</head>
<body>
	<img src="images/3.jpeg" width="119" height="188" align="left">
	<p>
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	
</body>
</html>

运行结果：

11.6.3 边距复合属性 margin

对四个边距设置的缩写

语法：margin: 长度值 | 百分比 | auto

说明：

可能的值

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

可以取1到4个值：

取一个值：应用于4个边界

取2或3个值：省略的值与对边相等

取4个值：上、下、左、右分别对应其边距

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>margin-top 上边距</title>	
	<style type="text/css">
		img{
			margin: 10pt 30px 10px 20px	
		}
	</style>
</head>
<body>
	<img src="images/3.jpeg" width="119" height="188" align="left">
	<p>
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	
</body>
</html>

运行结果：

填充

11.6.4 顶端填充 padding-top （padding是内边距,-spacing是外边距（边框与边框之间））

设置上边框和选择内容之间的间隔

语法：padding-top:间隔值

说明：同上，取值长度值或百分比

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>margin-top 上边距</title>	
	<style type="text/css">
		body{
			padding-top: 40px;
		}
	</style>
</head>
<body>
	<img src="images/3.jpeg" width="119" height="188" align="left">
	<p>
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	
</body>
</html>

运行结果：

11.6.5 其他填充 padding--bottom、padding--right、padding--left

分别设置底、左、右间隔

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>margin-top 上边距</title>	
	<style type="text/css">
		body{
			padding-top: 40px;
			padding-right: 40px;
			padding-left: 40px;
			padding-bottom: 40px;
		}
	</style>
</head>
<body>
	<img src="images/3.jpeg" width="119" height="188" align="left">
	<p>
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	
</body>
</html>

运行结果：

11.6.6 填充复合属性 padding

省略CSS代码，对填充属性的缩写

语法：padding:长度值|百分比

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>margin-top 上边距</title>	
	<style type="text/css">
		body{
			padding: 40px 30px 50px 0px；
		}
	</style>
</head>
<body>
	<img src="images/3.jpeg" width="119" height="188" align="left">
	<p>
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	
</body>
</html>

运行结果：

11.7 边框属性

边框宽度、边框颜色、边框样式

11.7.1 边框样式 border-style

使用边框样式属性可以定义边框的风格样式，这个属性必须用于指定可见边距。可以分别设置上边框样式border-top-style、下边框样式border-bottom-style、左边距样式border-left-style和右边框样式border-right-style

语法： border-style:样式值

border-top-style:样式值

border-bottom-style:样式值

border-left-style:样式值

border-right-style:样式值

说明：

可能的值

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>边框样式 border-style</title>	
	<style type="text/css">
		p{
			border-top-style: dashed;
			border-bottom-style: dotted;
			border-left-style: solid;
			border-right-style: ridge;
		}
	</style>
</head>
<body>
	<p>
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	
</body>
</html>

运行结果：

11.7.2 边框宽度 border-width

语法：

border-width:宽度值

border-top-width:宽度值

border-bottom-width:宽度值

border-left-width:宽度值

border-right-width:宽度值

说明：

可能的值

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。长度：数字和单位组成
inherit	规定应该从父元素继承边框宽度。

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>边框样式 border-style</title>	
	<style type="text/css">
		p{
			border-top-style: dashed;
			border-bottom-style: dotted;
			border-left-style: solid;
			border-right-style: ridge;
			line-height: 20px;
			border-top-width: 20px;
			border-bottom-width: 30px;
			border-left-width: 40px;
			border-right-width: 50px;
		}
	</style>
</head>
<body>
	<p>
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	
</body>
</html>

运行结果：

11.7.3 边框颜色border-color

border-color设置边框颜色，可以用16种颜色的关键字或RGB值来设置

语法：

border-top-color:颜色值

border-bottom-color:颜色值

border-right-color:颜色值

border-left-color:颜色值

border-color:颜色值

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>边框样式 border-style</title>	
	<style type="text/css">
		p{
			border-top-style: dashed;
			border-bottom-style: dotted;
			border-left-style: solid;
			border-right-style: ridge;
			line-height: 20px;
			border-top-width: 2px;
			border-bottom-width: 2px;
			border-left-width: 2px;
			border-right-width: 2px;
			border-top-color: #ff9900;
			border-right-color: #0099ff;
			border-bottom-color: #cc33ff;
			border-left-color: #ccffff;			
		}
	</style>
</head>
<body>
	<p>
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	
</body>
</html>

运行结果：

11.7.4 边框属性border

border边框样式、宽度、颜色一起设置

语法：border:边框宽度边框样式颜色值

border-top:上边框宽度上边框样式颜色值

border-right:右边框宽度右边框样式颜色值

border-bottom:下边框宽度下边框样式颜色值

border-left:左边框宽度左边框样式颜色值

说明：border一次只能给出一组边框宽度样式

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>边框样式 border-style</title>	
	<style type="text/css">
		p{
			line-height: 25px;
			font-size: 12px;
			border-top: 2px dashed #00ccff;	
			border-right: 2px solid #3300ff;	
			border-bottom: 1px dotted #00ccff;	
			border-left: 2px ridge #3300ff;	
		}
	</style>
</head>
<body>
	<p>
		三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
    青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
		青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
	总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
	</p>
	
</body>
</html>

运行结果：

奇迹是执着的人创造的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础 CSS 第十一章使用CSS样式表 ----暑假学习第七、八天

第十一章使用CSS样式表通过CSS样式定义,可以将网页制作得更加绚丽多彩。采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。用CSS不仅可以做出令浏览者赏心悦目的网页，还能给网页添加许多特效。11.1 认识CSS CSS(Cascading Style Sheet,层叠样式表) 是一种制作网页的新技术，现在已经为大多数浏览器所支持，成...
复制链接

扫一扫