冰球突破玩多少倍容易出大奖

書名：網頁設計與網站建設從入門到精通
作者名：龍馬高新教育
本章字數： 5611字
更新時間： 2020-09-27 16:03:09

2.2 CSS基本語法

在進一步學習DIV CSS之前，我們先要了解CSS中常用的基本語法。

2.2.1 編輯CSS樣式的字體格式

在HTML中，CSS字體屬性用于定義文字的字體、大小、粗細的表現等。

通常使用font-family定義使用什么字體，font-size定義字體大小，font-style定義斜體字，font-variant定義小型的大寫字體，font-weight定義字體的粗細，font統一定義字體的所有屬性。字體屬性如下。

● font-family屬性：定義使用的字體。

● font-size屬性：定義字體的大小。

● font-style屬性：定義字體顯示的方式。

● font-variant屬性：定義小型的大寫字母字體，對中文沒什么意義。

● font-weight屬性：定義字體的粗細。

1. font-family屬性

下面通過一個例子來認識font-family。

比如中文的宋體，英文的Arial，可以定義多種字體連在一起，使用“, ”（逗號）分隔。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-family屬性示例</title>
<style type="text/css" media="all">
p#songti{font-family:"宋體"; }
p#Arial{font-family:Arial; }
p#all{font-family:"宋體", Arial; }
</style>
</head>
<body>
<p id="songti">使用宋體．</p>
<p id="Arial">使用arial字體．</p>
</body>
</html>

2. font-size屬性

中文常用的字體大小是12px，像文章的標題等應該顯示大字體，但此時不應使用字體大小屬性，應使用h1、h2等HTML標簽。

HTML的big、small標簽定義了大字體和小字體的文字，此標簽已經被W3C拋棄，真正符合標準網頁設計的顯示文字大小的方法是使用font-size CSS屬性。在瀏覽器中可以使用Ctrl++增大字體，Ctrl--縮小字體。

下面通過一個例子來認識font-size。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-size屬性絕對字體尺寸示例</title>
<style type="text/css" media="all">
p{font-size:12px; }
p#xxsmall{font-size:xx-small; }
p#xsmall{font-size:x-small; }
p#small{font-size:small; }
p#medium{font-size:medium; }
p#xlarge{font-size:x-large; }
p#xxlarge{font-size:xx-large; }
</style>
</head>
<body>
<p id="xxsmall">font-size中的xxsmall字體</p>
<p id="xsmall">font-size中的xsmall字體</p>
<p id="small">font-size中的small字體</p>
<p id="medium">font-size中的medium字體</p>
<p id="xlarge">font-size中的xlarge字體</p>
<p id="xxlarge">font-size中的xxlarge字體</p>
</body>
</html>

3. font-style屬性

網頁中的字體樣式都是不固定的，開發者可以用font-style來實現目的，其屬性包含如下內容。

● normal：正常的字體，即瀏覽器默認狀態。

● italic：斜體，對于沒有斜體變量的特殊字體，將應用oblique。

● oblique：傾斜的字體，即沒有斜體變量。

下面通過一個例子來認識font-style。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-style屬性示例</title>
<style type="text/css" media="all">
p#normal{font-style:normal; }
p#italic{font-style:italic; }
p#oblique{font-style:oblique; }
</style>
</head>
<body>
<p id="normal">正常字體．</p><p id="italic">斜體．</p><p id="oblique">斜體．</p>
</body>
</html>

4. font-variant屬性

在網頁中常常可以碰到需要輸入內容的地方，如果輸入漢字的話是沒問題的，可是當需要輸入英文時，那么它的大小寫是令我們頭疼的問題。在CSS中可以通過font-variant的幾個屬性來實現輸入時不受其限制的功能，其屬性如下。

● Normal：正常的字體，即瀏覽器默認狀態。

● small-caps：定義小型的大寫字母。

