Munu
การเขียนคำสั่ง Style Sheet
Selector ที่เป็น HTML Tag
Example
<html>
<body>
<head>
<style type=”text/css”>
<!–
h1{color:red; font-family:Arial }
p{color:black; font-family:Arial }
–> </style>
</head>
<body>
<h1>วิธีดูแลรักษาสุขภาพ</h1>
<p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
<h1>วิธีกินผลไม้ที่ถูกต้อง</h1>
<p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย
ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p>
</body>
</html>
ตัวอย่างนี้เห็นกันมาหลายรอบแล้วนะคะ เป็นการกำหนด style ให้กับ HTML Tag <h1> และ <p> หมายความว่าข้อความภายใน <h1> ทุกอันในหน้าเว็บเพจนี้ให้เป็นสีแดง และข้อความใน <p> ทุกอันให้เป็นสีดำ
มาดู selector แบบอื่นๆ กันบ้างค่ะ
Selector ที่เป็น Class attribute
เป็นการประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน class attribute โดยเราสามารถตั้งชื่อ class ได้เอง
class ใช้เมื่อต้องการใช้แสดงผลรูปแบบนั้นซ้ำหลายๆ ครั้ง หรือต้องการใช้กับ element หลายๆ อัน การประกาศใช้้เครื่องหมาย “.” นำหน้าชื่อ class
Example
<html>
<head>
<style type=”text/css”>
<!–
.topic {color:red;
font-family:Arial;
font-weight:bold;
text-align:center
}
.content {color:black;
font-family:Arial;
}
–>
</style>
</head>
<!– การเรียกใช้งาน –>
<body>
<div class=”topic”>บทความ</div>
<p class=”topic”>วิธีดูแลรักษาสุขภาพ</p>
<p class=”content”>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
<p class=”topic”>วิธีกินผลไม้ที่ถูกต้อง</p>
<p class=”content”>ให้กินผลไม้แค่ทีละอย่าง เช่น จะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ
เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร
ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p>
<p>หันมาใส่ใจสุขภาพกันเถอะค่ะ</p>
</body>
</html>
จากตัวอย่างสังเกตได้ว่า class topic ถูกเรียกใช้หลายครั้งใน <p> และ ถูกใช้้ในหลาย element ได้ คือ <p> และ <div>
แต่ถ้าต้องการกำหนดให้ class topic ใช้งานเฉพาะกับ <p> เท่านั้น ทำได้โดยใส่ “p.” นำหน้าชื่อ class
จะมีผลทำให้ข้อความใน <div class=”topic”>บทความ</div> ไม่สามารถแสดงผลตามรูปแบบที่กำหนดใน class topic ได้
p.topic{color:red; font-family:Arial; font-weight:bold; text-align:center }
กรณีที่ต้องการให้แสดงผลตามรูปแบบที่กำหนดใน 2 class ก็สามารถทำได้
Example
<html>
<head>
<style type=”text/css”>
p.center {text-align:center}
p.bold{ font-weight:bold}
</style>
</head>
<body>
<p class=”center bold”>ข้อความในพารากราฟนี้จะจัดวางกึ่งกลาง และเป็นตัวหนา</p>
</body>
</html>
Selector ที่เป็น ID attribute
เป็นการประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน ID attribute เหมือนกับ Class แต่ต่างกันที่ ID จะใช้กับ element ที่มีเพียงอันเดียวในเอกสาร HTML การประกาศใช้ # นำหน้า ID
Example
<html>
<head>
<style type=”text/css”>
p {text-align: center}
#chapter {color:red; font-weight:bold}
/*หรือเขียนเป็น p#chapter ก็ได้*/
</style>
</head>
<body>
<p id=”chapter”>Chapter ข้อความในนี้จัดวางกึ่งกลาง และเป็นสีแดง ตัวหนา</p>
<p>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p>
<p>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p>
</body>
</html>
อาจจะยังไม่เข้าใจตอนนี้ ไว้เห็นตัวอย่างมากๆ เข้า จะค่อยๆ เข้าใจเองค่ะ แล้วจะรู้ได้อย่างไรว่าค่า property และ value เช่น text-align: center, font-weight:bold มีอะไรบ้าง อันนี้ศึกษาได้จาก Chapter ต่อๆ ไปค่ะ
