css เขียนอย่างไร
แท็ก <style> ใน HTML คือแท็กที่ใช้สำหรับกำหนดสไตล์ให้กับองค์ประกอบ HTML โดยใช้ CSS (Cascading Style Sheets). มันเป็นคอนเทนเนอร์สำหรับใส่กฎ CSS ที่จะถูกนำไปใช้กับองค์ประกอบต่างๆ ในหน้าเว็บ. โดยทั่วไปแล้ว แท็ก <style> จะถูกวางไว้ในส่วน <head> ของเอกสาร HTML เพื่อให้แน่ใจว่าสไตล์จะถูกนำไปใช้เมื่อหน้าเว็บโหลด.
การใช้งานแท็ก <style>:
กำหนดสไตล์:
ภายในแท็ก <style>, คุณสามารถเขียนกฎ CSS เพื่อกำหนดลักษณะต่างๆ ขององค์ประกอบ HTML เช่น สี, ขนาดตัวอักษร, ระยะห่าง, พื้นหลัง, ฯลฯ.
จัดรูปแบบหน้าเว็บ:
แท็ก <style> ช่วยให้คุณสามารถควบคุมการจัดรูปแบบของหน้าเว็บได้อย่างละเอียด โดยใช้ CSS ในการกำหนดลักษณะต่างๆ ขององค์ประกอบ HTML.
การจัดวาง:
โดยทั่วไป แท็ก <style> จะอยู่ในส่วน <head> ของเอกสาร HTML เพื่อให้แน่ใจว่าสไตล์ถูกโหลดก่อนเนื้อหาของหน้าเว็บ.
ตัวอย่าง:
โค้ด
<head>
<style>
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>หัวข้อ</h1>
<p>ย่อหน้า</p>
</body>
ในตัวอย่างนี้, แท็ก <style> กำหนดให้ <h1> มีสีน้ำเงินและจัดกึ่งกลาง, และ p มีขนาดตัวอักษร 16px.
ความสำคัญของแท็ก <style>:
การแยกโครงสร้างและสไตล์:
การใช้แท็ก <style> ช่วยแยกการกำหนดโครงสร้าง (HTML) และสไตล์ (CSS) ออกจากกัน ซึ่งทำให้โค้ดเป็นระเบียบและง่ายต่อการบำรุงรักษา.
การนำมาใช้ใหม่:
คุณสามารถนำกฎ CSS ที่กำหนดไว้ในแท็ก <style> ไปใช้กับองค์ประกอบ HTML อื่นๆ ได้หลายครั้ง.
การจัดการสไตล์:
ช่วยให้คุณสามารถจัดการสไตล์ของหน้าเว็บได้อย่างมีประสิทธิภาพ โดยรวมสไตล์ทั้งหมดไว้ในที่เดียว.
ถ้าเพิ่งเริ่มหัดทำเว็บ แล้วสงสัยว่า “css เขียนอย่างไร” แบบไม่อยากแยกไฟล์ก่อน วิธีที่ง่ายสุดคือเขียน CSS ไว้ในแท็ก <style> ภายในไฟล์ HTML เลย ซึ่งส่วนใหญ่จะวางไว้ใน <head> เพื่อให้สไตล์โหลดก่อนหน้าเว็บแสดงผล ทำให้หน้าไม่กระพริบ/เปลี่ยนสไตล์ทีหลัง 1) โครงสร้างพื้นฐานของ html style เวลาเขียนจะหน้าตาประมาณนี้ <head> <style> /* เขียนกฎ CSS ที่นี่ */ </style> </head> สิ่งที่ควรจำคือ ใน <style> ไม่ต้องใส่แท็ก HTML อื่นๆ แทรก และควรคอมเมนต์ด้วย /* */ (ไม่ใช่ <!-- -->) 2) css style เขียนกฎยังไงให้ถูก CSS จะประกอบด้วย “selector” + “{ property: value; }” เช่น h1 { color: blue; text-align: center; } หมายถึงเลือกแท็ก h1 ทุกตัว แล้วทำให้ตัวอักษรเป็นสีน้ำเงินและจัดกึ่งกลาง 3) ตัวอย่างที่เจอบ่อย: ปรับขนาดตัวอักษรและระยะห่าง p { font-size: 16px; line-height: 1.6; margin: 0 0 12px; } อันนี้ช่วยให้อ่านย่อหน้าได้สบายขึ้น (ฉันใช้บ่อยมากเวลาเขียนบทความ/หน้าแนะนำ) 4) เลือกแบบ class และ id (แนะนำเวลาหน้าเริ่มยาว) ถ้าไม่อยากให้ทุก p ถูกเปลี่ยนเหมือนกัน ให้ใช้ class .highlight { background: #fff3b0; padding: 8px; } แล้วไปใส่ใน HTML ว่า <p class="highlight">...</p> ส่วน id จะใช้กับองค์ประกอบที่มีชิ้นเดียวในหน้า เช่น #mainTitle { color: blue; } 5) วาง <style> ตรงไหนถึงเหมาะ - วางใน <head>: เหมาะสุดสำหรับหน้าเดียว/ทดลองโค้ด - ถ้า CSS เยอะ: ควรแยกเป็นไฟล์ .css แล้วใช้ <link rel="stylesheet" href="style.css"> (ดูแลง่ายกว่า) 6) ทริคเล็กๆ ที่ช่วยลดพลาด - อย่าลืมปิดวงเล็บปีกกา } และใส่ ; หลังค่าแต่ละบรรทัด - ถ้า style ไม่ทำงาน ให้เช็กสะกด selector (h1 กับ .h1 คนละความหมาย) - ลองเปิด DevTools (Inspect) ดูว่ากฎไหนถูก override อยู่ สรุปคือ tag <style> เป็นวิธีเขียน style css ที่เร็วและตรงไปตรงมาสำหรับเริ่มต้น โดยเฉพาะตอนฝึกปรับสี (color), ขนาดตัวอักษร (font-size) และการจัดวาง (text-align/margin) พอเริ่มใช้จริงหลายหน้า ค่อยย้ายไปไฟล์ CSS แยกจะทำให้จัดการง่ายขึ้นมาก