下面通過一個例子來認識font-variant。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-variant屬性示例</title>
<style type="text/css" media="all">
p#small-caps{font-variant:small-caps; }
p#uppercase{text-transform:uppercase; }
</style>
</head>
<body>
<p id="small-caps">The quick brown fox jumps over the lazy dog.</p>
<p id="uppercase">The quick brown fox jumps over the lazy dog.</p>
</body>
</html>

2.2.2 編輯CSS樣式的文本格式

CSS文本屬性用于定義文字、空格、單詞、段落的樣式。

通常使用letter-spacing屬性控制字母之間的距離，word-spacing屬性控制文字之間的距離，text-decoration屬性定義文本是否有下畫線，text-transform屬性控制英文的大小寫， text-align屬性定義文本的對齊方式，text-indent屬性定義文本的首行縮進，white-space屬性定義文本與文檔源代碼的關系。

文本屬性如下。

● letter-spacing屬性：定義文本中字母的間距（中文為文字的間距）。

● word-spacing屬性：定義以空格間隔文字的間距（就是空格本身的寬度）。

● text-decoration屬性：定義文本是否有畫線以及畫線的方式。

● text-transform屬性：定義文本的大小寫狀態，此屬性對中文無意義。

● text-align屬性：定義文本的對齊方式。

● text-indent屬性：定義文本的首行縮進（在首行文字之前插入指定的長度）。

1. letter-spacing屬性

該屬性在應用時有兩種情況，如下所示。

● Normal：默認間距（主要是根據用戶所使用的瀏覽器等設備）。

● <length>：由浮點數字和單位標識符組成的長度值，允許為負值。

下面通過一個例子來認識letter-spacing。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS letter-spacing屬性示例</title>
<style type="text/css" media="all">
.ls3px{letter-spacing: 3px; }
.lsn3px{letter-spacing: -3px; }
</style>
</head>
<body>
<p class="ls3px">
<strong><a>letter-spacing</a>示例：</strong>
<p>All i have to do, is learn CSS.(仔細看是字母之間的距離，不是空格本身的寬度。)</p>
</p>
<p>
<strong><a>letter-spacing</a>示例：</strong>
<p class="lsn3px">All i have to do, is learn CSS.</p>
</p>
</body>
</html>

2. word-spacing屬性

該屬性在應用時有兩種情況，如下所示。

● Normal：默認間距，即瀏覽器的默認間距。

● <length>：由浮點數字和單位標識符組成的長度值，允許為負值。

下面通過一個例子來認識word-spacing。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS word-spacing屬性示例</title>
<style type="text/css" media="all">
.ws30{word-spacing: 30px; }
.wsn30{word-spacing: -10px; }
</style>
</head>
<body><p><strong>word-spacing 示例：</strong>
<p class="ws30">All i have to do, is learn CSS.</p></p><p>
<strong>word-spacing 示例：</strong><p class="wsn30">All i have to do, is learn
CSS.</p>
</p>
</body>
</html>

3. text-decoration屬性

該屬性在應用時有4種情況，如下所示。

● underline：定義有下畫線的文本。

● overline：定義有上畫線的文本。

● line-through：定義直線穿過文本。

● blink：定義閃爍的文本。

下面通過一個例子來認識text-decoration。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS text-decoration屬性示例</title>
<style type="text/css" media="all">
p#line-through{text-decoration: line-through; }
</style>
</head>
<body>
<p id="line-through">示例<a href="#">CSS 教程</a>, <strong><a
href="#">text-decoration</a></strong>示例，屬性值為line-through中畫線．</p>
</body>
</html>

4. text-transform屬性

該屬性在應用時有4種情況，如下所示。

● Capitalize：首字母大寫。

● Uppercase：將所有設定此值的字母變為大寫。

● Lowercase：將所有設定此值的字母變為小寫。

● None：正常無變化，即輸入狀態。

