บทที่ 6 แนะนำ CSS
CSS (อ่านว่า ซี-เอส-เอส ย่อมาจากคำว่า Cascading Style Sheets) คือภาษาอีกภาษาหนึ่งที่ใช้ร่วมกับ HTML ทำหน้าที่ในการกำหนดคุณสมบัติให้กับแท็กต่างๆ ให้มีคุณสมบัติตามที่ต้องการ เช่น การสั่งให้ตัวอักษรเป็นตัวหนา หรือ การใส่สีให้ตัวอักษร เป็นต้น โดยที่ในปัจจุบันเมื่อเราใช้ HTML5 เราก็มักใช้คู่กับ CSS3 เสมอ
วิธีการเขียน CSS สามารถทำได้หลายวิธี
1. เขียน CSS ใส่ลงใน style ของ แท็กโดยตรง เช่น
ซึ่ง color:red; และ font-weight:bold; ก็คือคำสั่งของ CSS นั่นเอง และต้องเขียนใส่ลงในคุณสมบัติ style ของแท็กที่ต้องการกำหนดค่า
2. เขียน CSS ใส่ลงในหน้าเว็บ ภายใต้แท็ก <style> เช่น
คล้ายกับแบบแรก แต่แบบที่สองนี้ สามารถกำหนดรูปแบบให้กับ span ได้ทุกตัวบนหน้าเว็บเพจ
3. เขียน CSS ใส่ลงในแฟ้ม .css วิธีนี้เขียนเหมือนกับวิธีที่สอง เพียงแต่ไม่ต้องเขียนภายใต้แท็ก style โดยสามารถนำมารวมเข้ากับเว็บเพจได้โดยใช้แท็ก <link>
โค้ดด้านบนเราจะเขียนใส่แฟ้ม style.css ไว้ และใน HTML ของเราจะเป็นแบบนี้
ซึ่งแท็ก <link rel=stylesheet href=style.css> ก็จะเป็นการรวมเอา CSS เข้ามาใช้ในเว็บเพจของเรานั่นเอง
สำหรับบทความในชุดนี้ผมจะเน้นไปที่การเขียน CSS ในแบบที่สองเป็นหลักนะครับ
วิธีการเขียน CSS สามารถทำได้หลายวิธี
1. เขียน CSS ใส่ลงใน style ของ แท็กโดยตรง เช่น
<span style="color:red;font-weight:bold;">ตัวหนังสือนี้มีสีแดงและเป็นตัวหนา</span>ซึ่ง color:red; และ font-weight:bold; ก็คือคำสั่งของ CSS นั่นเอง และต้องเขียนใส่ลงในคุณสมบัติ style ของแท็กที่ต้องการกำหนดค่า
2. เขียน CSS ใส่ลงในหน้าเว็บ ภายใต้แท็ก <style> เช่น
<style>
span {
color:red;
font-weight: bold;
}
</style>คล้ายกับแบบแรก แต่แบบที่สองนี้ สามารถกำหนดรูปแบบให้กับ span ได้ทุกตัวบนหน้าเว็บเพจ
3. เขียน CSS ใส่ลงในแฟ้ม .css วิธีนี้เขียนเหมือนกับวิธีที่สอง เพียงแต่ไม่ต้องเขียนภายใต้แท็ก style โดยสามารถนำมารวมเข้ากับเว็บเพจได้โดยใช้แท็ก <link>
span {
color:red;
font-weight: bold;
}โค้ดด้านบนเราจะเขียนใส่แฟ้ม style.css ไว้ และใน HTML ของเราจะเป็นแบบนี้
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<link rel=stylesheet href=style.css>
<title></title>
</head>
<body>
</body>
</html>ซึ่งแท็ก <link rel=stylesheet href=style.css> ก็จะเป็นการรวมเอา CSS เข้ามาใช้ในเว็บเพจของเรานั่นเอง
สำหรับบทความในชุดนี้ผมจะเน้นไปที่การเขียน CSS ในแบบที่สองเป็นหลักนะครับ