22 , CSS 構造顏色、背景與圖像
1. 設定顏色
2. 背景使用
3. 圖像使用
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>
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.圓頂角
<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: -5px5px 5px -5px;
position: relative;
}
5使用 display 屬性提供區塊轉換
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用 display 屬性提供區塊轉換</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background: red;
display: inline;
}
span{
width: 200px;
height: 200px;
background: red;
display:block;
}
/*
block轉換成區塊
inline轉換成內聯
none不占位的隱藏
*/
</style>
</head>
<body>
<div>使用 display 屬性提供區塊轉換:區塊轉內聯</div><br/><br/>
<span>內聯轉區塊,使用 span 更好的控制文本中局部區域的文本</span>
</body>
</html>
6背景圖象漸變的制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用 display 屬性提供區塊轉換</title>
<style type="text/css">
Body {
Background: #ccc url(images/1.png) rpeat-x;
}
</style>
</head>
<body>
<div>背景圖象漸變的制作</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
7給一個區塊加上一個背景
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>給一個區塊加上一個背景</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background:red url(images/bg.jpg) no-repeat right bottom;
}
</style>
</head>
<body>
<div>給一個區塊加上一個背景</div>
</body>
</html>
8給標題加上一個小圖標
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>給一個區塊加上一個背景</title>
<style type="text/css">
H1 {
Padding-left: 20px;
Background:url(2.jpg) no-repeat left center;
}
</style>
</head>
<body>
<h1>給標題加上一個小圖標</h1>
</body>
</html>
9圓頂角
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>給一個區塊加上一個背景</title>
<style type="text/css">
div{
width:320px;
height:180px;
background:blue url(images/2.png) no-repeat left bottom;
}
h1{
background: url(images/3.png) no-repeat left top;
}
</style>
</head>
<body>
<div>
<h1>圓頂角圓頂角圓頂角</h1>
<P>圓頂角圓頂角圓頂角圓頂角圓頂角圓頂角圓頂角圓頂角圓頂角圓頂角圓頂角圓頂角圓頂角圓頂角圓頂角</P>
</div>
</body>
</html>
10簡單的 CSS 陰影效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>給一個區塊加上一個背景</title>
<style type="text/css">
body{
background: #fff;
}
div{
width:320px;
height:180px;
background:blue;
}
</style>
</head>
<body>
<div>
<img src="images/pic7.jpg"/>還沒有學好
</div>
</body>
</html>
22 , CSS 構造顏色、背景與圖像