ทำความเข้าใจเกี่ยวกับรูปแบบ CSS 3 ประเภท

สไตล์ชีตอินไลน์ฝังตัวและภายนอก: นี่คือสิ่งที่คุณต้องรู้

การพัฒนาเว็บไซต์ส่วนหน้าเป็นการแสดงให้เห็นว่าเป็นอุจจาระ 3 ขา ขาเหล่านี้มีดังต่อไปนี้:

• HTML สำหรับโครงสร้างของไซต์
• CSS สำหรับรูปแบบภาพ;
• จาวาสคริปต์สำหรับพฤติกรรม

ส่วนที่สองของสตูล CSS หรือ Cascading Style Sheets นี้เป็นสิ่งที่เรากำลังมองหาที่นี่ในวันนี้ โดยเฉพาะเราต้องการกำหนดรูปแบบ 3 แบบที่คุณสามารถเพิ่มลงในเอกสารได้

1. รูปแบบอินไลน์
2. สไตล์ฝังตัว
3. สไตล์ภายนอก

แต่ละรูปแบบ CSS เหล่านี้มีข้อดีและข้อเสียของพวกเขาดังนั้นลองมาดูลึกซึ้งในแต่ละรูปแบบ

ลักษณะแบบอินไลน์

สไตล์อินไลน์เป็นสไตล์ที่เขียนโดยตรงในแท็กในเอกสาร HTML รูปแบบอินไลน์จะส่งผลต่อเฉพาะแท็กเฉพาะที่ใช้กับ นี่คือตัวอย่างของสไตล์อินไลน์ที่ใช้กับลิงก์มาตรฐานหรือ anchor tag:

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

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

ในที่สุดรูปแบบอินไลน์จะเหมาะสมกับการใช้งานมากเท่านั้น

ในความเป็นจริงฉันไม่ค่อยเคยใช้รูปแบบอินไลน์บนหน้าเว็บของฉัน

ลักษณะที่ฝังตัว

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

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

สไตล์ชีตที่เพิ่มลงใน

ของเอกสารนอกจากนี้ยังเพิ่มโค้ดมาร์กอัปจำนวนมากลงในหน้าเว็บซึ่งอาจทำให้หน้าเว็บนี้ยากขึ้นในการจัดการในอนาคต

ประโยชน์ของสไตล์ชีทที่ฝังอยู่คือโหลดได้ทันทีโดยใช้หน้าเว็บแทนที่จะต้องโหลดไฟล์ภายนอกอื่น ๆ นี่อาจเป็นประโยชน์จาก ความเร็วในการดาวน์โหลดและมุมมองด้านประสิทธิภาพ

สไตล์ชีตภายนอก

เว็บไซต์ส่วนใหญ่ใช้แผ่นสไตล์ภายนอกสไตล์ภายนอกเป็นสไตล์ที่เขียนในเอกสารแยกต่างหากจากนั้นแนบไปกับเอกสารเว็บต่างๆ สไตล์ชีตภายนอก สามารถส่งผลกระทบต่อเอกสารที่แนบมาซึ่งหมายความว่าหากคุณมีเว็บไซต์ 20 หน้าที่แต่ละหน้าใช้สไตล์ชีตเดียวกัน (โดยทั่วไปแล้วจะเป็นอย่างไร) คุณสามารถเปลี่ยนแปลงภาพได้ทุกรูปแบบ ของหน้าเว็บเหล่านี้โดยการแก้ไขสไตล์ชีตนั้น

ทำให้การจัดการไซต์ในระยะยาวง่ายขึ้น

ข้อเสียของสไตล์ชีตภายนอกคือต้องใช้เพจเพื่อเรียกและโหลดไฟล์ภายนอกเหล่านี้ ไม่ใช่ทุกหน้าจะใช้สไตล์ในทุกรูปแบบ CSS ดังนั้นหลายหน้าจะโหลดหน้า CSS ขนาดใหญ่กว่าที่ต้องการจริงๆ

แม้ว่าจะมีการตีประสิทธิภาพสำหรับไฟล์ CSS ภายนอกก็ตามก็สามารถลดได้อย่างแน่นอน ในทางปฏิบัติไฟล์ CSS เป็นเพียงไฟล์ข้อความดังนั้นโดยทั่วไปจะมีขนาดไม่ใหญ่นักเริ่มต้นด้วย ถ้าไซต์ของคุณทั้งหมดใช้ไฟล์ CSS 1 ไฟล์คุณจะได้รับประโยชน์จากเอกสารฉบับนั้นที่ถูกแคชไว้หลังจากที่โหลดในตอนต้น

ซึ่งหมายความว่าอาจมีการเข้าชมบางครั้งในการเข้าชมหน้าแรกเล็กน้อย แต่หน้าต่อ ๆ มาจะใช้ไฟล์ CSS แคชดังนั้น Hit ใด ๆ จะถูกลบล้าง ไฟล์ CSS ภายนอกเป็นวิธีที่ฉันสร้างเว็บเพจทั้งหมดของฉัน