-
设定颜色
-
背景使用
-
图像使用
1.设定颜色
红色的几种合法定义;
#f00;
#ff0000;
Red;
Rgb(255,0,0);
Rgb(100%,0%,0%);
2.十六进制三元组
第一个字节:红色的值;
第二个字节:绿色的值;
第三个字节:蓝色的值;
简化写法:#cccccc 可写成 #ccc, #ff6633 可以写成 #f63
3.使用 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
红色(red) ff0000
紫红色(fuchsia) ff00ff
黄色(yellow) ffff00
橙色(orange) ffa500
白色(white) ffffff
4.使用 span 更好的控制文本中局部区域的文本
文本内容
5.使用 display 属性提供区块转换
inline,block,none
6.背景图象渐变的制作
Body {
Background: #ccc url(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-repeat left center;
}
如果希望使用百分比而不使用关键字,则 0 50%这样就实现了垂直居中
9.圆顶角
Headline
Content
.box {
Width: 418px;
Background: #ccc url(bottom.gif) no-repeat left bottom;
}
.box h2 {
Background:url(top.gif) no-repeat left top;
}
如果不希望碰到边界,加上填充.
.box h2 {
Padding:10px 20px 0 20px;
}
.box p {
Padding:0 20px 10px 20px;
}
10.简单的 CSS 阴影效果
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
position: relative;
margin: 10px 0 0 10px;
}
.img-wrapper img {
display: block; /这个属性到列表再进行解释/
margin: -5px5px 5px -5px;
position: relative;
}
5使用 display 属性提供区块转换
内联转区块,使用 span 更好的控制文本中局部区域的文本 6背景图象渐变的制作
7给一个区块加上一个背景
Padding-left: 20px;
Background:url(2.jpg) no-repeat left center;
}
给标题加上一个小图标
9圆顶角}
h1{
background: url(images/3.png) no-repeat left top;
}
圆顶角圆顶角圆顶角
圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角
}
还没有学好