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:
1 | .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
1 | .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
1 | .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).
1 | .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
1 | .selector { border: 1px solid #cfcfcf } |
a, Viết tắt cho từng cạnh riêng biệt
1 | .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:
1 | 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ụ:
1 | .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ụ:
1 | 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
1 | Selector {font :[font-style] [font-variant] [font-weight] [font-size] [font-family] } |
Ví dụ:
1 | h1 { font-style: bold 12px arial} |
KẾT LUẬN
Nếu có bất kỳ khó khăn gì, bạn có thể comment lại, tôi sẽ giải đáp những thắc mắc của bạn.
Ý kiến bạn đọc [ 0 ]
Ý kiến của bạn