Contenu connexe
Plus de Attaporn Ninsuwan (20)
Css
- 2. ประโยชน์ที่ได้จากการใช้สไตล์ชตใน
ี
การควบคุมการแสดงผลในหน้าเว็บเพจ
• กำา หนดรูป แบบได้ใ นครั้ง เดีย ว ประโยชน์ใ นข้อ
นีน บ เป็น จุด เด่น ของการใช้ส ไตล์ช ต เพราะไม่
้ ั ี
ต้อ งเสีย เวลากำา หนดรูป แบบใดๆ ทีล ะจุด
• แก้ไ ขรูป แบบทีไ ด้ก ำา หนดไว้ใ นจุด เดีย ว เป็น
่
ผลพลอยได้จ ากข้อ แรก ทุก ครั้ง ทีเ ราอยาก
่
เปลี่ย นรูป แบบหน้า เว็บ เพจ แก้ไ ขทีส ไตล์ช ีต ที่
่
เดีย วพอ
• กำา หนดรูป แบบพิเ ศษ รูป แบบบางอย่า ง เช่น
ระยะห่า งระหว่า งบรรทัด เราไม่ส ามารถกำา หนด
ได้ด ้ว ยคำา สั่ง HTML ธรรมดา
• ประหยัด เนือ ที่ เพราะเราไม่ต อ งไปกำา หนดในทุก
้ ้
- 3. CSS Structure : โครงสร้างของ
สไตล์ชีต
• โครงสร้า งของการเขีย นสไตล์ช ต HTML Tag
ี
{Property : Value; Property : Value; ...}
• HTML Tag คำา สั่ง ในภาษา HTML
• Property ชื่อ ของคุณ สมบัต ิท เ ป็น ส่ว นขยายของ
ี่
คำา สั่ง ภาษา HTML หากมีห ลายค่า แต่ล ะค่า จะคั่น
ด้ว ยเครื่อ งหมายเซมิโ คล่อ น (;)
• Value ค่า ของ Property ทีก ำา หนด
่
• เครื่อ งหมาย {...} ทำา หน้า ทีเ หมือ นกับ
่
เครื่อ งหมาย <...> ในภาษา HTML
• ตัว อย่า ง การกำา หนดการแสดงผลบนเว็บ เพจ
ด้ว ยคำา สั่ง H1 และมีฟ อนต์เ ป็น Angsana UPC สี
แดง เราจะเขีย นด้ว ยคำา สั่ง ภาษา HTML และแบบ
สไตล์ช ีต ได้ด ัง นี้
- 4. • HTML Style
<FONT COLOR="red" FACE="AngsanaUPC">
<H1>หัวเรื่อง ตัวอักษรแบบ AngsanaUPC สี
แดง</H1>
</FONT>...
• Cascading Style Sheet
H1 {font-family: AngsanaUPC; Color: red}
......
<H1>หัวเรื่อง ตัวอักษรแบบ AngsanaUPC สีแดง</H1>
....
- 5. การอ้างถึงสไตล์ชตใน
External (linked) CSS : ี
แยกต่างหาก
• Linking Style Sheet เป็น การสร้า งแฟ้ม ไฟล์
สไตล์ช ต แยกออกมาจากไฟล์ HTML โดยแฟ้ม นี้
ี
จะมีส ่ว นขยายเป็น .css ไฟล์ HTML ทีเ รีย กไฟล์
่
สไตล์ช ต มาใช้ง านต้อ งสร้า งการเชื่อ มโยงด้ว ย
ี
<LINK> ไว้ใ นส่ว น <HEAD>...</HEAD> เพื่อ เรีย กใช้
แฟ้ม สไตล์ช ีต
• การแยกสไตล์ช ต ออกเป็น แฟ้ม ต่า งหาก และนำา
ี
มาใช้ง านนัน มีผ ลดีต รงทีเ ราสามารถนำา
้ ่
สไตล์ช ต ไปควบคุม การทำา งานของเว็บ เพจ
ี
จำา นวนมากได้ ซึง อาจเป็น ทัง เว็บ ไซต์เ ลยก็ไ ด้ มี
่ ้
รูป แบบการเขีย นดัง นี้
- 6. Embeded CSS : การใช้ส ไตล์ช ีต ใน
ไฟล์ HTML
• Embeded Style Sheet เป็น การกำา หนดสไตล์ช ีต ไว้
ภายในคำา สัง <STYLE>...</STYLE> อยูร ะหว่า ง
่ ่
ส่ว นหัว (HEAD) ของไฟล์ HTML โดยมีร ูป แบบ
การเขีย นดัง นี้
• <HEAD>
<TITLE>Embeded Style Sheet</TITLE>
<STYLE>
HTML Tag {Property: Value; Property:
Value; ... }
</STYLE>
</HEAD>
- 7. Embeded CSS : การใช้ส ไตล์ช ีต ใน
ไฟล์ HTML
• Embeded Style Sheet เป็น การกำา หนดสไตล์ช ีต ไว้
ภายในคำา สัง <STYLE>...</STYLE> อยูร ะหว่า ง
่ ่
ส่ว นหัว (HEAD) ของไฟล์ HTML โดยมีร ูป แบบ
การเขีย นดัง นี้
• <HEAD>
<TITLE>Embeded Style Sheet</TITLE>
<STYLE>
HTML Tag {Property: Value; Property:
Value; ... }
</STYLE>
</HEAD>
