Viết tắt trong CSS

Một số cách viết tắt trong CSS
1. Màu sắc
– Viết theo cách thông thường

#000000
#336699

– Viết tắt

#000
#369

2. Các cạnh của hộp
– Các cách viết

• property:value1;
• property:value1 value2;
• property:value1 value2 value3;
• property:value1 value2 value3 value4;

– Giải thích:

• Chỉ có một giá trị: giá trị đó cho tất cả các cạnh
• Có hai giá trị: giá trị đó một đại diện cho top and bottom và một đại diện right and left
• Có ba giá trị: một đại diện cho top, một đại diện cho right and và còn lại là của left, bottom
• Có bốn giá trị: top, right, bottom, left

3. Margin và Padding
– Viết theo cách thông thường

 margin-top:1em;
 margin-right:0;
 margin-bottom:2em;
 margin-left:0.5em;

– Viết tắt

margin:1em 0 2em 0.5em;

Áp dụng luôn cho padding
4. Borders
– Viết theo cách thông thường

border-awidth:1px;
border-style:solid;
border-color:#000;

– Viết tắt

border:1px solid #000;

– Viết theo cách thông thường

border-top-awidth:1px;
border-right-awidth:2px;
border-bottom-awidth:3px;
border-left-awidth:4px;

– Viết tắt

border-awidth:1px 2px 3px 4px;

– Viết theo cách thông thường

border-right:1px solid #000;
bborder-bottom:1px solid #000;

– Viết tắt

border:1px solid #000;
border-awidth:0 1px 1px 0;

5. Background
– Viết theo cách thông thường

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

– Viết tắt

background:#f00 url(background.gif) no-repeat fixed 0 0;

Những giá trị như sau sẽ được dùng nếu như bạn bỏ qua giá trị của property

• color: transparent
• image: none
• repeat: repeat
• attachment: scroll
• position: 0% 0%

6. Font
– Viết theo cách thông thường

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

– Viết tắt

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

Những giá trị như sau sẽ được dùng nếu như bạn bỏ qua giá trị của property

• font-style: normal
• font-variant: normal
• font-weight: normal
• font-size: medium
• line-height: normal
• font-family: depends on the user agent

7. List
– Viết theo cách thông thường

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

– Viết tắt

list-style:square inside url(image.gif);

8. Outlines
– Viết theo cách thông thường

outline-color:#f00;
outline-style:solid;
outline-awidth:2px;

– Viết tắt

outline:#f00 solid 2px;

Mục đích của viết tắt nhằm giảm kích thước file css, giúp cho website chúng ta load nhanh hơn. Bài viết này mình dịch và viết lại theo cách mình hiểu từ bài viết của Roger Johansson. Bạn có thể xem bài gốc bằng tiếng Anh tại đây