下面通過一個例子來認識text-transform。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS text-transform屬性示例</title>
<style type="text/css" media="all">
p#capitalize{text-transform: capitalize; }
p#uppercase{text-transform: uppercase; }
p#lowercase{text-transform: lowercase; }
</style>
</head>
<body>
<p id="capitalize">hello world</p><p id="uppercase">hello world</p>
<p id="lowercase">HELLO WORLD</p>
</body>
</html>

5. text-align屬性

該屬性在應用時有4種情況，如下所示。

● Left：對于當前塊的位置為左對齊。

● Right：對于當前塊的位置為右對齊。

● Center：對于當前塊的位置為居中。

● Justify：對齊每行的文字。

下面通過一個例子來認識text-align。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS text-align屬性示例</title>
<style type="text/css" media="all">
p#left{text-align: left; }
</style>
</head>
<body>
<p id="left">left 左對齊</p>
</body>
</html>

6. text-indent屬性

該屬性在應用時有2種情況，如下所示。

● <length>：百分比數字由浮點數字和單位標識符組成的長度值，允許為負值。

● <percentage>：百分比表示法。

下面通過一個例子來認識text-indent。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS text-indent屬性示例</title>
<style type="text/css" media="all">
p#indent{text-indent:2em; top:10px; }
p#unindent{text-indent:-2em; top:210px; }
p{width:150px; margin:3em; }
</style>
</head>
<body>
<p id="indent">示例<a href="#">CSS 教程</a>, <strong><a
href="#">text-indent</a></strong>示例，正值向后縮，負值向前進．text-indent屬性可以定義首
行的縮進，是我們經常使用到的CSS屬性．</p>
<p id="unindent">示例<a href="#">CSS 教程</a>, <strong><a
href="#">text-indent</a></strong>示例，正值向后縮，負值向前進．</p>
</body>
</html>

2.2.3 編輯CSS樣式的背景格式

背景（background），文字顏色可以使用color屬性，但是包含文字的p段落、div層、page頁面等的顏色與背景圖片可以使用background等屬性。

通常使用background-color定義背景顏色， background-image定義背景圖片， background-repeat定義背景圖片的重復方式，background-position定義背景圖片的位置， background-attachment定義背景圖片隨滾動軸的移動方式。

背景屬性如下。

● background-color屬性：背景色，定義背景的顏色。

● background-image屬性：定義背景圖片。

● background-repeat屬性：定義背景圖片的重復方式。

● background-position屬性：定義背景圖片的位置。

● background-attachment屬性：定義背景圖片隨滾動軸的移動方式。

1. background-color屬性

在CSS中可以定義背景顏色，內容沒有覆蓋的地方就按照設置的背景顏色顯示，其值如下。

● <color>：顏色表示法，可以是數值表示法，也可以是顏色名稱。

● Transparent：背景色透明。

下面通過一個例子來認識background-color。

定義網頁的背景使用綠色，內容白字黑底，示例代碼如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-color屬性示例</title>
<style type="text/css" media="all">
body{background-color:green; }
h1{color:white; background-color:black; }
</style>
</head>
<body>
<h1>白字黑底</h1>
</body>
</html>

2. background-image屬性

在CSS中還可以設置背景圖像，其值如下。

● <uri>：使用絕對或相對地址指定背景圖像。

● None：將背景設置為無背景。

下面通過一個例子來認識background-image。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-image屬性示例</title>
<style type="text/css" media="all">
.para{background-image:none; width:200px; height:70px; }
.div{width:200px; color:#FFF; font-size:40px;
font-weight:bold; height:200px; background-image:url(images/small.jpg); }
</style>
</head>
<body>
<div class="para">div 段落中沒有背景圖片</div>
<div class="div">div中有背景圖片</div>
</body>
</html>

3. background-repeat屬性

在默認情況下，圖像會自動向水平和豎直兩個方向平鋪。如果不希望平鋪，或者希望沿著一個方向平鋪，可以使用background-repeat屬性實現。該屬性可以設置為4種平鋪方式。

