1. ใช้ตัวย่อ CSS ให้ดีสามารถลดขนาดของไฟล์หน้าเพิ่มความเร็วในการดาวน์โหลดและอ่านรหัส สามารถเขียนเป็น อีกตัวอย่างหนึ่ง: สามารถเขียนใหม่เป็น: (สำหรับรายละเอียดโปรดดูที่: คู่มืออ้างอิง CSS2, สรุปตัวย่อ CSS ที่ใช้กันทั่วไป) 2. สามารถตั้งค่าหลายกฎสำหรับแอตทริบิวต์คลาสขององค์ประกอบ HTML ในเวลาเดียวกัน (คำจำกัดความของคลาสหลายรายการ) องค์ประกอบนี้ยังมีสไตล์ที่ตั้งอยู่ใน A และ B 3. ชี้แจงหน่วยเว้นแต่ว่าค่าคือ 0 หมายเหตุ: อย่าเพิ่มกริดที่ว่างเปล่าระหว่างตัวเลขและหน่วย 4. ต้นฉบับที่แตกต่างกันใน XHTML ไม่สามารถแสดงเส้นขอบ 1 พิกเซล 5. หลักการลำดับความสำคัญล่าสุดของ CSS หากคุณกำหนดรูปแบบหลายรูปแบบในองค์ประกอบรูปแบบระดับแรกระดับแรกล่าสุดจะถูกกำหนดโดยสไตล์อื่น ๆ นี่แสดงสีแดงที่นี่ นี่แสดงสีน้ำเงินที่นี่ มันแสดงสีเขียวที่นี่ นี่คือสีเหลือง มันยังแสดงเป็นสีเหลืองเพราะ. yllow อยู่ด้านหลัง. blue 6. คำจำกัดความของการใช้ sub -selectors เพื่อลด ID และคลาสตัวอย่างเช่น: สามารถเปลี่ยนเป็น: 7. อย่าเพิ่มเส้นทางรูปภาพพื้นหลังเพื่อเปลี่ยนพื้นหลัง: URL ("xxx.gif") เป็นพื้นหลัง: url (xxx.gif) 8. เส้นทางของภาพพื้นหลังสัมพันธ์กับหน้า CSS ปัจจุบัน ตัวอย่างเช่น: 9. การใช้องค์ประกอบต่าง ๆ เพื่อใช้สไตล์เดียวกันเช่น H1, H2, H3, Div {ขนาดตัวอักษร: 16px; 10. เขียนรูปแบบการเชื่อมโยงที่ถูกต้อง 11. การเปลี่ยนแปลงเนื้อหาที่ต้องห้ามและการเปลี่ยนแปลงเนื้อหาภาคบังคับในตารางหรือเลเยอร์เราอาจหวังว่าเนื้อหาจะไม่เปลี่ยนแปลงหรือถูกบังคับให้เปลี่ยนบรรทัด 12. ความแตกต่าง ญาติการเขียนใน CSS คือ: ตำแหน่ง: เขาหมายถึงการวางตำแหน่งอย่างแน่นอน เช่นช่องว่างภายในในระดับพาเรนต์ระดับปัจจุบันของระดับปัจจุบันอยู่ที่มีการอ้างอิงถึงจุดเดิมของพื้นที่เนื้อหาหลัก 13. DIFFERTIAL DIV และ Span 14. จอแสดงผลและทัศนวิสัยที่แตกต่างกัน
ชอบ:
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}
/*โปรดทราบว่าค่าและเครื่องไม่สามารถมีพื้นที่ได้และพื้นที่จะถูกคั่นด้วยช่องว่างระหว่างค่าแต่ละค่า*//
โดยปกติเราจะเขียน:
ในความเป็นจริงเราสามารถระบุกฎหลายข้อสำหรับองค์ประกอบ P เช่น:
CSS:
.a {... }
.B {….}
html:
หมายเหตุ: แยกด้วยช่องว่างระหว่างหลายกฎ
ลืมที่จะกำหนดขนาดเป็นปัญหาที่พบบ่อยในผู้เริ่มต้น CSS เราสามารถเขียนความกว้าง = "100" ใน HTML แต่ควรให้หน่วยที่แม่นยำใน CSS เช่น: ความกว้าง: 100px; ความสูง: 50px; ขนาดของค่า 0 เท่ากับ
เช่น #AAA ซึ่งแตกต่างจาก #AAA
หาก #AAA ถูกกำหนดไว้ใน CSS การใช้ AAA ในองค์ประกอบ HTML เพื่อนำไปใช้จะไม่สามารถได้รับสไตล์ที่กำหนดไว้ใน #AAA
รหัสตัวอย่าง:
CSS:
#aaa {Border: 1px Solid #CCC}
html:
ชอบ:
CSS:
p {สี: สีแดง}
.blue {color: blue}
.yllow {สี: สีเหลือง}
html:
สังเกต:
(1) ให้ความสนใจกับลำดับความสำคัญหลายประการของสไตล์ (ลำดับความสำคัญลดลงจากบนลงล่าง):
-การตั้งค่าสไตล์
-การตั้งค่าพื้นที่ส่วนหัว
-ในไฟล์ CSS อ้างอิงภายนอก (2) ลำดับความสำคัญไม่ได้ตั้งค่าตามลำดับการเข้าถึง แต่คำสั่งซื้อใน CSS ถูกตั้งค่า
ดังที่แสดงในตัวอย่างข้างต้นมันแสดงสีเหลือง
#บรรจุ {..}
#contain_ul {... }
.Contail_li {... }
#บรรจุ {..}
#Contain ul {... }
.Contain ul li {... }
เนื่องจากการเพิ่มเครื่องหมายคำพูดสำหรับเบราว์เซอร์บางตัวอาจทำให้เกิดข้อผิดพลาด
มันเป็นภาพโครงสร้างไดเรกทอรีต่อไปนี้
-xxx.gif
-css
-xx.css
-ddex.html
เนื้อหารหัส
index.html อ้างอิงไฟล์ xx.css
xx.css ต้องการอ้างรูปภาพ xxx.gif
จากนั้น h1, h2, h3, องค์ประกอบ div คือทั้งหมด 16 พิกเซลแบบอักษรหนา
หากคุณไม่ได้เขียนตามลำดับนี้คุณอาจไม่สามารถบรรลุผลของความหวังของคุณได้ เพื่อที่จะจดจำคำสั่งนี้เราแยกจดหมายแรกของแต่ละคำ: lvha คุณสามารถจำคำสั่งซื้อโดยความทรงจำความทรงจำฮีโร่สองคำ
ห้ามมิให้เปลี่ยน: Space White: NowRap
การเปลี่ยนแปลงภาคบังคับ: Word-wrap: break-word;
Absolute, การเขียนใน CSS คือ: ตำแหน่ง: Absolute; จุดของการเสนอราคาระดับผู้ปกครองเป็นจุดเดิม หากมีการตั้งค่า TRBL และระดับพาเรนต์ไม่ได้ตั้งค่าแอตทริบิวต์ตำแหน่งดังนั้น Absolute ปัจจุบันจะอยู่ในตำแหน่งที่มีจุดเดิมในมุมซ้ายบนของเบราว์เซอร์และตำแหน่งจะถูกกำหนดโดย TRBL
DIV เป็นองค์ประกอบระดับบล็อกที่สามารถมีย่อหน้าตารางและเนื้อหาอื่น ๆ สำหรับการวางเนื้อหาที่แตกต่างกัน โดยทั่วไปเราจัดวางทุกบล็อกบนหน้าเว็บเพื่อจัดวางทุกบล็อกในหน้าเว็บ
Span เป็นองค์ประกอบที่เกี่ยวข้องภายในโดยไม่มีความสำคัญในทางปฏิบัติ
จอแสดงผล: ไม่มีและการมองเห็น: Hidden สามารถซ่อนองค์ประกอบ แต่การมองเห็น: ซ่อนอยู่เพียงแค่ซ่อนเนื้อหาขององค์ประกอบ แต่พื้นที่ตำแหน่งที่ใช้ยังคงอยู่
จอแสดงผล: ไม่มีใครถูกลบออกจากหน้าเว็บและตำแหน่งอาชีพจะถูกลบ