5 cách viết tắt thường dùng trong CSS

Viết tắt trong CSS giúp bạn tiết kiệm khá nhiều thời gian, code gọn gàng hơn, dễ quản lý và chỉnh sửa hơn, giúp giảm dung lượng file CSS.

5 cách viết tắt thường dùng trong CSS

Bên dưới là 5 cách viết tắt thường được sử dụng trong CSS

1, Viết tắt với thuộc tính Margin và Padding

Trong bài viết Margin và Padding mình đã đề cập đến cách viết tắt đối với 2 thuộc tính này, bạn có thể tìm hiểu thêm trong bài viết Margin và Padding trong CSS.

Cách viết tắt đối với Margin và Padding hoàn toàn giống nhau:

.selector { margin: 2px 4px 6px 8px }

Giá trị được tính từ vị trị Top

Các vị trí tuân theo quy luật chiều kim đồng hồ (Top, Right, Bottom, Left) bắt đầu từ vị trí Top.
Từ vị trí trên ta có thể tính được thành phần .selector có margin như sau:

- margin-top: 2px
- margin-right: 4px
- margin-bottom: 6px
- margin-left: 8px

Khi có một cạnh nào đó bị khuyết, thì nó sẽ lấy giá trị của cạnh đối diện

.selector { margin: 3px 4px 5px

Ở đây cạnh left bị khuyết, đo đó sẽ lấy giá trị của cạnh đối diện (right) làm giá trị => margin-left: 4px

.selector { margin: 2px 4px }

Ở đây cạnh left và right bị khuyết, do đó cạnh dưới sẽ lấy giá trị của cạnh trên (2px), cạnh left sẽ lấy giá trị của cạnh right (4px).

.selector { margin: 5px }

Ở ví dụ này chỉ có một cạnh được khai báo, thì tất cả các cạnh đều có margin là 5px

2, Viết tắt đối với thuộc tính Border

Thứ tự để viết tắt cho thuộc tính border như sau:

border-width » border-style » border-color

a, Viết tắt cho tất cả các cạnh

.selector { border: 1px solid #cfcfcf }

a, Viết tắt cho từng cạnh riêng biệt

.selector { border-top: 1px solid #cfcfcf }

3, Viết tắt với thuộc tính Background

Quy tắc viết với thuộc tính background như sau:

Selector { background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] }

Tuy nhiên bạn không cần khai báo đầy đủ các giá trị trên, nếu một trong các giá trị bị khuyết, thì nó sẽ lấy giá trị mặc định của thuộc tính đó.

Ví dụ:

.mybox{bakground: url (background.gif) no-repeat top right }

4, Viết tắt với thuộc tính list-style

Thứ tự viết tắt với thuộc tính list-style như sau:

list-style-type » list-style-position » list-style-image

Ví dụ:

ul li{list-style: circle inside url(icon.gif) }

5, Viết tắt với thuộc tính font

Quy tắc viết tắt đối với thuộc tính Font

Selector {font :[font-style] [font-variant] [font-weight] [font-size] [font-family] }

Ví dụ:

h1 { font-style: bold 12px arial}

KẾT LUẬN

Có thể bạn sẽ hơi bỡ ngỡ khi làm quen với cách viết tắt trong CSS, Nhưng khi bạn nắm bắt được thì nó thật sự hữu ích đối với bạn.