เมื่อเบราว์เซอร์อ่านแผ่นลักษณะก็จะจัดรูปแบบเอกสาร HTML ตามข้อมูลในแผ่นสไตล์
สามวิธีในการใส่ CSS
มีสามวิธีการแทรกแผ่นลักษณะคือ:
สไตล์ชีตภายนอก
ด้วยแผ่นลักษณะภายนอกคุณสามารถเปลี่ยนรูปลักษณ์ของเว็บไซต์ทั้งหมดโดยการเปลี่ยนเพียงหนึ่งไฟล์!
แต่ละหน้าจะต้องมีการอ้างอิงไปยังแฟ้มแผ่นลักษณะภายนอกภายใน <link> องค์ประกอบ <link> องค์ประกอบไปภายใน <head> ส่วน:
สไตล์ชีตภายนอกสามารถเขียนได้ในโปรแกรมแก้ไขข้อความใด ๆ ไฟล์ที่ไม่ควรมีแท็กใด ๆ แฟ้มแผ่นลักษณะต้องถูกบันทึกไว้ด้วย .css ขยาย
นี่คือวิธีการที่ "myStyle.css" หน้าตา:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} | ไม่ได้เพิ่มช่องว่างระหว่างมูลค่าทรัพย์สินและหน่วยงาน (เช่น margin-left:20 px; ) วิธีที่ถูกต้องคือ: margin-left:20px; |
|---|
สไตล์ชีตภายใน
สไตล์ชีตภายในอาจถูกนำมาใช้หากหน้าเดียวมีสไตล์ที่เป็นเอกลักษณ์
รูปแบบภายในที่กำหนดไว้ภายใน <style> องค์ประกอบภายใน <head> ส่วนของหน้าเว็บ HTML:
ตัวอย่าง
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> ลองตัวเอง» รูปแบบอินไลน์
สไตล์แบบอินไลน์อาจจะใช้ในการใช้รูปแบบที่ไม่ซ้ำกันสำหรับองค์ประกอบเดียว
ที่จะใช้รูปแบบอินไลน์, เพิ่มแอตทริบิวต์สไตล์กับองค์ประกอบที่เกี่ยวข้อง แอตทริบิวต์สไตล์สามารถมีคุณสมบัติ CSS ใด ๆ
ตัวอย่างด้านล่างนี้แสดงให้เห็นว่าการเปลี่ยนสีและขอบด้านซ้ายของ <h1> องค์ประกอบ:
| สไตล์แบบอินไลน์สูญเสียหลายข้อได้เปรียบของแผ่นสไตล์ (โดยการผสมเนื้อหาที่มีการนำเสนอ) ใช้วิธีนี้เท่าที่จำเป็น! |
|---|
แผ่นหลายสไตล์
ถ้าคุณสมบัติบางส่วนได้ถูกกำหนดไว้สำหรับตัวเลือกเดียว (องค์ประกอบ) ในแผ่นสไตล์ที่แตกต่างกันค่าจากแผ่นลักษณะการอ่านสุดท้ายที่จะนำมาใช้
ตัวอย่าง
สมมติว่าสไตล์ชีตภายนอกมีลักษณะต่อไปนี้สำหรับ <h1> องค์ประกอบ:
h1
{
color: navy;
}แล้วสมมติว่าสไตล์ชีตภายในนอกจากนี้ยังมีรูปแบบต่อไปนี้สำหรับ <h1> องค์ประกอบ:
h1
{
color: orange;
}หากรูปแบบภายในกำหนดหลังจากที่เชื่อมโยงไปยังแผ่นลักษณะภายนอกที่ <h1> องค์ประกอบจะเป็น "orange" :
ตัวอย่าง
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> ลองตัวเอง» แต่ถ้ารูปแบบภายในกำหนดก่อนที่จะเชื่อมโยงไปยังแผ่นลักษณะภายนอกที่ <h1> องค์ประกอบจะเป็น "navy" :
ตัวอย่าง
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> ลองตัวเอง» Cascading สั่งซื้อ
สิ่งที่รูปแบบจะถูกนำมาใช้เมื่อมีการระบุไว้มากกว่าหนึ่งรูปแบบสำหรับองค์ประกอบ HTML ได้ไหม?
โดยทั่วไปเราสามารถพูดได้ว่าทุกรูปแบบจะ "น้ำตก" เข้าใหม่ "เสมือน" แผ่นลักษณะตามกฎต่อไปนี้ซึ่งมีจำนวนหนึ่งที่มีความสำคัญสูงสุด:
- สไตล์แบบอินไลน์ (ภายในองค์ประกอบ HTML)
- แผ่นลักษณะภายนอกและภายใน (ในส่วนหัว)
- เริ่มต้นเบราว์เซอร์
ดังนั้นรูปแบบอินไลน์ (ภายในองค์ประกอบ HTML เฉพาะ) มีความสำคัญสูงสุดซึ่งหมายความว่ามันจะแทนที่รูปแบบที่กำหนดไว้ภายใน <head> แท็กหรือในแผ่นลักษณะภายนอกหรือค่าเริ่มต้นเบราว์เซอร์
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»