เมื่อเบราว์เซอร์อ่านสไตล์ชีต มันจะจัดรูปแบบเอกสาร HTML ตาม ข้อมูลในสไตล์ชีท
การแทรกสไตล์ชีตมีสามวิธี:
CSS ภายนอก
CSS ภายใน
CSS แบบอินไลน์
ด้วย สไตล์ชีตภายนอก คุณสามารถเปลี่ยนรูปลักษณ์ของเว็บไซต์ทั้งหมดได้โดยการเปลี่ยน เพียงหนึ่งไฟล์!
หน้า HTML แต่ละหน้าจะต้องมีการอ้างอิงไปยังไฟล์สไตล์ชีตภายนอกภายใน องค์ประกอบ ภายในส่วนหัว
สไตล์ภายนอกถูกกำหนดไว้ภายในองค์ประกอบ ภายในส่วน <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>ลองด้วยตัวคุณเอง →
<!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" มีลักษณะดังนี้:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}หมายเหตุ: อย่าเพิ่มช่องว่างระหว่างค่าคุณสมบัติ (20) และหน่วย (พิกเซล):
ไม่ถูกต้อง (เว้นวรรค):
margin-left: 20 px;ถูกต้อง (ไม่มีช่องว่าง):
margin-left: 20px;สไตล์ชีตภายในอาจถูกนำมาใช้หากหน้า 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>ลองด้วยตัวคุณเอง →
<!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>
สไตล์อินไลน์อาจใช้เพื่อใช้สไตล์เฉพาะสำหรับองค์ประกอบเดียว
หากต้องการใช้สไตล์อินไลน์ ให้เพิ่มแอตทริบิวต์ 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>ลองด้วยตัวคุณเอง →
<!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>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
อย่างไรก็ตาม หากมีการกำหนดสไตล์ภายใน ก่อน ลิงก์ไปยังสไตล์ชีตภายนอก องค์ประกอบ <h1> จะเป็น "กองทัพเรือ":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
สไตล์ใดที่จะใช้เมื่อมีการระบุมากกว่าหนึ่งสไตล์สำหรับองค์ประกอบ HTML
สไตล์ทั้งหมดในเพจจะ "เรียงซ้อน" เป็นรูปแบบ "เสมือน" ใหม่ ตามกฎต่อไปนี้ โดยที่อันดับหนึ่งมีความสำคัญสูงสุด:
สไตล์อินไลน์ (ภายในองค์ประกอบ HTML)
สไตล์ชีตภายนอกและภายใน (ในส่วนหัว)
เบราว์เซอร์เริ่มต้น
ดังนั้นสไตล์อินไลน์จึงมีลำดับความสำคัญสูงสุด และจะแทนที่รูปแบบภายนอกและ รูปแบบภายในและค่าเริ่มต้นของเบราว์เซอร์
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>
</body>
</html>