Bài 8: Hướng dẫn làm bài tập – Thuộc tính float: left

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

Video – Hướng dẫn làm bài tập và thuộc tính float:left

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

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

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

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

Liên hệ