Cascading Style Sheet (CSS)

CSS การใช้งาน CSS Class และ ID Pseudo Class

การใช้งาน CSS 1. การใส่ CSS แบบ inline 2. การใส่ CSS ที่ 3. การใส่ CSS แบบ import file

การใช้งาน CSS, การใส่ CSS แบบ inline <TAGNAME STYLE=attribute1:value1;attribute2:value2;…, attribute n:value n;> TAGNAME : ชื่อ tag ใดๆของ html attribute1, attribute2, attribute n : ชื่อ รูปแบบ value1,value2,value n : ค่าที่กำหนดให้ รูปแบบ

การใช้งาน CSS, การใส่ CSS แบบ inline Line1 Line2 Line3 ตย.

การใช้งาน CSS, การใส่ CSS แบบ inline Line1 Line2 Line3 ตย.

การใช้งาน CSS, การใส่ CSS แบบ inline Line1 Line2 Line3 ตย.

การใช้งาน CSS, การใส่ CSS ที่ TAGNAME { attribute1 : value1; attribute2 : value2; … attribute n : value n; }

การใช้งาน CSS, การใส่ CSS ที่ TAGNAME : ชื่อ tag ของ html ที่ไม่มี attribute1, attribute2, attribute n : ชื่อ รูปแบบ value1,value2,value n : ค่าที่กำหนดให้ รูปแบบ

การใช้งาน CSS, การใส่ CSS ที่ B{ font-size:14pt; color:red; } Line1 Line2 Line3 ตย.

การใช้งาน CSS, การใส่ CSS ที่ B{ font-size:14pt; color:red; } H1{font-size:14pt;color:red;} Line1 Line2 Line3 Line4 Line5 Line6 ตย.

การใช้งาน 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 : ค่าที่กำหนดให้ รูปแบบ

การใช้งาน CSS, การใส่ CSS แบบ import file stylefile.css : ชื่อไฟล์ที่เก็บ style sheet ไว้ ต้องเป็น.css ไฟล์ page.html

การใช้งาน CSS, การใส่ CSS แบบ import file B{ font-size:14pt; color:red; } H1{font-size:14pt;color:red;} ตย. mystylefile.css

การใช้งาน CSS, การใส่ CSS แบบ import file Line1 Line2 Line3 Line4 Line5 Line6 ตย. testpage.html

Class และ ID 1.Class 2.ID การใส่ CSS แบบ inline และ การใส่ CSS ที่ ทำให้เสีย tag ของ html ไป 1 tag โดยไม่สามารถเรียกใช้รูปแบบเดิมได้ การใช้ Class และ ID แก้ปัญหานี้ได้

Class.CLASSNAME { attribute1 : value1; attribute2 : value2; … attribute n : value n; }.CLASSNAME : ชื่อ Class attribute1, attribute2, attribute n : ชื่อ รูปแบบ value1,value2,value n : ค่าที่กำหนดให้ รูปแบบ

Class.myred{font-size:14pt;color:red;}.mygreen{font-size:20pt;color:green;} Line1 Line2 Line3 Line4 Line5 Line6 ตย. testpage.html ( ใช้ Class สำหรับการใส่ CSS ใน )

Class.myred{ font-size:14pt; color:red;}.mygreen{ font-size:20pt; color:green;} ตย. mystylefile.css ( ใช้ Class สำหรับการใส่ CSS แบบ import file)

Class Line1 Line2 Line3 Line4 Line5 Line6 ตย. testpage.html ( ใช้ Class สำหรับการใส่ CSS แบบ import file)

ID #ID { attribute1 : value1; attribute2 : value2; … attribute n : value n; } #ID : ชื่อ ID attribute1, attribute2, attribute n : ชื่อ รูปแบบ value1,value2,value n : ค่าที่กำหนดให้ รูปแบบ

ID #myred{font-size:14pt;color:red;} #mygreen{font-size:20pt;color:green;} Line1 Line2 Line3 Line4 Line5 Line6 ตย. testpage.html ( ใช้ ID สำหรับการใส่ CSS ใน )

ID #myred{ font-size:14pt; color:red;} #mygreen{ font-size:20pt; color:green;} ตย. mystylefile.css ( ใช้ ID สำหรับการใส่ CSS แบบ import file)

Line1 Line2 Line3 Line4 Line5 Line6 ID ตย. testpage.html ( ใช้ ID สำหรับการใส่ CSS แบบ import file)

Pseudo Class 1.A:LINK การเชื่อมโยงที่ยังไม่ได้เรียกใช้ 2.A:ACTIVE การเชื่อมโยงที่กำลังเรียกใช้ กำลังเปิดเพจ 3.A:VISITED การเชื่อมโยงที่เรียกใช้แล้ว 4.A:HOVER การเชื่อมโยงที่เมาส์ชี้ เป็นการกำหนดรูปแบบตัวอักษร / รูปภาพของการเชื่อมโยง มี 4 ตัว

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 ใน )

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)

Pseudo Class SEARCH ตย. testpage.html ( ใช้ Pseudo Class สำหรับการใส่ CSS แบบ import file)

แทก STRONG ให้ผลการทำงานเหมือน TEXT

แทก SPAN text inline class id SPAN แทกที่ไม่มีการใช้เป็นข้อกำหนดตัวอักษรใดๆ

แทก text1 text2

แทก text1 text2

แทก text1 text2

แทก.myyellow{ font-size:30pt; color:yellow;}.mygreen{ font-size:20pt; color:green;}.mysmall{ font-size:10pt;} ตย. mystylefile.css ( ใช้ Class สำหรับการใส่ CSS แบบ import file)

แทก LINE1 LINE2 LINE3 LINE4 ตย. testpage1.html ( ใช้ Class สำหรับการใส่ CSS แบบ import file)

Class LINE1 LINE2 LINE3 LINE4 ตย. testpage2.html ( ใช้ Class สำหรับการใส่ CSS แบบ import file)

หมายเหตุ (Comment) /* comment */

Work2 CSS 1. เรียกเปิด work2_CSS_After ใน Browser แล้วทำงานกับ work2_CSS_Before เพื่อให้ได้ ผลลัพธ์เหมือนใน work2_CSS_After 2. อ่านเพิ่มเติมเรื่อง CSS er1.php หัวข้อ Pseudo Class Advance Rules References