Hướng dẫn background-image css shorthand - background-image css tốc ký

CSS shorthand giúp chúng ta tiết kiệm thời gian cho việc code, thay vì sử dụng cách viết hết tất cả các thuộc tính, trong một số trường hợp chúng ta có thể gom chúng lại cho gọn hơn. Bài viết này mình sẽ giới thiệu các bạn làm điều đó. Cùng đọc bài viết nhé ^^. giúp chúng ta tiết kiệm thời gian cho việc code, thay vì sử dụng cách viết hết tất cả các thuộc tính, trong một số trường hợp chúng ta có thể gom chúng lại cho gọn hơn. Bài viết này mình sẽ giới thiệu các bạn làm điều đó. Cùng đọc bài viết nhé ^^.

CSS Background

Thuộc tính

.css-shorthand {
  background: #ffffff url("img.png") no-repeat right top;
}

0 cho phép chúng ta kết hợp các thuộc tính

.css-shorthand {
  background: #ffffff url("img.png") no-repeat right top;
}

0 khác giúp giảm số dòng code ^^.

background viết gọn cho những thuộc tính dưới: viết gọn cho những thuộc tính dưới:

• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment

Thay vì sử dụng các thuộc tính này trên mỗi dòng code, chúng ta có thể đơn giản viết gọn chúng lại chỉ với một dòng code 👏

Thay vì viết thế này:

.css-shorthand {
  background-color: #ffffff;
  background-image: url("img.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Chúng ta có thể viết

.css-shorthand {
  background: #ffffff url("img.png") no-repeat right top;
}

CSS Border

Khi set

.css-shorthand {
  background: #ffffff url("img.png") no-repeat right top;
}

2 cho element chúng ta cũng có thể viết gọn lại như sau:

Thay vì viết:

.css-shorthand {
  border-width: 1px;
  border-style: dashed;
  border-color: #fff;
}

Ta có thể viết gọn lại thành:

.css-shorthand {
  border: 1px dashed #fff;
}

Chúng ta có thể viết gộp 3 thuộc tính lại thành 1 dòng. Nhìn ngắn gọn và dễ hiểu đúng không 😁

CSS Font

Khi set Font cho element ta có thể sử dụng cách viết ngắn gọn sau:Font cho element ta có thể sử dụng cách viết ngắn gọn sau:

Thay vì viết:

.css-shorthand {
  font-style: italic;
  font-weight: 600;
  font-style: 16px;
  line-height: 1.3;
  font-family: monospace;
}

Ta có thể viết gọn lại thành:

.css-shorthand {
  font: italic 600 16px/1.3 monospace;
}

Chúng ta có thể viết gộp 3 thuộc tính lại thành 1 dòng. Nhìn ngắn gọn và dễ hiểu đúng không 😁

CSS FontCSS inset là một cách viết tắt tương ứng với các thuộc tính top, right, bottom, left. Nó giống với cú pháp viết tắt như khi dùng

.css-shorthand {
  background: #ffffff url("img.png") no-repeat right top;
}

3 hay

.css-shorthand {
  background: #ffffff url("img.png") no-repeat right top;
}

4.

Khi set Font cho element ta có thể sử dụng cách viết ngắn gọn sau:

.css-shorthand {
  top: 5px;
  right: 10px;
  bottom: 5px;
  left: 10px;
}

Ta có gộp chúng lại nếu bạn cần:

.css-shorthand {
  inset: 5px 10px 5px 10px; /* top right bottom left */
}

CSS Inset

Thuộc tính CSS inset là một cách viết tắt tương ứng với các thuộc tính top, right, bottom, left. Nó giống với cú pháp viết tắt như khi dùng

.css-shorthand {
  background: #ffffff url("img.png") no-repeat right top;
}

3 hay

.css-shorthand {
  background: #ffffff url("img.png") no-repeat right top;
}

4.

Ta có thể viết:

.css-shorthand {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}  

Thành như sau:

.css-shorthand {
  padding: 10px 20px; /* top/bottom: 10px left/right: 20px */
}

Padding and Marginshorthand, sử dụng cú pháp viết gọn này có thể giúp chúng ta giảm thời gian viết code, cải thiện tốc độ tải trang vì dung lượng file css được giảm thiểu rất đáng kể.

cả

.css-shorthand {
  background: #ffffff url("img.png") no-repeat right top;
}

5,

.css-shorthand {
  background: #ffffff url("img.png") no-repeat right top;
}

4 và

.css-shorthand {
  background: #ffffff url("img.png") no-repeat right top;
}

3 có cú pháp viết tắt giống nhau.shorthand có thể khiến chúng ta khó đọc, có thể gây ra nhầm lẫn. Tuy nhiên chúng ta không thể phủ nhận lợi ích của cách viết shorthand. Do đó chúng ta hãy sử dụng chúng một cách hợp lí nhé ^^.

Thay vì ta viết thế này:

Ta có thể viết gọn thành:

1. Như vậy là mình đã giới thiệu cho các bạn một số cách viết shorthand, sử dụng cú pháp viết gọn này có thể giúp chúng ta giảm thời gian viết code, cải thiện tốc độ tải trang vì dung lượng file css được giảm thiểu rất đáng kể.
2. Trong một số trường hợp dùng shorthand có thể khiến chúng ta khó đọc, có thể gây ra nhầm lẫn. Tuy nhiên chúng ta không thể phủ nhận lợi ích của cách viết shorthand. Do đó chúng ta hãy sử dụng chúng một cách hợp lí nhé ^^.