● Repeat：平鋪整個頁面，左右與上下。

● repeat-x：在x軸上平鋪，左右。

● repeat-y：在y軸上平鋪，上下。

● no-repeat：當背景大小比所要填充背景的塊小時，圖片不重復。

下面通過一個例子來認識background-repeat。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-repeat屬性示例</title>
<style type="text/css" media="all">
body{background-image:url('images/small.jpg'); background-repeat:no-repeat; }
p{background-image:url('images/small.jpg'); background-repeat:repeat-y; backgroun
d-position:right; top:200px; left:200px; width:300px; height:300px; border:1px solid
black; margin-left:150px; }
</style>
</head>
<body>
<p>示例 CSS 教程，repeat-y 豎著重復的背景(div的右側).</p>
</body>
</html>

4. background-position屬性

將標題局中或者右對齊可以使用background-postion屬性，其值如下。

（1）水平方向

● left：對于當前填充背景位置居左。

● center：對于當前填充背景位置居中。

● right：對于當前填充背景位置居右。

（2）垂直方向

● top：對于當前填充背景位置居上。

● center：對于當前填充背景位置居中。

● bottom：對于當前填充背景位置居下。

（3）垂直與水平的組合

. x-% y-%；
. x-pos y-pos；

下面通過一個例子來認識background-position。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-position屬性示例</title>
<style type="text/css" media="all">
body{background-image:url('images/small.jpg'); background-repeat:no-repeat; }
p{background-image:url('images/small.jpg'); background-position:right
bottom ; background-repeat:no-repeat; border:1px solid
black; width:400px; height:200px; margin-left:130px; }
div{background-image:url('images/small.jpg'); background-position:50%
20% ; background-repeat:no-repeat; border:1px solid
black; width:400px; height:150px; }
</style>
</head>
<body>
<p>p 段落中右下角顯示橙色的點．</p>
<div>div中距左上角x 軸50%, y 軸20%的位置顯示橙色的點．</div>
</body>
</html>

5. background-attachment屬性

設置或檢索背景圖像是隨對象內容滾動還是固定的，其值如下。

● Scroll：隨著頁面的滾動，背景圖片將移動。

● Fixed：隨著頁面的滾動，背景圖片不會移動。

下面通過一個例子來認識background-attachment。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS background-attachment屬性示例</title>
<style type="text/css" media="all">
body{background:url('images/list-orange.png'); background-attachment:fixed; backg
round-repeat:repeat-x; background-position:center
center; position:absolute; height:400px; }
</style>
</head>
<body>
<p>拖動滾動條，并且注意中間有一條橙色線并不會隨滾動條的下移而上移．</p>
</body>
</html>

2.2.4 編輯CSS鏈接格式

在HTML語言中，超鏈接是通過標記<a>來實現的，鏈接的具體地址則是利用<a>標記的href屬性，代碼如下所示。

<a >鏈接文本</a>

在瀏覽器默認的瀏覽方式下，超鏈接統一為藍色并且有下畫線，被點擊過的超鏈接則為紫色并且也有下畫線。這種最基本的超鏈接樣式現在已經無法滿足廣大設計師的需求。通過CSS可以設置超鏈接的各種屬性，而且通過偽類別還可以制作很多動態效果。首先用最簡單的方法去掉超鏈接的下畫線，代碼如下所示。

/*超鏈接樣式* /
a{text-decoration:none; margin-left:20px; } /*去掉下畫線*/

可制作動態效果的CSS偽類別屬性如下。

● a:link：超鏈接的普通樣式，即正常瀏覽狀態的樣式。

● a:visited：被點擊過的超鏈接的樣式。

● a:hover：鼠標指針經過超鏈接上時的樣式。

● a:active：在超鏈接上單擊時，即“當前激活”時超鏈接的樣式。

2.2.5 編輯CSS樣式的列表屬性

