首页 > 代码库 > 构造颜色,背景,图像
构造颜色,背景,图像
22.1
1.设定颜色
红色的几种合法定义:
#fOO
#ffOOOO
red
red(255,0,0)
red(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
绛(jiang)紫色 maroon 800000
紫色 purple 800080
橄榄绿 olive 808000
灰色 gray 808080
红色 red ff0000
紫红色 fuchsia ff00ff
黄色 yellow ffff00
橙色 orange ffa500
白色 white ffffff
4.使用span更好的控制文本中局部区域的文本
<span>文本内容</span>
5.使用display属性提供区块转换
inline(转换成内联),block(转换成区块),none(不占位的隐藏)
6.背景图像渐变的制作
body{
background:#ccc url(xxx.gif)rpeat-x或y;
}
7.给一个区块加上背景
#branding{
width:700px;
height:20px;
background:url(xxx.gif)no-repeat;
}
8.给标题加上一个小图标
h1{
background:url(xxx.gif)no-repeat left center;
padding-left:20px;
}
如果希望使用百分比而不使用关键字,则0.50%这样就实现了垂直居中
9.圆顶角
<div>
<h2>...</h2>
<p>...</p>
</div>
div{
width:320px;
height:180px;
background:#ccc url(xxx.gif)no-repeat left bottom;
}
h2{
background:url(xxx.gif)no-repeat left bottom;
padding-left:40px;
}
10.简单的css阴影效果
<div>
<img src="http://www.mamicode.com/xxx.jpg" />
</div>
div{
width:250px;
height:343px;
background:url(xxx.gif)no-repeat right bottom;
}
div img{
position:relative;
top:-2px;
left:-2px;
}
构造颜色,背景,图像