Download presentation
Presentation is loading. Please wait.
1
HTML & CSS
2
HTML
3
基本html架構 <html xmlns="http://www.w3.org/1999/xh tml">
<head> <title>標題</title> </head> <body> 內文 </body> </html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4
常見HTML標籤
5
超連結 href=“xxx” ：連接的網址 target=“xxx”: 開啟方式 寄信
<a href=“ target =“_blank”>Yahoo</a> href=“xxx” ：連接的網址 target=“xxx”: 開啟方式 “_self” :自己 “_blank”: 開新視窗 “_top”:最頂端框架 “_parent”: 父框架 寄信 <a
6
超連結(Cont.) 錨點 定位： 移動：<a href=“#hello”>移到hello處</a>
<a name=“hello”>xxxxxxx</a> <a id=“hello”>xxxxxx</a> 移動：<a href=“#hello”>移到hello處</a>
7
插入圖片 <img src=“xxx.jpg” title=“快顯視窗” width=“寬度px” height=“高度px”/> 單寫寬度或高度可等比例調整圖片大小 px 也可以換成百分比表示 alt屬性表示圖片無法讀取時所顯示的文字
8
排版 <div>這是一個段落</div> <span>這是一個區塊</span>
取代早期的font
9
排版(Cont.) 斷行 <P>AAA</P> <p>BBB</p>
AAA<p>BBB AAA<br/> <br/>BBB
10
表格 標題儲存格用<th>取代<td> 合併兩欄
<table> <tr> <td></td> </tr> </table> 標題儲存格用<th>取代<td> 合併兩欄 <tr><td colspan=“2”></td></tr> 分割儲存格 <tr><td rowspan=“2”></td></tr>
11
清單 有序 無序 <ul> </ul> <ol type=“樣式” start=“1”>
<li>項目一</li> <li>項目二</li> </ol> 無序 <ul> </ul> Type 1: 阿拉伯數字 A or a : 英文字母 I or i : 羅馬數字
12
CSS教學
13
表示方式 屬性: 值; Ex. color: red; font-size: 14pt;
14
套用方式 Inline <span style=“color:#ff0000;”> Embed <head>
<style type=“text/css”> div{ background-color: #ff0000; } </style> </head> External <link rel=“stylesheet” type=“text/css” href=“外部css檔路徑”>
15
選擇器 配合html標籤 p b{ color:#ff0000;}
使用class: <div class=“className”> .className{color:#ff0000;} 配合ID: <div id=“footer”></div> #footer{color:#ff0000;}
16
色彩 表示色彩 – RGB 範例： 16進位: #ff0000 10進位：rgb(255,0,0) 文字：red
這是<span style=“color: #ff0000”>紅色的字</span> <div style=“background-color: rgb(255,0,0);”>紅色背景 </div>
17
文字 字型：font-family style=“font-family: arial;” 大小：font-size
文字：”xx-large” “x-large” “large” “medium” “small” “x- small” “xx-small” 數值：9px 粗體：font-weight 文字：”normal” ”bold” “bolder” 數值(無單位)：100 斜體：font-style 文字：”italic”
18
超連結 a:link: 一般時候 a:visited: 已經看過的網頁 a:hover: 滑鼠移過 a:active: 按下去
19
表格 表格線範圍 樣式 border-style border 四邊
“border-top” “border-bottom” “border-left” “border-right” 樣式 border-style solid(實線) dashed(虛線) double(雙線) dotted(點點線) groove(凹線) ridge(凸線) Inset(下嵌) outset(上浮)
20
表格(Count.) 框線寬度 border-width 框線色彩 border-color
數值： 9px 框線色彩 border-color 摺疊框線 border-collapse: collapse; 整合：色彩 寬度 樣式 border-top: #00ff00 3px dashed;
21
清單 圖片：list-style-image 記號與文字：list-style-position 整合： list
樣式 list-style-type 圖標：“none” “disc” “circle” “square” 文字： “upper-”(大寫) | “lower-”(小寫) + “latin”(拉丁文)| “roman”(羅馬文)|”alpha”(希臘文) 圖片：list-style-image list-style-image: url(圖片路徑) 記號與文字：list-style-position “inside” : 記號與文字視為一組 “outside”: 記號與文字不同一組 整合： list ul { list-style: url(“路徑") none inside; }
22
排版 位置：position “static” “absolute” “relative” “fixed”
“top“ “right” “bottom” “left” “z-index” (值越大越上面) 邊界 “margin-top” “margin-bottom” “margin-left” “margin-right” 整合 margin: 上 右 下 左 padding 跟margin一樣
23
背景repeat 背景顏色 背景圖片 浮水印 background-attachment 背景重複 background-repeat
background-color: #ff0000 背景圖片 background-image: url(圖片路徑) 浮水印 background-attachment “fixed” “scroll” 背景重複 background-repeat “no-repeat” “repeat” “repeat-x” “repeat-y”
Similar presentations
