Outline DHTML html CSS Java Script DOM HTML

  • Slides: 16
Download presentation

Outline • DHTML – html – CSS – Java. Script – DOM • HTML

Outline • DHTML – html – CSS – Java. Script – DOM • HTML 5 2021/2/19 2

CSS • • • 使用CSS與不使用CSS的差異 Class、Id、name Box model Z-index 外部連接套用 – <link rel="stylesheet" type="text/css"

CSS • • • 使用CSS與不使用CSS的差異 Class、Id、name Box model Z-index 外部連接套用 – <link rel="stylesheet" type="text/css" href="mystyle. css"> 2021/2/19 3

Class、Id、name • • • ID 介紹 ID 範例 Class介紹 Class 範例 Name介紹 Name 範例

Class、Id、name • • • ID 介紹 ID 範例 Class介紹 Class 範例 Name介紹 Name 範例 2021/2/19 6

Class介紹 • Class主要用於CSS中來設定HTML標籤的樣式, 也可以使用Javascript套用CSS中的Class。 • Class主要用來呈現。 • HTML的標籤裡可以使用多個Class,Class與Class 之間只需要用空格格開。 – <div class=“class名稱A” class=“ class名稱B”></div>

Class介紹 • Class主要用於CSS中來設定HTML標籤的樣式, 也可以使用Javascript套用CSS中的Class。 • Class主要用來呈現。 • HTML的標籤裡可以使用多個Class,Class與Class 之間只需要用空格格開。 – <div class=“class名稱A” class=“ class名稱B”></div> – <div class=“class名稱A class名稱B”></div> • Class不能在以下HTML的標籤使用: – base, head, html, meta, param, script, style, title 9

Class範例 Ex:設 “Class 名稱” 為 “box”與“big. Box” Demo 10

Class範例 Ex:設 “Class 名稱” 為 “box”與“big. Box” Demo 10

Name範例 Ex:設 “Name名稱” 為 “Name” Demo 12

Name範例 Ex:設 “Name名稱” 為 “Name” Demo 12

Box model Demo 2021/2/19 13

Box model Demo 2021/2/19 13

Outline • DHTML – CSS – Javascript • AJAX • HTML 5 2021/2/19 15

Outline • DHTML – CSS – Javascript • AJAX • HTML 5 2021/2/19 15

Javascript • document. write("Hello World"); • alert ( " Hello World " ); •

Javascript • document. write("Hello World"); • alert ( " Hello World " ); • inner. HTML • style 2021/2/19 16