การเขียน CSS มี 3 ลักษณะคือ Inline, Internal และ External โดยสามารถเลือกใช้ได้ความความเหมาะสมเป็นหลัก
แบบ Inline
คือการเขียนแทรกลงไปในบรรทัดนั้นๆ ของ tag [X]HTML เลย เช่น
<p style=”font-size: 0.9em; width: 200px; border: solid 1px #000000”>ตัวหนังสือสีดำ อยู่ใน แทก P</p>
แบบ Internal(embedded)
การเขียนแบบ Internal (embedded) คือเขียนแยก CSS ออกจาก tag [X]HTML แต่อยู่ในหน้าเดียวกันกับไฟล์ [X]HTML โดยแทรก css เอาไว้ที่ <head></head> เช่น
<html>
<head>
<style type="text/css">
P {
font-size: 0.9em;
width: 200px;
border: solid 1px #000000;
}
</style>
</head>
<body>
<p>ตัวหนังสือสีดำ อยู่ใน แทก P </p>
</body>
</html>
แบบ External
คือการเขียน แยก css ออกมาเป็นไฟล์ .css ต่างหาก แล้วนำเข้าไปใช้ใน หน้าเว็บด้วย การเรียกโดย ใช้ โดยการพิมพ์ <link rel="stylesheet" href="externalcss.css" type="text/css" /> ไว้ที่ส่วน <head></head> ของหน้าเว็บ
ไฟล์ externalcss.css
P {
font-size: 0.9em;
width: 200px;
border: solid 1px #000000;
}และส่วนของไฟล์ html เมื่อเรียก css มาใช้
<html>
<head>
<link rel="stylesheet" href="externalcss.css" type="text/css" />
</head>
<body>
<p>ตัวหนังสือสีดำ อยู่ใน แทก P </p>
</body>
</html>
ทั้งหมดเป็นลักษณะการเขียนและเรียกใช้ CSS ครับ
สำหรับผมแล้ว ขอแนะนำ ให้เขียน แบบ External ครับ เพราะง่ายต่อการเปิดไฟล์ css มาแก้ไข โดยไม่ต้องยุ่งเกี่ยวกับ HTML เลย และที่สำคัญสามารถนำไปใช้กับไฟล์ อื่นๆ ได้ทั้งเว็บไซท์ เพียงการเขียน CSS ในหน้าเดียว
เรื่องต่อไป เกี่ยวกับ External CSS และการ Import CSS ครับ
15 Responses to เขียน CSS ในลักษณะต่างๆ