การใช้งาน CSS
CSS
ในบทที่แล้วเราได้รู้แล้วว่าการเขียน CSS นั้นเขียนอย่างไร ในบทนี้จะเป็นการนำ CSS ไปใช้ การใช้งาน CSS จะแบ่งได้ 2 แบบคือคลิกที่หัวข้อเพื่อดูตัวอย่าง
1. การเขียน CSS ในเอกสาร HTML ของเราเลย
การเขียนแบบนี้ไม่เป็นที่นิยมเพราะถ้าเราต้องการแก้ไข ก็ต้องแก้ไขในทุกหน้าซึ่งจะทำให้เสียเวลา ตัวอย่างการเขียน CSS ในเอกสาร HTML
|
<head> <style type="text/css"> <!-- hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --> </style> </head> |
เราจะเขียน CSS ในส่วนของ <HEAD> จะเห็นได้ว่ามีการใช้ Comment HTML <!-- --> อยู่ด้วย เราใส่เพื่อป้องการผู้ใช้งาน browser ตัวเก่า ที่ยังไม่รู้จัก CSS จะแสดงผล Code CSS ของเรา ซึ่งเราจะใส่หรือไม่ก็ได้
อีกแบบหนึ่งของการเขียน CSS ในเอกสาร HTML คือการเขียนใน HTML tag เลยดังตัวอย่าง
|
<p style = " color: blue ; margin-left: 20px "> ตัวอักษรนี้สีฟ้า และห่างจากขอบทางขวามือ 20px </p> |
คำเตือน เมื่อมีหน่วยใน value ของเราเช่น margin-left: 20px หน่วยคือ px (pixel) จะต้องเขียนให้ค่าและหน่วยติดกันเสมอ ถ้าเว้นวรรคจะทำให้การแสดงผลผิดพลาดได้
2.การเขียน CSS แยกเป็นอีก 1 ไฟล์
การเขียนแบบนี้เป็นที่นิยมมากเพราะถ้าเราต้องการแก้หน้าตาเว็บเพจของเราก็แก้ไฟล์ CSS แค่ไฟล์เดียวก็สามารถทำให้หน้าเว็บเพจของเราเปลี่ยนไปได้หมด ซึ่งการใช้งานก็ให้เราเขียน Code ที่หน้า HTML ดังนี้
ตัวอย่างคำสั่งที่ใช้นำเข้าไฟล์ CSS จากภายนอก
|
<head> <link rel = "stylesheet" type = "text/css" href = "ชื่อไฟล์ CSS ของเรา" > </head> |
ตัวอย่างจะเป็นการนำเข้าไฟล์ CSS จากภายนอกซึ่งเราจะเขียนในส่วน <Head> เช่นเดียวกันกับแบบแรก
ตัวอย่างไฟล์ CSS
|
hr {color: sienna} p {margin-left: 20px} |
เนื้อหาในไฟล์ก็เป็นคำสั่ง CSS ธรรมดาซึ่งเรานิยม save ไฟล์นี้ในนามสกุล .css เพื่อสะดวกในการค้นหาและแก้ไข เช่น อาจตั้งชื่อเป็น style.css
ทุกท่านอาจมีคำถามเกิดขึ้นว่า ถ้าเราใช้ทั้ง 2 แบบ จะเป็นอย่างไร คำตอบคือ browser จะแสดงผลโดยให้คำสั่ง CSS ที่อยู่ในหน้าเว็บเป็นคำสั่งที่ใช้แสดงผลหลัก เนื่องจากว่า browser จะโหลดไฟล์ CSS มาก่อน และเมื่อมีคำสั่งที่อยู่ใน เอกสาร HTML ซ้ำกับที่โหลดมา ก็จะยึดตัวที่อยู่ในเอกสาร HTML เป็นตัวหลัก ดังตัวอย่าง
คำสั่ง CSS ที่โหลดเข้ามา
|
h3 { color: red; text-align: left; font-size: 8pt } |
คำสั่ง CSS ที่อยู่ในเอกสาร HTML
|
h3 { text-align: right; font-size: 20pt } |
คำสั่ง CSS ที่แสดงผล
|
color: red; text-align: right; font-size: 20pt |
บทนี้ก็จบลงเพียงเท่านี้ บทต่อไปจะเป็นคำสั่งที่ใช้งาน CSS กันจริงๆ ซักทีหลังจากที่เราศึกษาพื้นฐาน CSS มาหลายบทแล้ว
เกี่ยวกับบทความนี้
- ระดับความยาก : พื้นฐาน
- คะแนนของบทความนี้ : 9
- สร้างเมื่อ : 16-05-2010
- จำนวนครั้งที่เปิด : 14,061
- เนื้อหาที่เกี่ยวข้อง :
- -
คลิกที่ เจ๋งเป้ง! เพื่อโหวตให้กับบทความนี้หากคิดว่าน่าสนใจ
บทความอื่นๆในหมวดลองทำเว็บไซต์ แบบง่ายๆ (11 เรื่อง)
บทนำ CSS
CSS เป็นคำสั่งที่ใช้คู่กับ HTML เพื่อให้คุณใช้จัดรูปแบบของเว็บเพจของคุณได้ดีขึ้น และแก้ไขได้ง่ายขึ้น
สร้างเมื่อ : 16-05-2010 9:03 | จำนวนครั้งที่เปิด : 17,342
CSS syntax
ในบทนี้จะเป็นเนื้อหาของ รูปแบบคำสั่งของ CSS ซึ่งจะใช้ไปในทุกๆบทต่อจากนี้
สร้างเมื่อ : 16-05-2010 9:05 | จำนวนครั้งที่เปิด : 13,674
การใช้งาน CSS
หลายคนคงสงสัยว่า จะใช้งาน CSS ได้อย่างไร และ CSS จะอยู่ส่วนไหนของ code ของเรา ในบทความนี้จะบอกอย่างเรื่องนี้อย่างละเอียดทีเดียว
สร้างเมื่อ : 16-05-2010 8:29 | จำนวนครั้งที่เปิด : 14,061
คำสั่งที่ใช้ใส่ Background ให้เว็บเพจ
ในบทความนี้จะเป็นคำสั่งที่เกี่ยวกับการใส่ background ให้กับเว็บเพจของเรา ซึ่งสามารถกำหนดรายละเอียดการแสดงผลได้มากกว่าการใช้งาน HTML มาก
สร้างเมื่อ : 16-05-2010 8:29 | จำนวนครั้งที่เปิด : 21,144
คำสั่งที่ใช้กับข้อความ (text)
ในบทนี้จะเป็นคำสั่ง CSS ที่ใช้กับข้อความ ซึ่งเป็นสิ่งที่เราใช้มากที่สุดในการทำเว็บเพจ
สร้างเมื่อ : 16-05-2010 8:30 | จำนวนครั้งที่เปิด : 14,046
คำสั่งจัดการฟอนต์ (font)
ในบทนี้เราจะเป็นคำสั่งใช้กับตัวอักษร (font) ของเรา เช่นกำหนดขนาดให้ตัวอักษร , แสดงอักษรตัวหนา , ตัวเอียง หรือแม้แต่กระทั่งชนิดของตัวอักษร
สร้างเมื่อ : 16-05-2010 8:30 | จำนวนครั้งที่เปิด : 8,407
คำสั่งที่เกี่ยวกับเส้นขอบ
ในบทนี้จะเป็นคำสั่งที่ใช้สร้างเส้นขอบต่างๆ สำหรับวัตถุ เช่นสร้างเส้นขอบให้กับอักษร หรือสร้างเส้นขอบให้กับเนื้อหา ที่จะเห็นใช้กันบ่อยๆคือ เส้นประที่ใช้คั่นระหว่างบทความ
สร้างเมื่อ : 16-05-2010 8:31 | จำนวนครั้งที่เปิด : 12,408
Margin กำหนดระยะห่างระหว่างวัตถุ
margin เป็นการกำหนดระยะห่างระหว่างวัตถุเช่น กำหนดให้ข้อความห่างจาก ตาราง 1 cm หรือกำหนดระยะห่างระหว่างข้อความด้วยกัน
สร้างเมื่อ : 16-05-2010 8:31 | จำนวนครั้งที่เปิด : 7,481
padding จัดระยะห่างระหว่างขอบของวัตถุ และเนื้อหา
padding จัดระยะห่างระหว่างขอบของวัตถุ และเนื้อหา เช่น ระยะห่างระหว่างเส้นตาราง และเนื้อหาในตาราง
สร้างเมื่อ : 16-05-2010 8:31 | จำนวนครั้งที่เปิด : 6,842
เปลี่ยนสัญลักษณ์หน้า list
ในบทเรียน HTML จะมีเรื่องการเขียน list อยู่ซี่งเครื่องหมายที่อยู่หน้า list นั้นสามารถเปลี่ยนได้โดยใช้คำสั่ง CSS
สร้างเมื่อ : 16-05-2010 8:32 | จำนวนครั้งที่เปิด : 7,514
table จัดรูปแบบของตารางด้วยคำสั่ง css
ในบทนี้จะเป็นการจัดรูปแบบของตารางด้วยคำสั่ง CSS
สร้างเมื่อ : 16-05-2010 8:32 | จำนวนครั้งที่เปิด : 18,292
