เขียน CSS ในลักษณะต่างๆ

การเขียน 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 ครับ

Back to Top

15 Responses to เขียน CSS ในลักษณะต่างๆ

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top