顏色和背景:
網頁中的每一個元素都有一個前景色彩和一個後景色, 而且前景色彩和後景色最好同時設定, 以免重複或衝突.
設定顏色: color:顏色
color屬性不是只用來設定字型的顏色, 網頁中每個元素的顏色都可以用color屬性來設定, color屬性設定的顏色一般都為標記內容的前景色彩.
設定背景顏色: background-color: 顏色 | transparent(透明值)
在CSS中使用background-color屬性不僅可以設定網頁的背景顏色, 還可以設定文字的背景顏色
插入背景圖片: background-image: url | noneBackground-image
<html>
<head>
<title>應用背景圖片屬性</title>
<style type="text/css">
<!--
body{background-image:url(14-3-1.jpg)}
h2{font-family:黑體; font-size:20pt; color:red}
.p1{font-size:18px;color:black;background-image:url(14-3-2.jpg)}
-->
</style>
</head>
<body>
<center>
<h2>插入背景圖片</h2>
</center>
<hr>
<p class=p1>這段文字的顏色為黑色,文字背景和網頁背景的圖片不一樣</p>
</body>
</html>
插入背景附件: back-ground-attachment: scroll | fixed
設定背景圖片是否隨著捲軸的移動而一起移動
設定重複背景圖片: background-repeat: repeat(水平和垂直方向平鋪) | repeat-x(水平方向平鋪) | repeat-y(垂直方向平鋪) | no-repeat(不平鋪)
使用background-image屬性設定網頁的背景圖片時, 背景圖片總是在水平和垂直方向重複顯示並平鋪於整個視窗.
將backgrond-image和background-repeat屬性結合使用, 就可以方便地控制背景圖片的平鋪方式.
設定背景圖片位置: background-position: 百分比 | 長度 | 關鍵字
執行個體:Code
<html>
<head>
<title>設定顏色和背景</title>
<style type=text/css>
<!--
body{background-image:url(14-7-1.jpg);background-repeat:no-repeat;
background-position:bottom right}
h2{font-family:黑體;color:white;font-size:20px;background-image:url(14-7-2.jpg);
background-repeat:repeat-x}
.p1{font-size:18px;color:blue;background-color:yellow;}
-->
</style>
</head>
<body>
<center>
<h2>黃鶴樓</h2>
<hr>
<p class=p1>昔人已乘黃鶴去，此地空餘黃鶴樓。</p>
<p class=p1>黃鶴一去不複返，白雲千載空悠悠。</p>
<p class=p1>晴川曆曆漢陽樹，芳草萋萋鸚鵡洲。</p>
<p class=p1>日暮鄉關何處是，煙波江上使人愁。</p>
</center>
</body>
</html>
邊框和邊距:
邊框屬性包括邊框樣式, 邊框顏色, 邊框寬度, 主要用來設定網頁中各個元素的邊框, 如段落, 圖片, 表格等
設計邊框樣式: boder-style
border-style:樣式取值
border-top-style:樣式取值
border-bottom-style:樣式取值
border-left-style:樣式取值
border-right-style:樣式取值
調整邊框寬度: border-width
border-width:關鍵字 | 長度
border-top-width:關鍵字 | 長度
border-bottom-width:關鍵字 | 長度
border-right-width:關鍵字 | 長度
border-left-width:關鍵字 | 長度
設定邊框顏色 border-color
設定邊框屬性: border 同時設定邊框的寬度,樣式和顏色
border: 邊框寬度 | 邊框樣式 | 邊框顏色
border-top:
border-bottom:
border-right:
border-left:
邊距: margin-top / margin-bottom / margin-right / margin-left / margin
用來設定網頁中某個元素的四邊和網頁中其他元素之間的空白距離.
填充: padding-top / padding-bottom / padding-right / padding-left / padding
用來控制邊框和其他元素之間的空白距離, 和邊距屬性很類似.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
