Bài 7: Hiệu ứng hover bằng css và làm bài tập

Trong bài này, mình sẽ hướng dẫn hiệu ứng hover bằng css cho các thẻ HTML. Ví dụ đơn giản trong bài là tiêu đề của bài viết đổi màu khi trỏ chuột vào.

Video – Hiệu ứng hover bằng css và làm bài tập

Hướng dẫn bài tập

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

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 mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

Phần tin chính của trang web

Phần CSS

Một lưu ý quan trọng

Thuộc tính margin và padding chỉ dùng cho các thẻ khối <div></div>, không dùng được cho các thẻ inline không xuống dòng như <a></a>. Thẻ không xuống dòng muốn dùng được phải thêm thuộc tính display: block.

Để không bị lỗi khi chạy trên các trình duyệt khác nhau, chúng ta nên xóa các margin và padding mặc định của trình duyệt.

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

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 mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

Các thuộc tính CSS mới

+ display: block

Các thuộc tính CSS đã học cho tới bài này

+ 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 mẫu đầ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ệ