เรียนรู้วิธีใช้คุณสมบัติชวเลข CSS เพื่อให้สไตล์ชีตของคุณใช้พื้นที่น้อยลง
คุณสมบัติชวเลข CSS ช่วยให้คุณเขียนน้อยลงและทำมากขึ้น
สมมติว่าคุณต้องการจัดรูปแบบ h1 . ของคุณ องค์ประกอบที่มีจอร์เจีย ตระกูลแบบอักษร ขนาดแบบอักษร 42 พิกเซล และความสูงของบรรทัด 1.25
ขั้นแรก มาดูวิธี CSS ปกติด้านล่าง:
h1 {
font-family: "Georgia", "serif";
font-size: 42px;
line-height: 1.25;
}ตอนนี้เปรียบเทียบกับการใช้ CSS แบบอักษร วิธีการจดชวเลขด้านล่าง:
h1 {
font: 42px/1.25 "Georgia", "serif";
}รวมสามบรรทัดเป็นหนึ่งเดียว!
คุณสมบัติชวเลขทำงานโดยการรวมการประกาศสไตล์ต่างๆ ไว้ในบรรทัดเดียว และอนุญาตให้โค้ดของคุณใช้พื้นที่น้อยลง
รหัสชวเลขอาจไม่สามารถอ่านได้เหมือนวิธีปกติ ซึ่งมีความหมายมากกว่า อย่างไรก็ตาม นั่นเป็นเพราะมันใหม่ มันจะกลายเป็นลักษณะที่สองอย่างรวดเร็วเมื่อคุณเริ่มใช้งาน
มาดูตัวอย่างคุณสมบัติ CSS ชวเลขอีกหนึ่งตัวอย่างเพื่อขับเคลื่อนจุดโฮม
นี่คือปุ่มที่มีช่องว่างภายในด้านบนและด้านล่าง 12px และช่องว่างภายในด้านซ้ายและขวา 20px:
มันใช้คุณสมบัติช่องว่างภายในต่อไปนี้:
button {
padding-top: 12px;
padding-right: 20px;
padding-bottom: 12px;
padding-left: 20px;
}
ตอนนี้ ลองใช้ชวเลข padding คุณสมบัติและทำให้ CSS ป่องน้อยลง:
button {
padding: 12px 20px; /* top-bottom, left-right */
}รวมสี่บรรทัดเป็นหนึ่งเดียว!
padding ชวเลขด้านบนเรียกว่าชวเลขสองค่าเพราะใช้สองค่า
- ค่าแรก
12pxสอดคล้องกับpadding-topและpadding-bottomคุณสมบัติ. - The
20pxค่าที่สอดคล้องกับpadding-leftและpadding-right.
นี่คือรายการคุณสมบัติจดชวเลขใน CSS:
ทั้งหมด, แอนิเมชั่น, พื้นหลัง, เส้นขอบ, border-block-end, border-block-start, border-bottom, border-color, border-image, border-inline-end, border-inline-start, border-left, border- รัศมี, เส้นขอบด้านขวา, แบบเส้นขอบ, ขอบบน, ความกว้างของเส้นขอบ, กฎของคอลัมน์, คอลัมน์, flex, flex-flow, แบบอักษร, ช่องว่าง, กริด, พื้นที่กริด, กริดคอลัมน์, กริดแถว, กริด แม่แบบ, ลักษณะรายการ, ระยะขอบ, มาสก์, ออฟเซ็ต, เค้าร่าง, ล้น, ช่องว่างภายใน, เนื้อหาสถานที่, รายการสถานที่, ตัวสถานที่, ระยะขอบเลื่อน, ช่องว่างภายในเลื่อน, การตกแต่งข้อความ, การเน้นข้อความ, การเปลี่ยนแปลง
ดูเอกสารชวเลข CSS ฉบับสมบูรณ์ของ Mozilla
ไม่ใช่คุณสมบัติชวเลขทั้งหมดที่ควรค่าแก่การจดจำเพราะมีโอกาสที่คุณจะใช้ไม่บ่อยนัก อย่างไรก็ตาม ชวเลขสองตัวอย่างจากบทช่วยสอนนี้ font และ padding , เป็นคำย่อที่ใช้บ่อยที่สุดบางส่วน
คุณสมบัติชวเลขต่อไปนี้ก็ควรค่าแก่การพิจารณาเช่นกัน (เพราะคุณจะใช้มันเป็นจำนวนมาก) margin , background , border , animation , transition , border-radius .
