6. 3. Border
Quy tắc
border: <width> <style> <color>
border-<position>: <width> <style> <color>
Trong đó
Width: <length> | thin | medium | thick
Style: none | hidden | dotted | dashed | solid |
double | groove | ridge | inset | outset
Color: Màu sắc theo tên hoặc theo mã màu
Position: top | right | bottom | left
7. 3. Border
Các thuộc tính
border-color: Mã màu
border-style: Kiểu
border-width: Length hoặc tên chiều rộng
border-<position>-color: Mã màu
border-<position>-style: Kiểu
border-<position>-width: Length hoặc tên chiều
rộng
8. 3. Border
Border Image
border-image: <source> <slice> <width> <outset>
<repeat>
Source: url(<đường dẫn file ảnh>)
Slide: Tỷ lệ cắt ảnh mẫu
Width: Độ rộng viền
Outset: Độ giãn cách biên
Repeat: stretch|repeat|round|initial|inherit;
Tham khảo: https://css-tricks.com/understanding-
border-image/
9. 3. Border
Border Image – Các thuộc tính
border-image-source: url(<path image>);
border-image-slice: 20%;
border-image-width:
number|%|auto|initial|inherit;
border-image-outset:
number|%|auto|initial|inherit;
border-image-repeat:
stretch|repeat|round|initial|inherit;
10. 3. Border
Border Image – Gọi theo trình duyệt
-moz-border-image: …; /* Old Firefox */
-webkit-border-image: …; /* Safari */
-o-border-image: …; /* Opera */
border-image: …; /* General */
12. 3. Border
Các thuộc tính khác
box-sizing: border-box;
border-collapse: collapse; /* For Table */
border-spacing: 10px; /* For Table */
13. 4. Background
Quy tắc
background: <color> <image> <position/size> <repeat>
<origin> <clip> <attachment>;
Trong đó
Color: Tên màu hoặc mã màu
Image: url(path), có thể sử dụng 1 hoặc nhiều ảnh, theo thứ
tự sếp trước sau.
Size: auto|length|percentage|cover|contain|initial|inherit;
Repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
Origin: padding-box|border-box|content-box|initial|inherit;
Clip: border-box|padding-box|content-box|initial|inherit;
Attachment: scroll|fixed|local|initial|inherit;
14. 4. Background Position
• Theo tên:
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
• Theo đơn vị %
x% y%
• Theo đơn vị pixel
xpx ypx
• Theo kế thừa
initial | inherit
15. 4. Background
Các thuộc tính
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
27. 8. Bonus – Flex
Flexbox là gì
– Từ CSS3 bổ xung thêm khái niệm Flexbox
hay còn gọi là hộp linh hoạt
– Cho phép ta dễ dàng căn chỉnh hay định vị
các phần tử con bên trong một cách linh hoạt
và đơn giản nhất
Quy tắc
display: -webkit-flex; /* Safari */
display: flex;
28. 8. Bonus – Flex
Tham khảo: https://css-
tricks.com/snippets/css/a-guide-to-flexbox/
29. 8. Bonus – Flex
Các thuộc tính
Định nghĩa độ rộng của 1 item
(-webkit-)flex-basis: number|auto|initial|inherit;
Note: Nếu flex-grow có giá trị, thì cái này cho tất cả là vô
nghĩa
Tăng đều tương đối của tất cả phần tử
(-webkit-)flex-grow: number|initial|inherit;
Giảm đều tương đối của tất cả phần tử
(-webkit-)flex-shrink: number|initial|inherit;
Định nghĩa hướng sắp xếp
(-webkit-)flex-direction: row|row-reverse|column|column-
reverse|initial|inherit;
30. 8. Bonus – Flex
Các thuộc tính
Wrap
(-webkit-)flex-wrap: nowrap|wrap|wrap-
reverse|initial|inherit;
Hướng và Wrap
(-webkit-)flex-flow: flex-direction flex-
wrap|initial|inherit;
Định nghĩa tất cả
(-webkit-)flex: flex-grow flex-shrink flex-
basis|auto|initial|inherit;