CSS 教學下載並修改自: 資工系涂世俊老師教學網站.

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"> <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 Browser載入css的時機讀到<link>時暫不載入，直到要解釋樣式時才載入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 ; } <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 ; } <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-軸的位置。

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=“ 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 # 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>

CSS 教學下載並修改自: 資工系涂世俊老師教學網站.

Similar presentations

Presentation on theme: "CSS 教學下載並修改自: 資工系涂世俊老師教學網站."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

CSS 教學 下載並修改自: 資工系涂世俊老師教學網站.

Similar presentations

Presentation on theme: "CSS 教學 下載並修改自: 資工系涂世俊老師教學網站."— Presentation transcript:

Similar presentations

About project

反馈

CSS 教學下載並修改自: 資工系涂世俊老師教學網站.

Presentation on theme: "CSS 教學下載並修改自: 資工系涂世俊老師教學網站."— Presentation transcript: