Skip to content

Commit acef32b

Browse files
duca7duca7
committed
Update README.md
1 parent 5beb317 commit acef32b

File tree

1 file changed

+109
-5
lines changed

1 file changed

+109
-5
lines changed

‎translations/vn-VN/README.md

Lines changed: 109 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ Một bộ gồm những tips để giúp kỹ năng CSS trở nên pro
1919

2020
## Protips
2121

22-
1. [Dùng CSS Reset](#use-a-css-reset)
23-
1. [Thừa kế `box-sizing`](#inherit-box-sizing)
24-
1. [Dùng `unset` thay vì đặt lại tất cả thuộc tính](#use-unset-instead-of-resetting-all-properties)
25-
1. [Dùng `:not()` để Áp dụng / Không áp dụng các đường viền trên Điều hướng](#use-not-to-applyunapply-borders-on-navigation)
22+
1. [Dùng CSS Reset](#dùng-css-reset)
23+
1. [Thừa kế `box-sizing`](#thừa-kế-box-sizing)
24+
1. [Dùng `unset` thay vì đặt lại tất cả thuộc tính](#dùng-unset-thay-vi-dat-lai-tat-ca-thuoc-tinh)
25+
1. [Dùng `:not()` để Áp dụng / Không áp dụng các đường viền trên Điều hướng](#dùng-not-de-ap-dung-khong-ap-dung-cac-duong-vien-tren-dieu-huong)
2626
1. [Kiểm tra xem Phông chữ có được cài đặt cục bộ không](#check-if-font-is-installed-locally)
2727
1. [Thêm `line-height` cho `body`](#add-line-height-to-body)
2828
1. [Đặt `:focus` cho Form Elements](#set-focus-for-form-elements)
@@ -47,6 +47,110 @@ Một bộ gồm những tips để giúp kỹ năng CSS trở nên pro
4747
1. [Đặt `display: none` trên ngắt dòng được sử dụng làm khoảng cách](#set-display-none-on-line-breaks-used-as-spacing)
4848

4949

50+
### Dùng CSS Reset
5051

51-
### Use a CSS Reset
52+
Css resets giúp thực thi tính nhất quán về kiểu dáng trên các trình duyệt khác nhau với một phương tiện chặn rõ ràng cho các yếu tố tạo kiểu.Bạn có thể sử dụng thư viện CSS Reset như [Normalize](http://necolas.github.io/normalize.css/),hoặc bạn có thể sử dụng phương pháp đặt lại đơn giản hơn:
5253

54+
```css
55+
*,
56+
*::before,
57+
*::after {
58+
box-sizing: border-box;
59+
margin: 0;
60+
padding: 0;
61+
}
62+
```
63+
64+
Bây giờ các phần tử sẽ bị loại bỏ magins và padding, và `box-sizing` cho phép bạn quản lý bố cục bằng CSS box model.
65+
66+
#### [Demo](http://codepen.io/AllThingsSmitty/pen/kkrkLL)
67+
68+
**Note:** Nếu bạn làm theo [Inherit `box-sizing`](#inherit-box-sizing) mẹo dưới đây, bạn có thể chọn không bao gồm `box-sizing` thuộc tính trong CSS reset của bạn.
69+
70+
<sup>[back to table of contents](#table-of-contents)</sup>
71+
72+
73+
### Thừa kế `box-sizing`
74+
75+
`box-sizing` được thừa kế từ `html`:
76+
77+
```css
78+
html {
79+
box-sizing: border-box;
80+
}
81+
82+
*,
83+
*::before,
84+
*::after {
85+
box-sizing: inherit;
86+
}
87+
```
88+
89+
Điều này giúp bạn dễ dàng thay đổi `box-sizing` hơn trong các plugin hoặc các thành phần khác thúc đẩy hành vi khác.
90+
91+
#### [Demo](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
92+
93+
<sup>[back to table of contents](#table-of-contents)</sup>
94+
95+
96+
### Dùng `unset` thay vì đặt lại tất cả thuộc tính
97+
98+
Khi đặt lại thuộc tính của một phần tử, không cần thiết phải đặt lại từng thuộc tính riêng lẻ:
99+
100+
```css
101+
button {
102+
background: none;
103+
border: none;
104+
color: inherit;
105+
font: inherit;
106+
outline: none;
107+
padding: 0;
108+
}
109+
```
110+
111+
Bạn có thể chỉ định tất cả các thuộc tính của một phần tử bằng cách sử dụng tất cả các viết tắt. Đặt giá trị thành không đặt sẽ thay đổi thuộc tính của phần tử thành giá trị ban đầu của chúng:
112+
113+
```css
114+
button {
115+
all: unset;
116+
}
117+
```
118+
119+
**Note:** `all` thì không được hỗ trợ trên IE11 và hiện đang được xem xét hỗ trợ trong Edge. `unset` thì cũng vậy.
120+
121+
<sup>[back to table of contents](#table-of-contents)</sup>
122+
123+
124+
### Dùng `:not()` để Áp dụng / Không áp dụng các đường viền trên Điều hướng
125+
126+
Thay vì đặt trên border...
127+
128+
```css
129+
/* add border */
130+
.nav li {
131+
border-right: 1px solid #666;
132+
}
133+
```
134+
135+
...và sau đó lấy nó ra khỏi phần tử cuối cùng...
136+
137+
```css
138+
/* remove border */
139+
.nav li:last-child {
140+
border-right: none;
141+
}
142+
```
143+
144+
...dùng `:not()` pseudo-class để chỉ áp dụng cho các phần tử bạn muốn:
145+
146+
```css
147+
.nav li:not(:last-child) {
148+
border-right: 1px solid #666;
149+
}
150+
```
151+
152+
Ở đây, CSS selector được đọc như một con người sẽ mô tả nó.
153+
154+
#### [Demo](http://codepen.io/AllThingsSmitty/pen/LkymvO)
155+
156+
<sup>[back to table of contents](#table-of-contents)</sup>

0 commit comments

Comments
 (0)