Hướng dẫn lập trình web với PHP - Ngày 5

1. Hướng dẫn lập trình Web
Ngày 5
Nguyễn Như Tuấn

2. Style Layout
1. Padding
2. Margin
3. Border
4. Background
5. Position
6. Float
7. Z-Index

3. Style Layout

4. 1. Padding
Quy tắc
padding: <top> <right> <bottom> <left>
padding: <top> <right & left> <bottom>
padding: <top & bottom> <right & left>
padding: < top & bottom & right & left >

5. 2. Margin
Quy tắc
margin: <top> <right> <bottom> <left>
margin: <top> <right & left> <bottom>
margin: <top & bottom> <right & left>
margin: < top & bottom & right & left >

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 */

11. 3. Border
Border Radius
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Sử dụng tool: http://border-radius.com/

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

16. 5. Position
Quy tắc
position:
static|absolute|fixed|relative|initial|inherit;
static: Vị trí tĩnh với tọa độ 0x0 theo parent
absolute: Vị trí tương đối theo parent có vị trí
khác static. Và nó nổi lên trên các đối tượng
khác.
fixed: Có vị trí theo Window browser
relative: Vị trí tương đối với parent

17. 5. Position
Các thuộc tính đi kèm với fixed, absolute và
relative
top: Tọa độ trên
bottom: Tọa độ dưới
left: Tọa độ trái
right: Tọa độ phải

18. 6. Float
Quy tắc
float: none|left|right|initial|inherit;
left: dồn trái
right: dồn phải

19. 6. Float error

20. 6. Float fix by clearfix

21. 6. Float fix by clearfix
.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
* html .clearfix{
zoom:1
}
*:first-child+html .clearfix{
zoom:1
}
Tham khảo thêm: http://www.smashingmagazine.com/2007/05/css-float-theory-things-
you-should-know/

22. 7. Z-Index
Quy tắc
z-index: auto|number|initial|inherit;

23. 8. Bonus
Display
Cursor
Width, Height, Max Width, Max Height
Flex và các thuộc tính của Flex
Align Content
Align Items
Align Self
SVN, GIT

24. 8. Bonus - Display
Quy tắc
display: value;
Trong đó
Value:
inline
block
flex
inline-block
inline-flex
inline-table
list-item
run-in
table
table-caption
table-column-group
table-header-group
table-footer-group
table-row-group
table-cell
table-column
table-row
none
initial
inherit

25. 8. Bonus – Cursor
Quy tắc
cursor: value;
Trong đó
Value:
Thao khảo thêm:
http://www.w3schools.co
m/cssref/pr_class_cursor
.asp
default
move
pointer
wait
not-allowed

26. 8. Bonus – Width, Height
Quy tắc
width: length;
min-width: length;
max-width: length;
height: length;
min-height: length;
max-height: length;

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;

31. 8. Bonus – Sắp xếp trong Flex
align-content
(-webkit-)align-content:
stretch|center|flex-
start|flex-end|space-
between|space-
around|initial|inherit;

32. 8. Bonus – Sắp xếp trong Flex
align-items
(-webkit-)align-items:
stretch|center|flex-
start|flex-
end|baseline|initial|inherit
;

33. 8. Bonus – Sắp xếp trong Flex
align-self
(-webkit-)align-self:
auto|stretch|center|flex-
start|flex-
end|baseline|initial|inherit
;

34. 8. Bonus – Sắp xếp trong Flex
justify-content
(-webkit-)justify-content:
flex-start|flex-
end|center|space-
between|space-
around|initial|inherit;

35. 8. Bonus – Sắp xếp trong Flex
order
(-webkit-)order:
number|initial|inherit;

36. 8. Bonus – GIT, SVN
GIT và SVN
Thuyết trình