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ề 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 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 background image background color border margin padding Bài 4 - Định vị trí thẻ box kích thước (width) background image 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ể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 [...]... class="clearthefloats"> The Queen of England Bài 4 - Định vị trí thẻ 22 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 relative absolute static Bài 4 - Định vị trí thẻ fixed position inherit 25 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... 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;} Đoạn văn bản được thả nổi về phía bên phải so với ảnh Bài 4 - Định vị trí thẻ 19 FLOAT left float right none inherit Bài 4 - Định vị trí thẻ 20 CLEAR Không cho phép thẻ nổi Both left clear right none inherit Bài 4 - Định vị trí thẻ 21 CLEAR CSS: Dùng để cố định những p {margin:0... absolute và fixed 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ô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ẻ 32 THUỘC TÍNH... box top padding left right bottom Bài 4 - Định vị trí thẻ 13 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 left padding Thứ tự: trên, phải, dưới, trái right bottom Bài 4 - Định vị. .. Định vị trí thẻ 15 BOX MARGIN Margin: thiết lập khoảng cách giữa box và các thành phần bên ngoài top margin left right bottom Bài 4 - Định vị trí thẻ 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; marginbottom:12px; margin-left:8px;} Bài 4 - Định vị trí thẻ... 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: 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ẻ 28 ABSOLUTE CSS: p#specialpara {position:absolute; top:25px; left:30px; color:red; background:#EEE;} XHTML: Đây là đoạn thứ ba của ví dụ về định vị Đoạn này.. .BOX BORDER Width: thin, medium, thick, hoặc số cụ thể (ems, px, %) Box border Style: none, hidden, dotted, dashed, solid, double,groove, ridge, inset, outset Color: giá trị mã màu Bài 4 - Định vị trí thẻ 11 BOX BORDER CSS: p { border-color:#F00; border-style:solid; border-width: 1px} Hoặc p { border:#F00 solid 1px} XHTML: Bạn đã được cảnh báo! Bài 4 - Định vị trí thẻ 12 BOX PADDING... 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 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: 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. .. bottom Bài 4 - Định vị trí thẻ 26 STATIC CSS: p#specialpara {color:red; background:#EEE; position:static} XHTML: Đâ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 Bài 4. .. {display:block} block inline display Bài 4 - Định vị trí thẻ 34 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ẻ 35 TỔNG KẾT Tất . 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 background image background color border margin padding Bài 4 - Định vị trí thẻ box kích. 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 Bài 4 - Định vị trí. 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ề