วิธีการสืบทอด CSS ในเอกสารเว็บ

ส่วนสำคัญของการจัดรูปแบบเว็บไซต์ด้วย CSS คือการทำความเข้าใจเกี่ยวกับแนวคิดการสืบทอด

มรดก CSS ถูกกำหนดโดยอัตโนมัติตามสไตล์ของพร็อพเพอร์ตี้ที่ใช้ เมื่อคุณดูสีพื้นหลังสไตล์คุณสมบัติคุณจะเห็นส่วนชื่อ "มรดก" ถ้าคุณชอบนักออกแบบเว็บมากที่สุดคุณได้ละเว้นส่วนดังกล่าว แต่ก็มีจุดมุ่งหมาย

CSS สืบทอดคืออะไร?

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

ตัวอย่างเช่นโค้ด HTML ด้านล่างนี้มีแท็ก H1 ล้อมรอบแท็ก EM:

นี่คือหัวข้อ ใหญ่ หัวข้อข่าว

องค์ประกอบ EM เป็นลูกขององค์ประกอบ H1 และรูปแบบใด ๆ ใน H1 ที่สืบทอดจะถูกส่งต่อไปยังข้อความ EM เช่นกัน ตัวอย่างเช่น:

h1 {font-size: 2em; }

เนื่องจากมีการสืบทอดคุณสมบัติแบบอักษรขนาดข้อความว่า "บิ๊ก" (ซึ่งเป็นสิ่งที่อยู่ภายในแท็ก EM) จะมีขนาดเท่ากับส่วนที่เหลือของ H1 นี่เป็นเพราะมันสืบทอดค่าที่ตั้งไว้ในคุณสมบัติ CSS

วิธีการใช้มรดก CSS

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

วิธีที่ดีที่สุดในการใช้งานนี้คือการกำหนดรูปแบบพื้นฐานของคุณในองค์ประกอบระดับสูงเช่น BODY หากคุณตั้งค่า แบบอักษรครอบครัว ของคุณในคุณสมบัติของร่างกายแล้วขอบคุณมรดกเอกสารทั้งหมดจะเก็บแบบอักษรเดียวกันที่ครอบครัว การทำเช่นนี้จะทำให้แผ่นงานขนาดเล็กที่จัดการได้ง่ายขึ้นเนื่องจากมีสไตล์โดยรวมน้อยลง ตัวอย่างเช่น:

body {ตระกูลแบบอักษร: Arial, sans-serif; }

ใช้ค่าสไตล์ที่สืบทอด

ทุกคุณสมบัติ CSS มีค่า "รับช่วง" เป็นตัวเลือกที่เป็นไปได้ นี้บอกเว็บเบราเซอร์ว่าแม้ว่าทรัพย์สินจะไม่ปกติสืบทอดควรมีค่าเช่นเดียวกับผู้ปกครอง ถ้าคุณกำหนดรูปแบบเช่นขอบที่ไม่ได้สืบทอดคุณสามารถใช้ค่าสืบทอดในคุณสมบัติต่อไปเพื่อให้มีขอบเหมือนกันกับพาเรนต์ ตัวอย่างเช่น:

body {margin: 1em; } p {margin: สืบทอด; }

สืบทอดใช้ค่าที่คำนวณ

นี่เป็นเรื่องสำคัญสำหรับ ค่าที่ รับมา เช่นขนาดแบบอักษร ที่ใช้ความยาว ค่าที่คำนวณได้คือค่าที่สัมพันธ์กับค่าอื่น ๆ บนเว็บเพจ

หากคุณตั้งขนาดอักษร 1EM ไว้ในองค์ประกอบ BODY ของคุณหน้าเว็บทั้งหมดของคุณจะมีขนาดไม่เท่ากับ 1EM เนื่องจากองค์ประกอบต่างๆเช่นหัวเรื่อง (H1-H6) และ องค์ประกอบ อื่น ๆ (เบราว์เซอร์บางประเภทคำนวณคุณสมบัติตารางต่างกัน) มีขนาดสัมพัทธ์ในเว็บเบราเซอร์ ในกรณีที่ไม่มีข้อมูลขนาดตัวอักษรอื่นเว็บเบราเซอร์จะทำให้ข้อความ H1 เป็นหัวเรื่องที่ใหญ่ที่สุดในหน้าตามด้วย H2 เป็นต้น เมื่อคุณตั้งค่าองค์ประกอบ BODY ของคุณเป็นขนาดแบบอักษรเฉพาะเจาะจงระบบจะใช้เป็นขนาดแบบอักษร "average" และองค์ประกอบบรรทัดแรกจะคำนวณจากที่นั่น

หมายเหตุเกี่ยวกับคุณสมบัติสืบทอดและพื้นหลัง

มีหลายรูปแบบที่ระบุไว้ไม่ได้สืบทอดมาใน CSS 2 บน W3C แต่เบราว์เซอร์เว็บยังคงรับค่า ตัวอย่างเช่นถ้าคุณเขียน HTML และ CSS ต่อไปนี้:

h1 {background-color: สีเหลือง; }

นี่คือหัวข้อ ใหญ่

คำว่า "บิ๊ก" จะยังคงมีพื้นหลังสีเหลืองแม้ว่าคุณสมบัติพื้นหลังจะไม่ได้รับการสืบทอด เนื่องจากค่าเริ่มต้นของพร็อพเพอร์ตี้พื้นหลังคือ "โปร่งใส" ดังนั้นคุณจึงไม่เห็นสีพื้นหลังใน แต่สีจะส่องผ่านจาก

parent