第十一章使用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="data:images/eg_cute.gif">位于段落中的画像</p><p>这是一副<img class="bottom" border="0" src="data: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="data: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="data: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="data: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="data: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="data: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="data: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>

运行结果：

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

前端基础 CSS 第十一章使用CSS样式表特效属性部分 ----暑假学习第九天
第十一章使用CSS样式表 11.8 定位属性使用定位属性可以控制元素的位置,包括相对定位和绝对定位两种方式.相对定位指允许元素在相对于文档布局的原始位置上进行偏移,而绝对定位是指允许元素与原始文档 ...
前端基础知识第四章---CSS
前言 ❤️ 生活中总有一些惊喜值得期待,只要我们一直保持着热爱 ❤️ 前端基础知识第四章---CSS 一.CSS 第四章 (1)浮动(float) 1.1 传统网页布局的三种方式 1.2 标准流(普通 ...
（Java高级教程）第四章必备前端基础知识-第二节1：CSS概述和选择器
文章目录一:CSS概述 (1)概述 (2)语法规范 (3)CSS引入方式二:选择器 (1)基础选择器 ①:标签选择器 ②:类选择器 ③:id选择器 ④:通配符选择器总结 (2)复合选择器 ①:后 ...
前端基础教程:简单的实现html+css+javascript点赞效果
程序的主要目的:在网页中实现点赞效果,一共六个步骤! 步骤一:在D盘右键新建一个文件夹,将其命名为"Web" 步骤二:然后在这个Web文件夹中右键,选择"新建" ...
鸟哥的Linux私房菜(基础篇)- 第二十一章、系统配置工具(网络与打印机)与硬件侦测
第二十一章.系统配置工具(网络与打印机)与硬件侦测最近升级日期:2009/09/15 除了手动配置之外,其实系统提供了一个名为 setup 的命令给系统管理员使用喔!这个命令还能够配置网络呢.此外, ...
鸟哥的Linux私房菜(基础篇)- 第十一章、认识与学习 BASH
第十一章.认识与学习 BASH 最近升级日期:2009/08/25 在 Linux 的环境下,如果你不懂 bash 是什么,那么其他的东西就不用学了!因为前面几章我们使用终端机下达命令的方式,就是透过 ...
css实例 css中id/class 详解样式表（外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解）[第一天]
文章目录 css实例 css中的id css中的class 样式表外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...
【Linux命令】《鸟哥Linux基础》第二十一章软件安装：源代码与Tarball
第二十一章软件安装:源代码与Tarball 了解:如何将开放源码的程序设计.加入函数库的原理.通过编译而成为可执行的二进制程序,最后该文件可被我们所使用的一连串过程. 这一章介绍最原始的软件管理方式 ...
Java语言程序设计(基础篇) 第十一章继承和多态
第十一章继承和多态 11.1 引言面向对象的编程允许你从已经存在的类中定义新的类,这称为继承. 11.2 父类和子类 1.继承使得你可以定义一个通用的类(既父类),之后扩充该类为一个更加特定的类( ...

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

第十一章 使用CSS样式表

11.1 认识CSS

11.2 使用CSS

11.2.1 CSS的基本语法

11.2.2 添加CSS的方法

11.3字体属性

11.3.1 字体font-family

11.3.3 字体风格 font-style

11.3.4 加粗字体 font-weight

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

可能的值

11.3.6 字体复合属性

11.4 颜色和背景属性

11.4.1 颜色属性color

11.4.2 背景颜色 background-color

11.4.4 背景重复 background-repeat

11.4.5 背景附件 background-attachment

11.4.6 背景位置 background-position

14.4.7 背景复合属性 background

可能的值

11.5 段落属性

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

可能的值

11.5.2 字符间隔 letter-spacing

11.5.3 文字修饰 text-decoration

可能的值

可能的值

11.5.5 文本转换 text-transform

可能的值

可能的值

11.5.7 文本首行缩进 text-indent

可能的值

11.5.8 文本行高 line-height

可能的值

可能的值

11.5.10 文本反排 unicode-bidi、direction

可能的值

normal

bidi-override

可能的值

11.6 边框与填充属性

11.6.1 上边距 margin-top

可能的值

11.6.3 边距复合属性 margin

可能的值

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

11.7 边框属性

11.7.1 边框样式 border-style

可能的值

11.7.2 边框宽度 border-width

可能的值

11.7.3 边框颜色border-color

11.7.4 边框属性border

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

最新文章

热门文章

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

第十一章使用CSS样式表

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