Cách sửa đổi màu của các phần tử HTML
Loạt bài hướng dẫn này sẽ hướng dẫn bạn cách tạo và tùy chỉnh thêm trang web này bằng HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Không cần trải nghiệm viết mã trước nhưng ta khuyên bạn nên bắt đầu từ đầu loạt bài nếu bạn muốn tạo lại trang web trình diễn.
Ở phần cuối của loạt bài này, bạn sẽ có một trang web sẵn sàng để triển khai lên cloud và làm quen cơ bản với HTML. Biết cách viết HTML sẽ cung cấp nền tảng vững chắc để học các kỹ năng phát triển web front-end bổ sung, chẳng hạn như CSS và JavaScript.
Bạn có thể sử dụng HTML để sửa đổi màu sắc của một số thành phần và phần nội dung của trang web. Ví dụ: bạn có thể thay đổi màu của văn bản, đường viền hoặc — như được trình bày trong hướng dẫn về Phân chia nội dung HTML — của phần tử <div> . Phương pháp thay đổi giá trị màu của các phần nội dung này khác nhau giữa các phần tử.
Trong hướng dẫn này, bạn sẽ học cách thay đổi màu của văn bản, đường viền hình ảnh và các phần tử <div> bằng cách sử dụng tên màu HTML.
Màu của các phần tử văn bản, chẳng hạn như <p> hoặc <h1> , được sửa đổi bằng cách sử dụng thuộc tính style và thuộc tính color như sau:
<p style="color:blue;">This is blue text.</p> Hãy thử viết mã này trong index.html của bạn và tải nó trong trình duyệt. (Nếu bạn chưa theo dõi loạt bài hướng dẫn, bạn có thể xem lại hướng dẫn cài đặt index.html trong hướng dẫn của ta Cài đặt dự án HTML của bạn . Để biết hướng dẫn về cách tải file trong trình duyệt của bạn, hãy xem hướng dẫn của ta tại đây .)
Bạn sẽ nhận được thông tin như thế này:
Đây là văn bản màu xanh lam.
Màu của đường viền được sửa đổi bằng cách sử dụng thuộc tính style và thuộc tính border :
<img src="/image_static/mg_sid_64/2d19/1915/2d191915191a1e/2d191915191a1e.jpeg" style="border: 10px solid green"/> Hãy thử viết mã này trong index.html của bạn và tải nó trong trình duyệt. ( Lưu ý ta đang sử dụng hình ảnh mà ta đang lưu trữ trực tuyến trong ví dụ này. Ta cũng đã chỉ định rằng đường viền phải rộng và chắc chắn là 10 pixel (trái ngược với gạch ngang)).
Bạn sẽ nhận được thông tin như thế này:
Màu của containers <div> được sửa đổi bằng cách sử dụng thuộc tính style và thuộc tính background-color như sau:
<div style="width:200px;height:200px;background-color:yellow;"></div> Hãy thử viết mã này trong index.html của bạn và tải nó trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:
Trong các ví dụ này, giá trị màu được xác định bằng tên màu. Hãy thử thay đổi màu sắc của văn bản, đường viền hình ảnh và <div> yếu tố bằng cách sử dụng tên màu sau: black , white , gray , silver , purple , red , fuchsia , lime , olive , green , yellow , teal , navy , blue , maroon , và aqua .
Lưu ý màu sắc cũng có thể được chỉ định bởi các giá trị thập lục phân. Màu hệ thập lục phân bao gồm sáu chữ số và chữ số đứng trước ký hiệu bảng Anh, chẳng hạn như #0000FF (xanh lam), #40E0D0 (xanh ngọc) hoặc #C0C0C0 (bạc). Tuy nhiên, đối với loạt bài hướng dẫn này, ta sẽ tiếp tục sử dụng tên màu.
Đến đây bạn sẽ có một kiến thức cơ bản về cách thay đổi màu của văn bản, đường viền hình ảnh và các phần tử <div> bằng cách sử dụng tên màu. Ta sẽ trở lại màu sắc sau trong loạt bài hướng dẫn khi ta bắt đầu xây dựng trang web của bạn .
Các tin liên quan
Cách thêm một Favicon vào trang web của bạn bằng HTML2020-08-26
Tạo phần trên cùng của trang chủ của bạn bằng HTML
2020-08-26
Cách sử dụng các thuộc tính HTML
2020-08-26
Cách thêm siêu liên kết trong HTML
2020-08-26
Cách lồng các phần tử HTML
2020-08-26
Cách sử dụng các phần tử cấp nội tuyến và cấp khối trong HTML
2020-08-26
Cách sử dụng các phần tử cấp nội tuyến và cấp khối trong HTML
2020-08-26
Cách viết HTML nhanh chóng bằng Emmet
2019-07-02
Sử dụng vue-template-loader với Vue.js để biên dịch các mẫu HTML
2018-01-18
Nhận và thiết lập thẻ meta HTML trong Angular
2017-11-27
