Trong bài này, chúng ta sẽ tiếp tục làm phần tiếp theo của bài tập trang web tin tức. Một thuộc tính quan trọng là float:left sẽ được giới thiệu trong bài.
Phần video bài trước bạn có thể tham khảo Bài 7: Hiệu ứng hover bằng css và làm bài tập
Nội dung chính
Video – Hướng dẫn làm bài tập và thuộc tính float:left
Hướng dẫn chi tiết
Thuộc tính float:left (hoặc right)
Dùng để dùng các khối về một phía. Các khối như <div></div> là các khối tự động xuống dòng. Vì vậy, để có thể xếp chúng trên một hàng sao cho vừa đủ với chiều ngang của khối bao bọc cần có thuộc tính float.
Định dạng cho khối article bao bên ngoài
Các khối div bên trong
Lưu ý, để tránh xảy ra lỗi khi dùng float:left, các bạn thêm thuộc tính overflow: hidden vào thẻ chứa khối mang thuộc tính float:left.
Các thuộc tính CSS mới
+ float: left (right) dồn các khối
+ overflow: hidden
Các thuộc tính CSS đã học cho tới bài này
+ display: block
+ Margin và padding
+ Border : viền, 1px (độ dày) black (màu) solid (loại nét)
+ Text-align : canh lề
+ Font-size : kích thước.
+ Font-weight : bold độ đậm nhạt, giống như thẻ <b></b>
+ Font-family : kiểu chữ
+ Font-style: italic : tạo chữ in nghiêng
+ Float : left, dồn sang một bên
+ Text-decoration: none, underline.
+ Line-height: 20px: độ giãn dòng.
+ color: (màu chữ) dùng green, red hay mã màu
+ background-color: (màu nền)black
+ background-image: url(imgage source)
Code đầy đủ: Download
Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
Đừng quên Like, Share nếu thấy bài viết thú vị.
