วิธีเพิ่ม CSS

เมื่อเบราเซอร์อ่านตัวแปลง มันจะจัดระเบียบเอกสาร HTML ตามข้อมูลในตัวแปลง:

สามวิธีใช้ CSS

มีสามวิธีในการใส่ตัวแปลงนอก:

  • CSSนอก
  • CSS ภายใน
  • CSS ในแถว

CSSนอก

ด้วยการใช้ตัวแปลงนอกเป็นแบบจำลอง คุณสามารถเปลี่ยนแปลงลักษณะทั้งหมดของเว็บไซต์ด้วยการแก้ไขไฟล์เพียงแค่ไฟล์เดียว!

ทุกเว็บเพจ HTML ต้องมีการบันทึกอ้างอิงไฟล์ตัวแปลงนอกด้านในอิเลย์เมนต์<link>ของส่วน<head>：

ตัวอย่าง

แบบจำลองด้านนอกถูกกำหนดในส่วน<head>ของเว็บเพจ HTML ด้วยอิเลย์เมนต์<link>：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" 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;) ข้อเขียนที่ถูกต้องคือ：margin-left: 20px;

CSS ภายใน

ถ้าหน้า HTML มีสไตล์เดียว สามารถใช้เอกสารแบบรูปแบบภายใน

สไตล์ภายใน ได้รับการกำหนดในอัตราการแสดง <style> ในส่วน <head>

ตัวอย่าง

สไตล์ภายใน ได้รับการกำหนดในอัตราการแสดง <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 ในแถว

สไตล์ในแถว (inline style) สามารถใช้เพื่อประกาศสไตล์เดี่ยวๆ สำหรับองค์เดียว

ถ้าต้องการใช้สไตล์ในแถว โปรดเพิ่มอัตราการแสดง style ให้กับองค์เกี่ยวข้อง style อัตราการแสดงสามารถประกอบด้วยอัตราการแสดง CSS ทุกอย่าง

ตัวอย่าง

สไตล์ในแถว (inline 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>

ทดลองด้วยตัวเอง

คำเตือน：สไตล์ในแถว (inline style) สูญเสียหลายข้อยอดของตารางแบบรูปแบบ (ผ่านการผสานเนื้อหากับการแสดงผล) โปรดใช้กับความระมัดระวัง

ตารางแบบรูปแบบหลายตาราง

ถ้ามีการกำหนดคุณสมบัติบางอย่างในตารางแบบรูปแบบที่ต่างกันสำหรับเลือกตัวองค์เดียวกัน (องค์) จะใช้คุณสมบัติจากตารางแบบรูปแบบที่อ่านล่าสุด

จงเลือกตัวอย่างเอกสารแบบรูปแบบภายนอกสไตล์ที่ได้กำหนดสำหรับตัวองค์ <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 หนึ่ง รูปแบบไหนจะถูกใช้?

ทุกรูปแบบในหน้าจะถูก"ทับซ้อน"ตามกฎต่อไปเพื่อที่จะก่อตั้งตารางรูปแบบ"วิเศษ"ใหม่ ในที่สุด ความสำคัญของระดับแรกสูงสุด:

  1. รูปแบบที่ใช้ในตัวอักษรด้านใน (ในองค์ประกอบ HTML)
  2. รูปแบบด้านนอกและรูปแบบด้านใน (ในส่วน head)
  3. รูปแบบเริ่มต้นของเบราเซอร์

ดังนั้น รูปแบบที่ใช้ในตัวอักษรด้านในมีความสำคัญสูงสุด และจะทำให้รูปแบบด้านนอกและรูปแบบด้านใน และรูปแบบที่เริ่มต้นของเบราเซอร์ถูกปิดกั้น

ทดลองด้วยตัวเอง