ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
Cascading Style Sheet (CSS)
2
CSS การใช้งาน CSS Class และ ID Pseudo Class
3
การใช้งาน CSS 1. การใส่ CSS แบบ inline 2. การใส่ CSS ที่ 3. การใส่ CSS แบบ import file
4
การใช้งาน CSS, การใส่ CSS แบบ inline <TAGNAME STYLE=attribute1:value1;attribute2:value2;…, attribute n:value n;> TAGNAME : ชื่อ tag ใดๆของ html attribute1, attribute2, attribute n : ชื่อ รูปแบบ value1,value2,value n : ค่าที่กำหนดให้ รูปแบบ
5
การใช้งาน CSS, การใส่ CSS แบบ inline Line1 Line2 Line3 ตย.
6
การใช้งาน CSS, การใส่ CSS แบบ inline Line1 Line2 Line3 ตย.
7
การใช้งาน CSS, การใส่ CSS แบบ inline Line1 Line2 Line3 ตย.
8
การใช้งาน CSS, การใส่ CSS ที่ TAGNAME { attribute1 : value1; attribute2 : value2; … attribute n : value n; }
9
การใช้งาน CSS, การใส่ CSS ที่ TAGNAME : ชื่อ tag ของ html ที่ไม่มี attribute1, attribute2, attribute n : ชื่อ รูปแบบ value1,value2,value n : ค่าที่กำหนดให้ รูปแบบ
10
การใช้งาน CSS, การใส่ CSS ที่ B{ font-size:14pt; color:red; } Line1 Line2 Line3 ตย.
11
การใช้งาน CSS, การใส่ CSS ที่ B{ font-size:14pt; color:red; } H1{font-size:14pt;color:red;} Line1 Line2 Line3 Line4 Line5 Line6 ตย.
12
การใช้งาน CSS, การใส่ CSS แบบ import file TAGNAME { attribute1 : value1; attribute2 : value2; … attribute n : value n; } ไฟล์ Style.css TAGNAME : ชื่อ tag ของ html ที่ไม่มี attribute1, attribute2, attribute n : ชื่อ รูปแบบ value1,value2,value n : ค่าที่กำหนดให้ รูปแบบ
13
การใช้งาน CSS, การใส่ CSS แบบ import file stylefile.css : ชื่อไฟล์ที่เก็บ style sheet ไว้ ต้องเป็น.css ไฟล์ page.html
14
การใช้งาน CSS, การใส่ CSS แบบ import file B{ font-size:14pt; color:red; } H1{font-size:14pt;color:red;} ตย. mystylefile.css
15
การใช้งาน CSS, การใส่ CSS แบบ import file Line1 Line2 Line3 Line4 Line5 Line6 ตย. testpage.html
16
Class และ ID 1.Class 2.ID การใส่ CSS แบบ inline และ การใส่ CSS ที่ ทำให้เสีย tag ของ html ไป 1 tag โดยไม่สามารถเรียกใช้รูปแบบเดิมได้ การใช้ Class และ ID แก้ปัญหานี้ได้
17
Class.CLASSNAME { attribute1 : value1; attribute2 : value2; … attribute n : value n; }.CLASSNAME : ชื่อ Class attribute1, attribute2, attribute n : ชื่อ รูปแบบ value1,value2,value n : ค่าที่กำหนดให้ รูปแบบ
18
Class.myred{font-size:14pt;color:red;}.mygreen{font-size:20pt;color:green;} Line1 Line2 Line3 Line4 Line5 Line6 ตย. testpage.html ( ใช้ Class สำหรับการใส่ CSS ใน )
19
Class.myred{ font-size:14pt; color:red;}.mygreen{ font-size:20pt; color:green;} ตย. mystylefile.css ( ใช้ Class สำหรับการใส่ CSS แบบ import file)
20
Class Line1 Line2 Line3 Line4 Line5 Line6 ตย. testpage.html ( ใช้ Class สำหรับการใส่ CSS แบบ import file)
21
ID #ID { attribute1 : value1; attribute2 : value2; … attribute n : value n; } #ID : ชื่อ ID attribute1, attribute2, attribute n : ชื่อ รูปแบบ value1,value2,value n : ค่าที่กำหนดให้ รูปแบบ
22
ID #myred{font-size:14pt;color:red;} #mygreen{font-size:20pt;color:green;} Line1 Line2 Line3 Line4 Line5 Line6 ตย. testpage.html ( ใช้ ID สำหรับการใส่ CSS ใน )
23
ID #myred{ font-size:14pt; color:red;} #mygreen{ font-size:20pt; color:green;} ตย. mystylefile.css ( ใช้ ID สำหรับการใส่ CSS แบบ import file)
24
Line1 Line2 Line3 Line4 Line5 Line6 ID ตย. testpage.html ( ใช้ ID สำหรับการใส่ CSS แบบ import file)
25
Pseudo Class 1.A:LINK การเชื่อมโยงที่ยังไม่ได้เรียกใช้ 2.A:ACTIVE การเชื่อมโยงที่กำลังเรียกใช้ กำลังเปิดเพจ 3.A:VISITED การเชื่อมโยงที่เรียกใช้แล้ว 4.A:HOVER การเชื่อมโยงที่เมาส์ชี้ เป็นการกำหนดรูปแบบตัวอักษร / รูปภาพของการเชื่อมโยง มี 4 ตัว
26
Pseudo Class A:LINK{ font-size:14pt; color:red; text-decoration: underline; } A:ACTIVE{ font-size:14pt; color:BLUE; text-decoration: none; } A:VISITED{ font-size:14pt; color:GREEN; text-decoration: none; } A:HOVER{ font-size:14pt; color:YELLOW; text-decoration: none; } SEARCH ตย. testpage.html ( ใช้ Pseudo Class สำหรับการใส่ CSS ใน )
27
Pseudo Class A:LINK{ font-size:14pt; color:red; text-decoration: underline; } A:ACTIVE{ font-size:14pt; color:BLUE; text-decoration: none; } A:VISITED{ font-size:14pt; color:GREEN; text-decoration: none; } A:HOVER{ font-size:14pt; color:YELLOW; text-decoration: none; } ตย. mystylefile.css ( ใช้ Pseudo Class สำหรับการใส่ CSS แบบ import file)
28
Pseudo Class SEARCH ตย. testpage.html ( ใช้ Pseudo Class สำหรับการใส่ CSS แบบ import file)
29
แทก STRONG ให้ผลการทำงานเหมือน TEXT
30
แทก SPAN text inline class id SPAN แทกที่ไม่มีการใช้เป็นข้อกำหนดตัวอักษรใดๆ
31
แทก text1 text2
32
แทก text1 text2
33
แทก text1 text2
34
แทก.myyellow{ font-size:30pt; color:yellow;}.mygreen{ font-size:20pt; color:green;}.mysmall{ font-size:10pt;} ตย. mystylefile.css ( ใช้ Class สำหรับการใส่ CSS แบบ import file)
35
แทก LINE1 LINE2 LINE3 LINE4 ตย. testpage1.html ( ใช้ Class สำหรับการใส่ CSS แบบ import file)
36
Class LINE1 LINE2 LINE3 LINE4 ตย. testpage2.html ( ใช้ Class สำหรับการใส่ CSS แบบ import file)
37
หมายเหตุ (Comment) /* comment */
38
Work2 CSS 1. เรียกเปิด work2_CSS_After ใน Browser แล้วทำงานกับ work2_CSS_Before เพื่อให้ได้ ผลลัพธ์เหมือนใน work2_CSS_After 2. อ่านเพิ่มเติมเรื่อง CSS http://realdev.truehits.net/cascade/charpt er1.php หัวข้อ Pseudo Class Advance Rules References
งานนำเสนอที่คล้ายกัน