CSS列表屬性可以改變HTML 列表的顯示方式。列表的樣式通常使用list-style-type屬性來定義，list-style-image屬性定義列表樣式的圖片，list-style-position屬性定義列表樣式的位置，list-style屬性統一定義列表樣式的幾個屬性。

通常的列表主要采用<ul>或者<ol>標記，然后配合<li>標記羅列各個項目。CSS列表有以下幾個常見屬性。

1. list-style-image屬性

list-style-image設置或檢索作為對象的列表項標記的圖像，其值如下。

● URL：一般是一個圖片的網址。

● None：不指定圖像。

示例代碼如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-image屬性示例</title>
<style type="text/css" media="all">
ul{list-style-image: url("images/list-orange.png"); }
</style>
</head>
<body>
<ul>
<li>使用圖片顯示列表樣式</li>
<li>本例中使用了list-orange.png圖片</li>
<li>我們還可以使用list-green.png top.png或up.png圖片</li>
<li>大家可以嘗試修改下面的代碼</li>
</ul>
</body>
</html>

2. list-style-position屬性

list-style-position設置或檢索作為對象的列表項標記如何根據文本排列，其值如下。

● Inside：列表項目標記放置在文本以內，且環繞文本根據標記對齊。

● Outside：列表項目標記放置在文本以外，且環繞文本不根據標記對齊。

示例代碼如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-position屬性示例</title>
<style type="text/css" media="all">
ul#inside{list-style-position: inside; list-style-image:
url("images/list-orange.png"); }
ul#outside{list-style-position: outside; list-style-image:
url("images/list-green.png"); }
p{padding: 0; margin: 0; }
li{border:1px solid green; }
</style>
</head>
<body>
<p>內部模式</p>
<ul id="inside">
<li>內部模式 inside</li>
<li>示例 XHTML 教程．</li>
<li>示例 CSS 教程．</li>
<li>示例 JAVASCRIPT 教程．</li>
</ul>
<p>外部模式</p>
<ul id="outside">
<li>外部模式 outside</li>
<li>示例 XHTML 教程．</li>
<li>示例 CSS 教程．</li>
<li>示例 JAVASCRIPT 教程．</li>
</ul>
</body>
</html>

3. list-style-type屬性

list-style-type設置或檢索對象的列表項所使用的預設標記，其值如下。

● Disc：點。

● Circle：圓圈。

● Square：正方形。

● Decimal：數字。

● None：無（取消所有的list樣式）。

示例代碼如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-type屬性示例</title>
<style type="text/css" media="all">
ul{list-style-type: disc; }
</style>
</head>
<body>
<ul>
<li>正常模式</li>
<li>示例 XHTML 教程．</li>
<li>示例 CSS 教程．</li>
<li>示例 JAVASCRIPT 教程．</li>
</ul>
</body>
</html>

2.2.6 編輯CSS樣式的區塊屬性

塊級元素就是一個方塊，像段落一樣，默認占據一行位置。內聯元素又叫行內元素。顧名思義，它只能放在行內，就像一個單詞一樣不會造成前后換行，起輔助作用。一般的塊級元素包括段落<p>、標題<h1><h2>、列表<ul><ol><li>、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。

內聯元素包括表單元素<input>、超級鏈接<a>、圖像<img>、<span>等。塊級元素的顯著特點是：它都是從一個新行開始顯示，而且其后的元素也需另起一行顯示。

下面通過一個示例來看一下塊級元素與內聯元素的區別。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-type屬性示例</title>
<style type="text/css" media="all">
ul{list-style-type: disc; }
img{ width:100px; height:70px; }
</style>
</head>
<body>
<p>標記不同行：</p>
<div><imgsrc="flower.jpg" /></div>
<div><imgsrc="flower.jpg" /></div>
<div><imgsrc="flower.jpg" /></div>
<p>標記同一行：</p>
<span><imgsrc="flower.jpg" /></span>
<span><imgsrc="flower.jpg" /></span>
<span><imgsrc="flower.jpg" /></span>
</body>
</html>

