标签：
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;
}
标签：
原文地址：http://www.cnblogs.com/lifi/p/5722724.html
