ในการเขียน CSS นั้น หลาย ๆ คนอาจจะไม่ทราบว่าสามารถย่อให้สั้นลงได้ (จริงเหรอเนี่ย !!!) โดยการใส่ค่า(value) ให้กับคุณสมบัติ(property) พร้อมกันหลาย ๆ ค่า วิธีการเช่นนี้เราเรียกว่า Shorthand นั่นเอง property แต่ละตัวเวลาเขียนแบบย่อแล้วจะเป็นอย่างไร ไปดู

Font (ตัวอักษร)
การใช้งานปกติ :
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

เขียนแบบย่อ :
font: 1em/1.5em bold italic serif

Background (พื้นหลัง)
การใช้งานปกติ :
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed

เขียนแบบย่อ :
background: #fff url(image.gif) no-repeat top left fixed

Lists (ลิสต์รายการ)
การใช้งานปกติ :
list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

เขียนแบบย่อ :
list-style: disc outside url(image.gif)

Margin and padding (ระยะประชิดขอบนอกและขอบใน)
การเขียนคุณสมบัติแบบย่อของ margin และ padding นั้น สามารถแยกได้เป็น 4 กรณี ซึ่งขึ้นอยู่กับความแตกต่างของค่าแต่ละด้าน (บน, ขวา, ล่าง, ซ้าย)
กรณีแรก : ค่าทั้ง 4 ด้านไม่เหมือนกันเลย
การใช้งานปกติ :
margin-top: 11px;
margin-right: 22px;
margin-bottom: 33px;
margin-left: 44px

เขียนแบบย่อ :
margin: 11px 22px 33px 44px (การเรียงกันของค่าทั้ง 4 ด้านนั้น จะเรียงจากด้านบน, ขวา, ล่าง และซ้าย จำง่าย ๆ คือเรียงตามเข็มนาฬิกาโดยเริ่มจากด้านบนเป็นหลัก)

กรณีที่ 2 : มีค่าที่ไม่เหมือนกัน 3 ค่า (ใช้กับกรณีที่ด้านขวาและซ้ายเท่ากัน)
การใช้งานปกติ :
margin-top: 55em;
margin-right: 66em;
margin-bottom: 77em;
margin-left: 66em

เขียนแบบย่อ :
margin: 55em 66em 77em (ค่าแรกคือด้านบน ค่าที่สองคือด้านซ้ายและขวา ค่าที่สามคือด้านล่าง)

กรณีที่ 3 : มีค่าที่ไม่เหมือนกัน 2 ค่า (ใช้กับกรณีที่ด้านบนเท่ากับด้านล่างและด้านซ้ายเท่ากับด้านขวา)
การใช้งานปกติ :
margin-top: 8%;
margin-right: 1%;
margin-bottom: 8%;
margin-left: 1%

เขียนแบบย่อ :
margin: 8% 1% (ค่าแรกคือด้านบนและล่าง ค่าที่สองคือด้านซ้ายและขวา)

กรณีที่ 4 : มีค่าเหมือนกันทั้ง 4 ด้านเลย
การใช้งานปกติ :
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

เขียนแบบย่อ :
margin: 0

Border (เส้นขอบ)
การใช้งานปกติ :
border-right-width: 1px;
border-right-color: black;
border-right-style: solid

เขียนแบบย่อ :
border-right: 1px black solid

หรือถ้าเราต้องการเส้นขอบทั้ง 4 ด้านที่เหมือนกันก็เขียนคุณสมบัติแบบย่อเหมือนเดิมนะคับ
การใช้งานปกติ :
border-width: 1px;
border-color: black;
border-style: solid

เขียนแบบย่อ :
border: 1px black solid

แต่ถ้าหากเราต้องการเส้นขอบที่บางด้านอาจจะไม่เหมือนกัน เช่น หากเราต้องการทำเส้นขอบแบบในรูป

ปกติแล้วจะเขียนแบบนี้ :
border-right: 8px solid #336;
border-bottom: 8px solid #336;
border-top: 10px solid #ccf;
border-left: 10px solid #ccf;

เราก็จะสามารถลดการเขียน CSS ลงได้โดยอาศัยหลักการที่ว่า CSS นั้นจะเขียนไล่บรรทัดจากบนลงล่าง ลงมาเรื่อย ๆ ถ้าเราเขียนคุณสมบัติเหมือน ๆ กันหลาย ๆ ที่ การแสดงผลจะยึดค่าสุดท้ายเป็นหลัก เพราะฉะนั้นเราจะลดการเขียนแบบด้านบนเป็นอย่างนี้ครับ

แบบที่ลดแล้ว :
border: 8px solid #336;
border-top: 10px solid #ccf;
border-left: 10px solid #ccf;

อธิบายก็คือ เราสั่งให้ทุกด้านมีเส้นขอบแบบ 8px solid #336 ก่อน จากนั้นเราก็เปลี่ยนแปลงด้านที่เหลือที่เราต้องการโดยการเพิ่มต่อท้ายเข้าไป เพราะถ้าค่ามันซ้ำมันก็จะเรียกใช้งานค่าล่างแทน

นี่ก็เป็นอีกแบบหนึ่งที่ลดแล้ว :
border: 8px solid #336;
border-width: 10px 8px 8px 10px;
border-color: #ccf #336 #336 #ccf

การเขียนคุณสมบัตแบบย่อนั้น อันที่จริงแล้วค่าของคุณสมบัติบางอย่างสามารถสลับตำแหน่งกันได้ บางอันก็ห้ามสลับ ผมเลยตัดปัญหาโดนการไม่อธิบายว่าค่าไหนสลับได้ ค่าไหนสลับไม่ได้นะครับ(หยิ่ง:P) เพราะในความเป็นจริง เวลาเราเขียนคุณสมบัติแบบย่อก็คงไม่เขียนสลับไปสลับมาอยู่แล้ว เคยใ้ช้แบบไหนมาก็ใช้แบบนั้นดีกว่าครับ ถ้าเกิดสลับแล้วมันไม่แสดงผลขึ้นมาหละแย่เลย

อ้างอิงข้อมูลบางส่วนจาก : http://www.webcredible.co.uk/user-friendly-resources/css/css-shorthand-properties.shtml