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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

champp
PHP Full Member
PHP Full Member
โพสต์: 30
ลงทะเบียนเมื่อ: 05/05/2020 10:09 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย champp »

การเขียน css มีอยู่ 3 แบบคือ Inline Internal และExternal ทั้งหมดนี้สามารถใช้งานcssได้เหมือนกัน
โดยการเขียนแบบInline จะเขียนอยู่ในหน้าเดียวกันและเขียนในบรรทัดได้เลย

โค้ด: เลือกทั้งหมด

<html>
<head>
</style>
</head>
<body>

<p style=”font-size: 0.9em; width: 200px; border: solid 1px #000000”>ตัวหนังสือสีดำ อยู่ใน แทก P</p>

</body>
</html>
ส่วนต่อไปเป็นการเขียนแบบInternal โดยการเขียนแบบนี้ก็จะเขียนอยู่ในหน้าเดียวกันแต่จะเขียนอยู่ในแท็ก<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 โดยการเขียนแบบนี้จะต่างจาก 2 แบบแรกเพราะว่าการเขียนแบบExternal จะแยกไฟล์cssออกมาเป็นไฟล์.css
โดยการเรียกใช้จะพิมพ์ <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>
ทั้งหมดนี้ใช้งานได้เหมือนกัน แต่แบบExternal จะเป็นที่นิยมมากกว่าเนื่องจากสามารถแก้ไขได้ง่าย

ที่เกี่ยวข้อง
viewtopic.php?f=73&t=34900&p=81738&hilit=inline#p81738

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 58