Bài 4 Định vị trí box
Bài 4Định vị trí box
NHẮC LẠI BÀI TRƯỚC
Giới thiệu về fontMột số thuộc tính quan trọng của FontMột số thuộc tính quan trọng của TextKích thước của font, text trong HTMLCách viết CSS rút gọn (shorthand)
Giới thiệu về fontMột số thuộc tính quan trọng của FontMột số thuộc tính quan trọng của TextKích thước của font, text trong HTMLCá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 trangcủa website:
Tầm quan trọngKích thướcVị trí
Thuộc tính của box:Thuộc tính về nội dungThuộ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 trangcủa website:
Tầm quan trọngKích thướcVị trí
Thuộc tính của box:Thuộc tính về nội dungThuộ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 websiteSự 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
BOX, CẤU TRÚC BOX
Bài 4 - Định vị trí thẻ 6
BOX, CẤU TRÚC BOX
Bài 4 - Định vị trí thẻ 7
BOX, CẤU TRÚC BOX
backgroundimage
backgroundcolor
border
margin
padding
Bài 4 - Định vị trí thẻ
boxkích thước
(width)
backgroundimage padding
nội dung
8
BOX, CẤU TRÚC BOX
Bài 4 - Định vị trí thẻ 9
BOX, CẤU TRÚC BOX
Border (đường viền): bạn có thể đặt độ dày, kiểudá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ácthành phần bên ngoài, xung quanh (tính từ đườngviề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ểudá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ácthành phần bên ngoài, xung quanh (tính từ đườngviề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
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
BOX BORDER
CSS:p { border-color:#F00; border-style:solid; border-width: 1px}Hoặcp { border:#F00 solid 1px}XHTML:<p>Bạn đã được cảnh báo!</p>
Bài 4 - Định vị trí thẻ 12
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ẻ
paddingleft
right
bottom13
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
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
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ẻ
marginleft
right
bottom16
BOX MARGINCSS:.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
FLOATING & CLEARING
FLOAT
Dùng để nổi những thành phần (box, image, text,…) trên trangLà 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íabên phải so với ảnh
FLOAT
float
left
right
Bài 4 - Định vị trí thẻ
floatright
none
inherit
20
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
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>
CLEAR
Bài 4 - Định vị trí thẻ 23
THUỘC TÍNH VỀ VỊ TRÍ BOX
THUỘC TÍNH VỀ VỊ TRÍ BOX
absolute
relative
fixed
positionstatic inherit
Bài 4 - Định vị trí thẻ 25
STATIC
Là giá trị mặc định của thuộc tính positionMỗi thành phần được đặt sau thành phần khác theodòng chảy trangKhông xảy ra hiện tượng chồng chéo giữa nhiềuthành phầnKhông cần thiết phải sử dụng các yếu tố căn chỉnhtọa độ: top, left, right, bottom
Bài 4 - Định vị trí thẻ
Là giá trị mặc định của thuộc tính positionMỗi thành phần được đặt sau thành phần khác theodòng chảy trangKhông xảy ra hiện tượng chồng chéo giữa nhiềuthành phầnKhông cần thiết phải sử dụng các yếu tố căn chỉnhtọ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ữabốn giá trị định vị: static, relative, absolute và fixed. </p>
Bài 4 - Định vị trí thẻ 27
ABSOLUTE
Định vị hộp theo tọa độ tuyệt đối, thay đổi vị trítheo các thuộc tính:
TopLeftRightBottom
Có thể xếp chồng đè lên các hộp khácKhô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:
TopLeftRightBottom
Có thể xếp chồng đè lên các hộp khácKhông phụ thuộc vào margin, float
28
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ữabốn giá trị định vị: static, relative, absolute và fixed. </p>
Bài 4 - Định vị trí thẻ 29
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:
TopLeftRightBottom
Có thể kết hợp với margin, padding để căn chỉnhkhô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:
TopLeftRightBottom
Có thể kết hợp với margin, padding để căn chỉnhkhô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:<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ữabốn giá trị định vị: static, relative, absolute và fixed. </p>
Bài 4 - Định vị trí thẻ 31
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ôngcụ hiển thị (ví dụ như cửa sổ trình duyệt hoặc mànhì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 fixedInherit: kế thừa được thuộc tính định vị của các hộpliề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ôngcụ hiển thị (ví dụ như cửa sổ trình duyệt hoặc mànhì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 fixedInherit: kế thừa được thuộc tính định vị của các hộpliền kề
32
THUỘC TÍNH DISPLAY
THUỘC TÍNH DISPLAY
Cung cấp khả năng mạnh mẽ, cho phép bạn nhữngkhả năng như buộc một thẻ cục bộ lấp đầy thẻ chứanó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ữngkhả năng như buộc một thẻ cục bộ lấp đầy thẻ chứanóPhạm vi ứng dụng: tạo menu drop down
CSS:p {display:inline;}a {display:block}
display
block inline
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 khikhông có không gian hiển thịÁp dụng mạnh mẽ để dàn layout cho những thànhphầ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 khikhông có không gian hiển thịÁp dụng mạnh mẽ để dàn layout cho những thànhphầ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à boxThuộc tính chính của box bao gồm:
BorderMarginPaddingNội dungBackground
Dùng thuộc tính float để làm nổi box và clear để hủynổi
Tất cả những thành phần được bố trí trên trang webđược gọi là boxThuộc tính chính của box bao gồm:
BorderMarginPaddingNội dungBackground
Dùng thuộc tính float để làm nổi box và clear để hủynổi
Bài 4 - Định vị trí thẻ 36
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, staticThuộc tính về hiển thị (display): thường được ápdụ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, staticThuộc tính về hiển thị (display): thường được ápdụng trong cách dàn menu dropdown
Bài 4 - Định vị trí thẻ 37