เขียน CSS ในลักษณะต่างๆ
โพสต์แล้ว: 07/05/2020 5:35 pm
การเขียน css มีอยู่ 3 แบบคือ Inline Internal และExternal ทั้งหมดนี้สามารถใช้งานcssได้เหมือนกัน
โดยการเขียนแบบInline จะเขียนอยู่ในหน้าเดียวกันและเขียนในบรรทัดได้เลย
ส่วนต่อไปเป็นการเขียนแบบInternal โดยการเขียนแบบนี้ก็จะเขียนอยู่ในหน้าเดียวกันแต่จะเขียนอยู่ในแท็ก<head></head>
และแบบสุดท้ายจะเป็นการเขียนแบบExternal โดยการเขียนแบบนี้จะต่างจาก 2 แบบแรกเพราะว่าการเขียนแบบExternal จะแยกไฟล์cssออกมาเป็นไฟล์.css
โดยการเรียกใช้จะพิมพ์ <link rel="stylesheet" href="externalcss.css" type="text/css" /> ไว้ที่ส่วน <head></head> ของหน้าเว็บ
ไฟล์ .css
การเรียกใช้
ทั้งหมดนี้ใช้งานได้เหมือนกัน แต่แบบExternal จะเป็นที่นิยมมากกว่าเนื่องจากสามารถแก้ไขได้ง่าย
ที่เกี่ยวข้อง
viewtopic.php?f=73&t=34900&p=81738&hilit=inline#p81738
โดยการเขียนแบบInline จะเขียนอยู่ในหน้าเดียวกันและเขียนในบรรทัดได้เลย
โค้ด: เลือกทั้งหมด
<html>
<head>
</style>
</head>
<body>
<p style=”font-size: 0.9em; width: 200px; border: solid 1px #000000”>ตัวหนังสือสีดำ อยู่ใน แทก P</p>
</body>
</html>
โค้ด: เลือกทั้งหมด
<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>
โดยการเรียกใช้จะพิมพ์ <link rel="stylesheet" href="externalcss.css" type="text/css" /> ไว้ที่ส่วน <head></head> ของหน้าเว็บ
ไฟล์ .css
โค้ด: เลือกทั้งหมด
P {
font-size: 0.9em;
width: 200px;
border: solid 1px #000000;
}
โค้ด: เลือกทั้งหมด
<html>
<head>
<link rel="stylesheet" href="externalcss.css" type="text/css" />
</head>
<body>
<p>ตัวหนังสือสีดำ อยู่ใน แทก P </p>
</body>
</html>
ที่เกี่ยวข้อง
viewtopic.php?f=73&t=34900&p=81738&hilit=inline#p81738