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

主讲:李炎恢
第 22 章 CSS 构造颜色、背景与图像
1. 设定颜色
2. 背景使用
3. 图像使用
主讲教师:李炎恢
官方网站:

红色的几种合法定义;
#f00;
#ff0000;
Red;
Rgb(255,0,0);
Rgb(100%,0%,0%);

第一个字节:红色的值;
第二个字节:绿色的值;
第三个字节:蓝色的值;
简化写法:# 可写成#ccc, #ff6633 可以写成#f63
17 种具名颜色
黑色(black) 000000
藏蓝色(navy) 000080
绿色(green) 008000
海蓝色(teal) 008080
银色(silver) 0c0c0c
蓝色(blue) 0000ff
酸橙色(lime) 00ff00
浅绿色(aqua) 00ffff
绛紫色(maroon) 800000
紫色(purple) 800080
橄榄绿(olive) 808000
灰色(gray) 808080
PHP100 视频教程
主讲:李炎恢
红色(red) ff0000
紫红色(fuchsia) ff00ff
黄色(yellow) ffff00
橙色(orange) ffa500
白色(white) ffffff
span 更好的控制文本中局部区域的文本
<span>文本内容</span>
display 属性提供区块转换
inline,block,none

Body {
Background: #ccc url() rpeat-x;
}

#branding {
Width: 700px;
Height: 200px;
Background: url() no-repeat;
}

H1 {
Padding-left: 20px;
Background: url () no-repeat left center;
}
如果希望使用百分比而不使用关键字,则 0 50%这样就实现了垂直居中

<div class=”box”>
<h2>Headline</h2>
<p>Content</p>
</div>
.box {
Width: 418px;
Background: #ccc url() no-repeat left bottom;
}
.box h2 {
PHP100 视频教程
主讲:李炎恢
Background:url() no-repeat left top;
}
如果不希望碰到边界,加上填充.
.box h2 {
Padding:10px 20px 0