收藏
下载资源下载资源 加入VIP,免费下载

第6章 CSS标准属性.docx

上传人：b****5 文档编号：6892301 上传时间：2023-01-12 格式：DOCX 页数：100 大小：1.06MB
下载 相关 举报
第6章 CSS标准属性.docx_第1页
第1页 / 共100页
第6章 CSS标准属性.docx_第2页
第2页 / 共100页
第6章 CSS标准属性.docx_第3页
第3页 / 共100页
第6章 CSS标准属性.docx_第4页
第4页 / 共100页
第6章 CSS标准属性.docx_第5页
第5页 / 共100页
点击查看更多>>
下载资源
资源描述

第6章 CSS标准属性.docx

《第6章 CSS标准属性.docx》由会员分享，可在线阅读，更多相关《第6章 CSS标准属性.docx（100页珍藏版）》请在冰豆网上搜索。

第6章 CSS标准属性.docx

第6章CSS标准属性

第6章CSS标准属性

课前导读

前面我们介绍了CSS的基本概念，重点介绍了如何通过选择符来指定网页中的某个或某类元素。

本章我们将介绍CSS基本属性，对于CSS基本属性我们分了十类进行介绍，这些属性涉及了文本样式、字体样式、列表样式、边框样式、背景样式等。

通过对这些基本属性的学习，我们将掌握如何定义网页中指定元素的外观。

本章重点

在本章我们将重点学习：

☐CSS设置页面字体

☐CSS设置页面背景

☐CSS设置页面中边框的样式

☐CSS设置页面中的列表

☐CSS设置页面滚动条及鼠标样式

W3C组织的CSS规范不断修订、版本逐步升级，在我们下面的讲解中会明确说明属性或属性值定义于CSS1或是CSS2。

目前CSS标准属性（我们指符合W3C规范的属性）得到各浏览器相对较好的支持。

在介绍属性之前，我们先就本章的几种表示方法进行解释。

符号“|”表示左右两项只能选择其中一项；符号“||”表示左右两项可以选择一项也可以同时存在。

本章使用IE代表InternetExplorer浏览器，FF代表Firefox浏览器。

对于各属性我们使用IE6.0及FF2.0进行测试，未经特殊说明即表示上述两个浏览器均支持该属性。

6.1颜色和背景

6.1.1color

属性：

color

属性值：

颜色

初始值：

取决于浏览器的定义，通常是黑色。

版本：

CSS1

兼容性：

IE4+，NS4+

继承性：

有

描述：

元素的字体颜色样式。

例6-1color属性

CSS基本属性

red">这是红色文本。

#00FF00">这是绿色文本。

#00F">这是蓝色文本。

rgb（100%,255,0）">这是黄色文本。

该例运行结果如图6-1。

图6-1color属性

6.1.2background-color

属性：

background-color

属性值：

transparent|颜色

transparent：

背景色透明

初始值：

transparent

版本：

CSS1

兼容性：

IE4+NS4+

继承性：

无

描述：

设置元素背景色。

例6-2background-color属性

CSS基本属性

200px;background-color:

red;">背景色为红色。

transparent;">背景为透明。

该例运行结果如图6-2。

需要注意的是该属性的初始值便是transparent，实际上我们很少使用该属性值，除非为了配合其他交互效果，绝大多数情况下设为透明背景色的CSS定义可以删除。

图6-2background-color属性

6.1.3background-image

属性：

background-image

属性值：

none|url（图像的URL）

url（图像的URL）：

提供图像的URL。

初始值：

none

版本：

CSS1

兼容性：

IE4+NS4+

继承性：

无

描述：

设置元素背景图片。

例6-3background-image属性

CSS基本属性

200px;background-image:

url（bg.gif）;">背景为图像。

none;">无背景图像。

该例运行结果如图6-3。

同样该属性的初始值便是none，实际上我们也很少使用该属性值。

图6-3background-image属性

6.1.4background-position

属性：

background-position

属性值：

（1）长度||长度

（2）left|center|right||top|center|bottom

初始值：

0%0%

版本：

CSS1

兼容性：

IE4+NS6+

继承性：

无

描述：

设置元素背景图片的平铺的起始位置。

例6-4background-position属性

CSS基本属性

div{height:

50px;width:

210px;border:

1pxsolid#000;margin:

3px;background-image:

url（bg1.gif）;}

righttop">

leftbottom">

50%50%">

10px10px">

该例运行结果如图6-4。

本例中我们使用的背景图像是一个白色边框并以灰色填充的正方形。

边长为20px，而

元素的宽度和高度分别为210px和50px。

我们看第一个

