วิธีใช้งาน Style Sheet
1. Inline Stylesวิธีการนี้ควรใช้ในกรณีที่ต้องการกำหนด style ให้กับ element ของ HTML เีพียงอันเดียวเป็นการเฉพาะ โดยการแทรกคำสั่ง style sheet ใน HTML Tag อยู่ในคำสั่ง style="" ดังนี้
<Tag style="property:value;">
Example
<html>
<body>
<h1 style="color:red; font-family:Arial">วิธีดูแลรักษาสุขภาพ</h1>
<p style="color:black; font-family:Arial; font-weight:bold">รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>
<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
คำสั่งที่ใช้เริ่มต้น และจบ Style Sheet มีโครงสร้างดังนี้
<style type="text/css">
<!--
selector {property1: value1; property2: value2}
....
-->
</style>
<!--
selector {property1: value1; property2: value2}
....
-->
</style>
Example
<html>
<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">
ตัวอย่างนี้จะสร้าง Style Sheet เก็บไว้ในไฟล์หนึ่ง แล้วให้ไฟล์เอกสาร HTML หลายๆ หน้ามาเรียกใช้Example
ในไฟล์ mystyle.css ให้เขียน code ดังนี้
h1{ color:red; font-family:Arial }
p{ color:black; font-family:Arial; font-weight:bold }
ในไฟล์ HTML ex_css_chapter05_3.html เรียกใช้ style sheet จากภายนอก
p{ color:black; font-family:Arial; font-weight:bold }
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>วิธีดูแลรักษาสุขภาพ</h1>
<p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>
ในไฟล์ HTML ex_css_chapter05_4.html เรียกใช้ style sheet จากภายนอก
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>วิธีกินผลไม้ที่ถูกต้อง</h1>
<p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย
ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p>
</body>
</html>
การที่เราใช้งาน CSS โดยเรียกใช้จากภายนอก จะทำให้ไฟล์เวบเพจของเรามีขนาดเล็ก และการแก้ไขคำสั่ง style sheet เพียงที่เดียว จะมีผลกับเอกสารทุกหน้าได้
Cascading Order
1. กรณีที่มีการกำหนด style ด้วยชื่อ selector เดียวกันทั้งแบบ 3 แบบ Style sheet ที่จะถูกใช้คือแบบไหนลำดับความสำคัญ เรียงจากมากไปหาน้อย
Inline style (inside an HTML element),
Internal style sheet (inside the <head> tag)
และ External style sheet ตามลำดับ
จากลำดับความสำคัญดังกล่าว Style ที่จะถูกใช้คือแบบ Inline style
2. กรณีที่มีการเขียน style ซ้ำ selector เดิม อันที่อยู่ด้านล่าง จะถูกทำเป็นลำดับสุดท้าย
ตัวอย่าง ไฟล์ mystyle.css
p{ color:black }
p{ color:blue }
เมื่อเราเรียกใช้ <p> ใน HTML เช่น
<p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
จะได้ตัวอักษรใน Tag <p> เป็นสีน้ำเงิน
แต่หากเรากำหนด !important ไว้ใน value เช่น
p{color:black!important}
p{color:blue}
เมื่อเขียนแบบนี้ ใน Tag <p> จะได้ตัวอักษรสีดำ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น