CSS หรือ Cascading Style Sheets เป็นวิธีที่ได้รับการยอมรับจากอุตสาหกรรมการออกแบบเว็บเพื่อเพิ่มรูปแบบภาพไปยังไซต์ ด้วย CSS คุณสามารถควบคุมการจัดวางหน้าตาสีการพิมพ์ภาพพื้นหลังภาพพื้นหลังและอื่น ๆ อีกมากมาย โดยทั่วไปถ้าเป็นรูปแบบภาพ CSS เป็นวิธีการนำรูปแบบเหล่านั้นไปใช้กับเว็บไซต์ของคุณ
ขณะที่คุณเพิ่มรูปแบบ CSS ลงในเอกสารคุณอาจสังเกตเห็นว่าเอกสารเริ่มต้นยาวนานขึ้น แม้เว็บไซต์ขนาดเล็กที่มีเพียงไม่กี่หน้าเท่านั้นที่สามารถจบลงด้วยไฟล์ CSS ขนาดใหญ่และไซต์ขนาดใหญ่ที่มีจำนวนมากและหน้าเว็บที่มีเนื้อหาไม่ซ้ำใครก็สามารถมีไฟล์ CSS ขนาดใหญ่ได้ ซึ่งประกอบด้วยเว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์ที่มีคำค้นหาสื่อจำนวนมากที่รวมอยู่ในชีตชีตเพื่อเปลี่ยนลักษณะภาพจริงและหน้าเว็บจะแสดงหน้าจอต่างๆ
ใช่ไฟล์ CSS จะยาวขึ้น นี่ไม่ใช่ปัญหาใหญ่เมื่อพูดถึงประสิทธิภาพของไซต์และความเร็วในการดาวน์โหลดเนื่องจากไฟล์ CSS ขนาดยาวอาจมีขนาดเล็ก (เนื่องจากเป็นเอกสารข้อความจริงๆ) ยังคงทุกเล็กน้อยนับเมื่อมาถึงความเร็วของหน้าดังนั้นถ้าคุณสามารถทำให้สไตล์ชีตของคุณ leaner ที่เป็นความคิดที่ดี นี่คือที่ที่ "จุลภาค" สามารถเข้ามามีประโยชน์มากในสไตล์ชีตของคุณ!
เครื่องหมายจุลภาคและ CSS
คุณอาจสงสัยว่าเครื่องหมายจุลภาคมีบทบาทอย่างไรในไวยากรณ์ select CSS เช่นเดียวกับในประโยคจุลภาคจะนำความชัดเจนไม่ใช่รหัสไปสู่ตัวคั่น เครื่องหมายจุลภาคในตัวเลือก CSS จะแยกตัวเลือกหลายตัวภายในสไตล์เดียวกัน
ตัวอย่างเช่นลองดู CSS ด้านล่างบ้าง
th (สี: แดง; }td (สี: แดง; }p.red (สี: แดง; }div # firstred {สี: สีแดง; }
ด้วยไวยากรณ์นี้คุณจะบอกว่าคุณต้องการ TH แท็ก td แท็ก, แท็กวรรคกับชั้นสีแดงและแท็ก div ที่มี ID ที่จัดไว้เป็นอันดับแรกทั้งหมดจะมีสีลักษณะเป็นสีแดง
นี่เป็น CSS ที่ยอมรับได้อย่างสมบูรณ์ แต่มีสองข้อเสียที่สำคัญในการเขียนด้วยวิธีนี้:
- ในอนาคตหากคุณตัดสินใจเปลี่ยนสีตัวอักษรของพร็อพเพอร์ตี้เหล่านี้เป็นสีน้ำเงินคุณต้องทำการเปลี่ยนแปลงสี่ครั้งในสไตล์ชีตของคุณ
- จะเพิ่มจำนวนมากของตัวอักษรพิเศษในสไตล์ชีตของคุณที่คุณไม่จำเป็นต้อง รูปแบบ 4 รูปแบบนี้อาจดูเหมือนไม่สำคัญ แต่ถ้าคุณดำเนินการต่อในสไตล์ชีททั้งสองเส้นจะเพิ่มขึ้นและแผ่นงานจะมีขนาดใหญ่กว่าที่ควรจะเป็น
เพื่อหลีกเลี่ยงข้อเสียเหล่านี้และเพื่อปรับปรุงไฟล์ CSS ของคุณเราจะลองใช้เครื่องหมายจุลภาค
ใช้เครื่องหมายจุลภาคเพื่อแยก Selectors
แทนที่จะเขียนตัวเลือก CSS 4 แบบแยกกันและกฎ 4 ข้อคุณสามารถรวมสไตล์เหล่านี้ทั้งหมดไว้ในพร็อพเพอร์ตี้กฎโดยแยกตัวเลือกแต่ละตัวด้วยเครื่องหมายจุลภาค นี่คือวิธีการที่จะทำ:
th, td, p.red, div # firstred {สี: สีแดง; }
เครื่องหมายจุลภาคโดยทั่วไปทำหน้าที่เป็นคำว่า "และ" ภายในตัวเลือก ดังนั้นนี้ใช้กับ tชั่วโมง แท็กและtd แท็กและแท็กย่อหน้าที่มีระดับสีแดงและแท็ก div ที่มีรหัสแรกสุด นั่นคือสิ่งที่เรามีมาก่อน แต่แทนที่จะต้องใช้กฎ CSS 4 ข้อเรามีกฎเดียวกับ selectors หลายตัว นี่คือเครื่องหมายจุลภาคที่ใช้ในตัวเลือกซึ่งจะช่วยให้เราสามารถเลือกตัวเลือกหลายตัวในกฎเดียวกันได้
วิธีการนี้ไม่เพียง แต่ทำให้ไฟล์ CSS ที่มีความคมชัดยิ่งขึ้นและทำความสะอาดยิ่งขึ้นเท่านั้น แต่ยังทำให้การอัปเดตในอนาคตทำได้ง่ายขึ้น ตอนนี้ถ้าคุณต้องการเปลี่ยนสีจากสีแดงเป็นสีน้ำเงินคุณจะต้องทำการเปลี่ยนแปลงในตำแหน่งเดียวแทนที่จะข้ามกฎเดิม 4 สไตล์ที่เรามี! คิดเกี่ยวกับการประหยัดเวลาเหล่านี้ในไฟล์ CSS ทั้งหมดและคุณจะเห็นว่าวิธีนี้จะช่วยคุณประหยัดทั้งเวลาและพื้นที่ใน Rune ที่ยาวนาน!
รูปแบบไวยากรณ์
บางคนเลือกที่จะทำให้ CSS ชัดเจนยิ่งขึ้นโดยแยกแต่ละตัวเลือกออกเป็นบรรทัดเดียวแทนที่จะเขียนลงในบรรทัดเดียวข้างต้น นี่คือวิธีการที่จะทำ:
, thtd,p.red,div # firstred{สี: แดง;}
โปรดสังเกตว่าคุณวางเครื่องหมายจุลภาคหลังจากแต่ละตัวเลือกแล้วใช้ "ป้อน" เพื่อแบ่งตัวเลือกถัดไปไปยังบรรทัดของตัวเอง คุณไม่ต้องใส่เครื่องหมายจุลภาคหลังจากตัวเลือกขั้นสุดท้าย
การใช้เครื่องหมายจุลภาคระหว่างตัวเลือกของคุณทำให้คุณสามารถสร้างสไตล์ชีตที่มีขนาดกะทัดรัดมากขึ้นซึ่งง่ายต่อการอัปเดตในอนาคตและอ่านได้ง่ายขึ้นในวันนี้!
บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 5/8/17
