CSS เป็นภาษาคอมพิวเตอร์ที่ใช้เพื่อแสดงรูปแบบไฟล์ เช่น HTML (แอปพลิเคชันของ Standard Generalized Markup Language) หรือ XML (ชุดย่อยของ Standard Generalized Markup Language)

CSS ไม่เพียงแต่สามารถแก้ไขหน้าเว็บแบบคงที่เท่านั้น แต่ยังสามารถทำงานร่วมกับภาษาสคริปต์ต่างๆ เพื่อจัดรูปแบบองค์ประกอบต่างๆ ของหน้าเว็บแบบไดนามิก

CSS สามารถควบคุมเลย์เอาต์ของตำแหน่งองค์ประกอบในหน้าเว็บได้อย่างแม่นยำระดับพิกเซล รองรับขนาดและสไตล์แบบอักษรเกือบทั้งหมด และมีความสามารถในการแก้ไขออบเจ็กต์ของหน้าเว็บและรูปแบบโมเดล สำหรับการศึกษาเชิงลึก โปรดค้นหา "วิดีโอสอน CSS เว็บไซต์ php Chinese" บน Baidu และเรียนรู้ออนไลน์ฟรี

1. คุณลักษณะทั่วไป

ชื่อ: สามารถทำซ้ำได้, คลาส: ชื่อคลาส, สามารถทำซ้ำได้, หรือมีหลายอัน, ใช้สำหรับ CSS; เช่น

title: title ซึ่งสามารถเพิ่มลงในแท็กได้ เช่น

2. แท็กความสัมพันธ์

ความสัมพันธ์ทางลูกหลาน: ความสัมพันธ์ระหว่างพ่อแม่และลูก (รวมถึงความสัมพันธ์);

ความสัมพันธ์แบบพี่น้อง: ความสัมพันธ์แบบพ่อเดียวกัน;

3.CSS-Cascading Style Sheets

ความคิดเห็น CSS: /เนื้อหาความคิดเห็นถูกเขียนไว้ที่นี่เพื่อให้โปรแกรมเมอร์เห็น และจะไม่ปรากฏบนหน้า/;

กฎไวยากรณ์ CSS: ต้องป้อนสัญลักษณ์ทั้งหมดโดยใช้วิธีป้อนข้อมูลภาษาอังกฤษ เป็นตัวพิมพ์เล็ก และแอตทริบิวต์จะต้องเขียนในวงเล็บปีกกา แต่ละคำสั่งแอตทริบิวต์จะต้องลงท้ายด้วยเครื่องหมายอัฒภาค และค่าแอตทริบิวต์จะต้องมีรูปแบบพิกเซล (px) : คุณลักษณะ: ค่าคุณลักษณะ ;

4. วิธีการแนะนำ CSS

การแนะนำแบบอินไลน์: วิธีการแนะนำการเพิ่มสไตล์ในแท็ก รูปแบบ: เนื้อหา; และ html โครงสร้างไม่ได้ถูกแยกออก ขอบเขตของอิทธิพลอยู่ในแท็กปัจจุบันเท่านั้น: เพิ่ม ในส่วนหัวของหน้าเว็บ การบำรุงรักษาโค้ดค่อนข้างแย่ ไม่มี ตระหนักถึงการแยกโค้ด CSS และโครงสร้าง HTML และขอบเขตของอิทธิพลอยู่ที่หน้าปัจจุบันเท่านั้น

การแนะนำลิงก์ภายนอก: สร้างไฟล์ 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

มรดก:

สืบทอดได้: สี, การจัดแนวข้อความ, เยื้องข้อความ, ขนาดฟอนต์, น้ำหนักฟอนต์, ตระกูลฟอนต์ ไม่สามารถสืบทอดได้: การตกแต่งข้อความ, เส้นขอบ, การแสดง, ระยะขอบ, ลอย, ช่องว่างภายใน หลักฐานสำหรับการสืบทอดที่จะเกิดขึ้นอยู่ระหว่างแท็กที่เป็นของ สำหรับความสัมพันธ์แบบซ้อน สามารถสืบทอดขนาดข้อความได้ แบบอักษรสามารถสืบทอดได้ คุณลักษณะที่เกี่ยวข้องกับข้อความสามารถสืบทอดได้ ความสูงของบรรทัดสามารถสืบทอดได้

