Skip to main content
0
CSSWeb Technologies

CSS Shorthand ที่จะทำให้คุณเขียน CSS ง่าย ๆ ใน 1 บรรทัด

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

ผู้เขียน Kanthima M. – BorntoDev Co., Ltd.

ทำไมต้องเขียน CSS Shorthand ?

  • ช่วยปรับปรุงโค้ด สามารถอ่านและทำความเข้าใจโค้ดได้ง่ายมากยิ่งขึ้น
  • ช่วยปรับปรุงประสิทธิภาพของการโหลดหน้าเว็บ

 

🖥️ Background Shorthand
ช่วยให้เราสามารถกำหนดคุณสมบัติต่าง ๆ บนพื้นหลังได้ตามต้องการ เช่น สี ขนาด รูปภาพ ตำแหน่ง 

🔹 Old

.container {
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
}

 

🔸 Shorthand

.container{
background: #000 url(images/bg.gif) no-repeat left top;
}

 

🖥️ Border Shorthand
ใช้กำหนดคุณสมบัติต่าง ๆ ของเส้นขอบ เช่น ความหนา ความบาง และสีของเส้น เป็นต้น

🔹 Old 

.container{
   border-width: 1px;
   border-style: solid;
   border-color: #000;
}

 

🔸 Shorthand

.container{
border: 1px solid #000;
}

 

🖥️ Font Shorthand
ใช้กำหนดคุณสมบัติต่าง ๆ ให้กับตัวอักษรบนหน้าเว็บ เช่น ฟอนต์, ขนาด, และรูปแบบ เป็นต้น

🔹 Old

.container{
font-style:italic;
font-weight:bold;
font-size:.8em;
line-height:1.5;
font-family:Arial, Helvetica, sans-serif
}

 

🔸 Shorthand

.container{
   font: italic bold .8em/1.5 Arial, Helvetica, sans-serif;
}

 

🖥️ Inset Shorthand
ใช้กำหนดตำแหน่งให้กับ Element เช่น บน ล่าง ซ้าย ขวา

🔹 Old

 .container{
top: 10px;
right: 4px;
bottom: 4px;
left: 10px;
}

 

🔸 Shorthand

.container{
/* top | right | bottom | left */
inset: 10px 4px 4px 10px;
}

 

🖥️ Padding Shorthand
ใช้กำหนดค่าให้กับ Padding เพื่อกำหนดหรือเพิ่มช่องว่างให้กับ Element ต่าง ๆ

🔹 Old

.container{
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}

 

🔸 Shorthand

.container{
   /* top | right | bottom | left */
   padding: 10px 5px 10px 5px;
}

 

🖥️ Margin Shorthand
ใช้กำหนดค่าให้กับ Margin เพื่อกำหนดหรือเพิ่มช่องว่างให้กับ Element ต่าง ๆ ใช้งานคล้ายกับ Padding

🔹 Old

.container{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

🔸 Shorthand

.container{
/* top | right | bottom | left */
margin: 10px 10px 10px 10px;
}

 

และทั้งหมดนี้คือ CSS Shorthand ที่เรานำมาฝากเพื่อน ๆ ลองไปปรับใช้กับโปรเจกต์กันดูนะ ^^ และหากบทความนี้ผิดพลาดตรงไหน ก็ขออภัยมา ณ ที่นี้ด้วยนะคะ 

**หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน

และ เทคโนโลยีของตัวเอง ?**

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

Kanthima Muangsen

Author Kanthima Muangsen

More posts by Kanthima Muangsen
Close Menu

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

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า