CSS คือรูปแบบเค้าโครงหน้าเว็บกระแสหลักในปัจจุบัน และเป็นเนื้อหาหลักที่ 52CSS.com แนะนำให้คุณรู้จัก เนื่องจากมีการใช้ CSS อย่างแพร่หลายในเว็บไซต์เกือบทั้งหมด เราจึงควรใช้เวลาสักครู่เพื่อสร้างสไตล์ชีตและตรวจสอบให้แน่ใจว่าตรงตามนั้น มาตรฐานที่ดี เคล็ดลับต่อไปนี้จะช่วยผู้เริ่มต้น CSS ได้อย่างมากในระหว่างกระบวนการพัฒนา คุณสามารถเรียนรู้เกี่ยวกับทักษะทั้ง 10 ประการที่ผู้เริ่มต้น DivCSS ควรรู้ และความเข้าใจเกี่ยวกับมาตรฐานเว็บ
1. ดัชนี คำจำกัดความที่นี่จะช่วยให้คุณและนักพัฒนาคนอื่นๆ เข้าใจเว็บไซต์และไฟล์ CSS นอกจากนี้ ยังช่วยให้คุณเข้าใจสิ่งที่อยู่ในไฟล์ CSS อีกด้วย ส่วนดัชนีประกอบด้วยย่อหน้าความคิดเห็น CSS ที่จัดรูปแบบแล้ว
1. ให้ข้อมูลผู้เขียนไฟล์ CSS 2. กำหนดการออกแบบเว็บไซต์ (จำนวนคอลัมน์, คงที่/ไดนามิก) [คอลัมน์, คงที่/ของเหลว]
3. ติดตามเวอร์ชันของไฟล์อย่างต่อเนื่อง (มีประโยชน์มากเมื่อไฟล์มีผู้เขียนหลายคนหรือจำเป็นต้องอัปเกรดในอนาคต)
2. จุดยึด Anchors เปรียบเสมือนบุ๊กมาร์กภายในไฟล์ CSS เดียวกัน Anchors ช่วยให้คุณสามารถดูไฟล์ CSS ทั้งหมดได้อย่างชัดเจนและจัดระเบียบ
จำเป็นต้องกำหนดจุดยึดที่ดัชนีของ CSS (ดังที่กล่าวไว้ข้างต้น) และเนื่องจาก CSS ไม่มีระบบจุดยึดของตัวเอง ฉันจึงใช้เคล็ดลับง่ายๆ ในการกำหนดจุดยึดในเอกสาร
วิธีการคือการใช้อักขระที่ค่อนข้างหายากเพื่อกำหนดความคิดเห็น เมื่อคุณต้องการค้นหาจุดยึด คุณสามารถคัดลอกและค้นหาตัวกำหนดจุดยึดจากดัชนีและค้นหาจุดยึดได้
3. นิยามใหม่ การกำหนดใหม่เป็นวิธีการที่ใช้ในการแทนที่สไตล์แท็กเริ่มต้นของ HTML และกำหนดใหม่ คุณเคยเห็นโค้ด CSS แบบนี้ไหม แค่ต้องการจัดสไตล์องค์ประกอบเฉพาะนั้น!
การใช้งาน CSS ที่สวยงามมากคือตัวเลือกตามบริบท ลองใช้มันดู:
4. กฎการตั้งชื่อ ปัจจัยสำคัญคือการตั้งชื่อองค์ประกอบที่แม่นยำและสะอาดตา ซึ่งจะช่วยหลีกเลี่ยงความสับสนและทำให้อ่าน CSS ของคุณได้ง่ายและรวดเร็วยิ่งขึ้น
5. คำย่อ คุณลักษณะตัวย่อใน CSS เป็นคุณสมบัติที่ช่วยให้คุณสามารถรวมคุณสมบัติหลายประเภทที่เป็นประเภทเดียวกันเป็นหนึ่งเดียวได้
ตัวย่อ CSS ทำให้กระบวนการพัฒนาง่ายขึ้นและทำให้ไฟล์ CSS ของคุณสะอาด สั้น และอ่านง่าย ต่อไปนี้คือตัวอย่างบางส่วน:
6. สไปรท์ การแปลเป็นเอลฟ์ดูเหมือนจะไม่ทำให้ความเข้าใจในบทความนี้ลึกซึ้งขึ้น ในทางกลับกัน เมื่อฉันอ่านเป็นภาษาอังกฤษ ฉันไม่เข้าใจ ดังนั้นฉันจึงไม่ได้แปลมัน การรวมภาพพื้นหลังทั้งหมดเป็นภาพเดียวและใช้การวางตำแหน่งพื้นหลังเพื่อแสดงส่วนต่างๆ คือสิ่งที่เราเรียกว่า CSS Sprites
CSS Sprites สามารถลดจำนวนคำขอ HTTP ประหยัดแบนด์วิดท์ และทำให้อ่านเร็วขึ้น ในเวลาเดียวกัน ยังสามารถหลีกเลี่ยงความไม่เสถียรของภาพ (เช่น เมื่อเมาส์ผ่านภาพหนึ่ง ภาพอื่นสามารถแสดงผลได้ และภาพหลังจะรอเป็นเวลาครึ่งวันในการเชื่อมต่ออินเทอร์เน็ตที่ช้าจึงจะปรากฏ) .
ตัวอย่าง CSS Sprites ที่ดีที่สุดและเป็นที่นิยมมากที่สุดคือระบบเมนูบนเว็บไซต์ของ Apple:
7. การชี้แจง ความชัดเจนของตัวเลือกคือกระบวนการในการจัดลำดับความสำคัญว่าจะใช้กฎใดเมื่อสามารถใช้กฎหลายข้อสำหรับองค์ประกอบเดียวกันได้
พูดง่ายๆ ก็คือ ตัวเลือก CSS ทุกตัวมีน้ำหนัก ผลรวมของน้ำหนักทั้งหมดของตัวเลือกจะกำหนดคุณสมบัติในเอกสาร ความชัดเจนสามารถช่วยได้มากเมื่อเอกสาร CSS มีขนาดใหญ่จนคุณไม่รู้ว่าองค์ประกอบใดมีน้ำหนักมากกว่า
ความชัดเจนเป็นพื้นที่ขนาดใหญ่ใน CSS ซึ่งยากที่จะอธิบายด้วยประโยคเพียงไม่กี่ประโยค ลองดูตัวอย่าง:
8. รีเซ็ตคุณสมบัติ การรีเซ็ตคุณสมบัติส่วนกลางช่วยให้มั่นใจได้ว่าเว็บไซต์จะปรากฏเกือบจะเหมือนกันในเบราว์เซอร์ทั้งหมด ในแต่ละกรณี เบราว์เซอร์ที่แตกต่างกันจะใช้ชุดการตั้งค่าสไตล์เริ่มต้นของตนเองสำหรับเว็บไซต์ทั้งหมด ซึ่งจะทำให้เว็บไซต์ของเราปรากฏแตกต่างกันในเบราว์เซอร์ที่แตกต่างกัน การรีเซ็ตพร็อพเพอร์ตี้ทั่วโลกจะแก้ไขสถานการณ์นี้และช่วยให้คุณสร้างไซต์ของคุณจากฐานที่สอดคล้องกันอย่างแน่นอน
ฉันไม่แนะนำให้ใช้เฟรมเวิร์ก CSS เสมอไป แต่คุณยังคงต้องใช้การรีเซ็ต CSS มีวิธีการรีเซ็ตที่แตกต่างกันมากมาย ตั้งแต่แบบง่ายไปจนถึงแบบซับซ้อน
9. การแฮ็ก CSS แม้ว่าจะเป็น CSS ที่สมบูรณ์แบบ แต่ก็ไม่สามารถสร้างการแสดงผลที่เหมือนกันในทุกเบราว์เซอร์ได้ แต่ละเบราว์เซอร์มีวิธีการตีความ CSS ที่แตกต่างกัน โดยรวมแล้ว หากคุณต้องการให้เว็บไซต์ของคุณสอดคล้องกันในทุกเบราว์เซอร์ คุณต้องใช้ CSS Hacks
การใช้ CSS Hacks จะช่วยลดข้อผิดพลาดในการตรวจสอบ CSS ฉันเห็นด้วย อีกวิธีหนึ่งในการบรรลุเป้าหมายนี้คือการใช้ไฟล์ CSS ที่แตกต่างกันสำหรับแต่ละเบราว์เซอร์ และแจ้งให้เบราว์เซอร์ทราบว่าควรใช้ CSS เฉพาะใดโดยรวมแท็กเฉพาะเบราว์เซอร์ใน HTML ฉันมักจะสร้าง "fuck-ie.css" ในทุกโปรเจ็กต์ของฉัน :) (หมายเหตุผู้แปล: ผู้เขียนที่นี่ใช้คำสบถเพื่อแสดงความโกรธต่อ IE หากแปลว่า "ผสมพันธุ์กับ IE.css" โลกจะไม่ยอม' มันจะไม่กลมกลืนกันมากกว่านี้เหรอ?)
หลังจากใช้วิธีนี้ "ไฟล์ CSS หลัก" ของคุณจะได้รับการยืนยัน ขณะเดียวกันไฟล์ "fuck-ie.css" ก็จะได้รับการตรวจสอบด้วย แต่จะเขียนทับเฉพาะ "ไฟล์ CSS หลัก" ในเบราว์เซอร์ IE เท่านั้น
10. การตรวจสอบ การตรวจสอบความถูกต้องของ CSS เป็นสิ่งสำคัญเสมอเมื่อคุณสร้างมันขึ้นมา ซึ่งจะทำให้แน่ใจได้ว่า CSS ของคุณปราศจากข้อผิดพลาดและสามารถตีความได้อย่างถูกต้องโดยเบราว์เซอร์ทั้งหมด
W3C Validator เป็นเครื่องมือตรวจสอบ CSS ออนไลน์ที่ได้รับความนิยมมาก
