章构造颜色背景与图像.pdf
第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.简单的