在前面示例中，3個div元素各占一行，相當于在它之前和之后各插入了一個換行，而內聯元素span沒對顯示效果造成任何影響，這就是塊級元素和內聯元素的區別。正因為有了這些元素，才使網頁變得豐富多彩。

如果沒有CSS的作用，塊級元素會以每次換行的方式一直往下排。而有了CSS以后，可以改變這種HTML的默認布局模式，把塊級元素擺放到想要的位置上，而不是每次都另起一行。也就是說，可以用CSS的display:inline將塊級元素改變為內聯元素，也可以用display:block將內聯元素改變為塊級元素。

代碼修改如下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS list-style-type屬性示例</title>
<style type="text/css" media="all">
ul{list-style-type: disc; }
img{ width:100px; height:70px; }
</style>
</head>
<body>
<p>標記同一行：</p>
<div style="display:inline"><imgsrc="flower.jpg" /></div>
<div style="display:inline"><imgsrc="flower.jpg" /></div>
<div style="display:inline"><imgsrc="flower.jpg" /></div>
<p>標記不同行：</p>
<span style="display:block"><imgsrc="flower.jpg" /></span>
<span style="display:block"><imgsrc="flower.jpg" /></span>
<span style="display:block"><imgsrc="flower.jpg" /></span>
</body>
</html>

由此可以看出，display屬性改變了塊級元素與行內元素默認的排列方式。另外，display屬性值為none的話，可以使該元素隱藏，并且不會占據空間。代碼如下。

<html>
<head>
<title>display屬性示例</title>
<style type=" text/ css">
div{width:100px; height:50px; border:1px solid red}
</style>
</head>
<body>
<div>第一個塊級元素</div>
<div style="display:none">第二個塊級元素</div>
<div >第三個塊級元素</div>
</body>
</html>

2.2.7 編輯CSS樣式的寬高屬性

2.2.6小節介紹了塊級元素與行內元素的區別，本節介紹兩者寬高屬性的區別，塊級元素可以設置寬度與高度，但行內元素是不能設置的。例如，span元素是行內元素，給span設置寬、高屬性代碼如下。

