CSS 教學 下載並修改自: 資工系涂世俊老師教學網站
<font style="font-size:700px">文字</font> 1. CSS的用途 CSS是用來控制網頁外觀的！ 傳統的HTML碼對於網頁外觀的控制能力不足。例如，HTML裡面，文字的大小最大只到7，如： <font size=7>文字</font>， 即使您填size=700也沒用，最大就是7而已。 若想要比7大的字該怎麼辦？答：請用CSS！ <font style="font-size:700px">文字</font>
避免重覆程式碼 <body> (用CSS定義文字為紅色，因此不必一一指定) <h3 color=red>XXX</h3> … <h3 color=red>YYY</h3> <h3 color=red>ZZZ</h3> </body> (用CSS定義文字為紅色，因此不必一一指定) <body> <h3>XXX</h3> … <h3>YYY</h3> <h3>ZZZ</h3> </body>
縮小網頁體積，簡化網頁維護 H3{color:red} <lonk …href=ext.css> H3{color:red}
2. CSS的用法 如何把CSS加到網頁中呢？依照用途有三種用法： 2.1 直接加在HTML標籤中 2.2 作成樣式表加在網頁中 2.2.2 訂class樣式 2.2.3 訂ID樣式 2.3 獨立成一個CSS檔
<起始標籤 style=“CSS屬性1:值; CSS屬性2:值; CSS屬性3:值; ... ">…</結束標籤> 直接加在HTML標籤中 優先權最高！對於要控制的東西也最直接！缺點其樣式設定無法給其他網頁元件套用。 若把所有「大小為20像素的紅色文字」變成「大小為30像素的藍色文字」，那麼，若是網頁中有50個「大小為20像素的紅色文字」，那麼您就得修改50次！所以，若是這種情況，適合用下一單元介紹的方式，也就是可以讓樣式重複套用 <起始標籤 style=“CSS屬性1:值; CSS屬性2:值; CSS屬性3:值; ... ">…</結束標籤> <font style=“color: red; font-size: 20px“>大小為20像素的紅色文字</font>
2.2 作成樣式表加在網頁中 設定的外觀可以同時讓同網頁中的元件可以重複套用 一般是加在<head></head>之間，實際上，加在哪裡都無所謂，只要在套用樣式之前都可以 <head> … <style type="text/css"> </style> </head>
2.2.1 宣告HTML標籤的外觀樣式 HTML標籤名稱 { 屬性1: 值; 屬性2: 值; ： } body { color: gray; 屬性1: 值; 屬性2: 值; ： } body { color: gray; font-size: 12px; font-weight: bold; } h1{ color: blue;} h2 { color: blue;} h3 { color: blue;} 可合併如下 h1 h2 h3 { color: blue};
2.2.2 自訂class樣式 『自訂樣式名稱』請用英文，前面一定要有一個「.」 在標籤裏，使用 class= “自訂樣式名稱 “ .自訂樣式名稱 { 屬性1:值; 屬性2:值; } 『自訂樣式名稱』請用英文，前面一定要有一個「.」 在標籤裏，使用 class= “自訂樣式名稱 “ 套用CSS樣式 <html><head><title>網頁標題</title> <style type="text/css"> .keyword { color: red; background-color: yellow; font-weight: bold; border: 1px; padding: 2px; } </style></head> <body> 這裡是<font class="keyword">關鍵字</font>，這裡一樣是套用 <span class="keyword">keyword樣式</span>。 </body> </html>
2.2.3 自訂ID樣式 也是自訂外觀的一種，不過比較不那麼常用，須用在HTML的標籤元件中有設定ID的時候，同一個網頁中ID是不能重複的，所以，設定的這個外觀可能只有一個元件用得到（而class樣式則可以無限套用！） 『自訂ID樣式名稱』請用英文，前面一定要有一個「#」 #自訂ID樣式名稱 { 屬性1:值; 屬性2:值; ： }
在標籤裏，使用 id=“自訂樣式名稱 “ 套用CSS樣式 <html> <head> <title>網頁標題</title> <style type="text/css"> #keyword { color: red; background-color: yellow; font-weight: bold; border: 1px; padding: 2px; } </style> </head> <body> 這裡是<font id="keyword">關鍵字</font>。 </body> </html> 在標籤裏，使用 id=“自訂樣式名稱 “ 套用CSS樣式
2.3 獨立成一個CSS檔 獨立成一個CSS檔，如：style.css 網頁中<head>...</head>中則需要加入: <link rel=stylesheet type="text/css" href="CSS檔名稱.css"> 另外也可用 @import <style type=text/css> @import url(style.css) </style> Style.css 內容: HTML標籤{ 屬性1:值; 屬性2:值; } 自訂樣式{
My.css: 網頁: p { color: red; font-size:20px; } .title{ color:blue; font-size:40px; } <html> <head> <title>網頁標題</title> <link rel=stylesheet type="text/css“ href="my.css"> </head> <body> <p>HTML標籤套用CSS</p> <p class=“title”>自定class</p> </body> </html> <head> <style type = text/css> @import url(my.css); </style> </head> <body> <p>HTML標籤套用CSS</p> <p class=“title”>自定class</p> </body>
<link>與@import的差異 <link>與@import都可載入外部css檔，但是兩者有以下差異： <link> @import Browser載入css的時機 讀到<link>時暫不載入，直到要解釋樣式時才載入css檔的內容 讀到@import就立即載入css檔的內容 應用範圍 只能寫在HTML檔 可以寫在HTML檔或css檔
@import url(common.css) A 、B類網頁共用樣式 Common.css A 類網頁專用樣式 a.css B 類網頁專用樣式 b.css @import url(a.css) A類網頁 @import url(common.css) a.css A 、B類網頁共用樣式 Common.css
※類別選擇器(Class Selector) 類別內所有元素都能套用樣式 *.類別名稱 {屬性1：值1;屬性2：值2;…} or .類別名稱 {屬性1：值1;屬性2：值2;…} Example: .red_text { color : red; font-size : 20pt;} <p class = red_text>…</p>
<style=text/css> 元素名稱.類別名稱 {屬性1：值1;屬性2：值2;…} </style> 在類別中特定標籤才能套用的樣式 <style=text/css> 元素名稱.類別名稱 {屬性1：值1;屬性2：值2;…} </style> <style type = text/css> h2.red { color : red; font-size : 20pt;} p.blue { color : blue; </style> <h2 class=red>AAA</h2> … <h3 class=red>BBB</h3> <p class=blue>CCC</p> 請問上面那些字的顏色及大小? h1, h2, h3.red { color : red } 有何意義?
2.4 DIV & SPAN(HTML補充) div span 將內容分為不同的區域，而每一個區域可以根據 CSS 中的宣告而有自己的樣式。 Div 是一個區塊級容器 (block-level container)，這代表在 </div> 標籤後會換行。 span 將內容分為不同的區域。用 <span> 來調整單一文字的樣式。 在 </span> 之後並不會換行。
CSS 樣式： HTML: Result: .large { color: #00FF00; font-family: Arial; font-size: 4pt; } CSS 樣式： HTML: Result: <div class="large">這是 DIV 範例。</div> Span 不是<span class="large">區塊級的</span>
2.5長度單位 在 CSS ，長度單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位。 相對單位包括： px: pixels em: em ex: x 字母的高度 絕對單位包括 in: 吋 cm: 公分 mm: 公厘 pt: points, 1 pt = 1/72 吋 pc: picas, 1 pc = 12 pt
3.盒子模式 (box model) 盒子模式 (box model) 是在 CSS 中一個很重要的觀念。描述一個元素是如何組成的。 邊界(margin)是用來設定各個元素之間的距離。 相關的 CSS 指令為 margin、border、以及 padding
margin: [上面邊界] [右邊邊界] [下面邊界] [左邊邊界] 一個盒子有四個邊： margin-top (上邊界) margin-right (右邊界) margin-bottom (下邊界) margin-left (左邊界) 所有四個邊的邊界可以同時由 margin 屬性設定。它的語法如下： margin: [上面邊界] [右邊邊界] [下面邊界] [左邊邊界]
有三種方式可以設定邊界，分別為長度、百分比、以及 'auto‘ css: HTML: Result: #container { margin-top: 5px; margin-left: 10%; margin-right: auto; margin-bottom:20px; border: 1px solid 000000; } <div id="container">這是邊界的例子。</div> <p>這是邊界的例子</p>
4. 邊框 (border) 邊框 (border) 屬性有以下幾種： border-style border-width border-color border-top-, border-left-, border-bottom-, border-right- border
4.1 border-style border-style 屬性指定邊框的樣式 CSS 樣式 顯現結果 <p style=“border-style:solid”>實線</p> <p style=“border-style:dashed”>虛線</p> <p style=“border-style:double”>雙線</p> <p style=“border-style:dotted”>點線</p> <p style=“border-style:groove”>凹線</p> <p style=“border-style:ridge”>凸線</p> <p style=“border-style:inset”>嵌入線</p> <p style=“border-style:outset”>浮出線</p>
4.2 border-width border-width 屬性是用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或是一個數字。 CSS 樣式 顯現結果 <p style=“border-width: 9px; border-style: solid;”> 邊框寬度為 9px</p> <p style=“border-width: medium; border-style: dashed;”> 邊框寬度為中等</p>
4.3 border-color border-color 屬性是用來設定邊寬的顏色。 舉例如下： CSS 樣式 顯現結果 <p style=“border-color: #0000FF; border-style: solid;”> 藍色邊框</p> <p style=“border-color: red; border-style: dotted;”> 紅色邊框</p>
border-top-, border-left-, border-bottom-, border-right- 我們可以將方向 (top - 上、bottom - 下、left - 左、right - 右) 和樣式、寬度、及顏色合起來而成為一個屬性。舉例來說， border-top-style 屬性就是用來設定上邊框的樣式。 CSS 樣式 顯現結果 <p style=“border-top-style:solid; border-bottom-style:dotted;”>上邊框為實線，下邊框為點線</p> <p style=“border-top-style:solid; border-top-width:medium;”>上邊框為實線，且寬度中等</p> <p style=“order-left-style:solid; border-bottom-style:dashed; border-bottom-color:#00FF00;”>上左邊框為實線，下邊框為虛線，且顏色為綠色</p>
4.4 border 若四邊的邊框屬性都一樣，那我們可以用一個 border 屬性來描述，而不必四個邊都描述一次。 在同一行一次宣告邊框樣式、邊框寬度、以及邊框顏色。 CSS 樣式 顯現結果 <p style=“ border:#0000FF 5px solid;”>用一行來宣佈所有邊框的屬性</p>
padding: [上面留白] [右邊留白] [下面留白] [左邊留白] padding-top (上) padding-right (右) padding-bottom (下) padding-left (左) 所有四個邊的留白可以同時由 padding 屬性設定。它的語法如下： padding: [上面留白] [右邊留白] [下面留白] [左邊留白]
有三種方式可以設定留白，分別為長度、百分比、以及 'auto'。 CSS: HTML: Result: #container { padding-top:15px; padding-left:10px; padding-right:30px; padding-bottom:40px; border: 1px solid 000000; } <div id="container"> 這是留白的例子。這裡對了上、下、左、右的留白空間都有設定。 </div>
6.背景(background) 常見的背景 (background) 屬性有以下幾種： background-color background-image background-repeat background-attachment background-position
6.1 background-color background-color 屬性是用來指定背景的顏色 CSS 樣式 顯現結果 <p style=“background-color: #00FF00;”> 綠色背景</p> <p style=“background-color: red;”> 紅色背景</p>
6.2 background-image, background-repeat background-repeat 屬性是用來指定背景圖案重不重複。預設值是 "repeat"，代表此背景圖案將在 x- 及 y-方向都會重覆。其他的值為 x-repeat (x-方向重複)、y-repeat (y-方向重複)、以及 no-repeat (不重複)。
<p style=“padding-bottom:40px; background-image:url(yp.gif); CSS 樣式 顯現結果 <p style=“padding-bottom:40px; background-image:url(yp.gif); background-repeat: no-repeat; “> 背景圖案不重複</p> background-image:url(yp. gif); background-repeat: repeat-x;”> 背景圖案在 x-方向重複</p> background-repeat: repeat-y;”> 背景圖案在 y方向重複</p> background-repeat: repeat;”> 背景圖案在 x-及 y- 方向重複</p>
6.3 background-attachment background-attachment 屬性是用來指定背景圖案是否在螢幕上固定。這個屬性可能的值為 "fixed" (當網頁捲動時，背景圖案固定不動) 以及 "scroll" (當網頁捲動時，背景圖案會跟著移動)。 body {style=“background-attachment: fixed; background-image: url("yp.jpg"); background-repeat: no-repeat; } body {background-attachment: scroll; background-image: url("yp.jpg"); background-repeat: no-repeat; } 當網頁捲動時，背景圖案固定不動 當網頁捲動時，背景圖案會跟著移動
6.4 background-position background-position 屬性是用來指定背景圖案的位置。它的值可以是： 兩個字：第一個字為 [top, center, bottom] 中三選一，而第二個字由 [left, center, right] 中三選一。 兩個百分比：第一個百分比為 x-軸的百分比，第二個為 y-軸的百分比。 兩個數目：第一個數目為 x-軸的位置，第二個數目為 y-軸的位置。
<body style=“ background-image: url("yp.jpg"); background-repeat: no-repeat; background-position: center center; “> <body style=“ background-image: url("yp.jpg"); background-repeat: no-repeat; background-position: 20% 20%; “>
7. CSS 顏色(color) color (顏色) 屬性為設定一個元素的顏色。 這個屬性可以有以下三類的設定值： 十六進位值: {color:#XXXXXX;} RGB 碼:{color:rgb(X,Y,Z);}或是 color:rgb(X%,Y%,Z%); } 顏色名稱: {color:[顏色名稱];} CSS 樣式 顯現結果 <p style=“color:#FF0000;”> FF0000 代表紅色。</p> <p style=“colorrgb(255,0,255);”> rgb(255,0,255) 是粉紅色。</p> <p style=“color:green;”> 這是綠色。</p>
8. 字體(font) 字體 (font) 屬性有以下幾種： font-family font-size font-weight font-style font-variant
8.1 font-family font-family 屬性是用來設定字體的類別。 CSS 樣式 顯現結果 <p style=“font-family: verdana;”> Font Family Verdana.</p> <p style=“font-family: arial;”> Font Family Arial.</p> <p style=“font-family: impact;”> Font Family Impact.</p>
8.2 font-size font-size 屬性是用來設定字體的大小。 大小可以是以數字顯現 (絕對的或是相較的均可)，或是以下其中之一的值："xx-large"、 "x-large"、 "large"、 "medium"、 "small"、 "x-small"、和 "xx-small"。 CSS 樣式 顯現結果 <p style=“font-size:9px;”> 字體大小為 9px。</p> <p style=“font-size:150%;”> 字體大小為 150%。</p> <p style=“font-size:0.8cm;”> 字體大小為 0.8cm。</p> <p style=“font-size:small;”> 字體大小為 small。</p>
8.3 font-weight font-weight 屬性是用來設定字體的厚度。 厚度的設定值可以從 100 ~ 900 (900 是最厚的)。另外，也可以將厚度設定為 bold (厚)、bolder (更厚)、及 normal (正常)。 CSS 樣式 顯現結果 <p style=“font-weight: 100;”> 這是厚度 100。</p> <p style=“font-weight: 900;”> 這是厚度 900。</p> <p style=“font-weight: bold;”> 這是bold厚度 。</p>
8.4 font-style font-style 屬性是用來設定字體是否為斜體字 (italic 或 oblique)。 CSS 樣式 顯現結果 <p style="font-style:italic"> 這是斜體字。</p>
8.5 font-variant font-variant 屬性是用來設定文字是不是要以小型大寫 (small caps) 字體顯現。 在小型大寫字體中，所有的字母都是大寫，可是字體是比一般大寫來得小。可能的值為 "small-caps" 和 "normal"。 CSS 樣式 顯現結果 <span style=“font-variant:small-caps;”> initial in small caps</span> AND LATER IN LARGE CAPS.
9. CSS 連接(超連結) 連接的預設樣式是藍色，且有下劃線。可是，有的時候，我們會想要改變一下這個預設的樣式。這可以透過以下幾個選擇器來達成： a:link: 當連接過去的網頁尚未被看過時，該連接的樣式。 a:visited: 當連接過去的網頁已經看過時，該連接的樣式。 a:hover: 當滑鼠蓋在連接上面時，該連接的樣式。 a:active: 當連接被點擊時，該連接的樣式。
CSS: HTML: Result: a:link {color:#FF0000; text-decoration:none;} a:visited {color:#0000FF; text-decoration:none;} a:hover {font-size:20; color:#00FF00; text-decoration:underline;} a:active {color:#FF00FF; text-decoration:underline;} CSS: HTML: Result: <a href=“http://www.kimo.com.tw”>Kimo</a> a:link{color:#FF0000; text-decoration:none;} 一開始時，連接文字的顏色是紅色。 a:visited {color:#0000FF; text-decoration:none;} 一但被連接的頁面有被看過，連接文字顏色就變為藍色。 a:hover {font-size:20; color:#00FF00; text-decoration:underline;} 當滑鼠蓋在連接上面時，文字大小變為 20，文字顏色變為綠色，而且下劃線會出現。 a:active {color:#FF00FF; text-decoration:underline;} 當連接被點擊時，文字顏色變為粉紅色，而且下劃線不會消失。
10. 清單(list)--<ul><li> list-style-type list-style-position list-style-image list-style list-style-style、list-style-position及 list-style-image可以被簡化為一個 list-style 屬性。屬性的順序並不重要。 舉例來說，以下的 CSS 樣式， ul { list-style: url("circle.gif") none inside; }
10.1 list-style-type list-style-type 屬性是用來設定在清單中，每一條之前的記號要用什麼。 最常見的 list-style-type 設定值為：none (沒有) 、disc (全黑圓圈) 、 circle (空心圓圈) and square (正方形) 也可以使用 ordered character sets 。最常見的設定值為upper-latin (大寫拉丁文) 、lower-latin (小寫拉丁文) 、upper-roman (大寫羅馬文) 、 lower-roman (小寫羅馬文) 、 upper-alpha (大寫希臘文 ) and lower-alpha (小寫希臘文 )
CSS 樣式 顯現結果 <ul style=“list-style-type:upper-roman”> <li>項目 1</li> <li>項目 2</li> </ul> <ul style=“list-style-type:square”> <li>正方形項目 1</li> <li>正方形項目 2</li>
10.2 list-style-position ist-style-position 屬性決定記號是否應該被視為是文字的一部份，並且決定記號的位置 可能的設定值為 "inside" 及 "outside"。預定值為 "outside"。 CSS 樣式 顯現結果 <ul style=“list-style-position:inside”> <li>第一個項目<br>第一項目的第二行 <li>第二個項目 </ul> <ul style=“list-style-position:outside”>
list-style-image:url([image_url]); CSS 樣式 顯現結果 <ul style="list-style-image:url(arrow1.gif)"> <li>第一項利用自我設定的記號。 </li> <li>第二項利用自我設定的記號。</li> </ul>
11.表格(table) 在 HTML 中，常看到 <table> 之內加了 border、cellpadding、及 cellspacing 的屬性。透過 CSS 來制定表格的樣式，那就不需要在 HTML 之內用到這些屬性了。 table、th(標題)、tr(列)、及 td(行) 這幾個選擇器可以使用許多在這個教學中有提到的 CSS 屬性，例如 文字、字體、邊框、顏色、以及 背景。
table { border: 0; font-family: arial; font-size:14px; } //表格： 沒有邊框，字體是 arial，字的大小是 14px。 th { background-color:yellow; } //標題： 背景是黃色。 td { border-bottom: solid #000000 thin; } //格子： 每個格子的下面有一條黑色實線。 .fail { color:#FF0000; } //低於 60 的分數欄內，字體是紅色的。 CSS HTML Result <table> <tr><th>學生</th> <th>分數</th> </tr> <tr><td>Stella</td> <td>85</td></tr> <tr> <td>Alice</td> <td class="fail">55</td></tr> </table>
11.1 border-collapse 這個屬性可以直接代替 cellspacing=0 的宣告。 CSS HTML Result table { border:0; border-collpase:collpase; width:200px;} tr { border-bottom:1px solid #000000; } CSS HTML Result <table> <tr><td>年度</td><td>收入</td></tr> <tr><td>2006</td><td>35.2M</td></tr> <tr><td>2007</td><td>40.1M</td></tr> </table> 請注意，年度欄及收入欄的下劃線中間並沒有空隙。這就是 border-collapse:collapse 的作用。
12. 位置(position) 屬性有以下幾種： position top right left bottom z-index
12.1 position position 屬性制定出要用哪一類的位置。可能的值有： static (預設值): 元素會被放在預設的地方。top、bottom、left、和 right 的值沒有意義。 absolute: 元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素也會跟著改變位置。 relative: 元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。 fixed: 元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素的位置不會改變。
12.2 top, right, bottom, left 每一個方向 (top, right, bottom, left) 的位置值可以是長度、百分比、或是 auto。 div { background-color:#FF00FF; width:500px; height:60px; } p { position:relative; top:10px; left:50px; } CSS: HTML: Result: <div> <p>舉例文字。</div>
12.4 z-index z-index 屬性是用來決定元素重疊的順序。 z-index 值比較大個元素會被放在上面。 CSS: HTML: #redblock { z-index: 1; position: absolute; width:80px; height:100px; top:20px; left:20px; border: 1px solid #FF00FF; background-color: #FF0000; } #pinkblock { z-index: 2; position: absolute; width:100px; height:80px; top:50px; left:50px; border: 1px solid #FFF; background-color: #FF00FF; } CSS: HTML: Result: <div id="redblock"></div> <div id="pinkblock"></div> 粉紅色方塊 (pinkblock) 的 z-index 值 (2) 比紅色方塊 (redblock) 的 z-index 值 (1) 高，因此粉紅色方塊在上面。
13. 文字(character) 最常被用到與文字樣式有關的 CSS 屬性。 direction letter-spacing line-height text-align text-decoration text-indent text-transform word-spacing
13.1 direction direction 屬性是用來設定文字的方向。可能的值為 'ltr' 及 'rtl'。 CSS 樣式 顯現結果 <p style=“direction:ltr;”>LTR 方向</p> <p style=“direction:rtl;”>RTL 方向</p>
13.2 letter-spacing etter-spacing 屬性是用來設定每一個字母之間的空間。 CSS 樣式 顯現結果 <p style=“letter-spacing:8px;”> 8px between letters</p>
13.3 line-height line-height 屬性是用來設定每一行之間的空間。 CSS 樣式 顯現結果 <p style=“line-height:40px;”> <p>第一行和第二行之間<br>相隔 40px。</p>
13.4 text-align text-align 屬性是用來設定文字是如何對齊。可能的值包括： left： 靠左對齊 right： 靠右對齊 center： 向中間對齊 justified： 左右對齊
13.5 text-decoration text-decoration 屬性是用來設定文字上有什麼裝飾。可能的值包括： underline: 文字下加上一條線。 overline: 文字上加上一條線。 line-through: 文字中間加上一條線劃過去。 blink: 讓文字閃爍。
13.6 text-indent text-indent 屬性是用來設定每一段的第一行前面要留多少空間。可設定的值包括百分比以及長度。 CSS 樣式 顯現結果 <p style=“text-indent:15px;”> 這一段第一行的最前面會留 45px 的空間。之後的行數就沒有留任和空間了。</p>
13.5 text-transform text-transform 屬性是用來控制大小寫是如何展現的。可能的值包括： capitalize： 每一個字的第一個字母都以大寫顯現，其他的字母則不改變。 uppercase： 所有的字母都以大寫顯現。 lowercase： 所有的字母都以小寫顯現。 none： 大小寫不做任何改變。
<p style=“text-transform:capitalize”> this is a LAWYER</p> CSS 樣式 顯現結果 <p style=“text-transform:capitalize”> this is a LAWYER</p> <p style=“text-transform:uppercase”> <p style=“text-transform:lowercase”>
13.6 word-spacing word-spacing 屬性是用來設定每個字與每個字之間的距離。 CSS 樣式 顯現結果 <p style=“word-spacing:15px;;”> Words here are separated by 15px.</p>
14 浮動(float) float (浮動) 這個屬性來達成將文字繞著一個圖案顯現。float 屬性有三個可能的值：left、right、和 none。 CSS 樣式 顯現結果 <span style="float:left"><img src="river.jpg"></span>這個例子是用來顯示 float:left 會如何影響整個頁面的呈現。在這裡，圖案浮動於左邊。 <span style=“float:right”><img src=“river.jpg”></span>這個例子是用來顯示 float:right 會如何影響整個頁面的呈現。在這裡，圖案浮動於右邊。
15 清除(clear) clear (清除) 屬性是用來抵銷 float 屬性的作用。可能的值為： left：消除左邊的浮動。 right：消除右邊的浮動。 both：消除左邊及右邊的浮動。 none：不消除任何一邊的浮動。 CSS 樣式 顯現結果 <span style="float:left"> <img src="river.jpg“></span>這個例子<span style="clear:left">展現出 clear:left 能夠抵銷 float 屬性的值。</span>
範例1、用框線作為水平分隔線 可以取代<hr> ，顯示更多變化 <style> .s1 { border-bottom:solid blue 4px; } .s2 { border-bottom:solid blue 2px; } </style> </head> <body style=font-size:20px;> <h2 class=s1>this is a title</h2> <p class=s2>this is the first line</p> <p class=s2>this is the 2th line</p> </body> </html>
範例2、用框線作為項目符號 <style> .s1 {border-left: solid blue 16px; } body { background = url{bg.jpg); color: black; font-size:24px;} </style> <body> <h2>選擇以下旅遊主題</h2> <p class=s1>哪裡吃美食</p> <p class=s2>何處賞美景</p> <p class=s3>景點趴趴走</p> <p class=s4>血拼一把罩</p> </body>
範例3、用框線改變超連結效果 .s1 { <body><h2>蘇美島遊記</h2> font-size: 12pt; border-left: 16px solid #33ccff; border-bottom: 1px solid #33ccff; text-decoration:none; padding-left: 3px;} .s1:hover { border-left: 16px solid red; border-bottom:1px solid red; Padding-left: 3px;} h2{ text-align:center;} body{background-color:#ffff66;} <body><h2>蘇美島遊記</h2> <table> <tr><td width=“30”> </td> <td height=“30”> <a class=“s1” href=“#”> 哪裡吃美食</a></td></tr> 何處賞美景</a></td></tr> … (重覆上面. 景點趴趴走) … (重覆上面. 血拼一把罩) </table></body></html>