สรุปปัญหาและทักษะทั่วไปของ CSS ที่ใช้งานได้จริง

1. ใช้ตัวย่อ CSS ให้ดีสามารถลดขนาดของไฟล์หน้าเพิ่มความเร็วในการดาวน์โหลดและอ่านรหัส
ชอบ:

Div {
ชายแดนด้านบน: 1px Solid #CCCCCCC;
ชายแดนซ้าย: 1px Solid #CCCCCCC;
ชายแดนขวา: 1PX SOLI #CCCCCCC;
ขอบด้านล่าง: 1px Solid #CCCCCCC;
-

สามารถเขียนเป็น

P {Border: 1px Solid #CCCCCCC}

อีกตัวอย่างหนึ่ง:

Div {
ระยะขอบด้านบน: 10px;
มาร์จิ้น-ขวา: 20px;
ขอบด้านล่าง: 30px;
ระยะขอบ: 40px;
-

สามารถเขียนใหม่เป็น:

/*ให้ความสนใจกับคำสั่งของการเขียน, ขวา, ลง, ลงและซ้าย*/
div {margin: 10px 20px 30px 40px}
/*โปรดทราบว่าค่าและเครื่องไม่สามารถมีพื้นที่ได้และพื้นที่จะถูกคั่นด้วยช่องว่างระหว่างค่าแต่ละค่า*//

(สำหรับรายละเอียดโปรดดูที่: คู่มืออ้างอิง CSS2, สรุปตัวย่อ CSS ที่ใช้กันทั่วไป)

2. สามารถตั้งค่าหลายกฎสำหรับแอตทริบิวต์คลาสขององค์ประกอบ HTML ในเวลาเดียวกัน (คำจำกัดความของคลาสหลายรายการ)
โดยปกติเราจะเขียน:

ในความเป็นจริงเราสามารถระบุกฎหลายข้อสำหรับองค์ประกอบ P เช่น:

CSS:
.a {... }
.B {….}
html:

องค์ประกอบนี้ยังมีสไตล์ที่ตั้งอยู่ใน A และ B

หมายเหตุ: แยกด้วยช่องว่างระหว่างหลายกฎ

3. ชี้แจงหน่วยเว้นแต่ว่าค่าคือ 0
ลืมที่จะกำหนดขนาดเป็นปัญหาที่พบบ่อยในผู้เริ่มต้น CSS เราสามารถเขียนความกว้าง = "100" ใน HTML แต่ควรให้หน่วยที่แม่นยำใน CSS เช่น: ความกว้าง: 100px; ความสูง: 50px; ขนาดของค่า 0 เท่ากับ

หมายเหตุ: อย่าเพิ่มกริดที่ว่างเปล่าระหว่างตัวเลขและหน่วย

4. ต้นฉบับที่แตกต่างกันใน XHTML
เช่น #AAA ซึ่งแตกต่างจาก #AAA
หาก #AAA ถูกกำหนดไว้ใน CSS การใช้ AAA ในองค์ประกอบ HTML เพื่อนำไปใช้จะไม่สามารถได้รับสไตล์ที่กำหนดไว้ใน #AAA
รหัสตัวอย่าง:

CSS:
#aaa {Border: 1px Solid #CCC}
html:

ไม่สามารถแสดงเส้นขอบ 1 พิกเซล

5. หลักการลำดับความสำคัญล่าสุดของ CSS หากคุณกำหนดรูปแบบหลายรูปแบบในองค์ประกอบรูปแบบระดับแรกระดับแรกล่าสุดจะถูกกำหนดโดยสไตล์อื่น ๆ
ชอบ:

CSS:
p {สี: สีแดง}
.blue {color: blue}
.yllow {สี: สีเหลือง}
html:

นี่แสดงสีแดงที่นี่

นี่แสดงสีน้ำเงินที่นี่

มันแสดงสีเขียวที่นี่

นี่คือสีเหลือง

สังเกต:
(1) ให้ความสนใจกับลำดับความสำคัญหลายประการของสไตล์ (ลำดับความสำคัญลดลงจากบนลงล่าง):
-การตั้งค่าสไตล์
-การตั้งค่าพื้นที่ส่วนหัว
-ในไฟล์ CSS อ้างอิงภายนอก (2) ลำดับความสำคัญไม่ได้ตั้งค่าตามลำดับการเข้าถึง แต่คำสั่งซื้อใน CSS ถูกตั้งค่า
ดังที่แสดงในตัวอย่างข้างต้นมันแสดงสีเหลือง

มันยังแสดงเป็นสีเหลืองเพราะ. yllow อยู่ด้านหลัง. blue

6. คำจำกัดความของการใช้ sub -selectors เพื่อลด ID และคลาสตัวอย่างเช่น:

#บรรจุ {..}
#contain_ul {... }
.Contail_li {... }

สามารถเปลี่ยนเป็น:

#บรรจุ {..}
#Contain ul {... }
.Contain ul li {... }

7. อย่าเพิ่มเส้นทางรูปภาพพื้นหลังเพื่อเปลี่ยนพื้นหลัง: URL ("xxx.gif") เป็นพื้นหลัง: url (xxx.gif)
เนื่องจากการเพิ่มเครื่องหมายคำพูดสำหรับเบราว์เซอร์บางตัวอาจทำให้เกิดข้อผิดพลาด

8. เส้นทางของภาพพื้นหลังสัมพันธ์กับหน้า CSS ปัจจุบัน

ตัวอย่างเช่น:
มันเป็นภาพโครงสร้างไดเรกทอรีต่อไปนี้
-xxx.gif
-css
-xx.css
-ddex.html
เนื้อหารหัส
index.html อ้างอิงไฟล์ xx.css
xx.css ต้องการอ้างรูปภาพ xxx.gif

9. การใช้องค์ประกอบต่าง ๆ เพื่อใช้สไตล์เดียวกันเช่น H1, H2, H3, Div {ขนาดตัวอักษร: 16px;
จากนั้น h1, h2, h3, องค์ประกอบ div คือทั้งหมด 16 พิกเซลแบบอักษรหนา

10. เขียนรูปแบบการเชื่อมโยงที่ถูกต้อง
หากคุณไม่ได้เขียนตามลำดับนี้คุณอาจไม่สามารถบรรลุผลของความหวังของคุณได้ เพื่อที่จะจดจำคำสั่งนี้เราแยกจดหมายแรกของแต่ละคำ: lvha คุณสามารถจำคำสั่งซื้อโดยความทรงจำความทรงจำฮีโร่สองคำ

11. การเปลี่ยนแปลงเนื้อหาที่ต้องห้ามและการเปลี่ยนแปลงเนื้อหาภาคบังคับในตารางหรือเลเยอร์เราอาจหวังว่าเนื้อหาจะไม่เปลี่ยนแปลงหรือถูกบังคับให้เปลี่ยนบรรทัด
ห้ามมิให้เปลี่ยน: Space White: NowRap
การเปลี่ยนแปลงภาคบังคับ: Word-wrap: break-word;

12. ความแตกต่าง
Absolute, การเขียนใน CSS คือ: ตำแหน่ง: Absolute; จุดของการเสนอราคาระดับผู้ปกครองเป็นจุดเดิม หากมีการตั้งค่า TRBL และระดับพาเรนต์ไม่ได้ตั้งค่าแอตทริบิวต์ตำแหน่งดังนั้น Absolute ปัจจุบันจะอยู่ในตำแหน่งที่มีจุดเดิมในมุมซ้ายบนของเบราว์เซอร์และตำแหน่งจะถูกกำหนดโดย TRBL

ญาติการเขียนใน CSS คือ: ตำแหน่ง: เขาหมายถึงการวางตำแหน่งอย่างแน่นอน เช่นช่องว่างภายในในระดับพาเรนต์ระดับปัจจุบันของระดับปัจจุบันอยู่ที่มีการอ้างอิงถึงจุดเดิมของพื้นที่เนื้อหาหลัก

13. DIFFERTIAL DIV และ Span
DIV เป็นองค์ประกอบระดับบล็อกที่สามารถมีย่อหน้าตารางและเนื้อหาอื่น ๆ สำหรับการวางเนื้อหาที่แตกต่างกัน โดยทั่วไปเราจัดวางทุกบล็อกบนหน้าเว็บเพื่อจัดวางทุกบล็อกในหน้าเว็บ
Span เป็นองค์ประกอบที่เกี่ยวข้องภายในโดยไม่มีความสำคัญในทางปฏิบัติ

14. จอแสดงผลและทัศนวิสัยที่แตกต่างกัน
จอแสดงผล: ไม่มีและการมองเห็น: Hidden สามารถซ่อนองค์ประกอบ แต่การมองเห็น: ซ่อนอยู่เพียงแค่ซ่อนเนื้อหาขององค์ประกอบ แต่พื้นที่ตำแหน่งที่ใช้ยังคงอยู่
จอแสดงผล: ไม่มีใครถูกลบออกจากหน้าเว็บและตำแหน่งอาชีพจะถูกลบ