fpt polytechnic, Thiết kế Web cơ bản

1. Bài 4
Định vị trí box

2. NHẮC LẠI BÀI TRƯỚC
Giới thiệu về font
Một số thuộc tính quan trọng của Font
Một số thuộc tính quan trọng của Text
Kích thước của font, text trong HTML
Cách viết CSS rút gọn (shorthand)
Giới thiệu về font
Một số thuộc tính quan trọng của Font
Một số thuộc tính quan trọng của Text
Kích thước của font, text trong HTML
Cách viết CSS rút gọn (shorthand)
Bài 4 - Định vị trí box 2

3. MỤC TIÊU BÀI HỌC
Tìm hiểu về box (hộp), cấu trúc box trên một trang
của website:
Tầm quan trọng
Kích thước
Vị trí
Thuộc tính của box:
Thuộc tính về nội dung
Thuộc tính về vị trí
Thuộc tính về hiển thị
Tìm hiểu về box (hộp), cấu trúc box trên một trang
của website:
Tầm quan trọng
Kích thước
Vị trí
Thuộc tính của box:
Thuộc tính về nội dung
Thuộc tính về vị trí
Thuộc tính về hiển thị
Bài 4 - Định vị trí thẻ 3

4. BOX, CẤU TRÚC BOX TRÊN TRANG WEB

5. BOX, CẤU TRÚC BOX
Là thành phần cấu thành nên trang của website
Sự sắp xếp hợp lý các box sẽ tạo nên bố cục trang
Bài 4 - Định vị trí thẻ 5

6. BOX, CẤU TRÚC BOX
Bài 4 - Định vị trí thẻ 6

7. BOX, CẤU TRÚC BOX
Bài 4 - Định vị trí thẻ 7

8. BOX, CẤU TRÚC BOX
background
image
background
color
border
margin
padding
Bài 4 - Định vị trí thẻ
boxkích thước
(width)
background
image
padding
nội dung
8

9. BOX, CẤU TRÚC BOX
Bài 4 - Định vị trí thẻ 9

10. BOX, CẤU TRÚC BOX
Border (đường viền): bạn có thể đặt độ dày, kiểu
dáng, và màu sắc cho đường viền.
Margin (lề): thiết lập khoảng cách giữa box và các
thành phần bên ngoài, xung quanh (tính từ đường
viền ra ngoài)
Padding (khoảng đệm): thiết lập khoảng cách từ
đường viền vào trong nội dung của box
Bài 4 - Định vị trí thẻ
Border (đường viền): bạn có thể đặt độ dày, kiểu
dáng, và màu sắc cho đường viền.
Margin (lề): thiết lập khoảng cách giữa box và các
thành phần bên ngoài, xung quanh (tính từ đường
viền ra ngoài)
Padding (khoảng đệm): thiết lập khoảng cách từ
đường viền vào trong nội dung của box
10

11. BOX BORDER
Box border
Width: thin, medium,
thick, hoặc số cụ thể
(ems, px, %)
Style: none, hidden,
dotted, dashed, solid,
double,groove, ridge,
inset, outset
Bài 4 - Định vị trí thẻ
Box border
Style: none, hidden,
dotted, dashed, solid,
double,groove, ridge,
inset, outset
Color: giá trị mã màu
11

