CSS เป็นภาษาคอมพิวเตอร์ที่ใช้เพื่อแสดงรูปแบบไฟล์ เช่น HTML (แอปพลิเคชันของ Standard Generalized Markup Language) หรือ XML (ชุดย่อยของ Standard Generalized Markup Language)
CSS ไม่เพียงแต่สามารถแก้ไขหน้าเว็บแบบคงที่เท่านั้น แต่ยังสามารถทำงานร่วมกับภาษาสคริปต์ต่างๆ เพื่อจัดรูปแบบองค์ประกอบต่างๆ ของหน้าเว็บแบบไดนามิก
CSS สามารถควบคุมเลย์เอาต์ของตำแหน่งองค์ประกอบในหน้าเว็บได้อย่างแม่นยำระดับพิกเซล รองรับขนาดและสไตล์แบบอักษรเกือบทั้งหมด และมีความสามารถในการแก้ไขออบเจ็กต์ของหน้าเว็บและรูปแบบโมเดล สำหรับการศึกษาเชิงลึก โปรดค้นหา "วิดีโอสอน CSS เว็บไซต์ php Chinese" บน Baidu และเรียนรู้ออนไลน์ฟรี
1. คุณลักษณะทั่วไป
ชื่อ: สามารถทำซ้ำได้, คลาส: ชื่อคลาส, สามารถทำซ้ำได้, หรือมีหลายอัน, ใช้สำหรับ CSS; เช่น <p class="one two"></p>; ตัวระบุไม่สามารถใช้การซ้ำซ้อนใน JavaScript ได้ กฎการตั้งชื่อจะเหมือนกับกฎการตั้งชื่อป้ายกำกับในภาษาอื่น
title: title ซึ่งสามารถเพิ่มลงในแท็กได้ เช่น <img src="1.jpg" /title="This is a picture";/
2. แท็กความสัมพันธ์
ความสัมพันธ์ทางลูกหลาน: ความสัมพันธ์ระหว่างพ่อแม่และลูก (รวมถึงความสัมพันธ์);
ความสัมพันธ์แบบพี่น้อง: ความสัมพันธ์แบบพ่อเดียวกัน;
3.CSS-Cascading Style Sheets
ความคิดเห็น CSS: /เนื้อหาความคิดเห็นถูกเขียนไว้ที่นี่เพื่อให้โปรแกรมเมอร์เห็น และจะไม่ปรากฏบนหน้า/;
กฎไวยากรณ์ CSS: ต้องป้อนสัญลักษณ์ทั้งหมดโดยใช้วิธีป้อนข้อมูลภาษาอังกฤษ เป็นตัวพิมพ์เล็ก และแอตทริบิวต์จะต้องเขียนในวงเล็บปีกกา แต่ละคำสั่งแอตทริบิวต์จะต้องลงท้ายด้วยเครื่องหมายอัฒภาค และค่าแอตทริบิวต์จะต้องมีรูปแบบพิกเซล (px) : คุณลักษณะ: ค่าคุณลักษณะ ;
4. วิธีการแนะนำ CSS
การแนะนำแบบอินไลน์: วิธีการแนะนำการเพิ่มสไตล์ในแท็ก รูปแบบ: <tag style="พื้นหลัง:สีแดง; font-size:20px;">เนื้อหา</tag>; และ html โครงสร้างไม่ได้ถูกแยกออก ขอบเขตของอิทธิพลอยู่ในแท็กปัจจุบันเท่านั้น: เพิ่ม <style type="text/css">สไตล์ CSS</style> ในส่วนหัวของหน้าเว็บ การบำรุงรักษาโค้ดค่อนข้างแย่ ไม่มี ตระหนักถึงการแยกโค้ด CSS และโครงสร้าง HTML และขอบเขตของอิทธิพลอยู่ที่หน้าปัจจุบันเท่านั้น
การแนะนำลิงก์ภายนอก: สร้างไฟล์ xx.css นอกหน้าเว็บ และใช้ <link rel="stylesheet" type="text/css" href="xx.css"> ในส่วนหัวของหน้าเว็บ หมายเหตุ: โค้ดมีการบำรุงรักษาสูง โค้ด CSS ถูกแยกออกจากโครงสร้าง HTML อย่างสมบูรณ์ ส่งผลต่อหน้าเว็บทั้งหมดที่แนะนำไฟล์ CSS บนเว็บไซต์ทั้งหมด
5.ไวยากรณ์หลัก CSS:
รูปแบบโครงสร้าง: ตัวเลือก {attribute: ค่าแอตทริบิวต์; คุณลักษณะ: ค่าแอตทริบิวต์;...}; ตัวอย่าง: p{พื้นหลัง:สีแดง;สี:สีเทา;ขนาด:20px;};ตัวเลือก: เครื่องมือสำหรับการเลือกองค์ประกอบของหน้า;
วงเล็บปีกกา: เนื้อหาสไตล์จะถูกเขียนไว้ภายในเครื่องหมายปีกกา
6. ตัวเลือก
ตัวเลือกพื้นฐาน:
ตัวเลือกสากล: ใช้เพื่อเริ่มต้นรูปแบบเริ่มต้นของหน้าเว็บซึ่งเขียนไว้ที่จุดเริ่มต้นของสไตล์ชีต รูปแบบ: *{padding:0;margin:0;}; ตัวเลือกป้ายกำกับ: เพิ่มสไตล์ให้กับรูปแบบที่ระบุ: p {color:green; }; ตัวเลือกคลาส: เลือกเพื่อระบุรูปแบบตัวเลือกคลาส; รูปแบบ: .class name {พื้นหลัง: pink;}; รูปแบบเนื้อหาของหลายบล็อกเหมือนกัน จากนั้นให้สไตล์เดียวกัน
ตัวเลือก id: ตัวระบุที่ไม่ซ้ำกัน ไม่สามารถทำซ้ำได้ รูปแบบ: #id name{backgound-image:url(1.jpg);} หมายเหตุ: ไม่สามารถเพิ่มชื่อ id ในแท็ก id="one"; กี่ครั้งเมื่อรูปแบบเนื้อหาของแต่ละบล็อกเหมือนกัน ชื่อ ID ของหลายบล็อกจะต้องแตกต่างกัน;;
ความแตกต่างระหว่าง id และคลาส: ให้ความสนใจกับจุดก่อนหน้า - ID จะต้องสามารถระบุโหนด DOM ได้โดยไม่ซ้ำกัน หากคุณใช้ตัวเลือก ID ตลอดทั้งบทความ แม้ว่าสไตล์โหนด DOM ทั้งสองจะเหมือนกันทุกประการ คุณต้องเขียนสไตล์โหนดสองครั้ง หากคุณต้องการดูแลรักษาในภายหลัง คุณต้องรักษาโค้ดไว้ในทั้งสองแห่ง! - - เพิ่มค่าบำรุงรักษาอย่างมาก
ตัวเลือกคลาสหลอก: หลักการ Sequential LoVe HAte คุณสามารถข้ามไปได้ แต่ลำดับไม่สามารถเปลี่ยนแปลงได้ ได้แก่ สถานะลิงก์ (ลิงก์) สถานะการเยี่ยมชม (เยี่ยมชม) สถานะใช้งานอยู่ (โฮเวอร์) และสถานะการคลิก (ใช้งานอยู่)
คลาสการวาดจุด: a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} style เมื่อได้รับการโฟกัส a:focus{}; หมายเหตุ: คุณสามารถเพิ่มแอตทริบิวต์ข้อความ สีพื้นหลัง และรูปภาพลงในแอตทริบิวต์ได้ a{} และ a:link{} ให้เอฟเฟกต์เหมือนกัน; list class: li:link{color:yellow;};li:visited{color:blue ;} li:hover{color:red;} li:active{color:pin;};หมายเหตุ: สามารถเพิ่มแอตทริบิวต์ชุดข้อความ สีพื้นหลัง และรูปภาพลงในแอตทริบิวต์ได้
ตัวเลือกแบบผสม:
ตัวเลือกกลุ่ม (ตัวเลือกสหภาพ, ตัวเลือกหลายรายการ): ใช้เพื่อเพิ่มสไตล์เดียวกันให้กับหลายองค์ประกอบ ตัวอย่างเช่น: .one, #one, a, span{color:red;font-size:14px;} หมายถึงคลาสหนึ่ง, #one แท็ก และแท็ก span มีคุณลักษณะทั่วไป ตัวเลือกลูกหลาน: เพิ่มคุณลักษณะให้กับองค์ประกอบคลาสย่อย ตัวอย่าง: .one a{text- decoration:none;} หมายถึงเนื้อหาที่แก้ไขโดยแท็กของลูกหลานของคลาสหนึ่ง ไม่มีการขีดเส้นใต้; ตัวเลือกองค์ประกอบลูก (ตัวเลือกที่ระบุ): เพิ่มคุณสมบัติให้กับองค์ประกอบลูกที่ระบุ; ตัวอย่างเช่น: #one>p{color:red;}; หมายถึงการเพิ่มเนื้อหาที่วางอยู่บนแท็ก p ของลูกชายของตัวเลือก id หนึ่งคุณสมบัติ;
ตัวเลือกองค์ประกอบที่อยู่ติดกัน:
1. ตัวเลือกพี่น้องที่อยู่ติดกันสองตัวจะเพิ่มคุณสมบัติให้กับตัวเอง แต่เพิ่มเฉพาะคุณสมบัติให้กับพี่น้องต่อไปนี้ .one+p{พื้นหลัง:สีแดง;}; 2.one~p{พื้นหลัง:สีเขียว} หมายถึง มันเป็น เพื่อเพิ่มแอตทริบิวต์ให้กับองค์ประกอบแท็ก p ทั้งหมดหลังตัวเลือกเดียว โดยมีเงื่อนไขว่าองค์ประกอบเหล่านั้นมีคลาสพาเรนต์
ตัวเลือกคุณสมบัติ:
1. เพิ่มแอตทริบิวต์ให้กับองค์ประกอบด้วยแอตทริบิวต์ img[id]{พื้นหลัง:red;} เพิ่มแอตทริบิวต์ให้กับองค์ประกอบด้วย id;
เพิ่มแอตทริบิวต์ให้กับองค์ประกอบที่มีค่าแอตทริบิวต์ที่ระบุ: img[src="b.jpg"]{พื้นหลัง:red;}เพิ่มแอตทริบิวต์ให้กับองค์ประกอบด้วย b.jpg;
3. เพิ่มคุณลักษณะให้กับองค์ประกอบที่ขึ้นต้นด้วยอักขระที่ระบุ: img[src^="b"]{พื้นหลัง:red;} เพิ่มคุณลักษณะให้กับองค์ประกอบทั้งหมดที่ขึ้นต้นด้วย b; 4. ตัวเลือกมีค่าแอตทริบิวต์ที่ระบุที่ส่วนท้าย : img[src$="b"]{พื้นหลัง:red;}เพิ่มแอตทริบิวต์ให้กับองค์ประกอบทั้งหมดที่ลงท้ายด้วย b; 5. ตัวเลือกมีองค์ประกอบที่มีค่าแอตทริบิวต์ที่ระบุ: img[src*="b" ]{พื้นหลัง:red ;}เพิ่มแอตทริบิวต์ให้กับองค์ประกอบทั้งหมดที่มี b;
7. การรวมองค์ประกอบ (การจำแนกวิธีการแสดงผล)
องค์ประกอบบล็อก: ใช้สำหรับการเรียงพิมพ์ โครงสร้างทั่วไป ได้แก่: p, p, li, h1, dt;
องค์ประกอบจะแสดงเป็นเส้นของตัวเอง (สามารถกำหนดความกว้างและความสูงได้)
เมื่อองค์ประกอบระดับบล็อกซ้อนกัน หากไม่ได้ตั้งค่าความกว้างขององค์ประกอบลูก ความกว้างขององค์ประกอบลูกจะเป็นความกว้างขององค์ประกอบหลัก
องค์ประกอบแบบอินไลน์: ใช้เพื่อเพิ่มสไตล์ ขยาย แบบอักษร แข็งแกร่ง หมายเหตุ: อย่าให้ระยะขอบบนและล่างและการเติมให้กับองค์ประกอบแบบอินไลน์ ส่วนบนและล่างจะถูกละเว้น และด้านซ้ายและด้านขวาจะใช้ได้ (โดยทั่วไปจะไม่ใช้ );
องค์ประกอบจะแสดงในบรรทัดเดียว
ไม่สามารถกำหนดความกว้างและความสูงได้โดยตรง
องค์ประกอบบล็อกแบบอินไลน์: รูปภาพ, อินพุต;
องค์ประกอบจะแสดงในบรรทัดเดียว
สามารถกำหนดความกว้างและความสูงได้
ความสัมพันธ์ของการแปลง: อินไลน์ประกอบด้วยอินไลน์ องค์ประกอบบล็อกมีองค์ประกอบบล็อก และองค์ประกอบบล็อกสามารถมีองค์ประกอบอินไลน์
จอแสดงผล: อินไลน์แปลงองค์ประกอบให้เป็นองค์ประกอบอินไลน์ จอแสดงผล: อินไลน์บล็อกแปลงองค์ประกอบให้เป็นองค์ประกอบบล็อกอินไลน์
จอแสดงผล: บล็อก แปลงองค์ประกอบเป็นองค์ประกอบบล็อก
คุณสมบัติ 8.CSS
คุณสมบัติที่เกี่ยวข้องกับแบบอักษร:
ขนาดตัวอักษร: ขนาดตัวอักษร, จำนวนพิกเซล, น้ำหนักตัวอักษร: ความหนาของตัวอักษร, ตัวหนา (700-900), ปกติ, คุณสามารถเขียนได้ 100-900; : แบบอักษร, Microsoft YaHei, HeiTi;
การต่อแอตทริบิวต์: ฟอนต์: ฟอนต์สไตล์ฟอนต์-น้ำหนักฟอนต์-ขนาด/บรรทัด-ความสูงฟอนต์แฟมิลี่ หมายเหตุ: การต่อแอททริบิวต์ฟอนต์ต้องมีขนาดฟอนต์และตระกูลฟอนต์ (สามารถละเว้นแอททริบิวต์อื่น ๆ ได้) -ลำดับของครอบครัวไม่สามารถเปลี่ยนแปลงได้
ข้อความ:
color: color; text-indent: indent [หน่วยเป็น em]; ระยะทาง; การจัดตำแหน่งข้อความ: การจัดตำแหน่งแนวนอน [ค่าเริ่มต้นซ้าย, กึ่งกลาง, ขวา];
line-height: ความสูงของเส้น, ความสูงของเส้นตรงที่มีข้อความอยู่ [เมื่อความสูงของเส้นเท่ากับความสูงขององค์ประกอบ ข้อความจะอยู่ตรงกลางในแนวตั้ง];
ขนาด: เป็นขนาดขององค์ประกอบบล็อก ไม่สามารถตั้งค่าความกว้างและความสูงสำหรับองค์ประกอบแบบอินไลน์ได้ หากคุณต้องการตั้งค่า คุณต้องแปลงมัน
ความกว้าง: ความกว้าง;
ความสูง: ความสูง;
คุณลักษณะของ list ul และ li: list-style-type สามารถเพิ่มลงใน ul ได้ แต่ไม่จำเป็นต้องเพิ่มลงใน li
list-style-type:none; ลบสัญลักษณ์ สี่เหลี่ยม วงกลม วงกลมทึบของดิสก์ คุณไม่จำเป็นต้องเขียนมันหลังจากเพิ่มรูปภาพ list-style-type:none;list-style-image:url(1.jpg) เส้นขอบรูปภาพ: สีแดงทึบ 1px กำหนดเส้นขอบสำหรับ ul โดยรวม
list-style-position:outside; การวางตำแหน่งรูปภาพสไตล์: ภายใน, ภายนอก
พื้นหลัง:
สีพื้นหลัง ภาพพื้นหลัง ภาพพื้นหลัง หมายเหตุ: เมื่อตั้งค่าภาพพื้นหลัง ต้องแน่ใจว่าได้ตั้งค่าความกว้างและความสูง พื้นหลังของไทล์: ทำซ้ำ (ค่าเริ่มต้น) | ไม่ทำซ้ำ (ไม่ใช่ไทล์) x | (การปูกระเบื้องแนวนอน) ซ้ำ-y (การปูกระเบื้องแนวตั้ง) ลำดับจะไม่แตกต่าง หมายเลข ค่าแรกแสดงถึงทิศทางแนวนอน ค่าที่สองแสดงถึงทิศทางแนวตั้ง ตั้งค่ารูปแบบการตั้งค่าภาพพื้นหลังด้านหน้าเป็นภาพพื้นหลัง ตั้งค่าว่าพื้นหลังได้รับการแก้ไขหรือไม่ การเลื่อนพื้นหลัง (ค่าเริ่มต้น) แก้ไขรูปภาพแล้ว);
การเขียนร่วมแอตทริบิวต์: ไม่จำกัดปริมาณหรือการสั่งซื้อ: พื้นหลัง: url ("") สีแดง no-peat 30px 40px;
line-height: box model: ใช้สำหรับจัดวางหน้าเว็บ จะต้องกำหนดความกว้าง
คุณสมบัติเส้นขอบกล่อง: ส่วนประกอบ:
ความกว้างและความสูงของเส้นขอบ: ความกว้างของเส้นขอบ: 1px; สีของเส้นขอบ: สีของเส้นขอบ: สีแดง; รูปแบบเส้นขอบ: สไตล์เส้นขอบ: เส้นทึบทึบ/เส้นประประ/ไม่มีเส้นประ/ไม่มี การเขียนร่วม: เส้นขอบ: 1px สีแดงทึบ ; หมายเหตุ: ไม่มีข้อจำกัดในการเขียนแอตทริบิวต์ด้วยกัน ไม่จำเป็นต้องเขียนสีเส้นขอบ และไม่จำเป็นต้องเขียนความกว้างของเส้นขอบ: เส้นขอบ: ระยะขอบภายใน: กำหนดระยะห่างระหว่าง เนื้อหาและเส้นขอบของกล่อง
ขอบ: กำหนดระยะห่างระหว่างกล่อง
p{ความกว้าง:300px;ความสูง:200px;border-top:1px สีแดงทึบ;border-left:1px สีแดงทึบ;border-right:1px สีแดงทึบ;border-bottom:1px สีแดงทึบ;}
หากต้องการตั้งค่าคุณสมบัติทีละรายการ:
เส้นขอบด้านบนสี: สีแดง; เส้นขอบด้านบนสไตล์: ทึบ; เส้นขอบด้านบนกว้าง: 1px;
ขนาดกล่อง:
จุดที่ขนาดกล่องมีผล: กล่องที่สืบทอดมาอยู่ในช่วงความกว้างของกล่องหลัก และค่าการเติมจะไม่ส่งผลต่อขนาดกล่อง การคำนวณขนาดกล่อง: ความกว้าง = ความกว้างของเนื้อหา + เส้นขอบซ้ายและขวา + การเติมด้านซ้ายและด้านขวา
เส้นขอบอาจส่งผลต่อขนาดกล่องและการเสริมอาจส่งผลต่อขนาดกล่อง
ในอนาคต เมื่อใช้เค้าโครงกล่องหน้า หากมีการตั้งค่าระยะขอบภายในสำหรับกล่อง ค่าที่เกี่ยวข้องจะต้องถูกลบออกจากความกว้างหรือความสูงของเนื้อหา
ขอบ: กำหนดระยะห่างระหว่างกล่อง
จัดกล่องให้อยู่ตรงกลาง: แอตทริบิวต์ การเขียนร่วม:
กล่องใต้โฟลว์มาตรฐานอยู่กึ่งกลาง: ระยะขอบ: 0px อัตโนมัติ กล่องที่อยู่ในตำแหน่งอยู่กึ่งกลาง: ขั้นแรกให้เอาครึ่งหนึ่งของกล่องหลัก จากนั้นกลับไปครึ่งหนึ่งของความกว้างของมันเอง 10pxMargin: 10px, 20px, บน, ล่าง, 10px, ซ้ายและขวา, 20pxMargin: 10px 20px 30px 10px บน, 20px ซ้ายและขวา, 30px ล่าง
ระยะขอบ: 10px 20px 30px 40px ขวาบน ซ้ายล่าง
สังเกต:
คุณสมบัติการเขียนร่วม:
ระยะห่างระหว่างบน ขวา ล่าง และซ้ายคือ 10px ขยาย: 10px 20px; บนและล่าง 10px ซ้ายและขวา 20px Padding: 10px 20px 30px บน 10px ซ้ายและขวา 20px ล่าง 30px
การขยาย: 10px 20px 30px 40px; บน, ขวา, ล่าง, ซ้าย
เมื่อแสดงกล่องสองกล่องในแนวตั้ง ขอบจะเป็นไปตามค่าสูงสุดที่ตั้งไว้ (กรณีแรกของการรวมขอบ) เมื่อกล่องสองกล่องแสดงในแนวนอน ขอบจะทับซ้อนกันและขอบจะยุบลง (ปัญหาที่ยาก) เพื่อแก้ไขขั้นตอน:
padding: กำหนดระยะห่างระหว่างเนื้อหาและเส้นขอบของกล่อง
กำหนดเส้นขอบสำหรับกล่องหลัก
ตั้งค่า overflow:hidden สำหรับกล่องหลัก
ขอบที่ชัดเจน:
วิธีที่ 1: *{ช่องว่างภายใน: 0; ระยะขอบ: 0;}
วิธีที่ 2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}
9. ลักษณะสำคัญสามประการของ CSS
มรดก:
สืบทอดได้: สี, การจัดแนวข้อความ, เยื้องข้อความ, ขนาดฟอนต์, น้ำหนักฟอนต์, ตระกูลฟอนต์ ไม่สามารถสืบทอดได้: การตกแต่งข้อความ, เส้นขอบ, การแสดง, ระยะขอบ, ลอย, ช่องว่างภายใน หลักฐานสำหรับการสืบทอดที่จะเกิดขึ้นอยู่ระหว่างแท็กที่เป็นของ สำหรับความสัมพันธ์แบบซ้อน สามารถสืบทอดขนาดข้อความได้ แบบอักษรสามารถสืบทอดได้ คุณลักษณะที่เกี่ยวข้องกับข้อความสามารถสืบทอดได้ ความสูงของบรรทัดสามารถสืบทอดได้
คุณสมบัติพิเศษ:
สีข้อความในองค์ประกอบหลักไม่สามารถสืบทอดได้ (เรียงซ้อน)
<h1></h1> แท็กชื่อไม่สามารถสืบทอดขนาดข้อความจากองค์ประกอบหลัก
คาบเกี่ยวกัน: คาบเกี่ยวกันหมายถึงความครอบคลุมของสไตล์
ธรรมชาติของสไตล์แบบเรียงซ้อนไม่เกี่ยวข้องกับลำดับของการเรียกสไตล์ แต่เกี่ยวข้องกับลำดับในการกำหนดสไตล์
หลักฐานสำหรับการเรียงซ้อนที่จะเกิดขึ้น: ความขัดแย้งด้านสไตล์
ลำดับความสำคัญ:
น้ำหนัก: การแนะนำแบบอินไลน์ (1000) > id (100) > คลาส (10) > ป้ายกำกับ (1) > ทั่วไป (0) เพิ่มน้ำหนัก ยิ่งค่ามากขึ้น ลำดับความสำคัญก็จะยิ่งสูงขึ้น
น้ำหนักเท่ากัน และรูปแบบต่อไปนี้จะใช้ได้
10. บันทึกความรู้เพิ่มเติม
การเขียนการเพิ่มประสิทธิภาพแบบฟอร์ม: <lable for="one">ชื่อผู้ใช้:</lable><input type="text" id="one">ไอคอนรายการรูปแบบ: list-style: noneForm merge: border-collapse:collapse (Set การรวมเส้นขอบตาราง ใช้ได้กับตาราง) Bfc "การจัดรูปแบบบริบท" ล้น:
มองเห็นได้:ค่าเริ่มต้น เนื้อหาจะไม่ถูกตัดแต่งและจะถูกนำเสนอนอกกล่ององค์ประกอบ: เนื้อหาจะถูกตัดแต่งและเนื้อหาที่เหลือจะไม่ปรากฏให้เห็น เมื่อรูปภาพเปลี่ยนตำแหน่ง องค์ประกอบหลักจะเปลี่ยนตำแหน่งด้วย องค์ประกอบหลักสามารถทำให้องค์ประกอบหลักเปลี่ยนตำแหน่งได้ ตำแหน่งองค์ประกอบยังคงเลื่อนไม่เปลี่ยนแปลง: เนื้อหาจะถูกตัดออก แต่เบราว์เซอร์จะแสดงแถบเลื่อนเพื่อดูเนื้อหาที่เหลือ
อัตโนมัติ: หากมีการตัดเนื้อหา เบราเซอร์จะแสดงแถบเลื่อนเพื่อดูเนื้อหาที่เหลือ
11. โฟลว์มาตรฐาน: องค์ประกอบระดับบล็อกจะแสดงเป็นหนึ่งบรรทัด โหมดการแสดงโฟลว์มาตรฐาน: โหมดการแสดงผลเริ่มต้นขององค์ประกอบ
12. แบบลอยตัว: แบบลอยตัวใช้เพื่อแก้ปัญหาการตัดข้อความและรูปภาพ ใช้เพื่อสร้างแถบนำทางและเค้าโครงหน้าเว็บ
การใช้งาน: ลอย: ซ้าย | . ขวา คุณสมบัติ: ลอยสิ่งที่คุณต้องการ
องค์ประกอบที่ตั้งค่าให้ลอยไม่อยู่ในตำแหน่งเดิม (นอกสคริปต์) ทำให้องค์ประกอบระดับบล็อกสามารถแสดงเป็นแบบลอยในบรรทัดเดียวได้
ในระหว่างกระบวนการแปลงโหมด ให้ใช้จอแสดงผลหากทำได้
ล้างโฟลต:
คำจำกัดความ: การล้างโฟลตไม่ได้หมายถึงการลบโฟลตการหักล้าง หมายถึงผลกระทบของการล้างโฟลต ให้ความสนใจกับช่วงเวลาการใช้งาน: เมื่อองค์ประกอบลูกถูกตั้งค่าให้ลอยและองค์ประกอบหลักไม่มีความสูง เค้าโครงหน้าจะสับสน ในกรณีนี้ ให้เคลียร์โฟลต
ล้างวิธีการลอยตัว: [x] หมายเหตุ: เพิ่มองค์ประกอบบล็อกว่าง (<p></p>, แท็ก) หลังองค์ประกอบที่ต้องการล้าง และเพิ่ม clear:both left |right ไปยังองค์ประกอบว่างที่เพิ่ม
13. การวางตำแหน่ง: การวางแนว: ซ้าย, ขวา, บน, ล่าง (โปรดไปที่ช่องการสอน CSS ของเว็บไซต์ php Chinese เพื่อดูรายละเอียด)
การวางตำแหน่งแบบคงที่: การวางตำแหน่งแบบคงที่เป็นวิธีการแสดงการไหลขององค์ประกอบมาตรฐาน
การวางตำแหน่งแบบสัมบูรณ์: การวางตำแหน่งที่สัมพันธ์กับองค์ประกอบหลักหรือองค์ประกอบระดับบนสุดขององค์ประกอบตำแหน่งนั้น หากไม่มีองค์ประกอบหลักและองค์ประกอบระดับบนสุดก็จะพบเลเยอร์ที่มีตำแหน่งเดิม
เมื่อตั้งค่าตำแหน่งที่แน่นอนสำหรับองค์ประกอบเดียว การวางตำแหน่งจะถูกตั้งค่าตามมุมซ้ายบนของเบราว์เซอร์ (เนื้อหา) เมื่อกล่องซ้อนกัน ถ้ากล่องหลักไม่ได้ตั้งค่าตำแหน่ง กล่องลูกจะตั้งค่าตำแหน่งตามมุมซ้ายบนของเบราว์เซอร์ เมื่อกล่องซ้อนกัน ถ้าวางตำแหน่งกล่องหลัก กล่องลูกจะถูกวางตำแหน่งตามมุมซ้ายบนของกล่องหลัก การกำหนดตำแหน่งสัมบูรณ์สำหรับกล่อง และกล่องจะไม่ครอบครองตำแหน่งใดๆ (นอกสคริปต์) หลังจากตั้งค่าการวางตำแหน่งสัมบูรณ์สำหรับองค์ประกอบอินไลน์แล้ว องค์ประกอบจะถูกแปลงเป็นองค์ประกอบบล็อกอินไลน์
หมายเหตุ: หลังจากตั้งค่าองค์ประกอบเป็นตำแหน่งที่แน่นอนแล้ว ตำแหน่งขององค์ประกอบสามารถตั้งค่าได้ตามต้องการโดยใช้ชื่อการวางแนวเฉพาะ
ตำแหน่งสัมพัทธ์: สัมพันธ์กับตำแหน่งเดิมขององค์ประกอบ มันจะครอบครองตำแหน่งก่อนหน้า;
หลังจากที่องค์ประกอบถูกตั้งค่าเป็นตำแหน่งสัมพัทธ์ องค์ประกอบนั้นจะครอบครองตำแหน่งเดิม ตั้งค่าตำแหน่งสัมพัทธ์โดยมีตำแหน่งของตัวเองเป็นข้อมูลอ้างอิง
ลูกจะต้องอยู่ในตำแหน่งเดียวกับพาเรนต์ (องค์ประกอบย่อยถูกกำหนดให้เป็นตำแหน่งที่แน่นอน และองค์ประกอบหลักถูกกำหนดให้เป็นตำแหน่งแบบสัมพัทธ์)
ตำแหน่งคงที่: สัมพันธ์กับตำแหน่งที่มั่นคงทั้งหมด ตำแหน่งคงที่ไม่ครอบครองตำแหน่ง (นอกป้ายกำกับ) แปลงองค์ประกอบแบบอินไลน์เป็นตำแหน่งองค์ประกอบบล็อกแบบอินไลน์: คงที่
ปัญหาลำดับชั้น:
จะมีปัญหาแบบลำดับชั้นเฉพาะเมื่อมีการตั้งค่าตำแหน่งเท่านั้น มีการวางตำแหน่งแบบสัมพัทธ์ แบบสัมบูรณ์ และแบบอื่นระหว่างองค์ประกอบ Brother ซึ่งมีโครงสร้างเอกสาร HTML อยู่ที่ด้านหลังและอยู่ที่ชั้นนอกสุด (ระดับที่สูงกว่า)
ดัชนี Z: ตั้งค่าระดับเป็นตัวเลข ตราบใดที่ยังมีตำแหน่งอยู่ ระบบจะใช้การตั้งค่าตำแหน่ง
14. CSS Elf Rabbit: เลือกเอกสารโปร่งใส
จุดระบบพิกัดในเบราว์เซอร์มีทิศทางที่ถูกต้องเป็นทิศทางบวก และทิศทางที่อยู่ใต้จุดนั้นเป็นค่าบวก CSS Sprite เป็นวิธีการประมวลผลภาพพื้นหลังของหน้าเว็บ เทพดาก็เป็นภาพพื้นหลังประเภทหนึ่งเช่นกัน
การใช้สไปรท์
เมื่อใช้ fw คุณต้องเปิดแผนที่สไปรท์ในโหมดเปิด เมื่อใช้แผนที่สไปรท์เป็นภาพพื้นหลัง มักจะใช้ร่วมกับตำแหน่งพื้นหลังเพื่อวัดพิกัดขององค์ประกอบในแผนที่สไปรท์ ตัวเลือก
หรือใช้อักษรย่อ: k
15. การมองเห็น CSS
ล้น: ซ่อน ซ่อนการแสดงส่วนที่เกิน: ไม่มี ซ่อนองค์ประกอบแสดงโดยตรง: บล็อก แสดงองค์ประกอบ (ตรงกับ js ดีกว่า) การมองเห็น: ซ่อน ซ่อนองค์ประกอบแสดง: ไม่มี; ซ่อนองค์ประกอบและไม่ได้ครอบครองตำแหน่ง
การมองเห็น: ซ่อนเร้น; ซ่อนองค์ประกอบและครอบครองตำแหน่งเดิม
16. จัดกึ่งกลางรูปภาพและข้อความ
องค์ประกอบ inlne-block ทุกรายการมี default-align:baseline
แนวตั้ง: การจัดตำแหน่งแนวตั้งตรงกลาง;
17. หลีกเลี่ยงการไหลที่ไม่เป็นไปตามมาตรฐาน
ในกระบวนการจัดวางหน้าเว็บ ให้ใช้โฟลว์มาตรฐานหากทำได้
ใช้ Margin-left/Margin-right แล้วตั้งค่าเป็น Auto เพื่อดันกล่องไปทั้งสองด้านด้านนอกโดยอัตโนมัติ
18. ข้อกำหนดในการรวมฉลาก
p สามารถมีแท็กใดๆ ภายใต้สตรีมมาตรฐาน แท็ก p ไม่สามารถมี p และแท็ก title และหมายเหตุชื่อแท็กรายการสามารถมีแท็กอื่นๆ ได้
องค์ประกอบอินไลน์ไม่ควรมีแท็กอื่น
19. สรุปการตั้งค่าความกว้างและความสูง
หลังจากลอยตัว องค์ประกอบสามารถกำหนดความกว้างและความสูงได้ หลังจากวางตำแหน่งสัมบูรณ์แล้ว องค์ประกอบสามารถกำหนดความกว้างและความสูงได้
หลังจากวางตำแหน่งคงที่แล้ว องค์ประกอบสามารถกำหนดความกว้างและความสูงได้
20. อัปเกรดเป็น CSS3
CSS3 และ CSS2: CSS มีประสิทธิภาพและมีโค้ดที่กระชับ
ตัวเลือกคลาสหลอก:
องค์ประกอบลูกคนแรก: ลูกคนแรก องค์ประกอบที่ดีที่สุด: ลูกสุดท้าย องค์ประกอบลูกที่ n: n-child (n); n เป็นเลขคี่สำหรับองค์ประกอบลูก: nth-child (คี่); 2n+1))
องค์ประกอบที่เป็นเลขคู่: ลูกที่ n(คู่); หรือ (ลูกที่ n(2n))
ข้อความเงา: ข้อความเงา: แนวนอน แนวตั้ง เงากล่องเงา: กล่องเงา: แนวนอน แนวตั้ง เงา
พื้นหลัง: พื้นหลัง