元素显然从右上角开始平铺；第二个
元素从左下角开始；第三个
元素的指定50%是指从中间开始平铺；而第四个
元素指定10px是从左上角距上边、距左边各10px的位置向周围平铺。

使用关键字赋值时left和top相当于0%；right和bottom相当于100%；center相当于50%。

如果我们为该属性赋值时如果只有一个值则默认第二个值为center；如果不使用关键字赋值，那么就会认为第一个值为水平方向，第二个值为竖直方向。

图6-4background-position属性

6.1.5background-repeat

属性：

background-repeat

属性值：

repeat|no-repeat|repeat-x|repeat-y

repeat：

背景图像在纵向和横向上平铺

no-repeat：

背景图像不平铺

repeat-x：

背景图像在横向上平铺

repeat-y：

背景图像在纵向平铺

初始值：

repeat

版本：

CSS1

兼容性：

IE4+NS4+

继承性：

无

描述：

设置元素背景图片的平铺方式。

例6-5background-repeat属性

CSS基本属性

div{height:

50px;width:

210px;border:

1pxsolid#000;margin:

3px;background-image:

url（bg1.gif）;}

repeat;">

no-repeat;">

repeat-x;">

repeat-y;">

该例运行结果如图6-5。

图6-5background-repeat属性

6.1.6background-attachment

属性：

background-attachment

属性值：

scroll|fixed

scroll：

背景图像跟随对象内容滚动

fixed：

背景图像固定

初始值：

scroll

版本：

CSS1

兼容性：

IE4+NS6+

继承性：

无

描述：

设置元素背景图片是否跟随对象内容滚动。

例6-6background-attachment属性

CSS基本属性

div{height:

50px;width:

210px;border:

1pxsolid#000;margin:

3px;background-image:

url（bg1.gif）;overflow:

auto;}

scroll;">

1

2

3

fixed;">

1

2

3

该例运行结果如图6-6。

第一个

元素的背景随着我们拖动光标条会上下移动，而第二个
元素背景是固定不动的，内容是浮在背景上面的，拖动光标条只有内容跟随光标条上下移动。

图6-6background-attachment属性

6.1.7background

属性：

background

属性值：

background-color||background-image||background-repeat||background-attachment||background-position

版本：

CSS1

兼容性：

IE4+NS4+

继承性：

无

描述：

复合属性。

如果对复合属性赋值时只赋值部分属性，则其他属性将以各自的初始值赋值。

各属性值初始值分别为：

transparentnonerepeatscroll0%0%。

例6-7background属性

CSS基本属性

div{height:

50px;width:

210px;border:

1pxsolid#000;margin:

3px;}

red;">

url（bg1.gif）repeat-xright;">

该例运行结果如图6-7。

对于第二个

元素由于我们设定了right，则竖直方向上便赋值为center，尽管repeat-x已经限定仅在水平方向平铺。

图6-7background

6.2字体

6.2.1font-family

属性：

font-family

属性值：

字体名称|字体序列名称

（1）字体名称。

（2）字体序列名称：

cursive|fantasy|monospace|serif|sans-serif。

版本：

CSS1.0

兼容性：

IE4+，NS4+

继承性：

有

描述：

字体。

多种字体时使用逗号分隔，如果字体名称中带有空格一定要使用引号。

例6-8font-family属性

CSS基本属性

宋体">这是宋体文本。

黑体">这是黑体文本。

'CourierNew',monospace">CourierNew

该例运行结果如图6-8。

图6-8font-family属性

6.2.2font-size

属性：

font-size

属性值：

绝对长度单位|相对长度单位|长度

版本：

CSS1.0

兼容性：

IE4+，NS4+

继承性：

有

描述：

字体大小。

例6-9font-size属性

CSS基本属性

12px">这是12px文本。

1em">这是1em文本。

这是使用默认字号的文字

150%">这是字号150%的文本。

（相对默认字号）

该例运行结果如图6-9。

图6-9font-size属性

6.2.3font-size-adjust

属性：

font-size-adjust

属性值：

none|数值

none：

字体遵守自己的Aspect值。

数值：

为字体设定Aspect值。

版本：

CSS2.0

兼容性：

IE6.0与FF2.0均不支持。

继承性：

有

描述：

字体Aspect值是指字体小写字母“x”的高度与字体高度的比值。

如果字体以比较小的字号显示时，Aspect值比较大的字体更加容易辨认阅读。

在CSS2.1版本中该属性已被删除。

6.2.4font-stretch

属性：

font-stretch

属性值：

normal|narrower|wider

normal：

不应用拉伸效果

narrower：

使用字体宽度更小的值

wider：

使用字体宽度更大的值

版本：

CSS2.0

兼容性：

IE6.0与FF2.0均不支持。

继承性：

有

描述：