12. BOX BORDER
CSS:
p { border-color:#F00; border-style:solid; border-width: 1px}
Hoặc
p { border:#F00 solid 1px}
XHTML:
<p>Bạn đã được cảnh báo!</p>
Bài 4 - Định vị trí thẻ 12

13. BOX PADDING
top
left
Padding: thiết lập khoảng cách từ đường viền vào trong nội dung của box
Bài 4 - Định vị trí thẻ
padding
left
right
bottom
13

14. BOX PADDING
CSS:
p { border:#F00 solid 1px ; padding-top:5px; padding-left:10px; padding-right:15px;
padding-bottom:20px}
Bài 4 - Định vị trí thẻ 14

15. BOX PADDING
Áp dụng được cách viết rút gọn (shorthand)
CSS:
p { border:#F00 solid 1px ; padding:5px 15px 20px 10px}
top
Thứ tự: trên, phải,
dưới, trái
Bài 4 - Định vị trí thẻ 15
padding right
bottom
left
Thứ tự: trên, phải,
dưới, trái

16. BOX MARGIN
margin
top
left
Margin: thiết lập khoảng cách giữa box và các thành phần bên ngoài
Bài 4 - Định vị trí thẻ
margin
left
right
bottom
16

17. BOX MARGIN
CSS:
.boxone { border:#F00 solid 1px; margin-top:5px; margin-left:20px; margin-right:20px;
margin-bottom:25px}
.boxtwo { border:#903 solid 1px; margin-top:5px; margin-right:10px; margin-
bottom:12px; margin-left:8px;}
Bài 4 - Định vị trí thẻ 17

18. FLOATING & CLEARING

19. FLOAT
Dùng để nổi những thành phần (box, image, text,
…) trên trang
Là nền tảng để tạo bố cục nhiều cột
CSS:
p {float:left; margin:0 4px 4px 0;}
Bài 4 - Định vị trí thẻ
CSS:
p {float:left; margin:0 4px 4px 0;}
19
Đoạn văn bản được thả nổi về phía
bên phải so với ảnh

20. FLOAT
float
left
right
Bài 4 - Định vị trí thẻ
float
right
none
inherit
20

21. CLEAR
Không cho phép thẻ nổi
clear
Both
left
right
Bài 4 - Định vị trí thẻ
clear right
none
inherit
21

22. CLEAR
Dùng để cố định những thành phần (box, image,
text, …) trên page
CSS:
p {margin:0 0 10px 0;}
img {float:left; margin:0 4px 4px 0;}
.clearthefloats {clear:both;}
HTML:
<img src="../images/dartmoor-view.jpg" />
<p> Here’s a lovely picture of Dartmoor... </p>
<img src="../images/english-cottage.jpg" />
<p> My sister lived in this delightful cottage
... </p>
<div class="clearthefloats"></div>
<img src="../images/winsor-castle_walls.jpg" />
<p> The Queen of England...</p>
Bài 4 - Định vị trí thẻ 22
CSS:
p {margin:0 0 10px 0;}
img {float:left; margin:0 4px 4px 0;}
.clearthefloats {clear:both;}
HTML:
<img src="../images/dartmoor-view.jpg" />
<p> Here’s a lovely picture of Dartmoor... </p>
<img src="../images/english-cottage.jpg" />
<p> My sister lived in this delightful cottage
... </p>
<div class="clearthefloats"></div>
<img src="../images/winsor-castle_walls.jpg" />
<p> The Queen of England...</p>

23. CLEAR
Bài 4 - Định vị trí thẻ 23

24. THUỘC TÍNH VỀ VỊ TRÍ BOX

25. THUỘC TÍNH VỀ VỊ TRÍ BOX
absolute
relative
fixed
positionstatic inherit
Bài 4 - Định vị trí thẻ 25

26. STATIC
Là giá trị mặc định của thuộc tính position
Mỗi thành phần được đặt sau thành phần khác theo
dòng chảy trang
Không xảy ra hiện tượng chồng chéo giữa nhiều
thành phần
Không cần thiết phải sử dụng các yếu tố căn chỉnh
tọa độ: top, left, right, bottom
Bài 4 - Định vị trí thẻ
Là giá trị mặc định của thuộc tính position
Mỗi thành phần được đặt sau thành phần khác theo
dòng chảy trang
Không xảy ra hiện tượng chồng chéo giữa nhiều
thành phần
Không cần thiết phải sử dụng các yếu tố căn chỉnh
tọa độ: top, left, right, bottom
26

27. STATIC
CSS:
p#specialpara {color:red; background:#EEE; position:static}
XHTML:
<p id="specialpara">Đây là đoạn thứ ba của ví dụ về định vị. Đoạn này có
một ID để ta có thể thay đổi giá trị vị trí của nó mà không ảnh hưởng tới các
đoạn khác.Mục đích của ví dụ này là thể hiện cho bạn thấy sự khác biệt giữa
bốn giá trị định vị: static, relative, absolute và fixed. </p>
Bài 4 - Định vị trí thẻ 27

28. ABSOLUTE
Định vị hộp theo tọa độ tuyệt đối, thay đổi vị trí
theo các thuộc tính:
Top
Left
Right
Bottom
Có thể xếp chồng đè lên các hộp khác
Không phụ thuộc vào margin, float
Bài 4 - Định vị trí thẻ
Định vị hộp theo tọa độ tuyệt đối, thay đổi vị trí
theo các thuộc tính:
Top
Left
Right
Bottom
Có thể xếp chồng đè lên các hộp khác
Không phụ thuộc vào margin, float
28

29. ABSOLUTE
CSS:
p#specialpara {position:absolute; top:25px; left:30px; color:red; background:#EEE;}
XHTML:
<p id="specialpara">Đây là đoạn thứ ba của ví dụ về định vị. Đoạn này có
một ID để ta có thể thay đổi giá trị vị trí của nó mà không ảnh hưởng tới các
đoạn khác.Mục đích của ví dụ này là thể hiện cho bạn thấy sự khác biệt giữa
bốn giá trị định vị: static, relative, absolute và fixed. </p>
Bài 4 - Định vị trí thẻ 29

30. RELATIVE
Định vị tương đối so với hộp ngữ cảnh của nó
Kết hợp căn chỉnh tọa độ với:
Top
Left
Right
Bottom
Có thể kết hợp với margin, padding để căn chỉnh
không xảy ra hiện tượng chồng chéo
Bài 4 - Định vị trí thẻ
Định vị tương đối so với hộp ngữ cảnh của nó
Kết hợp căn chỉnh tọa độ với:
Top
Left
Right
Bottom
Có thể kết hợp với margin, padding để căn chỉnh
không xảy ra hiện tượng chồng chéo
30

31. RELATIVE
CSS:
p#specialpara {position:relative; top:25px; left:30px; color:red; background:#EEE;}
XHTML:
<p id="specialpara">Đây là đoạn thứ ba của ví dụ về định vị. Đoạn này có
một ID để ta có thể thay đổi giá trị vị trí của nó mà không ảnh hưởng tới các
đoạn khác.Mục đích của ví dụ này là thể hiện cho bạn thấy sự khác biệt giữa
bốn giá trị định vị: static, relative, absolute và fixed. </p>
Bài 4 - Định vị trí thẻ 31

32. FIXED VÀ INHERIT
Fixed (định vị cố định): tương tự như định vị tuyệt
đối, ngoại trừ việc ngữ cảnh định vị của hộp là công
cụ hiển thị (ví dụ như cửa sổ trình duyệt hoặc màn
hình của một thiết bị cầm tay).
Hộp không di chuyển khi trang được cuộn khi sử
dụng fixed
Inherit: kế thừa được thuộc tính định vị của các hộp
liền kề
Bài 4 - Định vị trí thẻ
Fixed (định vị cố định): tương tự như định vị tuyệt
đối, ngoại trừ việc ngữ cảnh định vị của hộp là công
cụ hiển thị (ví dụ như cửa sổ trình duyệt hoặc màn
hình của một thiết bị cầm tay).
Hộp không di chuyển khi trang được cuộn khi sử
dụng fixed
Inherit: kế thừa được thuộc tính định vị của các hộp
liền kề
32

33. THUỘC TÍNH DISPLAY

34. THUỘC TÍNH DISPLAY
Cung cấp khả năng mạnh mẽ, cho phép bạn những
khả năng như buộc một thẻ cục bộ lấp đầy thẻ chứa
nó
Phạm vi ứng dụng: tạo menu drop down
CSS:
p {display:inline;}
a {display:block}
Bài 4 - Định vị trí thẻ 34
Cung cấp khả năng mạnh mẽ, cho phép bạn những
khả năng như buộc một thẻ cục bộ lấp đầy thẻ chứa
nó
Phạm vi ứng dụng: tạo menu drop down
CSS:
p {display:inline;}
a {display:block}
display
block inline

35. BOX, CẤU TRÚC BOX
Block: cho phép những thành phần (đoạn văn, tiêu
đề, danh sách, …) được hiển thị
Inline: cho phép những thành phần được hiển thị
trên trình duyệt và chỉ xuất hiện trên dòng mới khi
không có không gian hiển thị
Áp dụng mạnh mẽ để dàn layout cho những thành
phần trên trang web (menu dropdown, …)
Bài 4 - Định vị trí thẻ
Block: cho phép những thành phần (đoạn văn, tiêu
đề, danh sách, …) được hiển thị
Inline: cho phép những thành phần được hiển thị
trên trình duyệt và chỉ xuất hiện trên dòng mới khi
không có không gian hiển thị
Áp dụng mạnh mẽ để dàn layout cho những thành
phần trên trang web (menu dropdown, …)
35

36. TỔNG KẾT
Tất cả những thành phần được bố trí trên trang web
được gọi là box
Thuộc tính chính của box bao gồm:
Border
Margin
Padding
Nội dung
Background
Dùng thuộc tính float để làm nổi box và clear để hủy
nổi
Tất cả những thành phần được bố trí trên trang web
được gọi là box
Thuộc tính chính của box bao gồm:
Border
Margin
Padding
Nội dung
Background
Dùng thuộc tính float để làm nổi box và clear để hủy
nổi
Bài 4 - Định vị trí thẻ 36

37. TỔNG KẾT
Thuộc tính quan trọng của box:
Thuộc tính về vị trí (position): thường sử dụng giá trị
relative, static
Thuộc tính về hiển thị (display): thường được áp
dụng trong cách dàn menu dropdown
Thuộc tính quan trọng của box:
Thuộc tính về vị trí (position): thường sử dụng giá trị
relative, static
Thuộc tính về hiển thị (display): thường được áp
dụng trong cách dàn menu dropdown
Bài 4 - Định vị trí thẻ 37