1. Selector ที่เป็น HTML Tag
<html>
< head>
< meta http-equiv="content-type" content="text/html;charset=utf-8"/>
< 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> ทุกอันให้เป็นสีดำ
2. Selector ที่เป็น Class attribute
<html>
< head>
< meta http-equiv="content-type" content="text/html;charset=utf-8"/>
< 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>
เป็นการประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน class attribute โดยเราสามารถตั้งชื่อ class ได้เอง
class ใช้เมื่อต้องการใช้แสดงผลรูปแบบนั้นซ้ำหลายๆ ครั้ง หรือต้องการใช้กับ element หลายๆ อัน การประกาศใช้้เครื่องหมาย "." นำหน้าชื่อ class
3. Selector ที่เป็น ID attribute
<html>
< head>
< meta http-equiv="content-type" content="text/html;charset=utf-8"/>
< 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>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น