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 นั้นไม่ซ้ำกันในเพจ และคลาสนั้นสามารถใช้ได้หลายครั้งในเพจ มันไม่สมเหตุสมผลเลยที่คุณจะมีคุณสมบัติเป็นองค์ประกอบ ตัวอย่างเช่น:
div#content { /* ประกาศ */ }
fieldset.details { /* ประกาศ */ } |
สามารถเขียนเป็น
#content { /* ประกาศ */ }
.details { /* ประกาศ */ } |
สิ่งนี้จะบันทึกบางไบต์
5. ค่าเริ่มต้น
โดยปกติค่าเริ่มต้นของช่องว่างภายในคือ 0 และค่าเริ่มต้นของสีพื้นหลังจะโปร่งใส แต่ค่าเริ่มต้นอาจแตกต่างกันในเบราว์เซอร์ที่แตกต่างกัน หากคุณกลัวข้อขัดแย้ง คุณสามารถกำหนดค่าระยะขอบและช่องว่างภายในขององค์ประกอบทั้งหมดให้เป็น 0 ที่จุดเริ่มต้นของสไตล์ชีตได้ เช่นนี้
-
ระยะขอบ:0;
ช่องว่างภายใน:0;
- |
6. ไม่จำเป็นต้องกำหนดค่าที่สืบทอดซ้ำๆ
ใน CSS องค์ประกอบลูกจะสืบทอดค่าแอตทริบิวต์ขององค์ประกอบหลักโดยอัตโนมัติ เช่น สี แบบอักษร ฯลฯ ที่กำหนดไว้ในองค์ประกอบหลัก สามารถสืบทอดได้โดยตรงในองค์ประกอบลูกโดยไม่มีคำจำกัดความซ้ำ แต่โปรดทราบว่าเบราว์เซอร์อาจแทนที่คำจำกัดความของคุณด้วยค่าเริ่มต้นบางอย่าง
7.หลักการแรกล่าสุด
หากมีคำจำกัดความหลายคำขององค์ประกอบเดียวกัน คำจำกัดความที่ใกล้เคียงที่สุด (ระดับต่ำสุด) จะได้รับการจัดลำดับความสำคัญ ตัวอย่างเช่น มีโค้ดชิ้นนี้
อัปเดต: ชุด Lorem ipsum dolor
ในไฟล์ CSS คุณได้กำหนดองค์ประกอบ p และการอัปเดตคลาส
พี {
ระยะขอบ:1em 0;
ขนาดตัวอักษร:1em;
สี:#333;
-
.อัปเดต {
แบบอักษรน้ำหนัก: ตัวหนา;
สี:#600;
- |
จากคำจำกัดความทั้งสองนี้ class=update จะถูกใช้เนื่องจากคลาสอยู่ใกล้กว่า p คุณสามารถตรวจสอบ "การคำนวณความจำเพาะของตัวเลือก" ของ W3C เพื่อเรียนรู้เพิ่มเติม
8. คำจำกัดความหลายคลาส
แท็กสามารถกำหนดหลายคลาสพร้อมกันได้ ตัวอย่างเช่น: ขั้นแรกเรากำหนดสองสไตล์ สไตล์แรกมีพื้นหลัง #666 สไตล์ที่สองมีเส้นขอบ 10 px
.one{ความกว้าง:200px;พื้นหลัง:#666;}
.two{เส้นขอบ:10px ทึบ #F00;}
ในโค้ดของเพจ เราสามารถเรียกมันได้เช่นนี้ ผลสุดท้ายคือ div นี้มีทั้งพื้นหลัง #666 และเส้นขอบ 10px ใช่ สามารถทำได้ คุณสามารถลองได้
9. ใช้ตัวเลือกสืบทอด
ผู้เริ่มต้น CSS ไม่รู้ว่าการใช้ตัวเลือกย่อยเป็นสาเหตุหนึ่งที่ส่งผลต่อประสิทธิภาพ ตัวเลือกย่อยสามารถช่วยให้คุณบันทึกคำจำกัดความของคลาสได้มากมาย ลองมาดูรหัสต่อไปนี้:
〈div id=subnav〉
〈อุล〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉รายการ 1〈/a〉〈/li〉
〈li class=subnavitemｓｌｍｃｔｔ〉 〈a href=# class=subnavitemｽｌｍｃｔｔ〉 รายการที่ 1〈/a〉 〈/li〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉 รายการ 1〈/a〉 〈/li〉
〈/อุล〉
〈/div〉 |
คำจำกัดความ CSS สำหรับโค้ดนี้คือ:
div#subnav ul { /* สไตล์บางอย่าง */ }
div#subnav ul li.subnavitem { /* สไตล์บางอย่าง */ }
div#subnav ul li.subnavitem a.subnavitem { /* สไตล์บางส่วน */ }
div#subnav ul li.subnavitemselected { /* สไตล์บางส่วน */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* การออกแบบบางส่วน */ } |
คุณสามารถแทนที่โค้ดด้านบนด้วยวิธีต่อไปนี้
〈ul id=subnav〉
〈li〉 〈a href=#〉 รายการ 1〈/a〉 〈/li〉
〈li class=sel〉 〈a href=#〉 รายการ 1〈/a〉 〈/li〉
〈li〉 〈a href=#〉 รายการ 1〈/a〉 〈/li〉
〈/อุล〉 |
คำจำกัดความของสไตล์คือ:
#subnav { /* สไตล์บางอย่าง */ }
#subnav li { /* สไตล์บางอย่าง */ }
#subnav a { /* สไตล์บางอย่าง */ }
#subnav .sel { /* สไตล์บางอย่าง */ }
#subnav .sel a { /* สไตล์บางอย่าง */ } |
ใช้ตัวเลือกย่อยเพื่อทำให้โค้ดและ CSS กระชับและอ่านง่ายขึ้น
10. ไม่จำเป็นต้องเพิ่มเครื่องหมายคำพูดในเส้นทางรูปภาพพื้นหลัง เพื่อบันทึกไบต์ ฉันไม่แนะนำให้เพิ่มเครื่องหมายคำพูดในเส้นทางรูปภาพพื้นหลัง เนื่องจากไม่จำเป็นต้องใช้เครื่องหมายคำพูด ตัวอย่างเช่น:
| พื้นหลัง: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 ตัวอย่างเช่น:
อย่างไรก็ตาม วิธีการนี้ใช้ไม่ได้กับ IE4 ซึ่งทำให้ฉันปวดหัวอยู่พักหนึ่ง ต่อมาฉันเขียนแบบนี้:
ด้วยวิธีนี้ CSS จึงสามารถซ่อนอยู่ใน IE4 ได้ ฮ่าฮ่า จะช่วยประหยัดได้ 5 ไบต์ด้วย หากคุณต้องการทราบคำอธิบายโดยละเอียดของไวยากรณ์ @import คุณสามารถดูได้ที่นี่ "แผนภูมิตัวกรอง css ของ centricle"
16. การเพิ่มประสิทธิภาพสำหรับ IE
บางครั้งคุณต้องกำหนดกฎพิเศษสำหรับข้อบกพร่องของเบราว์เซอร์ IE ที่นี่ฉันใช้วิธีแฮ็ก CSS มากเกินไปเพียงสองข้อเท่านั้น ไม่ว่า Microsoft จะดีกว่าในเวอร์ชันเบต้าของ IE7 หรือไม่ก็ตาม ปลอดภัยที่สุด
1. วิธีการใส่คำอธิบายประกอบ
(a) หากต้องการซ่อนคำจำกัดความ CSS ใน IE คุณสามารถใช้ตัวเลือกลูกได้:
html>เนื้อหา p {
/* เนื้อหาคำจำกัดความ */
- |
(b) วิธีการเขียนต่อไปนี้สามารถเข้าใจได้โดยเบราว์เซอร์ IE เท่านั้น (ซ่อนจากเบราว์เซอร์อื่น)
* html พี {
/* ประกาศ */
- |
(c) บางครั้งคุณต้องการให้ IE/Win ทำงานแต่ซ่อน IE/Mac คุณสามารถใช้แบ็กสแลชได้:
2. วิธีการแสดงความคิดเห็นแบบมีเงื่อนไข
อีกวิธีหนึ่งซึ่งฉันคิดว่าผ่านการทดสอบตามเวลามากกว่า CSS Hacks คือการใช้ความคิดเห็นแบบมีเงื่อนไขแอตทริบิวต์ส่วนตัวของ Microsoft (ความคิดเห็นแบบมีเงื่อนไข) การใช้วิธีนี้ทำให้คุณสามารถกำหนดสไตล์บางอย่างสำหรับ IE แยกต่างหากได้ โดยไม่กระทบต่อคำจำกัดความของสไตล์ชีตหลัก แบบนี้:
ไม่ได้กำหนด
17. ทักษะการดีบัก: เลเยอร์มีขนาดใหญ่แค่ไหน?
เมื่อแก้ไขข้อผิดพลาด CSS คุณจะต้องเป็นเหมือนเครื่องพิมพ์ดีดและวิเคราะห์โค้ด CSS ทีละบรรทัด ฉันมักจะกำหนดสีพื้นหลังบนเลเยอร์ที่ต้องการ ดังนั้นจึงชัดเจนว่าเลเยอร์นั้นใช้พื้นที่เท่าใด บางคนแนะนำให้ใช้ border ซึ่งโดยทั่วไปเป็นไปได้ แต่ปัญหาคือบางครั้ง border จะเพิ่มขนาดขององค์ประกอบ และ border-top และ boeder-bottom จะทำลายค่าระยะขอบแนวตั้ง ดังนั้นจึงปลอดภัยกว่าที่จะใช้พื้นหลัง
คุณสมบัติอีกประการหนึ่งที่มักก่อให้เกิดปัญหาคือโครงร่าง โครงร่างดูเหมือน boeder แต่ไม่ส่งผลต่อขนาดหรือตำแหน่งขององค์ประกอบ มีเบราว์เซอร์เพียงไม่กี่ตัวเท่านั้นที่รองรับแอตทริบิวต์โครงร่าง เบราว์เซอร์เดียวที่ฉันรู้จักคือ Safari, OmniWeb และ Opera
18. สไตล์การเขียนโค้ด CSS
เมื่อเขียนโค้ด CSS ทุกคนมีนิสัยการเขียนเกี่ยวกับการเยื้อง การขึ้นบรรทัดใหม่ และการเว้นวรรคเป็นของตัวเอง หลังจากฝึกฝนอย่างต่อเนื่อง ฉันจึงตัดสินใจใช้รูปแบบการเขียนต่อไปนี้:
ตัวเลือก 1,
ตัวเลือก2 {
คุณสมบัติ:มูลค่า;
- |
เมื่อใช้คำจำกัดความของสหภาพ ฉันมักจะเขียนตัวเลือกแต่ละตัวในบรรทัดของตัวเอง เพื่อให้ค้นหาได้ง่ายขึ้นในไฟล์ CSS เพิ่มช่องว่างระหว่างตัวเลือกสุดท้ายและเครื่องหมายปีกกา { และควรเขียนแต่ละคำจำกัดความในบรรทัดของตัวเองด้วย
ฉันคุ้นเคยกับการเพิ่มเครื่องหมายอัฒภาคหลังแต่ละค่าแอตทริบิวต์ แม้ว่ากฎจะอนุญาตให้ไม่จำเป็นต้องเขียนเครื่องหมายอัฒภาคหลังค่าแอตทริบิวต์สุดท้าย แต่หากคุณต้องการเพิ่มสไตล์ใหม่ ก็เป็นเรื่องง่ายที่จะลืมเพิ่มเครื่องหมายอัฒภาคและ ทำให้เกิดข้อผิดพลาดดังนั้นคุณยังเพิ่มมันให้ดีขึ้น
สุดท้าย เครื่องหมายปีกกาปิด } จะถูกเขียนในบรรทัดด้วยตัวมันเอง โดยมีการเว้นวรรคและการขึ้นบรรทัดใหม่เพื่อช่วยให้อ่านง่ายขึ้น
