มีเคล็ดลับมากมายในการพัฒนาเค้าโครงเว็บ CSS และเพื่อนมือใหม่มักไม่คุ้นเคยกับคำแนะนำเหล่านี้ ในประเด็นเล็กๆ หนึ่งหรือสองประเด็น อาจใช้เวลานานกว่าจะเข้าใจ แม้ว่าจะมีการกล่าวถึงประเด็นนี้หลายครั้งในเอกสารของ 52CSS.com แต่เพื่อนหลายคนยังคงทำผิดพลาดในประเด็นเหล่านี้ มาดูเทคนิค CSS เหล่านี้กันดีกว่า อ่านอย่างละเอียด บางทีคุณอาจไม่เข้าใจมันอย่างถ่องแท้ คุณสามารถค้นหาใน 52CSS.com เพื่อขยายความรู้ที่คุณต้องการได้
1. แท็ก ul มีค่าช่องว่างภายในตามค่าเริ่มต้นใน Mozilla แต่ใน IE มีเพียงระยะขอบเท่านั้นที่มีค่า
2. ตัวเลือกคลาสเดียวกันสามารถปรากฏซ้ำๆ ในเอกสารได้ แต่ตัวเลือกรหัสสามารถปรากฏได้เพียงครั้งเดียวเท่านั้น ใช้ทั้งคลาสและรหัสเพื่อกำหนดป้ายกำกับใน CSS หากคำจำกัดความซ้ำ คำจำกัดความที่สร้างโดยตัวเลือกรหัสนั้นถูกต้องเนื่องจากน้ำหนักของรหัสมากกว่าน้ำหนักของคลาส
3. วิธีโง่ๆ ในการปรับความเข้ากันได้ (IE และ Mozilla):
ผู้เริ่มต้นอาจเผชิญกับสถานการณ์เช่นนี้: คุณลักษณะของป้ายกำกับเดียวกันจะแสดงตามปกติเมื่อตั้งค่าเป็น A ใน IE แต่ต้องตั้งค่าเป็น B ใน Mozilla เพื่อให้แสดงได้ตามปกติ ไม่เช่นนั้นทั้งสองจะกลับกัน
วิธีแก้ปัญหาชั่วคราว: ตัวเลือก {ชื่อคุณสมบัติ: B !important; ชื่อคุณสมบัติ: A} อาจใช้งานไม่ได้ในบางครั้ง คุณสามารถค้นหาโซลูชัน BUG เพิ่มเติมได้ที่ 52CSS.com
4. หากจำเป็นต้องมีระยะห่างระหว่างกลุ่มของแท็กที่ซ้อนกัน ให้ปล่อยให้เป็นแอตทริบิวต์มาร์จิ้นของแท็กที่อยู่ภายใน แทนที่จะกำหนดช่องว่างภายในของแท็กที่อยู่ด้านนอก
5. ขอแนะนำให้ใช้ background-image แทน list-style-image สำหรับไอคอนที่อยู่ด้านหน้าแท็ก li
6. IE ไม่สามารถแยกแยะความแตกต่างระหว่างความสัมพันธ์ทางมรดกและความสัมพันธ์แบบพ่อ-ลูกได้ ทั้งหมดนี้เป็นความสัมพันธ์ทางมรดก
7. เมื่อเพิ่มตัวเลือกลงในแท็กของคุณอย่างบ้าคลั่ง อย่าลืมเพิ่มความคิดเห็นให้กับตัวเลือกใน CSS คุณจะรู้ว่าทำไมคุณถึงทำเช่นนี้เมื่อคุณแก้ไข CSS ในภายหลัง คำเตือนอย่าบ้าเกินไป
8. หากคุณตั้งค่าภาพพื้นหลังสีเข้มและเอฟเฟกต์ข้อความที่สว่างให้กับฉลาก ขอแนะนำให้ตั้งค่าสีพื้นหลังให้เข้มขึ้นสำหรับฉลากของคุณในขณะนี้ เนื่องจากรูปภาพหายไป ข้อความจึงยังคงอ่านได้
9. เมื่อกำหนดสี่สถานะของลิงก์ ให้คำนึงถึงลำดับ: ลิงก์ที่เยี่ยมชม Hover ใช้งานอยู่
10. กรุณาใช้พื้นหลังสำหรับรูปภาพที่ไม่เกี่ยวข้องกับเนื้อหา อย่าลืมแยกการนำเสนอออกจากเนื้อหาเสมอ
11. สีที่กำหนดสามารถย่อได้ #8899FF=#89F
12. ตารางยังคงมีประโยชน์ในบางด้าน เมื่อคุณพบตารางข้อมูล อย่าเกลียดมัน
13. <script> ไม่มีแอตทริบิวต์ภาษาและควรเขียนดังนี้: <script type="text/javascript">
14. ตารางโครงร่างพิกเซลเดียวที่สมบูรณ์แบบ (สามารถผ่านการทดสอบใน IE5, IE6, IE7 และ FF1.0.4 หรือสูงกว่า)
ตาราง { เส้นขอบยุบ: ยุบ } td{ เส้นขอบ:#000 ทึบ 1px; } |
15. ค่าระยะขอบติดลบอาจมีบทบาทในการวางตำแหน่งที่สัมพันธ์กันเมื่อป้ายกำกับใช้การวางตำแหน่งแบบสัมบูรณ์ เมื่อหน้าแสดงที่กึ่งกลาง แอตทริบิวต์ด้านซ้าย:XXpx จะไม่เหมาะสำหรับเลเยอร์ที่ใช้การวางตำแหน่งแบบสัมบูรณ์ เป็นความคิดที่ดีที่จะวางเลเยอร์นี้ไว้ถัดจากป้ายกำกับที่ต้องวางตำแหน่งให้สัมพันธ์กัน จากนั้นใช้ค่าลบสำหรับระยะขอบ
16. เมื่อใช้การวางตำแหน่งแบบสัมบูรณ์ สามารถใช้ค่ามาร์จิ้นเพื่อวางตำแหน่งที่สัมพันธ์กับตำแหน่งของตัวเองได้ ซึ่งแตกต่างจากการวางตำแหน่งคุณลักษณะ เช่น ด้านบนและด้านซ้ายที่สัมพันธ์กับขอบของหน้าต่าง ข้อดีของการวางตำแหน่งแบบสัมบูรณ์คือทำให้องค์ประกอบอื่นๆ เพิกเฉยต่อการมีอยู่ของมันได้
17. หากข้อความยาวเกินไป ให้เปลี่ยนส่วนที่ยาวเป็นจุดไข่ปลาแล้วแสดง: ไม่ถูกต้องใน IE5 และ FF แต่สามารถซ่อนได้ ใช้ได้ใน IE6
| <DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”> <NOBR>ตัวอย่างเช่น มีบรรทัดข้อความที่ยาวจนไม่สามารถแสดงในบรรทัดเดียวในตารางได้</NOBR> |
18. เมื่ออาจเกิดปัญหาการทำซ้ำข้อความที่เกิดจากความคิดเห็นใน IE คุณสามารถเปลี่ยนความคิดเห็นเป็น:
<!–[if !IE]>ใส่ความเห็นของคุณที่นี่…<![endif]–> |
19. วิธีเรียกแบบอักษรภายนอกโดยใช้ CSS
ไวยากรณ์:
| @font-face{font-family:name;src:url(url);sRules} |
ค่า:
ชื่อ: ชื่อแบบอักษร ค่าที่เป็นไปได้ของแอตทริบิวต์ตระกูลฟอนต์ url(url): ระบุไฟล์ฟอนต์ OpenType โดยใช้ที่อยู่ URL แบบสัมบูรณ์หรือแบบสัมพันธ์ sRules: คำจำกัดความของสไตล์ชีต |
20. จะจัดกึ่งกลางข้อความในกล่องข้อความในรูปแบบแนวตั้งได้อย่างไร?
หากการใช้กลุ่มความสูงและความสูงของแถวไม่มีผลกระทบใน FF วิธีคือกำหนดระยะห่างจากขอบบนและล่างเพื่อให้ได้เอฟเฟกต์ที่ต้องการ
21. ปัญหาเล็กๆ น้อยๆ ที่ต้องคำนึงถึงเมื่อกำหนดแท็ก A:
เมื่อเรากำหนด a{color:red;} มันแสดงถึงรูปแบบของสี่สถานะของ A หากเราต้องการกำหนดสถานะที่จะวางเมาส์ เพียงแค่กำหนด a:hover อีกสามสถานะอยู่ใน A สไตล์ที่กำหนด เมื่อมีการกำหนด a:link เพียงอันเดียว อย่าลืมกำหนดอีกสามสถานะที่เหลือด้วย!
22. ไม่จำเป็นต้องย่อทุกสไตล์:
เมื่อ p{padding:1px 2px 3px 4px} ถูกกำหนดก่อนสไตล์ชีต สไตล์อื่นจะถูกเพิ่มเข้ามาในโปรเจ็กต์ถัดไปโดยมีช่องว่างด้านบน 5px และช่องว่างภายในด้านล่าง 6px เราไม่จำเป็นต้องเขียน p.style1{padding:5px 6px 3px 4px} สามารถเขียนเป็น p.style1{padding-top:5px;padding-right:6px;} ได้ คุณอาจรู้สึกว่าการเขียนแบบนี้ไม่ดีเท่าต้นฉบับ แต่คุณเคยคิดบ้างไหมว่างานเขียนของคุณเป็นอย่างไร วิธีการกำหนดสไตล์ซ้ำ ๆ นอกจากนี้คุณไม่จำเป็นต้องค้นหาว่าค่าการเติมด้านล่างและซ้ายดั้งเดิมคืออะไร! หากสไตล์ P ก่อนหน้าเปลี่ยนแปลงในอนาคต สไตล์ของ p.style1 ที่คุณกำหนดก็จะเปลี่ยนไปเช่นกัน
23. ยิ่งเว็บไซต์มีขนาดใหญ่เท่าใด สไตล์ CSS ก็จะยิ่งมีมากขึ้นเท่านั้น ก่อนที่จะเริ่ม โปรดเตรียมการและวางแผนให้ครบถ้วน รวมถึงกฎการตั้งชื่อด้วย การแบ่งบล็อกหน้า การจัดหมวดหมู่สไตล์ภายใน ฯลฯ
24. การตัดทอนอักขระภาษาจีนที่มีความกว้างคงที่: overflow: ซ่อนอยู่; text-overflow: ellipsis; white-space: nowrap; (อย่างไรก็ตาม สามารถจัดการการตัดทอนข้อความในบรรทัดเดียวเท่านั้น ไม่ใช่หลายบรรทัด) ทำไม่ได้ มันซ่อนไว้เท่านั้น
หากมีหลายสิ่งที่คุณไม่เข้าใจ ก็ไม่สำคัญ บันทึกทักษะเหล่านี้และมาที่ 52CSS.com บ่อยๆ เพื่อตรวจสอบทักษะเหล่านี้อย่างแน่นอน คุณยังสามารถป้อนเนื้อหาที่คุณสนใจในช่องค้นหาทางด้านซ้ายเพื่อค้นหาได้ คุณสามารถแสดงความคิดเห็นและเพิ่มเคล็ดลับ CSS ได้