�ݺ�ߣ

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

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

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

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

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

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

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
Box border
Style: none, hidden,
dotted, dashed, solid,
double,groove, ridge,
inset, outset
Color: giá trị mã màu
11

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>

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
padding
left
right
bottom
13

BOX PADDING
CSS:
p { border:#F00 solid 1px ; padding-top:5px; padding-left:10px; padding-right:15px;
padding-bottom:20px}

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
padding right
bottom
left
Thứ tự: trên, phải,
dưới, trái

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
margin
left
right
bottom
16

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;}

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 {ﬂoat:left; margin:0 4px 4px 0;}
CSS:
p {ﬂoat: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

FLOAT
float
left
right
float
right
none
inherit
20

CLEAR
Không cho phép thẻ nổi
clear
Both
left
right
clear right
none
inherit
21

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=/slideshow/slide-4-thit-k-web-c-bn/40056818/"../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>
CSS:
p {margin:0 0 10px 0;}
img {float:left; margin:0 4px 4px 0;}
.clearthefloats {clear:both;}
HTML:
<img src=/slideshow/slide-4-thit-k-web-c-bn/40056818/"../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>

CLEAR

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

THUỘC TÍNH VỀ VỊ TRÍ BOX
absolute
relative
fixed
positionstatic inherit

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

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>

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
Đị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

ABSOLUTE
CSS:
p#specialpara {position:absolute; top:25px; left:30px; color:red; background:#EEE;}
XHTML:

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
Đị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

RELATIVE
CSS:
p#specialpara {position:relative; top:25px; left:30px; color:red; background:#EEE;}
XHTML:

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ề
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

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}
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

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, …)
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

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

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

�ݺ�ߣ

�ݺ�ߣ 4 - Thiết kế Web cơ bản

More Related Content

�ݺ�ߣ 4 - Thiết kế Web cơ bản