CSS เป็นสไตล์ชีตแบบเรียงซ้อน ซึ่งเป็นภาษาสำหรับอธิบายลักษณะที่ปรากฏของหน้าเว็บ ข้อดีอย่างหนึ่งของ CSS คือความสามารถในการแทนที่เลย์เอาต์ตารางด้วยเลย์เอาต์แบบบล็อก
มันจำเป็น
โปรแกรมแก้ไขโค้ด HTML HTML
คำแนะนำ
ขั้นตอนที่ 1
สร้างบล็อกแรก ในรูปแบบ HTML จะดูเหมือนแท็ก div ที่มี id 'block01' ในที่นี้ ตัวระบุ block01 ระบุว่าในคำอธิบาย CSS คุณสมบัติทั้งหมดของบล็อกนี้ระบุไว้สำหรับตัวเลือก # block01
ขั้นตอนที่ 2
อธิบายการบล็อกใน CSS ในสไตล์ CSS ให้ระบุชื่อของตัวระบุ (# block01) และในวงเล็บปีกกาจะอธิบายพารามิเตอร์ - ความกว้าง การวางตำแหน่ง ออฟเซ็ต สีพื้นหลัง ฯลฯ ตัวอย่างเช่น อาจมีลักษณะดังนี้: # block01 {width: 150px; ความสูง: 150px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 0px; พื้นหลัง-สี: สีชมพู}. คำอธิบายนี้อนุมานว่ากล่องจะมีความยาว 150 พิกเซลและกว้าง 150 พิกเซล โดยจะอยู่ในตำแหน่งที่แน่นหนาที่มุมซ้ายบนของเอกสาร และพื้นหลังจะเป็นสีชมพู
ขั้นตอนที่ 3
ให้บล็อกมีตำแหน่งสัมพัทธ์ หากคุณใช้การจัดตำแหน่งแบบสัมบูรณ์แต่ไม่สัมพันธ์กันในคำอธิบาย CSS คุณสามารถวางบล็อกได้โดยไม่ต้องใช้การจัดตำแหน่งแบบเข้มงวดในตารางพิกัด แต่สัมพันธ์กับบล็อกอื่นๆ ที่มีอยู่แล้ว เมื่อต้องการทำสิ่งนี้ ให้เปลี่ยนตำแหน่งโค้ด: absolute; ด้านบน: 0px; ซ้าย: 0px ตามตำแหน่ง: ญาติ; ด้านบน: 200px; ซ้าย: 100px
ขั้นตอนที่ 4
ให้บล็อกปัดเศษ ใน CSS คำสั่ง border-radius มีหน้าที่รับผิดชอบในเรื่องนี้ เพิ่มรหัสต่อไปนี้ในสไตล์ชีตของคุณ: border-radius: 8px บล็อกจะมีมุมโค้งมน หากคุณต้องการปัดเศษเฉพาะบางมุม ให้อธิบายรัศมีแยกกันสำหรับแต่ละมุม: border-radius: 8px 8px 0px 0px
ขั้นตอนที่ 5
ให้บล็อกจังหวะ หากต้องการเน้นโครงร่างของบล็อกที่มีเส้นบางๆ ให้เพิ่มโค้ดต่อไปนี้ในคำอธิบาย CSS: border-top: 1px dashed black คำแนะนำนี้หมายความว่าเส้นขอบของบล็อกจะเป็นสีดำและมีความหนาหนึ่งพิกเซล ในกรณีนี้ เส้นชั้นความสูงจะแสดงเป็นเส้นประ (เส้นประ - เส้นประ จุด - จุด เส้นทึบ - เส้นทึบ)
ขั้นตอนที่ 6
ตั้งค่าคุณสมบัติบล็อกที่เหลือ ระบุในคำอธิบาย CSS ว่าควรใช้แบบอักษรใดสำหรับข้อความภายในบล็อก ขนาดแบบอักษร การจัดตำแหน่งและการเยื้องจากขอบของบล็อกควรเป็นอย่างไร คุณสมบัติเหล่านี้อธิบายไว้ในคำจำกัดความ ตระกูลฟอนต์ ขนาดฟอนต์ การจัดข้อความ และช่องว่างภายใน
ขั้นตอนที่ 7
คุณสามารถใช้คุณสมบัติ float เพื่อปรับแต่งโฟลว์ของบล็อกหนึ่งทับอีกบล็อกหนึ่งได้ หากคุณตั้งค่าเป็น "ซ้าย" องค์ประกอบที่เหลือจะไหลไปรอบๆ บล็อกทางด้านซ้าย และ "ขวา" - ทางด้านขวา หากคุณตั้งค่าโฟลตเป็น "ไม่มี" การจัดตำแหน่งบล็อกจะไม่ถูกตั้งค่า คุณสมบัติที่ชัดเจนใน CSS ป้องกันไม่ให้บล็อกไหลไปทางขวา ซ้าย หรือทั้งสองด้าน และแทนที่คำสั่ง float