สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
เมื่อพูดถึงการออกแบบเว็บเพจ ไม่สามารถปฏิเสธได้เลยว่า CSS (Cascading Style Sheets) คือหัวใจสำคัญในการสร้างความสวยงามและความเป็นเอกลักษณ์ให้กับหน้า HTML (HyperText Markup Language) ของเรา สิ่งที่หลายคนอาจไม่ทราบคือเมื่อต้องการเพิ่ม CSS เข้าไปใน HTML สามารถทำได้หลากหลายวิธี แต่ละวิธีก็มีความเหมาะสม และข้อดีข้อเสียที่แตกต่างกันออกไป บทความนี้จะพาคุณไปสำรวจวิธีการต่าง ๆ และเสนอแนะแนวทางการใช้งานที่เหมาะสม
วิธีการนี้คือการแทรก CSS ไว้ภายในแท็ก HTML โดยตรง โดยใช้ attribute ชื่อว่า `style` ตัวอย่างเช่น:
<h1 style="color: blue; font-size: 20px;">Welcome to My Website</h1>
- ง่ายและรวดเร็ว เหมาะกับการปรับเปลี่ยนเล็ก ๆ น้อย ๆ
- ใช้ในกรณีที่ต้องการเน้นสไตล์เฉพาะบางส่วน
ข้อเสีย:- รักษาความยาวและโค้ดสะอาดได้ยากเมื่อมีหลายสไตล์
- ไม่สามารถกำหนดสไตล์ที่ใช้ร่วมกันได้
2. Internal CSS (หรือ Embedded CSS)การเพิ่ม CSS ในส่วน `<head>` ของเอกสาร HTML โดยใช้แท็ก `<style>`
<head>
<style>
h1 {
color: blue;
font-size: 20px;
}
</style>
</head>
- เหมาะกับการสร้างสไตล์ที่ใช้ร่วมกันภายในหน้าเว็บเดียวกัน
- โค้ดสะอาดขึ้นเมื่อเทียบกับ Inline CSS
ข้อเสีย:- หากเว็บไซต์มีหลายหน้า การแก้ไขสไตล์ต้องทำในแต่ละไฟล์ HTML
3. External CSSการใช้ไฟล์ CSS ภายนอก แล้วลิงค์เข้าสู่ HTML เอกสาร โดยใช้แท็ก `<link>`
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
h1 {
color: blue;
font-size: 20px;
}
- สามารถจัดการสไตล์หลาย ๆ หน้าได้อย่างมีประสิทธิภาพ
- ทำให้โค้ด HTML สะอาดและอ่านง่าย
- ช่วยในเรื่องของการโหลดหน้าเร็วขึ้นเนื่องจาก CSS ถูกแคชเอาไว้
ข้อเสีย:- หากอินเทอร์เน็ตช้าอาจทำให้หน้าเว็บไม่มีสไตล์ชั่วคราว
- อาจเป็นงานหนักในการจัดการไซด์ใหญ่ ๆ ต้องระมัดระวังการลิงก์ที่ไม่ถูกต้อง
การเลือกวิธีการเพิ่ม CSS นั้นขึ้นอยู่กับความซับซ้อนของเว็บไซต์และการจัดการที่ต้องการ หากเว็บเพจของคุณเป็นเพียงแค่เว็บเพจเล็ก ๆ การใช้ Inline หรือ Internal CSS อาจจะเพียงพอ แต่ถ้าเป็นเว็บไซต์ขนาดใหญ่ ควรใช้ External CSS เพื่อความสะดวกในการจัดการและประสิทธิภาพที่ดีกว่า
สมมุติว่าคุณมีการสร้างหน้าโปรไฟล์นักเรียน ที่ต้องการจัดรูปแบบสวยงามและเป็นระเบียบ สามารถใช้ External CSS ได้ดังนี้:
ในไฟล์ HTML:
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="profile.css">
<title>Student Profile</title>
</head>
<body>
<div class="profile">
<h1>Somchai's Profile</h1>
<p class="description">A passionate student learning web development.</p>
</div>
</body>
</html>
ในไฟล์ CSS (profile.css):
.profile {
border: 2px solid #000;
padding: 20px;
max-width: 600px;
margin: auto;
}
h1 {
font-size: 24px;
color: #0056b3;
}
.description {
font-size: 16px;
color: #333;
}
CSS เป็นเครื่องมือที่มีพลังมากในการสร้างความสวยงามและความเฉพาะเจาะจงของหน้าเว็บ การเลือกวิธีการใช้งานให้เหมาะสมเป็นสิ่งสำคัญที่จะสนับสนุนให้การพัฒนาเว็บเป็นไปอย่างมีประสิทธิภาพ หากคุณต้องการศึกษาหรือลงลึกในการพัฒนาเว็บไซต์และโปรแกรมมิ่ง ที่ Expert-Programming-Tutor เรามีคอร์สที่หลากหลาย ตั้งแต่พื้นฐานจนถึงขั้นสูง ที่จะช่วยให้คุณก้าวไปสู่ความเป็นมืออาชีพได้อย่างมั่นใจ
เราหวังว่าบทความนี้จะเป็นแนวทางให้คุณได้เข้าใจและใช้ประโยชน์จาก CSS ได้อย่างเต็มที่ครับ!
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: java c# vb.net python c c++ machine_learning web database oop cloud aws ios android
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com