文档详情

章构造颜色背景与图像.pdf

发布:2025-03-25约2.94千字共4页下载文档
文本预览下载声明

第22章CSS构造颜色、背景与图像

1.设定颜色

2.背景使用

3.图像使用

主讲:恢

1.设定颜色

红色的几种合法定义;

#f00;

#ff0000;

Red;

Rgb(255,0,0);

Rgb(100%,0%,0%);

2.十六进制三元组

第一个字节:红色的值;

第二个字节:绿色的值;

第三个字节:蓝色的值;

简化写法:#cccccc可写成#ccc,#ff6633可以写成#f63

3.使用17种具名颜色

黑lack)000000

藏蓝色(navy)000080

绿色(green)008000

海蓝色(teal)008080

银色(silver)0c0c0c

蓝lue)0000ff

酸橙色(lime)00ff00

浅绿色(aqua)00ffff

绛紫色(maroon)800000

紫色(purple)800080

橄榄绿(olive)808000

灰色(gray)808080

第1页共4页PHP100

红色(red)ff0000

紫红色(fuchsia)ff00ff

(yellow)ffff00

橙色(orange)ffa500

白色(white)ffffff

4.使用span更好的控制文本中局部区域的文本

span文本内容/span

5.使用display属性提供区块转换

inline,block,none

6.背景图象渐变的制作

Body{

Background:#cccurl(bg.gif)rpeat-x;

}

7.给一个区块加上一个背景

#branding{

Width:700px;

Height:200px;

Background:url(branding.gif)no-repeat;

}

8.给标题加上一个小图标

H1{

Padding-left:20px;

Background:url(bullet.gif)no-repeatleftcenter;

}

如果希望使用百分比而不使用关键字,则050%这样就实现了垂直居中

9.圆顶角

divclass=”box”

h2Headline/h2

pContent/p

/div

.box{

Width:418px;

Background:#cccurl(bottom.gif)no-repeatleftbottom;

}

.boxh2{

第2页共4页PHP100

Background:url(top.gif)no-repeatlefttop;

}

如果不希望碰到边界,加上填充.

.boxh2{

Padding:10px20px020px;

}

.boxp{

Padding:020px10px20px;

}

10.简单的

显示全部
相似文档