1. ใช้ตัวย่อ CSS
การใช้ตัวย่อสามารถช่วยลดขนาดไฟล์ CSS ของคุณและทำให้อ่านง่ายขึ้น สำหรับกฎหลักของตัวย่อ CSS โปรดดูที่ "สรุปไวยากรณ์ตัวย่อ CSS ทั่วไป" ซึ่งจะไม่มีการอธิบายไว้ที่นี่
2. กำหนดหน่วยให้ชัดเจน เว้นแต่ว่าค่าจะเป็น 0
การลืมกำหนดหน่วยขนาดถือเป็นข้อผิดพลาดทั่วไปของมือใหม่ CSS ใน HTML คุณสามารถเขียน width="100" ได้ แต่ใน CSS คุณต้องระบุหน่วยที่แน่นอน เช่น: width:100px width:100em มีข้อยกเว้นเพียงสองประการสำหรับการไม่กำหนดหน่วย: ความสูงของแถวและค่า 0 นอกจากนี้ค่าอื่นๆ จะต้องตามหลังหน่วย ระวังอย่าเพิ่มช่องว่างระหว่างค่ากับหน่วย
3. การพิจารณาตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
เมื่อใช้ CSS ใน XHTML ชื่อองค์ประกอบที่กำหนดใน CSS จะคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ เพื่อหลีกเลี่ยงข้อผิดพลาดนี้ ฉันขอแนะนำให้ใช้ตัวพิมพ์เล็กสำหรับชื่อคำจำกัดความทั้งหมด
ค่าของคลาสและรหัสยังคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ใน HTML และ XHTML หากคุณต้องเขียนตัวพิมพ์ผสม โปรดตรวจสอบอย่างรอบคอบว่าคำจำกัดความของคุณใน CSS สอดคล้องกับแท็กใน XHTML
4. ยกเลิกคุณสมบัติองค์ประกอบก่อนคลาส และ id
เมื่อคุณเขียนเพื่อกำหนดคลาสหรือ id สำหรับองค์ประกอบ คุณสามารถละเว้นคุณสมบัติองค์ประกอบก่อนหน้าได้ เนื่องจาก ID ไม่ซ้ำกันในเพจ และคลาส s สามารถใช้ได้หลายครั้งในเพจ . มันไม่สมเหตุสมผลเลยที่คุณจะมีคุณสมบัติเป็นองค์ประกอบ ตัวอย่างเช่น:
div#content { /* ประกาศ */ }
fieldset.details { /* ประกาศ */ }
สามารถเขียนเป็น #content { /* declarations */ }
.details { /* ประกาศ */ }
สิ่งนี้จะบันทึกบางไบต์
5. ค่าเริ่มต้น
โดยปกติค่าเริ่มต้นของช่องว่างภายในคือ 0 และค่าเริ่มต้นของสีพื้นหลังจะโปร่งใส แต่ค่าเริ่มต้นอาจแตกต่างกันในเบราว์เซอร์ที่แตกต่างกัน หากคุณกลัวข้อขัดแย้ง คุณสามารถกำหนดค่าระยะขอบและช่องว่างภายในขององค์ประกอบทั้งหมดให้เป็น 0 ที่จุดเริ่มต้นของสไตล์ชีตได้ เช่นนี้
-
ระยะขอบ:0;
ช่องว่างภายใน:0;
}
6. ไม่จำเป็นต้องกำหนดค่าที่สืบทอดได้ซ้ำๆ
ใน CSS องค์ประกอบลูกจะสืบทอดค่าแอตทริบิวต์ขององค์ประกอบหลักโดยอัตโนมัติ เช่น สี แบบอักษร ฯลฯ ซึ่งได้รับการกำหนดไว้ในองค์ประกอบหลัก สามารถสืบทอดได้โดยตรงในองค์ประกอบย่อย และไม่จำเป็นต้องกำหนดคำจำกัดความซ้ำ แต่โปรดทราบว่าเบราว์เซอร์อาจแทนที่คำจำกัดความของคุณด้วยค่าเริ่มต้นบางอย่าง
7. หลักการที่ใกล้ที่สุด-อันดับแรก
หากมีหลายคำจำกัดความขององค์ประกอบเดียวกัน คำจำกัดความที่ใกล้เคียงที่สุด (ระดับต่ำสุด) จะมีความสำคัญเหนือกว่า ตัวอย่างเช่น มีโค้ดชิ้นนี้อัปเดต: Lorem ipsum dolor set
ในไฟล์ CSS คุณได้กำหนดองค์ประกอบ p และคลาส "update"
พี {
ระยะขอบ:1em 0;
ขนาดตัวอักษร:1em;
สี:#333;
-
.อัปเดต {
แบบอักษรน้ำหนัก: ตัวหนา;
สี:#600;
-
จากคำจำกัดความทั้งสองนี้ class="update" จะถูกใช้เนื่องจากคลาสอยู่ใกล้กว่า p คุณสามารถตรวจสอบ "การคำนวณความจำเพาะของตัวเลือก" ของ W3C เพื่อเรียนรู้เพิ่มเติม
8. คำจำกัดความหลายคลาส
ป้ายกำกับสามารถกำหนดหลายคลาสพร้อมกันได้ ตัวอย่างเช่น: ขั้นแรกเรากำหนดสองสไตล์ สไตล์แรกมีพื้นหลัง #666 สไตล์ที่สองมีเส้นขอบ 10 px
.one{ความกว้าง:200px;พื้นหลัง:#666;}
.two{เส้นขอบ:10px ทึบ #F00;}
ในโค้ดของเพจ เราสามารถเรียก
ผู้เริ่มต้น CSS ไม่รู้ว่าการใช้ตัวเลือกลูกหลานเป็นสาเหตุหนึ่งที่ส่งผลต่อประสิทธิภาพ ตัวเลือกย่อยสามารถช่วยให้คุณบันทึกคำจำกัดความของคลาสได้มากมาย ลองมาดูรหัสต่อไปนี้:
เพื่อบันทึกไบต์ ฉันไม่แนะนำให้เพิ่มเครื่องหมายคำพูดในเส้นทางรูปภาพพื้นหลัง เนื่องจากไม่จำเป็นต้องใช้เครื่องหมายคำพูด ตัวอย่างเช่น:
พื้นหลัง:url("images/***.gif") #333;
สามารถเขียนเป็นพื้นหลัง:url(images/***.gif) #333;
หากคุณเพิ่มเครื่องหมายคำพูด จะทำให้เกิดข้อผิดพลาดบางอย่างกับเบราว์เซอร์
11. ตัวเลือกกลุ่ม (ตัวเลือกกลุ่ม)
เมื่อองค์ประกอบบางประเภท คลาส หรือรหัสมีคุณลักษณะบางอย่างที่เหมือนกัน คุณสามารถใช้ตัวเลือกกลุ่มเพื่อหลีกเลี่ยงคำจำกัดความซ้ำหลายรายการ ซึ่งสามารถประหยัดไบต์ได้ค่อนข้างมาก
ตัวอย่างเช่น หากต้องการกำหนดแบบอักษร สี และระยะขอบของชื่อเรื่องทั้งหมด คุณสามารถเขียนได้:
h1,h2,h3,h4,h5,h6 {
ตระกูลฟอนต์: "Lucida Grande", Lucida, Arial, Helvetica, sans-serif;
สี:#333;
ระยะขอบ:1em 0;
-
หากมีองค์ประกอบเดี่ยวๆ ที่จำเป็นต้องกำหนดสไตล์อิสระระหว่างการใช้งาน คุณสามารถเพิ่มคำจำกัดความใหม่หรือเขียนทับคำจำกัดความเก่าได้ เช่น:
h1 { ขนาดตัวอักษร:2em;
h2 { ขนาดตัวอักษร:1.6em;
12. ระบุรูปแบบลิงก์ตามลำดับที่ถูกต้อง
เมื่อคุณใช้ CSS เพื่อกำหนดรูปแบบสถานะต่างๆ ของลิงก์ ให้ใส่ใจกับลำดับที่เขียนไว้ ลำดับที่ถูกต้องคือ: :link :visited :hover :active ตัวอักษรตัวแรกที่แยกออกมาคือ "LVHA" ซึ่งคุณจำได้ว่าเป็น "LoVe HAte" (ชอบหรือเกลียด) เหตุใดจึงมีการกำหนดไว้ คุณสามารถอ้างถึง "ความเฉพาะเจาะจงของลิงก์" ของ Eric Meyer
หากผู้ใช้ของคุณจำเป็นต้องใช้การควบคุมด้วยแป้นพิมพ์และจำเป็นต้องรู้จุดสำคัญของลิงก์ปัจจุบัน คุณยังสามารถกำหนดแอตทริบิวต์ :focus ได้อีกด้วย เอฟเฟกต์ของ :focus แอตทริบิวต์ยังขึ้นอยู่กับตำแหน่งที่คุณเขียน หากคุณต้องการให้องค์ประกอบที่โฟกัสแสดงผล :hover คุณจะต้องเขียน :focus ก่อน :hover; หากคุณต้องการให้เอฟเฟกต์โฟกัสแทนที่ :hover เอฟเฟกต์ คุณใส่ :focus After :hover
13. ล้างโฟลต
ปัญหาที่พบบ่อยมากของ CSS คือเมื่อมีการใช้โฟลตสำหรับการวางตำแหน่ง เลเยอร์ที่อยู่ด้านล่างจะถูกปกคลุมไปด้วยเลเยอร์ลอย หรือเลเยอร์ย่อยที่ซ้อนกันในเลเยอร์นั้นเกินขอบเขตของเลเยอร์ภายนอก
วิธีแก้ไขตามปกติคือการเพิ่มองค์ประกอบพิเศษด้านหลังเลเยอร์แบบลอย เช่น div หรือ br และกำหนดสไตล์ให้ชัดเจน: ทั้งสองอย่าง วิธีนี้อาจเข้าใจยากไปสักหน่อย แต่โชคดีที่มีวิธีแก้ไขที่ดี โปรดดูบทความ "วิธีล้างโฟลตโดยไม่มีมาร์กอัปเชิงโครงสร้าง" (หมายเหตุ: ไซต์นี้จะแปลบทความนี้โดยเร็วที่สุด)
สองวิธีข้างต้นสามารถแก้ปัญหาการลอยล้นได้ดีมาก แต่ถ้าคุณต้องการล้างเลเยอร์หรือวัตถุในเลเยอร์จริงๆ ล่ะ? วิธีการง่ายๆ คือการใช้แอตทริบิวต์โอเวอร์โฟลว์ วิธีการนี้เดิมตีพิมพ์ใน "Simple Clearing of Floats" และมีการพูดคุยกันอย่างกว้างขวางใน "Clearance" และ "Super simple clearing float"
วิธีใดที่ชัดเจนข้างต้นที่เหมาะกับคุณมากกว่านั้นขึ้นอยู่กับสถานการณ์เฉพาะและจะไม่กล่าวถึงที่นี่ นอกจากนี้ บทความดีๆ บางบทความยังได้อธิบายอย่างชัดเจนเกี่ยวกับการประยุกต์ใช้ float ขอแนะนำให้คุณอ่าน: "Floatutorial", "Containing Floats" และ "Float Layouts"
14. การจัดกึ่งกลางแนวนอน (การจัดกึ่งกลาง)
นี่เป็นเทคนิคง่ายๆ แต่ก็คุ้มค่าที่จะพูดอีกครั้ง เพราะฉันเห็นคำถามมือใหม่มากเกินไปที่ถามคำถามนี้: จะจัด CSS ในแนวนอนได้อย่างไร? คุณต้องกำหนดความกว้างขององค์ประกอบ และกำหนดระยะขอบแนวนอน หากเลย์เอาต์ของคุณอยู่ในเลเยอร์ (คอนเทนเนอร์) เช่นนี้
คุณสามารถกำหนดให้กึ่งกลางแนวนอนได้ดังนี้:
#ห่อ {
width:760px; /* เปลี่ยนเป็นความกว้างของเลเยอร์ของคุณ*/
ระยะขอบ:0 อัตโนมัติ;
-
แต่ IE5/Win ไม่สามารถแสดงคำจำกัดความนี้ได้อย่างถูกต้อง เราใช้เคล็ดลับที่มีประโยชน์มากในการแก้ปัญหา: ใช้แอตทริบิวต์ text-align แบบนี้:
ร่างกาย {
การจัดตำแหน่งข้อความ: กึ่งกลาง;
-
#ห่อ {
width:760px; /* เปลี่ยนเป็นความกว้างของเลเยอร์ของคุณ*/
ระยะขอบ:0 อัตโนมัติ;
การจัดแนวข้อความ: ซ้าย;
-
กฎ text-align:center; ของเนื้อหาแรกกำหนดว่าองค์ประกอบทั้งหมดของเนื้อหาใน IE5/Win จะอยู่ตรงกลาง (เบราว์เซอร์อื่น ๆ จะอยู่ตรงกลางข้อความ) และ text-align:left ที่สองคือการจัดกึ่งกลางข้อความใน #warp ด้านซ้าย
15. นำเข้าและซ่อน CSS
เนื่องจากเบราว์เซอร์รุ่นเก่าไม่รองรับ CSS วิธีการทั่วไปคือการใช้เทคนิค @import เพื่อซ่อน CSS ตัวอย่างเช่น:
@import url("main.css");
อย่างไรก็ตาม วิธีการนี้ใช้ไม่ได้กับ IE4 ซึ่งทำให้ฉันปวดหัวอยู่พักหนึ่ง ต่อมาฉันเขียนแบบนี้:
@นำเข้า "main.css";
ด้วยวิธีนี้ CSS จึงสามารถซ่อนอยู่ใน IE4 ได้ ฮ่าฮ่า จะช่วยประหยัดได้ 5 ไบต์ด้วย หากคุณต้องการทราบคำอธิบายโดยละเอียดของไวยากรณ์ @import คุณสามารถดูได้ที่นี่ "แผนภูมิตัวกรอง css ของ centricle"
16. การเพิ่มประสิทธิภาพสำหรับ IE
บางครั้งคุณจำเป็นต้องกำหนดกฎพิเศษสำหรับบั๊กของเบราว์เซอร์ IE มีเทคนิค (แฮ็ก) CSS มากเกินไปที่นี่ ฉันใช้เพียงสองวิธีเท่านั้น ไม่ว่า Microsoft กำลังจะเผยแพร่ก็ตาม ไม่ว่า CSS จะได้รับการสนับสนุนดีขึ้นหรือไม่ ในเวอร์ชันเบต้าของ IE7 ทั้งสองวิธีปลอดภัยที่สุด
1. วิธีการใส่คำอธิบายประกอบ (ก) ซ่อนคำจำกัดความ CSS ใน IE คุณสามารถใช้ตัวเลือกลูกได้:
html>เนื้อหา p {
/* เนื้อหาคำจำกัดความ */
-
(b) วิธีการเขียนต่อไปนี้สามารถเข้าใจได้โดยเบราว์เซอร์ IE เท่านั้น (ซ่อนจากเบราว์เซอร์อื่น)
* html พี {
/* ประกาศ */
-
(c) บางครั้งคุณต้องการให้ IE/Win ทำงานแต่ซ่อน IE/Mac ไว้ คุณสามารถใช้เคล็ดลับ "แบ็กสแลช" ได้:
-
* html พี {
ประกาศ
-
-
2. วิธีการแสดงความคิดเห็นแบบมีเงื่อนไข อีกวิธีหนึ่งซึ่งฉันคิดว่าทดสอบได้ดีกว่า CSS Hacks คือการใช้ความคิดเห็นแบบมีเงื่อนไขแอตทริบิวต์ส่วนตัวของ Microsoft (ความคิดเห็นแบบมีเงื่อนไข) การใช้วิธีนี้ทำให้คุณสามารถกำหนดสไตล์บางอย่างสำหรับ IE แยกต่างหากได้ โดยไม่กระทบต่อคำจำกัดความของสไตล์ชีตหลัก แบบนี้:
17. ทักษะการดีบัก: เลเยอร์ใหญ่แค่ไหน?
เมื่อแก้ไขข้อผิดพลาด CSS คุณจะต้องเป็นเหมือนเครื่องพิมพ์ดีดและวิเคราะห์โค้ด CSS ทีละบรรทัด ฉันมักจะกำหนดสีพื้นหลังบนเลเยอร์ที่ต้องการ ดังนั้นจึงชัดเจนว่าเลเยอร์นั้นใช้พื้นที่เท่าใด บางคนแนะนำให้ใช้ border ซึ่งโดยทั่วไปเป็นไปได้ แต่ปัญหาคือบางครั้ง border จะเพิ่มขนาดขององค์ประกอบ และ border-top และ boeder-bottom จะทำลายค่าระยะขอบแนวตั้ง ดังนั้นจึงปลอดภัยกว่าที่จะใช้พื้นหลัง
คุณสมบัติอีกประการหนึ่งที่มักก่อให้เกิดปัญหาคือโครงร่าง โครงร่างดูเหมือน boeder แต่ไม่ส่งผลต่อขนาดหรือตำแหน่งขององค์ประกอบ มีเบราว์เซอร์เพียงไม่กี่ตัวเท่านั้นที่รองรับแอตทริบิวต์โครงร่าง เบราว์เซอร์เดียวที่ฉันรู้จักคือ Safari, OmniWeb และ Opera
18. สไตล์การเขียนโค้ด CSS เมื่อเขียนโค้ด CSS ทุกคนมีนิสัยการเขียนการเยื้อง การขึ้นบรรทัดใหม่ และการเว้นวรรคเป็นของตัวเอง หลังจากฝึกฝนอย่างต่อเนื่อง ฉันจึงตัดสินใจใช้รูปแบบการเขียนต่อไปนี้:
ตัวเลือก 1,
ตัวเลือก2 {
คุณสมบัติ:มูลค่า;
-
เมื่อใช้คำจำกัดความของสหภาพ ฉันมักจะเขียนตัวเลือกแต่ละตัวในบรรทัดของตัวเอง เพื่อให้ค้นหาได้ง่ายขึ้นในไฟล์ CSS เพิ่มช่องว่างระหว่างตัวเลือกสุดท้ายและเครื่องหมายปีกกา { และควรเขียนแต่ละคำจำกัดความในบรรทัดของตัวเองด้วย