1. การใช้ตัวย่อ CSS ให้เกิดประโยชน์สามารถลดขนาดไฟล์หน้า เพิ่มความเร็วในการดาวน์โหลด และทำให้โค้ดกระชับและอ่านง่าย
ชอบ:
div{
ขอบด้านบน: 1px ทึบ #cccccc;
เส้นขอบซ้าย: 1px ทึบ #cccccc;
เส้นขอบขวา: 1px soli #cccccc;
ขอบล่าง:1px ทึบ #cccccc;
}
สามารถเขียนเป็น
p{border:1px solid #cccccc}
อีกตัวอย่างหนึ่ง:
div{
ขอบบน:10px;
ขอบขวา:20px;
ขอบล่าง:30px;
ขอบซ้าย:40px;
}
สามารถเขียนใหม่ได้เป็น:
/*สังเกตการเรียงลำดับการเขียนบน ขวา ล่าง และซ้าย*/
div{ระยะขอบ:10px 20px 30px 40px}
/*โปรดทราบว่าค่าและหน่วยไม่สามารถมีช่องว่างได้ และแต่ละค่าจะถูกคั่นด้วยช่องว่าง*/
(สำหรับรายละเอียด โปรดดูที่: คู่มืออ้างอิง css2, สรุปตัวย่อ css ทั่วไป)
2. คุณสามารถตั้งค่าแอตทริบิวต์คลาสหลายรายการสำหรับ องค์ประกอบ html ในเวลาเดียวกัน (คำจำกัดความหลายคลาส)
โดยปกติแล้วเราจะเขียนเป็น:
ที่จริงแล้ว เราสามารถระบุกฎได้หลายกฎสำหรับองค์ประกอบ p เช่น:
ซีเอสเอส:
.ก{…}
.ข{….}
HTML:
องค์ประกอบนี้รวมถึงสไตล์ที่ตั้งไว้ในทั้ง a และ b
หมายเหตุ: แยกกฎหลายข้อด้วยการเว้นวรรค
3. กำหนดหน่วยให้ชัดเจน ยกเว้นค่าเป็น 0
การลืมกำหนดขนาดเป็นปัญหาที่พบบ่อยสำหรับผู้เริ่มต้น CSS มือใหม่ ใน html เราสามารถเขียน width="100" ได้ แต่ควรระบุหน่วยที่ถูกต้องเป็น CSS ตัวอย่างเช่น: width:100px;height:50px;font-size:9pt ยกเว้นค่า 0 เนื่องจากไม่สำคัญสำหรับหน่วยใดๆ 0 ค่ามีขนาดเท่ากันทั้งหมด
หมายเหตุ: อย่าเพิ่มช่องว่างระหว่างค่าและหน่วย
4. ความละเอียดอ่อนของตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ใน xhtml ชื่อองค์ประกอบที่กำหนดโดย css จะต้องคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ด้วย ดังนั้น เพื่อหลีกเลี่ยงข้อผิดพลาด จึงแนะนำให้ใช้ตัวพิมพ์เล็กเสมอ
ตัวอย่างเช่น #aaa แตกต่างจาก #AAA ใน xhtml p และ P ก็จะไม่ถูกเขียนทับเช่นกัน
หากกำหนด #aaa ใน css การใช้ AAA เพื่อนำไปใช้ในองค์ประกอบ html จะไม่ได้รับสไตล์ที่กำหนดไว้ใน #aaa
รหัสตัวอย่าง:
ซีเอสเอส:
#aaa{เส้นขอบ:1px ทึบ #ccc}
HTML:
ไม่สามารถแสดง 1 pixel edge
5 ได้ หลักการลำดับความสำคัญล่าสุดของ CSS หากมีการกำหนดสไตล์หลายแบบสำหรับองค์ประกอบหนึ่ง ระดับล่าสุดจะมีความสำคัญกว่า และสไตล์ล่าสุดจะแทนที่คำจำกัดความของสไตล์อื่นๆ
ชอบ:
ซีเอสเอส:
พี{สี:แดง}
.สีน้ำเงิน{สี:สีน้ำเงิน}
.เหลือง{สี:เหลือง}
HTML:
แสดงที่นี่เป็นสีแดง
แสดงที่นี่เป็นสีน้ำเงิน
แสดงที่นี่เป็นสีเขียว
แสดงไว้ที่นี่เป็นสีเหลือง
สังเกต:
(1) ใส่ใจกับลำดับความสำคัญของสไตล์หลายประการ (ลำดับความสำคัญลดลงจากบนลงล่าง):
--การตั้งค่าสไตล์องค์ประกอบ
--Settings ในบริเวณศีรษะ
--ไฟล์ CSS ที่อ้างอิงภายนอก (2) ลำดับความสำคัญไม่ได้ถูกกำหนดโดยลำดับการเข้าถึง แต่ตามลำดับการประกาศใน CSS
ดังตัวอย่างข้างต้น จะแสดงเป็นสีเหลืองที่นี่
เนื่องจาก .yellow อยู่หลัง .blue ในคำจำกัดความของ CSS
6. ใช้ตัวเลือกย่อยเพื่อลดคำจำกัดความของรหัสและคลาส ตัวอย่างเช่น
#บรรจุ{..}
#contain_ul{...}
.contail_li{...}
สามารถเปลี่ยนเป็น:
#บรรจุ{..}
#บรรจุ{...}
.contain ul li{...}
7. อย่าใส่เครื่องหมายคำพูดในพาธรูปภาพพื้นหลัง และเปลี่ยน background:url("xxx.gif") เป็น background:url(xxx.gif)
เนื่องจากการเพิ่มเครื่องหมายคำพูดจะทำให้เกิดข้อผิดพลาดกับเบราว์เซอร์บางตัว
8. เส้นทางของภาพพื้นหลังสัมพันธ์กับเส้นทางของหน้า css ปัจจุบัน
ตัวอย่างเช่น:
มีโครงสร้างไดเร็กทอรีดังต่อไปนี้ - รูปภาพ
--xxx.gif
--css
--xx.css
--index.html
เนื้อหาโค้ด
index.html อ้างอิงถึงไฟล์ xx.css
xx.css ควรอ้างอิงถึงรูปภาพ xxx.gif และวิธีการเขียนคือ: พื้นหลัง:url(../images/xxx.gif)
9. ใช้ตัวเลือกกลุ่มเพื่อใช้สไตล์เดียวกันกับองค์ประกอบต่างๆ เช่น h1, h2, h3 , div{ขนาดตัวอักษร:16px;font-weight:bold}
จากนั้นสไตล์ขององค์ประกอบ h1, h2, h3 และ div จะเป็นแบบอักษรและตัวหนาทั้งหมด 16 พิกเซล
10. เขียนรูปแบบลิงก์ที่ถูกต้อง เมื่อใช้ CSS เพื่อกำหนดสถานะต่างๆ ของลิงก์ คุณต้องใส่ใจกับลำดับการเขียนด้วย คือ: :link: เยี่ยมชม :hover :active
หากคุณไม่เขียนตามลำดับนี้ คุณอาจไม่สามารถบรรลุผลตามที่คุณต้องการได้ เพื่อจดจำลำดับ เราจะแยกอักษรตัวแรกของแต่ละคำ: LVHA คุณสามารถจำลำดับได้โดยการจำคำสองคำว่า LoVe และ Hate
11. การห้ามไม่ให้ตัดเนื้อหาและบังคับให้ตัดเนื้อหาในตารางหรือเลเยอร์ เราอาจต้องการให้เนื้อหาไม่ตัดหรือบังคับให้ตัดเนื้อหา เราสามารถบรรลุข้อกำหนดเหล่านี้ได้ผ่านแอตทริบิวต์ CSS บางอย่าง
ปิดการใช้งานตัวแบ่งบรรทัด: white-space:nowrap
บังคับให้แบ่งบรรทัด: word-wrap: break-word; word-break: ปกติ;
12. ความแตกต่างระหว่างญาติและสัมบูรณ์
แน่นอน วิธีการเขียนใน CSS คือ: ตำแหน่ง: แน่นอน; มันหมายถึงตำแหน่งที่แน่นอน มันหมายถึงมุมซ้ายบนของเบราว์เซอร์และร่วมมือกับ TOP, RIGHT, BOTTOM และ LEFT (ต่อไปนี้จะเรียกว่า TRBL) สำหรับการวางตำแหน่ง ไม่ได้ตั้งค่า TRBL ตามค่าเริ่มต้น จุดกำเนิดคือจุดดั้งเดิมของพาเรนต์ หากตั้งค่า TRBL และพาเรนต์ไม่ได้ตั้งค่าแอตทริบิวต์ตำแหน่ง ค่าสัมบูรณ์ปัจจุบันจะถูกวางตำแหน่งโดยที่มุมซ้ายบนของเบราว์เซอร์เป็นจุดเดิม และตำแหน่งจะถูกกำหนดโดย TRBL
ความสัมพันธ์ วิธีการเขียนใน CSS คือ: ตำแหน่ง: สัมพันธ์; มันหมายถึงการวางตำแหน่งสัมพัทธ์สัมบูรณ์ โดยอ้างถึงจุดดั้งเดิมของจุดหลักเป็นจุดดั้งเดิม และอยู่ในตำแหน่งด้วย TRBL เมื่อมีแอตทริบิวต์ CSS เช่น padding ในพาเรนต์ จุดดั้งเดิมของระดับปัจจุบันจะถูกวางตำแหน่งโดยอ้างอิงกับจุดดั้งเดิมของพื้นที่เนื้อหาพาเรนต์
13. แยกแยะระหว่าง div และ span
div เป็นองค์ประกอบระดับบล็อกที่สามารถประกอบด้วยย่อหน้า ตาราง ฯลฯ และใช้เพื่อวางเนื้อหาที่แตกต่างกัน โดยทั่วไป เราใช้ div เพื่อจัดวางและวางตำแหน่งแต่ละบล็อกในหน้าเว็บ
span เป็นองค์ประกอบแบบอินไลน์ที่ไม่มีความหมายในทางปฏิบัติ การเพิ่มมาร์กอัปให้กับเนื้อหาสามารถกำหนดสไตล์ของเนื้อหาได้โดยการกำหนดสไตล์บนสแปน
14. แยกแยะระหว่างการแสดงผลและการมองเห็น
ทั้ง display:none และ allowance:hidden สามารถซ่อนองค์ประกอบได้ แต่ allowance:hidden จะซ่อนเฉพาะเนื้อหาขององค์ประกอบเท่านั้น แต่พื้นที่ตำแหน่งที่ใช้ยังคงอยู่
Display:none เทียบเท่ากับการลบองค์ประกอบออกจากเพจ และตำแหน่งที่ถูกครอบครองจะถูกลบด้วย