CSS构造颜色、背景与图像

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更好的控制文本中局部区域的文本

????<span>文本内容</span>

?

inline 转换成内联,

block 转换成区块,

none 不占位的隐藏

?

6.背景图象渐变的制作

????Body {

????????Background: #ccc url(bg.gif) repeat-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.圆顶角

????<div class="box">

????????<h2>Headline</h2>

????????<p>Content</p>

????</div>

?

????.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阴影效果

<div class="img-wrapper">

<img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />

</div>

?

.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: -5px 5px 5px -5px;

position: relative;

}