HTML CSS

ด้วยการใช้ HTML4.0 ทุกๆ รหัสจัดรูปแบบทุกๆ รหัสจะถูกย้ายออกจากเอกสาร HTML และย้ายเข้าไปอยู่ในตารางสไตล์เดี่ยวเดียว

ตัวอย่าง

สไตล์ใน HTML
ตัวอย่างนี้แสดงวิธีการใช้ข้อมูลสไตล์ที่เพิ่มเข้าไปในส่วน <head> ของ HTML เพื่อจัดรูปแบบ HTML
ลิงก์ที่ไม่มีรอยลาย
ตัวอย่างนี้แสดงวิธีการใช้คุณสมบัติสไตล์เพื่อทำลายของลิงก์ที่ไม่มีรอยลาย
เชื่อมโยงไปยังตารางสไตล์นอก
ตัวอย่างนี้แสดงวิธีการเชื่อมโยงตามทาง <link> กับตารางสไตล์นอก

วิธีการใช้สไตล์

เมื่อเบราเซอร์อ่านได้ตารางสไตล์ มันจะทำการจัดรูปแบบเอกสารตามตารางสไตล์นี้ มีวิธีสามทางที่จะใส่ตารางสไตล์ไป

ตารางสไตล์นอก

เมื่อสไตล์ต้องการที่จะถูกนำไปประยุกต์ใช้บนหลายหน้าเว็บไซต์ ตารางสไตล์นอกจะเป็นทางเลือกที่สมบูรณ์สมบูรณ์สุด ด้วยการใช้ตารางสไตล์นอก คุณสามารถเปลี่ยนแปลงรูปแบบทั้งหมดของเว็บไซต์โดยเพียงการเปลี่ยนแปลงไฟล์เดียว

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

สไตล์ภายใน

เมื่อมีการต้องการสไตล์พิเศษสำหรับไฟล์เดี่ยว จึงสามารถใช้สไตล์ภายใน (Internal Style Sheet) ได้ คุณสามารถกำหนดสไตล์ภายในด้วยแท็ก <style> ในส่วนหัว (head) ของเอกสาร

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

สไตล์แบบ inline

เมื่อมีสไตล์พิเศษที่ต้องการใช้บนองค์ประกอบเดี่ยว จึงสามารถใช้สไตล์แบบ inline ได้ วิธีใช้สไตล์แบบ inline คือใช้คุณสมบัติ style ในแท็กที่เกี่ยวข้อง คุณสมบัติ style สามารถรวมคุณสมบัติ CSS ทุกชิ้นได้ ตัวอย่างด้านล่างแสดงวิธีเปลี่ยนสีของปารากราฟและเพิ่มเขตรอบขวาของข้อความ

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

เข้าถึง การเรียนรู้ CSS，เรียนรู้เพิ่มเติมเกี่ยวกับสไตล์

แท็ก คำอธิบาย
<style> กำหนดการกำหนดสไตล์
<link> กำหนดการอ้างอิงทรัพยากร
<div> กำหนดเซ็กชันหรือพื้นที่ (บล็อค) ในเอกสาร
<span> กำหนดบล็อคหรือพื้นที่เล็กในระบบของเอกสาร
<font> กำหนดตัวอักษร ขนาดตัวอักษร และสีตัวอักษรของข้อความ ไม่ได้รับการสนับสนุน กรุณาใช้สไตล์
<basefont> กำหนดตัวอักษรฐาน ไม่ได้รับการสนับสนุน กรุณาใช้สไตล์
<center> ควบรวมข้อความตามแนวน้ำเสียบ ไม่ได้รับการสนับสนุน กรุณาใช้สไตล์