开心庄园html的代码,HTML第五章(示例代码)

第五章 css美化网页元素

1.使用CSS美化网页文本的意义：

①有效地传递页面信息。

②使用CSS美化过的页面文本，使页面漂亮，美观，吸引用户。

③可以很好地突出页面的主题内容，使用户第一眼可以看到页面主要内容。

④具有良好的用户体验。

2.标签：

标签是被用来组合HTML文档中的内行元素的，它没有固定的格式表示，只有对它应用CSS样式时，它才会产生视觉上的变化。

3.字体样式：

属性名

含义

举例

备注

font-family

设置字体类型

font-family:"隶书";

当需要同时设置英文字体和中文字体时，一定要将英文字体设置在中文字体之前，中间用逗号隔开

font-size

设置字体大小

font-size:12px;

单位：px;

font-style

设置字体风格

font-style:italic;

Normal(默认值)，italic ,oblique

Italic和oblique效果非常相似

font-weight

设置字体的粗细

font-weight:bold;

Normal (400)

默认值，定义标准的字体

Bold(700)

粗体字体

bolder

更粗的字体

lighter

更细的字体

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

定义由细到粗，400等同于normal,700等同于bold

font(简写)

在一个声明中设置所有字体属性

font:italic bold 36px "宋体";

顺序：风格，粗细，大小，类型

(分出大类)

4.使用CSS排版网页文本：

属性

含义

举例

备注

color

设置文本颜色

color:#00C;

text-align属性

left

(默认值)把文本排列到左边

text-align

设置元素水平对齐方式

text-align:right;

right

把文本排列到右边

center

把文本排列到中间

justify

实现两端对齐文本效果

text-indent

设置首行文本的缩进

text-indent:20em;

text-decoration常用值

line-height

设置文本的行高

line-height:25px;

none

(默认值)定义的标准文本

underline

设置文本的下划线

text-decoration

设置文本的装饰

text-decoration:underline;

overline

设置文本的上划线

Line-through

设置文本的删除线

blink

设置文本闪烁(只在Firefox有效)

5.垂直对齐方式：

在CSS中通过vertical-align设置垂直方向对齐方式。但是在目前的浏览器中，只能对表格单元格的对象使用对齐方式属性，而对于一般的标签，如

~

、

、

标签都不起作用，因此vertical-align在设置文本标签中垂直对齐时并不常用，它反而用来设置图片及文本的对齐方式。

6.超链接伪类：

伪类名称

含义

示例

a:link

未单击访问时超链接样式

a:link{color:#9ef5f9;}

a:visited

单击访问后超链接样式

a:visited {color:#333;

text-decoration:none;(无下划线)

}

a:hover

鼠标悬浮其上的超链接样式

a:hover{color:#ff7300;

a:active

鼠标单击未释放的超链接样式

a:active {color:#999;

text-decoration:underline;(有下划线)

}

顺序：

a:link –> a:visited -> a:hover -> a:active

(前后浮释)

7.Cursor属性常用值：

值

说明

图例

default

默认光标

pointer

超链接的指针

wait

指示程序正在忙

help

指示可用的帮助

text

指示文本

crosshair

鼠标呈现十字状

8.

标签：

< div>标签可以把HTML文档分割成独立的，不同的部分，因此

标签用来进行网页布局。

标签与

标签一样，也是成对出现的。在使用

布局页面时，它可以嵌套

,同时也可以嵌套列表、段落等各种网页元素。

CSS中控制网页元素的两个属性

宽

width

高

height

9.网页背景属性：

背景属性

background-color

背景颜色值：十六进制方法表示

background-image

repeat

沿水平和垂直两个方向平铺

no-repeat

不平铺，即背景图像只显示一次

Repeat-x

只沿水平方向平铺

Repeat-y

只沿垂直方向平铺

background-position

Xpos  Ypos

使用像素值表示，第一个值表示水平位置，第二个值表示垂直位置

30px 40px正向偏移，图像向下和向右移动

X%  Y%

使用百分比表示背景位置

30% 50%：

垂直方向居中，

水平方向偏移30%

X、Y方向关键词

使用关键词表示背景的位置，水平方向的关键词有

left、 center、right

垂直方向的关键词有

top、center、bottom

使用水平和垂直方向的关键词进行自由组合，例：

Right  top(右上角出现)

Left bottom(左下角出现)

top (上方水平居中位置出现)

background(简写)

颜色图片位置定位是否平铺

例：backgrond:#c00 url (image/arrow.gif ) 205px 10px no-repeat

10列表样式：

List-style-type

值

说明

语法示例

图示例

none

无标记符号

list-style-type:none;

刷牙

洗脸

disc

实心圆，默认类型

list-style-type:disc;

●刷牙

●洗脸

circle

空心圆

list-style-type:circle;

○刷牙

○洗脸

square

实心正方形

list-style-type:square;

■刷牙

■洗脸

decimal

数字

list-style-type:decimal

1.刷牙

2.洗脸

List-style-image

List-style-position属性是使用图象来替换列表的标记，当设置了list-style-image后list-style-type属性都将不起作用,页面中仅显示图像标记

Li{

List-style-image:url(image/arrow.gif)

List-style-type:circle;

}

List-style-position

inside

标示项目标记放置在文本以内，且环绕文本根据标记对齐

outside

是默认值，它保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐

list-style(简写)

list-style:circle outsise url(image/arrow.gif);