วิธีเพิ่ม CSS
เมื่อเบราว์เซอร์อ่านสไตล์ชีต เบราว์เซอร์จะจัดรูปแบบเอกสาร HTML ตามข้อมูลในสไตล์ชีต
สามวิธีในการแทรก CSS
มีสามวิธีในการแทรกสไตล์ชีต:
- CSS ภายนอก
- CSS ภายใน
- CSS แบบอินไลน์
CSS ภายนอก
ด้วยสไตล์ชีตภายนอก คุณสามารถเปลี่ยนรูปลักษณ์ของทั้งเว็บไซต์ได้โดยการเปลี่ยนไฟล์เพียงไฟล์เดียว!
หน้า HTML แต่ละหน้าต้องมีการอ้างอิงไปยังไฟล์สไตล์ชีตภายนอกภายในองค์ประกอบ <link> ภายในส่วนหัว
ตัวอย่าง
สไตล์ภายนอกถูกกำหนดไว้ภายในองค์ประกอบ <link> ภายในส่วน <head> ของหน้า HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
สามารถเขียนสไตล์ชีตภายนอกในโปรแกรมแก้ไขข้อความใดก็ได้ และต้องบันทึกด้วยนามสกุล .css
ไฟล์ .css ภายนอกไม่ควรมีแท็ก HTML
นี่คือลักษณะของไฟล์ "mystyle.css":
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
หมายเหตุ:อย่าเพิ่มช่องว่างระหว่างค่าคุณสมบัติและหน่วย:
ไม่ถูกต้อง (ช่องว่าง): margin-left: 20 px;
ถูกต้อง (nospace):margin-left: 20px;
CSS ภายใน
สามารถใช้สไตล์ชีตภายในได้หากหน้า HTML หน้าเดียวมีลักษณะเฉพาะ
สไตล์ภายในถูกกำหนดไว้ภายในองค์ประกอบ <style> ภายในส่วนหัว
ตัวอย่าง
สไตล์ภายในถูกกำหนดไว้ภายในองค์ประกอบ <style> ในส่วน <head> ของหน้า HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS แบบอินไลน์
อาจใช้สไตล์อินไลน์เพื่อใช้สไตล์เฉพาะสำหรับองค์ประกอบเดียว
หากต้องการใช้สไตล์อินไลน์ ให้เพิ่มแอตทริบิวต์ style ให้กับองค์ประกอบที่เกี่ยวข้อง แอตทริบิวต์ style สามารถมีคุณสมบัติ CSS ใดก็ได้
ตัวอย่าง
สไตล์อินไลน์ถูกกำหนดไว้ภายในแอตทริบิวต์ "style" ขององค์ประกอบที่เกี่ยวข้อง:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
เคล็ดลับ:สไตล์อินไลน์สูญเสียข้อดีหลายประการของสไตล์ชีต (โดยการผสมเนื้อหากับงานนำเสนอ) ใช้วิธีนี้เท่าที่จำเป็น
หลายสไตล์ชีต
หากมีการกำหนดคุณสมบัติบางอย่างสำหรับตัวเลือก (องค์ประกอบ) เดียวกันในสไตล์ชีตที่ต่างกัน ค่าจากสไตล์ชีตที่อ่านล่าสุดจะถูกใช้
สมมติว่าสไตล์ชีตภายนอกมีลักษณะดังต่อไปนี้สำหรับองค์ประกอบ <h1>:
h1
{
color: navy;
}จากนั้น สมมติว่าสไตล์ชีตภายในมีลักษณะดังต่อไปนี้สำหรับองค์ประกอบ <h1>:
h1
{
color: orange;
}ตัวอย่าง
หากกำหนดสไตล์ภายในหลังจากลิงก์ไปยังสไตล์ชีตภายนอก องค์ประกอบ <h1> จะเป็น "สีส้ม":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
ตัวอย่าง
อย่างไรก็ตาม หากกำหนดสไตล์ภายในก่อนลิงก์ไปยังสไตล์ชีตภายนอก องค์ประกอบ <h1> จะเป็น "สีน้ำเงิน":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
ลำดับการเรียงซ้อน
สไตล์ใดที่จะใช้เมื่อมีการระบุสไตล์มากกว่าหนึ่งรายการสำหรับองค์ประกอบ HTML
สไตล์ทั้งหมดในหน้าจะ "เรียงซ้อน" ลงในสไตล์ชีต "เสมือน" ใหม่ตามกฎต่อไปนี้ โดยที่หมายเลขหนึ่งมีลำดับความสำคัญสูงสุด:
- รูปแบบอินไลน์ (ภายในองค์ประกอบ HTML)
- สไตล์ชีตภายนอกและภายใน (ในส่วนหัว)
- ค่าเริ่มต้นของเบราว์เซอร์
ดังนั้น สไตล์อินไลน์จึงมีลำดับความสำคัญสูงสุด และจะแทนที่สไตล์ภายนอกและภายใน และค่าเริ่มต้นของเบราว์เซอร์
เคยได้ยินเกี่ยวกับW3Schools Spacesไหม? ที่นี่คุณสามารถสร้างเว็บไซต์ของคุณเองหรือบันทึกข้อมูลโค้ดเพื่อใช้ในภายหลังได้ฟรี
เริ่มต้นฟรี ❯* ไม่ต้องใช้บัตรเครดิต