คุณสมบัติพิเศษ:

สีข้อความในองค์ประกอบหลักไม่สามารถสืบทอดได้ (เรียงซ้อน)

คาบเกี่ยวกัน: คาบเกี่ยวกันหมายถึงความครอบคลุมของสไตล์

ธรรมชาติของสไตล์แบบเรียงซ้อนไม่เกี่ยวข้องกับลำดับของการเรียกสไตล์ แต่เกี่ยวข้องกับลำดับในการกำหนดสไตล์

หลักฐานสำหรับการเรียงซ้อนที่จะเกิดขึ้น: ความขัดแย้งด้านสไตล์

ลำดับความสำคัญ:

น้ำหนัก: การแนะนำแบบอินไลน์ (1000) > id (100) > คลาส (10) > ป้ายกำกับ (1) > ทั่วไป (0) เพิ่มน้ำหนัก ยิ่งค่ามากขึ้น ลำดับความสำคัญก็จะยิ่งสูงขึ้น

น้ำหนักเท่ากัน และรูปแบบต่อไปนี้จะใช้ได้

10. บันทึกความรู้เพิ่มเติม

การเขียนการเพิ่มประสิทธิภาพแบบฟอร์ม: ชื่อผู้ใช้:ไอคอนรายการรูปแบบ: list-style: noneForm merge: border-collapse:collapse (Set การรวมเส้นขอบตาราง ใช้ได้กับตาราง) Bfc "การจัดรูปแบบบริบท" ล้น:

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

อัตโนมัติ: หากมีการตัดเนื้อหา เบราเซอร์จะแสดงแถบเลื่อนเพื่อดูเนื้อหาที่เหลือ

11. โฟลว์มาตรฐาน: องค์ประกอบระดับบล็อกจะแสดงเป็นหนึ่งบรรทัด โหมดการแสดงโฟลว์มาตรฐาน: โหมดการแสดงผลเริ่มต้นขององค์ประกอบ

12. แบบลอยตัว: แบบลอยตัวใช้เพื่อแก้ปัญหาการตัดข้อความและรูปภาพ ใช้เพื่อสร้างแถบนำทางและเค้าโครงหน้าเว็บ

การใช้งาน: ลอย: ซ้าย | . ขวา คุณสมบัติ: ลอยสิ่งที่คุณต้องการ

องค์ประกอบที่ตั้งค่าให้ลอยไม่อยู่ในตำแหน่งเดิม (นอกสคริปต์) ทำให้องค์ประกอบระดับบล็อกสามารถแสดงเป็นแบบลอยในบรรทัดเดียวได้

ในระหว่างกระบวนการแปลงโหมด ให้ใช้จอแสดงผลหากทำได้

ล้างโฟลต:

คำจำกัดความ: การล้างโฟลตไม่ได้หมายถึงการลบโฟลตการหักล้าง หมายถึงผลกระทบของการล้างโฟลต ให้ความสนใจกับช่วงเวลาการใช้งาน: เมื่อองค์ประกอบลูกถูกตั้งค่าให้ลอยและองค์ประกอบหลักไม่มีความสูง เค้าโครงหน้าจะสับสน ในกรณีนี้ ให้เคลียร์โฟลต

ล้างวิธีการลอยตัว: [x] หมายเหตุ: เพิ่มองค์ประกอบบล็อกว่าง (

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))

ข้อความเงา: ข้อความเงา: แนวนอน แนวตั้ง เงากล่องเงา: กล่องเงา: แนวนอน แนวตั้ง เงา

พื้นหลัง: พื้นหลัง