1. Inline Styles
วิธีการนี้ควรใช้ในกรณีที่ต้องการกำหนด style ให้กับ element ของ HTML เพียงอันเดียวเป็นการเฉพาะ โดยการแทรกคำสั่ง style sheet ใน HTML Tag อยู่ในคำสั่ง style="" ดังนี้
<Tag style="property:value;">
ตัวอย่าง
<html>
< head>
< meta http-equiv="content-type" content="text/html;charset=utf-8"/>
< /head>
<body>
<h1 style="color:red; font-family:Arial">วิธีดูแลรักษาสุขภาพ</h1>
<p style="color:black; font-family:Arial; font-weight:bold">รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
< /body>
</html>
เราควรหลีกเลี่ยงการเขียน style="" ฝังลงใน HTML Tag เพราะมันทำให้อ่านยาก และนำไปใช้ต่อไม่ได้ และเป็นการยากที่จะแก้ไข
2. Internal Style Sheet
วิธีการนี้ควรใช้ในกรณีที่มีเพียง HTML ไฟล์เดียวที่ใช้ style นี้ เมื่อประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติ ให้กับ HTML Tag ใดๆ แล้ว จะมีผลกับเอกสาร HTML ทั้งหน้า นิยมใส่ส่วนของคำสั่ง Style Sheet ไว้ระหว่าง <head>...</head>
สำหรับ Web Browser รุ่นเก่าที่ไม่สนับสนุนคำสั่ง Style Sheet หรือ Disable Style Sheet ไว้นั้น ให้ใส่ Comment ของ ภาษา HTML ไว้ด้วย เพื่อให้เว็บเบราเซอร์นั้นทราบว่าไม่ใช่คำสั่งภาษา HTML
ตัวอย่าง
<html>
< head>
< meta http-equiv="content-type" content="text/html;charset=utf-8"/>
< /head>
< body>
< head>
< style type="text/css">
< !--
h1{color:red; font-family:Arial }
p{color:black; font-family:Arial; font-weight:bold }
-->
< /style>
< /head>
< body>
< h1>วิธีดูแลรักษาสุขภาพ</h1>
< p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
< h1>วิธีกินผลไม้ที่ถูกต้อง</h1>
< p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p>
< /body>
< /html>
3. External Style Sheet
วิธีการนี้เหมาะกับกรณีที่มีเพียง 1 style แล้วต้องการนำไปใช้กับเอกสาร HTML หลายๆ ไฟล์ โดยนำเอาคำสั่ง Style Sheet ที่อยู่ใน <style type="text/css"> ... </style> มาบันทึกเป็นไฟล์ใหม่ นามสกุล .css จากนั้นจึงทำการผนวกไฟล์ของ Style Sheet นี้ลงไปในเอกสาร HTML ทุกไฟล์ที่ต้องการใช้งาน Style Sheet ชุดนี้ ไว้ในส่วน <head>...</head> โดยใช้คำสั่ง
<link rel="stylesheet" type="text/css" href="URL ไฟล์.css">
ไฟล์ mystyle.css
h1{color:red; font-family:Arial }
p{color:black; font-family:Arial; font-weight:bold }
ไฟล์ ex_css.php เรียกใช้ style sheet จากไฟล์ mystyle.css
<html>
< head>
< meta http-equiv="content-type" content="text/html;charset=utf-8"/>
< /head>
< link rel="stylesheet" type="text/css" href="mystyle.css">
< /head>
< body>
<h1>วิธีดูแลรักษาสุขภาพ</h1>
<p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
< /body>
< /html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น