1 / 44

HTML & CSS

HTML & CSS. 網頁的基本要素. HTML CSS. 完整 HTML 的文件架構 - HTML4.01. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!-- 文件的標頭 --> <title> Hello HTML </title>

neylan
Download Presentation

HTML & CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML & CSS

  2. 網頁的基本要素 • HTML • CSS

  3. 完整 HTML 的文件架構 - HTML4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><!-- 文件的標頭 --> <title>Hello HTML</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body><!-- 文件的本體 --> <p>Hello World!</p> </body> </html>

  4. 完整 HTML 的文件架構 – HTML5 <!DOCTYPE HTML> <html> <head><!-- 文件的標頭 --> <title>Hello HTML</title> <meta charset=“UTF-8"> </head> <body><!-- 文件的本體 --> <p>Hello World!</p> </body> </html>

  5. <HEAD> 的用途 • HEAD 主要包含文件的相關資訊 • 常見功能 • 標題：<title>網站標題</title> • 搜尋關鍵字：<META charset=“UTF-8"> • 樣式定義：<style> … </style> <style type="text/css"> body {background-color:yellow} p {color:blue}</style> • <script> … </script> • 外部資源：<link> … </link>

  6. <BODY> 的用途 • 文件的本體，主要是放置需要呈現於網頁上的視覺化內容，包含：文字、圖片、圖型…等。 • 自從 CSS 出現開始，對於文件樣式不再像以往使用標籤的屬性來設定。

  7. id 及 class • ID：元素標籤代號，必須在文件中唯一無二 • CLASS：指定定義於style中的樣式

  8. 樣式的設定 • 預先定義類型，再套用到各標籤中 • 類型 <style> .navbar { font-size: 12pt; color: red; } </style> • 套用 <div class="navbar">CSS測試</div> • 在 HTML標籤中直接使用 style設定 <div style=“font-size: 12pt; color: red”>CSS測試</div> • 既有標籤樣式設定 <style> H1 { font-size: 12pt; color: red; } </style>

  9. 在 HTML 文件外使用樣式 • 樣式的設定也可以儲存於 HTML 文件之外，範例如下 • <HEAD> • <link rel="stylesheet" href=“common.css" type="text/css“ /> • </HEAD> • common.css 為指定使用的 CSS 檔 • 檔案的內容與 <STYLE> 標籤內所指定樣式的內容一樣

  10. 版面設計

  11. 結構化標籤:DIV 及 SPAN 元素標籤 • <DIV>block-level 標籤，主要提供設置區塊的功能 • <DIV> 區塊中可以放置段落、項目符號、圖片、表格…等等的基本元素標籤 • 為區塊(Block)標籤的一種 • <SPAN>inline-level 標籤，主要提供文字樣式的設定 • <SPAN> 的內容僅能包含文字內容 • 為行內(Inline)標籤的一種

  12. DIV 及 SPAN 標籤的使用範例 • <DIV id="client-lafon" class="client"> • <SPAN class="client-title">Client information:</SPAN> • <TABLE class="client-data"> • <TR><TH>Last name:<TD>Lafon</TR> • <TR><TH>First name:<TD>Yves</TR> • <TR><TH>Tel:<TD>(617) 555-1212</TR> • <TR><TH>Email:<TD>yves@coucou.com</TR> • </TABLE> • </DIV>

  13. 尺寸 • 區塊的大小單位為像素簡寫 px • 字型的大小單位為 pt • 在版面及圖片大小的設定通常會參考常用的螢幕解析度 • 目前常用的螢幕解析度 • 1024x768

  14. 顏色 • 十六進位值 • color:#XXXXXX; • RGB 碼 • color:rgb(X,Y,Z); • 顏色名稱 • color:green;

  15. 背景屬性 • background-color background-color: red; • background-image background-image:url(yp.jpg); • background-repeat background-repeat: no-repeat/repeat-x/repeat-y/repeat; • background-attachment background-attachment: fixed/scroll; • background-position • 兩個字：[top,center,bottom]與[left,center,right] background-position: center center; • 兩個百分比：x-軸與y-軸的百分比 background-position: 20% 20%; • 兩個數字： x-軸與y-軸的位置 background-position: 20 20;

  16. 字體 • font-family • font-family: 標楷體; • font-size • font-size:9px; • font-weight • font-weight: 100-900; • font-weight: bold/bolder/normal; • font-style • font-style: italic;

  17. 連接樣式 • a:link: 超連接網頁尚未被看過時的樣式 • a:visited: 超連接網頁已經看過時的樣式 • a:hover: 當滑鼠在超連接上面時的樣式 • a:active: 超連接被點擊時的樣式 • 範例 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;}

  18. 清單 • 搭配<ul>使用 • list-style-type • none (沒有), disc (全黑圓圈), circle (空心圓圈) • square (正方形), upper-latin(大寫拉丁文), lower-latin(小寫拉丁文), upper-roman (大寫羅馬文), lower-roman (小寫羅馬文), upper-alpha (大寫希臘文 ), lower-alpha (小寫希臘文 ) • list-style-position • list-style-position: inside/outside; • list-style-image • list-style-image:url("circle.gif");

  19. 盒狀模型(box model)

  20. 盒狀模型(Box Model) • 所有 HTML 的可視的元素標籤的呈現區塊，我們稱做盒狀模型 • 盒狀模型主要分為 • 邊界(Margin) • 填空(Padding) • 邊框(Border)

  21. 盒狀模型的樣式設定 • 盒狀模型的樣式皆可針對四個方向設定 • 上(top), 左(right), 下(bottom), 右(left) • 可設定的屬性主要分為 • 邊界的大小(margin) • 指定邊界方向可使用(margin-方向) • 例: 上方邊界 • margin-top: 5px • 填空的大小(padding) • 指定邊界方向可使用(padding-方向) • 例: 下方填空 3px • padding-bottom: 3px • 邊框(border)

  22. 盒狀模型(Box Model)– 續 • 邊框的設定可分為三種 • 寬度(border-width) • 指定邊界方向可使用 border-方向-width • 例: border-top-width: 5px • 色彩(border-color) • 指定邊界方向可使用 border-方向-color • 例: border-left-color: red • 樣式(border-style) • 指定邊界方向可使用 border-方向-style • 樣式的屬性值有: • 點虛線(dotted), 虛線(dashed), 實線(solid), 雙實線(double) • 槽狀(groove),脊狀(ridge) • 凹陷(inset), 凸出(outset)

  23. 盒狀模型(Box Model)– 續 • 同時指定邊框的寬度, 色彩, 樣式 • border-方向: <寬><樣式><色彩> • 設定下方邊框為 2px 點虛線綠色 • border-bottom: 2px dotted green; • 或不指定方向，即四周 • 設定四週邊框為 1px 實線黑色 • border: 1px solid black;

  24. 表格 table {   border: 0;   font-family: arial; border-collpase:collpase; 相當於cellspacing=0  font-size:14px; } tr {   border-bottom:1px solid #000; } th{ background-color:yellow; } td {   border-bottom:1 solid #000000; }  練習：

  25. 視覺格式模型(Visual formatting model)

  26. 區塊的大小 • 區塊大小的設定方式，可指定固定大小或者比例 • 寬度(width) • width: 100px • width: 80% • 高度(height) • height: 100px • height: 90%; • 在區塊中可以指定文章段落行高(line-height) • 1.2 倍行高的範例 • line-height: 1.2

  27. 區塊位置的設定 DIV • 區塊位置的顯示方式(position) • static (預設值): • 預設位置。如果 position 的值被設定為 statics，那 top、bottom、left、和 right 的值就沒有意義了。 • 相對位置(relative) • 設定標籤與標籤在呈現上的相對位置 • 如右圖 • 絕對位置(absolute) • 存在於 網頁上的絕對位置 (即使拉動卷軸也不會移動) • 固定位置(fixed) • 存在於 營幕上的固定位置 (卷軸下拉會隨著改變位置) • 位置的指定 • 上(top), 下(bottom), 左(left), 右(right) • top: 100px; P

  28. 區塊的順序 • 重疊的區塊有上下順序之分 • 必需先設定 區塊位置 (position ) 才能設定順序。 • 可以使用 z-index 屬性設定 • 數值越大越上方，數值越小越下面 • z-index: <數字> • 若無設定 z-index則會顯示於最下方 z-index: 1 z-index: 2

  29. 文字 • letter-spacing • letter-spacing: 8px;  • line-height • line-height: 40px; • text-align • text-align: left/right/center/justify; • text-decoration • text-decoration: underline/overline/line-through; • text-indent • text-indent: 15px; • text-transform • text-transform: capitalize/uppercase/lowercase; • word-spacing • word-spacing: 5px;

  30. 滑鼠游標圖案 • 既有樣式：cursor: 樣式; • crosshair pointer text • move wait help • progress not-allowed no-vertical-text • no-drop all-scroll col-resize • row-resize e-resize ne-resize • n-resize nw-resize w-resize • sw-resize s-resize se-resize • 自定樣式：cursor: url(圖片檔);

  31. 浮動區塊 • 浮動 (float) • 可以令圖片或者區塊(DIV)置於文字之中 • 可設定置左(left)或罝右(right)

  32. 浮動區塊– 續 • 浮動圖片可能會介於兩個段落之間 • 若不想要延續浮動的效果可以在下個段落使用 clear屬性

  33. 浮動區塊– 續 • clear屬性的方向可以選擇左邊(left), 右邊(right)或者兩邊(both)

  34. 浮動區塊的範例 • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> • <HTML> • <HEAD> • <TITLE>Float example</TITLE> • <STYLE type="text/css"> • IMG { float: left } • </STYLE> • </HEAD> • <BODY> • <P><IMG src=img.png alt="This image will illustrate floats"> Some sample text that has no other... </P> • <P style="clear: left">This paragraph is ‘clear’ proper set to ‘left’ so that it will be forced to be below any left floating images… </P> • </BODY> • </HTML>

  35. 當內容超出區塊 • 當內容超出區塊如右圖 • 可以使用 overflow屬性來控制超出內容的顯示方式 • 隱藏超出的內容(hidden) • 使用卷軸顯示超出的內容(scroll) • 自動判斷大小顯示卷軸(auto)

  36. 注意事項 • 版型上的間隔空間使用 CSS 上盒狀模型設定不要使用 <p> 或 <br /> (嚴重錯誤) • 使用 CSS float 之後一定要加 clear

  37. 橫幅 資訊列 內容 資訊列 註腳 課後作業 • 三欄式版型實作

  38. CSS3

  39. CSS3 Borders • Box Shadow • box-shadow: 10px 10px 5px #888888; • Round corner • border-radius:25px; • Border image background-color: pink; border-image-source: url(bdia.png); border-image-slice: 38 53 99 41; border-image-width: 38px 53px 99px 41px; overflow: hidden; width: 151px; height: 117px;

  40. CSS3 Borders • Border image repeat • stretch：延展方式 • repeat：重複平鋪方式 • round：重複平鋪方式。如果沒有整數倍數，圖片會進行縮放以便整數倍數平鋪填充 • space：重複平鋪方式。如果沒有整數倍數，額外空間會散佈在圖片與圖片間以便整數倍數平鋪

  41. 多重背景圖 background-image: url(sheep.png), url(lawn.jpg); background-repeat: no-repeat; background-position: center bottom, center top;

  42. CSS Animation • 指定animation規則 • @-webkit-keyframesanimation1{ from {background: red;} to {background: yellow;} } • @-webkit-keyframesanimation2{ 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } • 套用animation規則與播放設定 • -webkit-animation: animation1 5s infinite; • @-webkit-keyframes animation3 { 0% {left: 350px; top: 100px;} 25% {left: 750px; top: 100px;} 50% {left: 350px; top: 800px;} 100% {left: 350px; top: 100px;} }

  43. 2D Transforms • Translate: -webkit-transform: translate(200px, 0px); • Rotate: -webkit-transform: rotate(30deg); • Scale: -webkit-transform: scale(2, 0.5); • Skew: -webkit-transform: skew(30deg, 20deg)

More Related