คุณอาจจะเห็นว่ามีข้อความสีดำอยู่บนพื้นหลังสีขาวแต่ทั้งนี้ก็ขึ้นอยู่กับการอ่านค่าของบราวเซอร์
ดังนั้นวิธีที่ง่ายวิธีหนึ่งที่เราสามารถสร้างสไตล์
ให้กับหน้าเวบได้คือการใส่สี
(ให้เปิดบราวเซอร์ทิ้งไว้เพราะเราจะต้องใช้อีกภายหลัง)
เราจะเริ่มต้นจาการใส่ style sheet ที่อยู่ในไฟล์เดียวกันกับ HTML ก่อน ภายหลังเราจะแยกไฟล์ HTML กับ CSS ออกจากกัน การแยกไฟล์ นั้นมีข้อดีเนื่องจากเราสามารถนำ style sheet เดียวกันมาใช้กับไฟล์ HTML ได้หลายไฟล์ได้ง่ายโดยที่เขียน style sheet เพียงแค่ครั้งเดียว แต่สำหรับขั้นตอนนี้ เราจะเก็บทุกอย่างไว้ในไฟล์เดียวกัน
เราต้องใส่ element <style>ในไฟล์ HTML style sheet style sheet จะอยู่ภายใน element นี้ ดังนั้นให้กลับไปยังหน้าต่างในโปรแกรม แก้ไขและเพิ่มบรรทัดต่อไปนี้ 5 บรรทัดในส่วน head ของไฟล์ HTML บรรทัดที่ใส่เพิ่มจะเป็นตัวสีแดง
ตอนนี้ให้เซฟไฟล์ดังกล่าวไว้ (โดยใช้คำสั่ง “Save” จากเมนู File) และกลับไปยังหน้าบราวเซอร์หากคุณกดปุ่ม “Reload” หน้าตา ของเวบจะเปลี่ยนไปจากหน้าตาที่ธรรมดาและน่าเบื่อเป็นหน้าที่มีสี (แต่ก็ยังดูค่อนข้างหน้าเบื่อ) นอกจากรายชื่อของลิงค์ด้านบน ตอนนี้ ข้อความควรจะเป็นสีม่วงซึ่งตัดกับสีพื้นหลังคือสีเหลืองอมเขียว
ภาพตัวอย่างเป็นการแสดงให้เห็นว่าบราวเซอร์แสดงผลอย่างไรเมื่อได้มีการเพิ่มสีเข้าไปบางส่วน
เราสามารถกำหนดสีใน CSS ได้หลายวิธี
ตัวอย่างข้างต้นได้แสดงไว้ทั้งสองวิธีคือใช้ทั้งชื่อ (“purple”)
และค่าโคด hexadecimal (“#d8da3d”)สามารถใช้ชื่อสีได้ประมาณ 140
ชื่อและ ค่าโคด hexadecimal สามารถใช้สีได้มากกว่า 16 ล้านสี
ในส่วนของการเพิ่มสไตล์ ได้มีการอธิบายเกี่ยวกับส่วนนี้ไว้
เราจะเริ่มต้นจาการใส่ style sheet ที่อยู่ในไฟล์เดียวกันกับ HTML ก่อน ภายหลังเราจะแยกไฟล์ HTML กับ CSS ออกจากกัน การแยกไฟล์ นั้นมีข้อดีเนื่องจากเราสามารถนำ style sheet เดียวกันมาใช้กับไฟล์ HTML ได้หลายไฟล์ได้ง่ายโดยที่เขียน style sheet เพียงแค่ครั้งเดียว แต่สำหรับขั้นตอนนี้ เราจะเก็บทุกอย่างไว้ในไฟล์เดียวกัน
เราต้องใส่ element <style>ในไฟล์ HTML style sheet style sheet จะอยู่ภายใน element นี้ ดังนั้นให้กลับไปยังหน้าต่างในโปรแกรม แก้ไขและเพิ่มบรรทัดต่อไปนี้ 5 บรรทัดในส่วน head ของไฟล์ HTML บรรทัดที่ใส่เพิ่มจะเป็นตัวสีแดง
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
[etc.]
บรรทัดแรกบอกไว้ว่า style sheet ดังกล่าวเขียนขึ้นใน CSS
(“text/css”) บรรทัดที่สองบอกว่าเราได้เพิ่ม style ลงไปใน element
“body”
บรรทัดที่สามเป็นตัวกำหนดสีของข้อความให้เป็นสีม่วงและบรรทัดถัดไปเป็นตัวกำหนดพื้นหลังให้เป็นสีประมาณเหลืองอมเขียว
Style sheets ใน CSS นั้นสร้างขึ้นมาจากกฎ
กฏแต่ละกฏประกอบไปด้วยสามส่วนดังนี้
นอกจากนี้พื้นหลังของ element body
ยังเป็นพื้นหลังของเอกสารทั้งหมด
หากเราไม่ได้กำหนดพื้นหลังที่เฉพาะให้กับ element อื่นๆเช่น (p, li,
address…) ตามค่า default แล้วก็จะไม่มีค่าพื้นหลัง
(หรืออาจจะเป็นแบบโปร่งแสง) ค่า property 'color' จะเป็นตัวกำหนด
สีของข้อความสำหรับ element body แต่สำหรับ element อื่นๆที่อยู่ภายใน
body จะมีสีตามค่า body เช่นกันยกเว้นว่าจะมีการกำหนดค่าไว้ต่างหาก
(ซึ่งเราจะเพิ่มสีอื่นๆเข้าไปในภายหลัง)
- selector (จากตัวอย่างคือ “body”) ซึ่งเป็นตัวบอกบราวเซอร์ว่าส่วนใดของเอกสารที่มีการนำกฏมาใช้
- property (จากตัวอย่างคือ 'color' และ 'background-color' ซึ่งเป็น property ทั้งสองตัว) ซึ่งเป็นตัวบอกว่าเราจะกำหนด layoutในรูปแบบไหน
- และ value ('purple' and '#d8da3d')ซึ่งเป็นตัวบอกค่า value ของ style property
body { color: purple }
body { background-color: #d8da3d }
แต่เนื่องจากกฎทั้งสองใช้กับ body ทั้งคู่ดังนั้นเราจะเขียน
“body” แค่เพียงครั้งเดียวเท่านั้นและใส่ propert และ value
ไว้ด้วยกันสำหรับเรื่องเกี่ยวกับ selector ให้อ่านเพิ่มได้ในบทที่2 ของ Lie &Bos.
ตอนนี้ให้เซฟไฟล์ดังกล่าวไว้ (โดยใช้คำสั่ง “Save” จากเมนู File) และกลับไปยังหน้าบราวเซอร์หากคุณกดปุ่ม “Reload” หน้าตา ของเวบจะเปลี่ยนไปจากหน้าตาที่ธรรมดาและน่าเบื่อเป็นหน้าที่มีสี (แต่ก็ยังดูค่อนข้างหน้าเบื่อ) นอกจากรายชื่อของลิงค์ด้านบน ตอนนี้ ข้อความควรจะเป็นสีม่วงซึ่งตัดกับสีพื้นหลังคือสีเหลืองอมเขียว
ภาพตัวอย่างเป็นการแสดงให้เห็นว่าบราวเซอร์แสดงผลอย่างไรเมื่อได้มีการเพิ่มสีเข้าไปบางส่วน
0 ความคิดเห็น:
แสดงความคิดเห็น