字体水平方向拉伸。

在CSS2.1版本中该属性已被删除。

6.2.5font-style

属性：

font-style

属性值：

normal|italic|oblique

normal：

正常

italic：

斜体。

对于没有斜体字型字体，将应用oblique

oblique：

倾斜的字体

版本：

CSS1

兼容性：

IE4+NS4+

继承性：

有

描述：

正常字体或斜体。

例6-10font-style属性

CSS基本属性

normal;">这是正常字体。

italic;">这是斜体。

oblique;">这是倾斜的字体。

该例运行结果如图6-10。

图6-10font-style属性

6.2.6font-variant

属性：

font-variant

属性值：

normal|small-caps

normal：

正常的字体

small-caps：

小型的大写字母字体显示文本

版本：

CSS1

兼容性：

IE4+NS6+

继承性：

有

描述：

字体变体效果。

例6-11text-variant属性

CSS基本属性

normal;">Thisistextfor'normal'.

normal;">THISISTEXTFOR'NORMAL'.

small-caps;">Thisistextfor'small-caps'.

该例运行结果如图6-11。

图6-11text-variant属性

6.2.7font-weight

属性：

font-weight

属性值：

normal|bold|bolder|lighter|数值

normal：

正常的字体。

相当值为400。

bold：

粗体。

相当于标记效果，值为700。

bolder：

特粗体

lighter：

细体

数值：

100|200|300|400|500|600|700|800|900

版本：

CSS1

兼容性：

IE4+NS4+

继承性：

有

描述：

调节字体粗细。

例6-12font-weight属性

CSS基本属性

normal;">这是正常字体。

bold;">这是bold字体。

700;">这是值为700字体。

该例运行结果如图6-12。

图6-12font-weight属性

6.2.8line-height

属性：

line-height

属性值：

normal|长度

normal：

使用默认行高

版本：

CSS1

兼容性：

IE4+NS4+

继承性：

有

描述：

设定行高。

例6-13line-height属性

CSS基本属性

div{width:

210px;border:

1pxsolid#000;margin:

3px;}

normal;">这是测试行高属性的文本。

20px;">这是测试行高属性的文本。

30px;">这是测试行高属性的文本。

40px;">这是测试行高属性的文本。

该例运行结果如图6-13。

图6-13line-height属性

6.2.9font

属性：

font

属性值：

（1）font-style||font-variant||font-weight||font-size||line-height||font-family

（2）caption|icon|menu|message-box|small-caption|status-bar

caption：

使用有标题属性（caption）的系统控件字体

icon：

使用图标的字体

menu：

使用菜单的字体

message-box：

使用信息对话框的字体

small-caption：

使用小控件的标签字体

status-bar：

使用窗口状态栏的字体

版本：

CSS1/CSS2

兼容性：

IE4+NS4+

继承性：

有

描述：

第一种赋值方式为复合属性用法；第二种赋值方法是CSS2中定义的。

6.3文本

6.3.1text-align

属性：

text-align

属性值：

left|right|center|justify

left：

左对齐

right：

右对齐

center：

居中

justify：

两端对齐

版本：

CSS1.0

兼容性：

IE4+，NS4+

继承性：

有

描述：

元素文本的水平对齐方向。

例6-14text-align属性

CSS基本属性

div{width:

300px;border:

1pxsolid#000;margin:

3px;}

right;">右对齐

left;">左对齐

center;">居中

这是一句关于CSS的介绍：

TheW3CcameupwiththeideaofCascadingStyleSheets（CSS）toheadofftheneedbybrowsermanufacturerstointroduceevenmoreHTMLtags.

justify;">这是一句关于CSS的介绍：

TheW3CcameupwiththeideaofCascadingStyleSheets（CSS）toheadofftheneedbybrowsermanufacturerstointroduceevenmoreHTMLtags.

>

例6-14运行结果如图6-14，其中对于justify属性值的测试掺杂了英文，原因是由于中文文字都是等宽的，因此对于纯中文段落两端对齐效果是无法展示出来的。

图6-14text-align属性

6.3.2text-indent

属性：

text-indent

属性值：

长度

版本：

CSS1.0

兼容性：

IE4+，NS4+

继承性：

有

描述：

元素文本的缩进样式。

如果属性值为正值则为首行缩进的样式，如果属性值为负值则为悬挂缩进的样式。

例6-15text-indent属性

CSS基本属性

absolute;left:

30px;width:

200px">

这是未定义任何样式的文本。

20px">这是定义了缩进20px的一段文本。

15%">这是定义了缩进15%的一段文本。

-20px">这是定义了缩进-20px

展开阅读全文
猜你喜欢
相关搜索

当前位置：首页 > 法律文书 > 调解书

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1