<html>
<head>
<title>寬高屬性示例</title>
<style type=" text/ css">
span{ background:#CCC }
.special{ width:100px; height:50px; background:#CCC}
</style>
</head>
<body>
<span class="special">這是span 元素1</span>
<span>這是span 元素2</span>
</body>
</html>

在這個示例中，顯示的結果是設置了寬高屬性span元素1與沒有設置寬高屬性的span元素2，顯示效果是一樣的。因此，行內元素不能設置寬高屬性。如果把span元素改為塊級元素，效果會如何呢？

根據2.2.6小節所學內容，可以通過設置display屬性值為block來使行內元素變為塊級元素，代碼如下。

<html>
<head>
<title>寬高屬性示例</title>
<style type=" text/ css">
span{ background:#CCC; display:block ; border:1px solid #036}
.special{ width:200px; height:50px; background:#CCC}
</style>
</head>
<body>
<span class="special">這是span 元素1</span>
<span>這是span 元素2</span>
</body>
</html>

在瀏覽器的輸出中，可以看出，當把span元素變為塊級元素后，類為special的span元素1按照所設置的寬高屬性顯示，而span元素2 則按默認狀態占據一行顯示。

2.2.8 編輯CSS邊框屬性

border一般用于分隔不同的元素。border的屬性主要有3個，即colo（r顏色）、width（粗細）和style（樣式）。在使用CSS來設置邊框時，可以分別使用border-color、border-width和border-style屬性設置它們。

● border-color：設定border的顏色。通常情況下顏色值為十六進制數，如紅色為“#ff0000”，當然也可以是顏色的英語單詞，如red, yellow等。

● border-width：設定border的粗細程度，可以設為thin、medium、thick或者具體的數值，單位為px，如5px等。border默認的寬度值為medium，一般瀏覽器將其解析為2px。

● border-style：設定border的樣式，none（無邊框線）、 dotted（由點組成的虛線）、dashed（由短線組成的虛線）、 solid（實線）、double（雙線，雙線寬度加上它們之間的空白部分的寬度就等于border-width定義的寬度）、groove（根據顏色畫出3D溝槽狀的邊框）、ridge（根據顏色畫出3D脊狀的邊框）、inset（根據顏色畫出3D內嵌邊框，顏色較深）、outset（根據顏色畫出3D外嵌邊框，顏色較淺）。

|提示|

border-style屬性的默認值為none，因此邊框要想顯示出來，必須設置border-style值。

為了更清楚地看到這些樣式的效果，通過一個例子來展示，其代碼如下。

<html>
<head>
<title>border 樣式示例</title>
<style type=" text/ css">
div{ width:300px; height:30px; margin-top:10px;
border-width:5px; border-color:green }
</style>
</head>
<body>
<div style="border-style:dashed">邊框為虛線</div>
<div style="border-style:dotted">邊框為點線</div>
<div style="border-style:double">邊框為雙線</div>
<div style="border-style:groove">邊框為3D 溝槽狀線</div>
<div style="border-style:inset">邊框為3D內嵌邊框線</div>
<div style="border-style:outset">邊框為3D 外嵌邊框線</div>
<div style="border-style:ridge">邊框為3D 脊狀線</div>
<div style="border-style:solid">邊框為實線</div>
</body>
</html>

在上面的例子中，分別設置了border-color、border-width和border-style屬性，其效果是對上下左右4條邊同時產生作用。在實際應用中，除了采用這種方式，還可以分別對4條邊框設置不同的屬性值，方法是按照規定的順序，給出2個、3個、4個屬性值，分別代表不同的含義。給出2個屬性值：前者表示上下邊框的屬性，后者表示左右邊框的屬性。給出3個屬性值，前者表示上邊框的屬性，中間的數值表示左右邊框的屬性，后者表示下邊框的屬性。給出4個屬性值，依次表示上、右、下、左邊框的屬性，即順時針排序。

示例代碼如下。

<html>
<head>
<title>border 樣式示例</title>
<style type=" text/ css">
div{ border-width:5px 8px; border-color:green yellow red; border-style:dotted
dashed solid double }
</style>
</head>
<body>
<div>設置邊框</div>
</body>
</html>

給DIV設置的樣式為上下邊框寬度為5px，左右邊框寬度為8px；上邊框的顏色為綠色，左右邊框的顏色為黃色，下邊框的顏色為紅色；從上邊框開始，按照順時針方向，四條邊框的樣式分別為點線、虛線、實線和雙線。

如果某元素的4條邊框的設置都一樣，還可以簡寫為：

border:5px solid red;

如果想對某一條邊框單獨設置，例如：

border-left:5px solid red;

這樣就可以只設置左邊框為紅色、實線、寬為5px。其他3條邊設置類似，3個屬性分別為：border-right、border-top、border-bottom，以此就可以設置右邊框、上邊框、下邊框的樣式。

如果只想設置某一條邊框某一個屬性，例如：

border-left-color: red;

這樣就可以設置左邊框的顏色為紅色。其他屬性設置類似，不再一一舉例。

官术网_书友最值得收藏!

網頁設計與網站建設從入門到精通

2.2 CSS基本語法

2.2.1 編輯CSS樣式的字體格式

2.2.2 編輯CSS樣式的文本格式

2.2.3 編輯CSS樣式的背景格式

2.2.4 編輯CSS鏈接格式

2.2.5 編輯CSS樣式的列表屬性

2.2.6 編輯CSS樣式的區塊屬性

2.2.7 編輯CSS樣式的寬高屬性

2.2.8 編輯CSS邊框屬性