Cascading Style Sheet หรือ CSS คือ
รูปแบบที่ช่วยให้เราสามารถเพิ่มความสามารถในการแสดงผลได้มากขึ้น มากกว่าการใช้ HTML
เพียงอย่างเดียว ปกติเราจะใช้ CSS
กำหนดลักษณะการแสดงผล การเล่นสี การจัดเรียง
CSS เป็นเพียงส่วนประกอบหนึ่งของการทำ DHTML โดยมากจะใช้ CSS ร่วมกับ JavaScript เสมอ เพื่อสร้างลูกเล่นแปลกๆ ใหม่ๆ ให้กับหน้าเวบ
การใช้ CSS จะทำให้เวบมีมาตราฐาน เพราะ CSS สร้างสไตล์ล่วงหน้าได้ และทุกหัวข้อที่นำสไตล์ไปใช้ จะมีลักษณะการแสดงผลเหมือนๆ กัน และถ้ามีการแก้ไขสไตล์ การแสดงผลในหัวข้อทุกหัวข้อจะเปลี่ยนไปตามสไตล์ที่แก้ไข
ตำแหน่งในการกำหนดสไตล์ชีต
การกำหนดสไตล์ชีตแบบ
Embedding
เป็นการกำหนดแบบฝังไว้ในไฟล์โค้ด
HTML
สามารถกำหนดไว้ในส่วนต่างๆ ได้ดังนี้
1. ส่วนหัว
(head)
<head>
<style>
font
{color:blue;font-size:16;font-family:AngsanaUPC;}
button
{width:150;color:#ff0000;background-color:#999900}
</style>
</head>
2. ส่วนเอกสาร
(body)
<body>
<style>
font {color:bule;font-size:16;font-family:AngsanaUPC,LilyUPC,IrisUPC;}
button {width:150;color:#ff0000;background-color:#999900}
</style>
</body>
3. ในสคริปต์
เช่น ใช้กับ JavaScript
<head>
<script language="JavaScript">
document.write("<font
style=color:blue;font-family:AngsanaUPC>");
document.write("Hello, world.</font><br>");
</script>
</head>
4. ในแท็กแบบ
Inline
<body style="color:blue;font-size:16;font-family:AngsanaUPC">
<button
style="width:150;color:#ff0000">Click
Me!</button>
</body>
กำหนดสไตล์ชีตแบบ
Linking
เป็นการกำหนดไว้ในไฟล์หนึ่ง
ซึ่งเป็นไฟล์กลาง และเป็นไฟล์ที่มีส่วนขยายมีนามสกุล .CSS
ส่วนในไฟล์ HTML จะมีการใช้แท็ก <link> เพื่อเชืรอมโยงหรืออ้างถึงไฟล์สไตล์ชีตอีกทีหนึ่ง...
ตัวอย่าง
ไฟล์สไตล์ชีตชื่อ
style01.css
<style type="text/css">
font {color:blue;font-size:26;font-family:LilyUPC,IrisUPC}
button {width:150;color:#ff0000;backgroup-color:#990099}
span {color:#ff00ff;font-size:90;font-family:LilyUPC,IrisUPC}
</style>
ไฟล์ HTML ชื่อ
stylesheet_link.html
<html><head>
<link
href="style01.css"
rel="stylesheet" type="text/css">
</head><body>
<span>Hello,
world!</span><br>
<font><input type="text" value="DHTML is
easy."><br><button>GO</button></font>
</body></html>
การกำหนดสไตล์ชีตแบบ
Import
เป็นการกำหนดสไตล์ชีตแยกไว้ตามหากจากไฟล์
HTML
โดยไฟล์ HTML จะดึงข้อกำหนดเหล่านี้มาใช้ด้วยคำสั่ง @import
ซึ่งมีวิธีการกำหนดสไตล์ชีตแบบ link
ต่างกันแค่วิธีการ @import ในไฟล์ HTML ต้องสร้างแท็ก <style>...</style>
ไว้รองรับ
และยังสามารถกำหนดสไตล์เฉพาะที่ใช้ในเพจนี้เพิ่มได้ตามต้องการอีกด้วย...
ตัวอย่าง
<html><head>
<style>
@import
URL(style01.css); <!-- สามารถนำเข้าได้มากกว่า
1
ไฟล์ได้ เช่น เพิ่ม @import URL(style02.css);
-->
div
{font-weigth:border} <-- เป็นส่วนกำหนดเพิ่มเติมหากต้องการเพิ่มสไตล์ในส่วนที่
@import
เข้ามาไม่มี -->
table
{background-color:gray;color:back}
</style>
</head><body>
<span>Hello, world!!!</span><br>
<font><input type="text" value="DHTML is
easy."><br><button>GO</button></font>
<div>This is my c0ntent.</div>
</body></html>
Update: 10 มค. 12
