Hướng dẫn hover trong css - di chuột trong css

• Trang chủ
• Tham khảo
• CSS
• :hover

Định nghĩa và sử dụng

":hover" chọn các liên kết được hover (di chuyển chuột lên thành phần).

Cấu trúc

a:hover { 
    property : value;
}

Ví dụ

HTML viết:

Học web chuẩn
Google
vnexpress

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

a:hover {
    background: #ff0000;
    color: #fff;
}

Hiển thị trình duyệt khi đã có CSS:

Hover qua link sẽ thấy được hiệu ứng.

Trình duyệt hỗ trợ

":hover" được hỗ trợ trong đa số các trình duyệt.

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
  • Phần tin chính của trang web
  • Phần CSS
  • Một lưu ý quan trọng
  • Các thuộc tính CSS mới
• Các thuộc tính CSS đã học cho tới bài này

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

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

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

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

Phần CSS

Một lưu ý quan trọng

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

, không dùng được cho các thẻ inline không xuống dòng như . Thẻ không xuống dòng muốn dùng được phải thêm thuộc tính display: block.

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

"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

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

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

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

Thuộc tính margin và padding chỉ dùng cho các thẻ khối , không dùng được cho các thẻ inline không xuống dòng như . 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.

+ display: block

+ Margin và padding

+ Border : viền, 1px (độ dày) black (màu) solid (loại nét)

+ 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 đủ: DownloadDownload

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.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ị.Like, Share nếu thấy bài viết thú vị.

Liên hệ