วิธีเขียน CSS ที่มีประสิทธิภาพมากที่สุดวิธีหนึ่งคือการใช้ตัวย่อ การใช้คำย่อจะทำให้ไฟล์ CSS ของคุณเล็กลงและอ่านง่ายขึ้น การทำความเข้าใจคำย่อของคุณสมบัติ CSS ยังเป็นหนึ่งในทักษะพื้นฐานของวิศวกรพัฒนาส่วนหน้า วันนี้เราสรุปคำย่อของคุณสมบัติ CSS อย่างเป็นระบบ
ตัวย่อสี
ตัวย่อของสีเป็นวิธีที่ง่ายที่สุด เมื่อค่าสีอยู่ในเลขฐานสิบหก หากค่าของแต่ละสีเท่ากันก็สามารถเขียนได้เป็น:
| สี: #113366 |
สามารถเรียกย่อว่า
| สี: #136 |
คำย่อสามารถใช้ได้ทุกที่ที่ใช้ค่าสีเลขฐานสิบหก เช่น สีพื้นหลัง สีเส้นขอบ สีข้อความ เงา กล่องเงา เป็นต้น
ขนาดกล่อง
มีการใช้แอตทริบิวต์หลักสองประการที่นี่: ระยะขอบและระยะห่างจากขอบ เราใช้ระยะขอบเป็นตัวอย่าง และระยะห่างจากขอบก็เหมือนกัน กล่องมีสี่ทิศทาง ขึ้น ลง ซ้าย และขวา และแต่ละทิศทางจะมีระยะขอบ:
| ขอบบน:1px; ขอบขวา:1px; ขอบปุ่ม: 1px; ขอบซ้าย:1px; |
ค่าทั้งสี่นี้สามารถย่อรวมกันได้:
| ระยะขอบ:1px 1px 1px 1px; |
ลำดับอักษรย่อคือ บน->ขวา->ล่าง->ซ้าย ทิศทางตามเข็มนาฬิกา หากค่าของด้านตรงข้ามเท่ากันก็สามารถละเว้นได้:
| อัตรากำไรขั้นต้น:1px;//ระยะขอบในสี่ทิศทางจะเท่ากัน ซึ่งเทียบเท่ากับอัตรากำไรขั้นต้น:1px 1px 1px 1px; ระยะขอบ:1px 2px;//ระยะขอบด้านบนและด้านล่างเป็นทั้ง 1px และระยะขอบซ้ายและขวาเป็นทั้ง 2px ซึ่งเทียบเท่ากับระยะขอบ:1px 2px 1px 2px ระยะขอบ:1px 2px 3px;//ระยะขอบด้านขวาและระยะขอบด้านซ้ายเหมือนกัน ซึ่งเทียบเท่ากับระยะขอบ:1px 2px 3px 2px; ระยะขอบ:1px 2px 1px 3px;//โปรดทราบว่าแม้ว่าระยะขอบบนและล่างที่นี่จะเป็น 1px ทั้งคู่ แต่คำย่อไม่สามารถใช้ได้ที่นี่ |
ชายแดน
Border เป็นแอตทริบิวต์ที่ค่อนข้างยืดหยุ่น โดยมีแอตทริบิวต์ย่อย 3 แบบ ได้แก่ border-width, border-style และ border-color
| ความกว้างของเส้นขอบ: หมายเลข + หน่วย; สไตล์เส้นขอบ: ไม่มี ||. ประ ||. ร่องคู่ ||. ขอบสี: สี; |
สามารถเรียกคำย่อได้ตามลำดับความกว้าง รูปแบบ และสี:
| เส้นขอบ:5px ทึบ #369; |
บางครั้งเส้นขอบสามารถเขียนได้ง่ายกว่าและค่าบางค่าสามารถละเว้นได้ แต่โปรดทราบว่าค่าใดที่จำเป็น คุณยังสามารถทดสอบได้:
| border:groove red; //ทายสิว่าเส้นขอบนี้กว้างแค่ไหน? border:solid; //หน้าตาจะเป็นอย่างไร? border:5px; // โอเคไหม? border:5px red; // โอเคไหม? - border:red; // โอเคไหม? - - |
ดังที่คุณเห็นจากโค้ดด้านบน ความกว้างเริ่มต้นของเส้นขอบคือ 3px และสีเริ่มต้นคือสีดำ ในตัวย่อของเส้นขอบ ต้องใช้รูปแบบเส้นขอบ
คุณยังสามารถใช้คำย่อสำหรับแต่ละขอบได้:
| ขอบบน:4px ทึบ #333; เส้นขอบขวา:3px ทึบ #666; ขอบล่าง:3px ทึบ #666; ขอบซ้าย:4px ทึบ #333; |
คุณยังสามารถใช้คำย่อสำหรับแต่ละแอตทริบิวต์ได้:
| border-width: 1px 2px 3px; // สามารถใช้ค่าได้สูงสุดสี่ค่า กฎตัวย่อจะคล้ายกับตัวย่อของขนาดกล่องเหมือนกันด้านล่าง สไตล์เส้นขอบ: ร่องประทึบประ; ขอบสี:สีแดงสีฟ้าสีขาวสีดำ; |
โครงร่าง
โครงร่างคล้ายกับเส้นขอบ ข้อแตกต่างคือเส้นขอบจะส่งผลต่อโมเดลกล่อง แต่โครงร่างจะไม่ส่งผลต่อ
| โครงร่างกว้าง: หมายเลข + หน่วย; ||. ประ ||. ร่องคู่ ||. โครงร่างสี: สี; |
สามารถเรียกสั้น ๆ ได้ดังนี้:
| โครงร่าง: 1px สีแดงทึบ; |
ในทำนองเดียวกัน ในตัวย่อของโครงร่าง จำเป็นต้องมีสไตล์เค้าร่างด้วย และอีกสองค่าจะเป็นทางเลือก
พื้นหลัง
พื้นหลังเป็นหนึ่งในคำย่อที่ใช้บ่อยที่สุดและมีคุณสมบัติดังต่อไปนี้:
| สีพื้นหลัง: สี ||. #hex ||. RGB (% || 0-255) ||. ภาพพื้นหลัง: url (); พื้นหลังซ้ำ: ทำซ้ำ || ทำซ้ำ-y ||. ตำแหน่งพื้นหลัง: XY ||. (บน||ล่าง||กลาง) (ซ้าย||ขวา||กลาง); สิ่งที่แนบมากับพื้นหลัง: เลื่อน || แก้ไข; |
คำย่อของพื้นหลังสามารถปรับปรุงประสิทธิภาพของ CSS ได้อย่างมาก:
| พื้นหลัง:#fff url (img.png) ไม่ทำซ้ำ 0 0; |
คำย่อสำหรับพื้นหลังยังมีค่าเริ่มต้นบางค่าด้วย:
| พื้นหลัง:โปร่งใส ไม่มี เลื่อนซ้ำด้านบนซ้าย; |
ค่าของคุณสมบัติพื้นหลังไม่ได้รับการสืบทอด คุณสามารถประกาศได้เพียงค่าเดียวเท่านั้น และค่าเริ่มต้นจะถูกนำไปใช้กับค่าอื่น ๆ
แบบอักษร
ตัวย่อแบบอักษรเป็นคำที่ใช้กันมากที่สุดและยังเป็นหนึ่งในวิธีเขียน CSS ที่มีประสิทธิภาพอีกด้วย
แบบอักษรมีคุณสมบัติดังต่อไปนี้:
| รูปแบบตัวอักษร: ปกติ ||. ตัวเอียง ||. แบบอักษร: ปกติ || . ตัวอักษรน้ำหนัก: ปกติ ||. โดดเด่นยิ่งขึ้น ||. ขนาดตัวอักษร: (ตัวเลข+หน่วย) ||. (xx-small - xx-large); ความสูงของบรรทัด: ปกติ ||. (ตัวเลข+หน่วย); ตระกูลแบบอักษร: ชื่อ "ชื่อเพิ่มเติม"; |
แต่ละแอตทริบิวต์ของแบบอักษรก็มีค่าเริ่มต้นเช่นกัน การจำค่าเริ่มต้นเหล่านี้ค่อนข้างสำคัญ:
| รูปแบบตัวอักษร: ปกติ; แบบอักษร: ปกติ; น้ำหนักตัวอักษร: ปกติ; ขนาดตัวอักษร: สืบทอด; ความสูงของเส้น: ปกติ; ตระกูลแบบอักษร: สืบทอด; |
ที่จริงแล้วตัวย่อของฟอนต์เป็นสิ่งที่ต้องใช้ความระมัดระวังมากที่สุดในบรรดาตัวย่อเหล่านี้ การประมาทเลินเล่อเล็กน้อยอาจทำให้เกิดผลที่ไม่คาดคิด ดังนั้น หลายคนจึงไม่เห็นด้วยกับการใช้ตัวย่อของฟอนต์
แต่นี่เป็นคู่มือเล็กๆ ฉันเชื่อว่าจะช่วยให้คุณเข้าใจตัวย่อของแบบอักษรได้ดีขึ้น:
สไตล์รายการ
บางทีแอตทริบิวต์ที่ใช้บ่อยที่สุดของรายการคือ:
| รายการสไตล์:ไม่มี |
จะล้างลักษณะรายการเริ่มต้นทั้งหมด เช่น ตัวเลขหรือจุด
list-style ยังมีคุณสมบัติสามประการ:
| list-style-type:none ||. วงกลม ||. ทศนิยม || รายการสไตล์ตำแหน่ง: ภายใน || ภายนอก || รายการสไตล์รูปภาพ: (url) ||. ไม่มี || |
คุณลักษณะเริ่มต้นของรายการสไตล์มีดังนี้:
| list-style:disc ข้างนอกไม่มี |
ควรสังเกตว่าหากรูปภาพถูกกำหนดในรูปแบบรายการ ลำดับความสำคัญของรูปภาพจะสูงกว่าประเภทรายการ ตัวอย่างเช่น:
| รายการสไตล์: วงกลมภายใน url (../img.gif) |
ในตัวอย่างนี้ หากมี img.gif อยู่ สัญลักษณ์วงกลมที่ตั้งไว้ก่อนหน้านี้จะไม่แสดง
PS: อันที่จริง list-style-type มีสไตล์ที่มีประโยชน์มากมาย นักเรียนที่สนใจสามารถดูได้ที่: https://developer.mozilla.org/en/CSS/list-style-type
รัศมีเส้นขอบ (รัศมีมุม)
Border-radius เป็นแอตทริบิวต์ที่เพิ่มเข้ามาใน CSS3 ซึ่งใช้ในการสร้างเส้นขอบแบบโค้งมน ข้อเสียปัจจุบันของแอตทริบิวต์นี้คือแต่ละเบราว์เซอร์รองรับต่างกัน IE ยังไม่รองรับ Gecko (firefox) และ webkit (safari/chrome) จำเป็นต้องใช้คำนำหน้าส่วนตัว -moz- และ -webkit- ตามลำดับ สิ่งที่น่าสับสนยิ่งกว่านั้นก็คือ ถ้าแอตทริบิวต์ border-radius ของมุมเดียวเขียนแตกต่างกันมากขึ้นระหว่างเบราว์เซอร์ทั้งสอง คุณจะต้องเขียนแอตทริบิวต์ส่วนตัวจำนวนมาก:
| -moz-border-radius-bottomleft:6px; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; ขอบล่างซ้ายรัศมี: 6px; ขอบบนซ้ายรัศมี: 6px; ขอบบนขวารัศมี: 6px; |
เอ่อ คุณตื่นตาตื่นใจแล้วเหรอ? นี่เป็นเพียงเพื่อให้บรรลุสถานการณ์ที่มุมซ้ายบนไม่ถูกปัดเศษและอีกสามมุมถูกปัดเศษ ดังนั้นสำหรับรัศมีชายแดน Shenfei ขอแนะนำอย่างยิ่งให้ใช้ตัวย่อ:
| -moz-border-รัศมี: 0 6px 6px; -webkit-border-radius:0 6px 6px; รัศมีเส้นขอบ: 0 6px 6px; |
นี่ง่ายกว่ามาก PS: น่าเสียดายที่ Safari ล่าสุด (4.0.5) ยังไม่รองรับตัวย่อนี้... (ขอบคุณ @fireyy)
เพียงเท่านี้ มีคุณสมบัติอื่นใดที่สามารถย่อได้อีกหรือไม่? ทุกคนยินดีที่จะหารือร่วมกัน