Tìm hiểu cách thay đổi màu sắc và màu nền của văn bản trên trang web của bạn. Tất cả những gì bạn cần là màu CSS và thuộc tính màu nền và mã màu.

Bạn đang xem : css thay đổi màu văn bản tiêu đề

Dễ dàng thay đổi màu văn bản trên trang web với thuộc tính màu CSS.

Trước khi xem xét cách thực hiện, điều quan trọng là phải hiểu các cách khác nhau mà bạn có thể đặt giá trị thuộc tính. Bạn có thể sử dụng:

  • Tên màu HTML : Có 140 tên màu được hỗ trợ trong CSS. Màu vàng, hoa vân anh, màu hạt dẻ và màu xanh da trời chỉ là một vài ví dụ.
  • Mã màu hệ lục phân : Các mã này bao gồm ba cặp ký tự thể hiện cường độ của ba màu cơ bản. Các giá trị có thể nằm trong khoảng từ 00 (cường độ thấp nhất của màu chính) đến FF (cường độ cao nhất của màu chính). Mã màu cho màu đen là # 000000, đỏ là # FF0000 và xanh lam là # 0000FF.
  • Giá trị RGB : RGB là một mô hình màu khác dựa trên sự kết hợp của các màu cơ bản là đỏ, lục và lam. Bao gồm ba số được phân tách bằng dấu phẩy, mỗi số thể hiện cường độ của màu chính tương ứng dưới dạng số nguyên từ 0 đến 255. Màu đen là rgb (0, 0, 0), màu đỏ là rgb (255, 0, 0) và màu xanh lam là rgb (0, 0, 255).

Tải xuống ngay: Hack HTML & amp; CSS miễn phí < / span>

Mặc dù bạn có thể sử dụng bất kỳ giá trị nào trong số này, nhưng tên màu không được khuyến nghị. Chúng không chỉ khó nhớ ngoài cầu vồng tiêu chuẩn, chúng còn giới thiệu không chính xác. Màu hoa vân anh của một người có thể là màu đỏ tươi của người khác có thể là màu hồng nóng của người khác, v.v.

Để đảm bảo bảng màu trang web của bạn trông giống như bạn muốn, hãy sử dụng mã màu hex hoặc giá trị RGB thay thế. Chúng cho phép bạn chọn màu sắc chính xác mà bạn muốn. Trong các ví dụ dưới đây, chúng tôi sẽ sử dụng mã màu hex vì chúng thân thiện với người mới bắt đầu học hơn.

Bây giờ, hãy cùng hướng dẫn cách thay đổi màu sắc và màu nền của văn bản nội tuyến trong CSS.

Thay đổi màu văn bản nội tuyến trong CSS

Để thay đổi màu của văn bản nội dòng, hãy chuyển đến phần của trang web của bạn. Chỉ cần thêm bộ chọn CSS thích hợp và xác định thuộc tính màu với giá trị bạn muốn. Ví dụ: giả sử bạn muốn thay đổi màu của tất cả các đoạn trên trang web của mình thành màu xanh nước biển. Sau đó, bạn sẽ thêm p {color: # 000080; } vào phần đầu của tệp HTML của bạn.

Bạn có thể tự hỏi điều gì sẽ xảy ra nếu bạn không đặt thuộc tính màu trong CSS của mình. Đó là một câu hỏi hay. Màu văn bản mặc định cho một trang được xác định trong bộ chọn nội dung. Dưới đây là một ví dụ về bộ chọn nội dung đặt màu văn bản là xanh lam:

Xem Thêm  Đếm số lần xuất hiện phần tử trong mảng JavaScript - đếm các phần tử trong javascript mảng

  

nội dung {

màu: xanh lam;

}

Nếu không có bộ chọn nội dung hoặc màu được xác định trong bộ chọn nội dung, thì màu mặc định rất có thể là màu đen.

Vì vậy, giả sử tôi muốn thay đổi màu của các đoạn văn của mình thành màu xanh nước biển, như đã đề cập trong ví dụ trên và tất cả các liên kết trên trang web của tôi thành màu nước biển. Sau đó, tôi sẽ sử dụng bộ chọn loại p và bộ chọn thuộc tính a [href] và đặt thuộc tính màu tương ứng là # 000080 và # 00FFFF.

Đây là CSS:

  

p {

màu: # 000080;

}

a [href] {

màu: # 00FFFF;

}

Đây là HTML:

  

& lt; p & gt; Đây là một đoạn văn. Màu văn bản mặc định là màu đen, nhưng tôi đã thêm một bộ chọn đoạn văn và xác định thuộc tính màu để nó là màu xanh nước biển. Bạn sẽ thấy rằng đoạn văn bản bên dưới cũng có màu xanh nước biển, ngoại trừ liên kết. Sử dụng một bộ chọn riêng biệt, màu của các liên kết đã được thay đổi thành màu nước. & Lt; / p & gt;

& lt; p & gt; Một đoạn văn khác có & lt; b & gt; & lt; a href = "default.asp" target = "_ blank" & gt; một liên kết. & lt; / a & gt; & lt; / b & gt; & lt; / p & gt;

Đây là kết quả:

Xem cây bút Thay đổi màu văn bản nội tuyến trong CSS của Christina Perricone ( @hubspot ) trên CodePen .

Bạn có thể sử dụng quy trình tương tự này để thay đổi màu sắc của tiêu đề, thẻ span, bản sao nút và bất kỳ văn bản nào khác trên trang. Bây giờ, hãy xem cách thay đổi màu nền của văn bản.

Tài nguyên được Đề xuất

Giới thiệu về CSS dành cho nhà tiếp thị

Điền vào biểu mẫu để nhận hướng dẫn giới thiệu miễn phí của bạn.

Thay đổi màu nền văn bản trong CSS

Để thay đổi màu nền của văn bản nội dòng, hãy chuyển đến phần & lt; head & gt; phần của trang web của bạn. Chỉ cần thêm CSS selector thích hợp và xác định thuộc tính color và background-color với các giá trị bạn muốn. Giả sử bạn muốn thay đổi màu nền của các liên kết thành màu vàng. Sau đó, bạn sẽ thêm mã sau:

  

a [href] {

màu: # 000000;

màu nền: # FFFF00;

}

Màu nền CSS

Thuộc tính background-color CSS cho phép bạn thay đổi màu nền của phần tử HTML. Bạn có thể đặt màu nền cho nhiều phần tử, bao gồm phần tử table, div, header và span.

Khi xác định thuộc tính màu, bạn cũng nên xác định màu nền. Cần phải tuân thủ CSS W3C và các khuôn khổ khác và điều này không ảnh hưởng gì đến việc khác.

Xem Thêm  Làm cách nào để tạo hiệu ứng chuyển đổi slide sang trái và phải bằng jQuery? - jquery slide div ví dụ trái phải

Kiểm tra độ tương phản màu sắc

Thay đổi màu sắc và màu nền của văn bản cũng rất quan trọng để tránh các vấn đề về khả năng truy cập web trên trang web của bạn.

Hãy xem bản trình diễn ở trên. Mặc dù các màu được sử dụng có thể quá giống nhau đối với những người không thể nhìn thấy các sắc thái màu khác nhau, nhưng phần gạch dưới sẽ giúp cho biết đó là một liên kết. Nhưng điều gì sẽ xảy ra nếu tôi xóa gạch chân khỏi các liên kết trên trang web của mình? Sau đó, tôi chỉ dựa vào màu sắc để truyền đạt rằng đó là một liên kết. Trong trường hợp đó, tôi cần xác định và sử dụng các màu có thể truy cập web cho trang web của mình .

Điều này sẽ mất thời gian và nghiên cứu. Nếu bạn chỉ mới bắt đầu nghiên cứu về bệnh mù màu, thì một công cụ như Trình kiểm tra độ tương phản có thể giúp bạn đưa ra các lựa chọn có thể sử dụng được khi thay đổi màu văn bản trên trang web của mình.

Bạn có thể nhập màu và màu nền và nó sẽ cho bạn biết “đạt” nếu cặp có tỷ lệ tương phản là 4,5: 1. Bất cứ điều gì thấp hơn sẽ thất bại. Chúng tôi sẽ sử dụng công cụ này để xác định màu sắc trong ví dụ bên dưới.

Giả sử tôi muốn văn bản của mình có màu đỏ và nền có màu xám. Tôi có thể bắt đầu bằng cách cắm # FF0000 và # 808080 vào Trình kiểm tra độ tương phản và thấy nó chỉ có tỷ lệ tương phản 1: 1. Điều đó không tốt.

Để cải thiện tỷ lệ, tôi sẽ di chuyển thanh trượt của màu nền trước sang trái và thanh trượt của màu nền sang phải cho đến khi đạt mức tối thiểu 4,5: 1.

Vì tôi muốn đảm bảo thiết kế của mình rõ ràng nhất có thể, tôi sẽ chọn màu # 940000 và màu nền # E0E0E0, có tỷ lệ 7: 1.

Tôi sẽ sử dụng những thứ này để tạo kiểu cho liên kết sao cho nó thực sự nổi bật so với phần còn lại của đoạn văn.

Đây là CSS:

  

a [href] {

màu: # 940000;

màu nền: # E0E0E0;

văn bản-trang trí: không có;

}



Đây là HTML:

  

& lt; p & gt; Đây là một đoạn văn. Màu văn bản mặc định là màu đen. Bạn sẽ thấy rằng đoạn bên dưới cũng có màu đen, ngoại trừ liên kết. Sử dụng công cụ chọn thuộc tính, tôi đã đặt thuộc tính màu, màu nền và trang trí văn bản để nó xuất hiện với màu phông chữ hơi đỏ, nền xám và không có gạch dưới. & Lt; / p & gt;

& lt; p & gt; Một đoạn văn khác có & lt; b & gt; & lt; a href = "default.asp" target = "_ blank" & gt; một liên kết & lt; / a & gt; & lt; / b & gt;. & lt; / p & gt; < / p>



Đây là kết quả:

Xem cây bút Thay đổi màu nền văn bản trong CSS của Christina Perricone ( @hubspot ) trên CodePen .

Thêm màu vào trang web của bạn

Dễ dàng thay đổi màu sắc và màu nền của văn bản trên trang web của bạn. Cho dù bạn đang xây dựng trang web của mình từ đầu hay xây dựng bằng Bootstrap CSS , bạn chỉ cần một số kiến ​​thức về HTML và CSS. Tuy nhiên, sẽ mất thời gian để tìm hiểu tên và mã màu cũng như cách kết hợp chúng để làm cho trang web của bạn và các tài liệu tiếp thị khác có thể truy cập . Chỉ là một lý do khác để bắt đầu thêm màu sắc cho trang web của bạn ngay hôm nay.

Gọi hành động mới


Xem thêm những thông tin liên quan đến chủ đề css thay đổi màu văn bản tiêu đề

Tự học HTML – Bài 2. Thay đổi kiểu, màu, cỡ chữ

alt

  • Tác giả: Mai Liêu
  • Ngày đăng: 2021-11-26
  • Đánh giá: 4 ⭐ ( 1952 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tự học HTML – Bài 2. Thay đổi kiểu, màu, cỡ chữ

Cấu trúc toàn diện CSS cho lập trình

  • Tác giả: getbootstrap.com.vn
  • Đánh giá: 5 ⭐ ( 8269 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Những cách thiết lập phổ biến cho nền tảng bootstrap CSS tùy biến giúp phát triển bộ nhận diện website thân thiện

Làm cách nào để thay thế văn bản bằng CSS?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 2366 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Hoặc có lẽ bạn có thể bao bọc ‘Sự kiện’ như sau:
    Facts

    Sau đó…

Cách sử dụng CSS để thay đổi màu phông chữ

  • Tác giả: funix.edu.vn
  • Đánh giá: 4 ⭐ ( 5101 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đang tìm cách làm nổi bật trang web của mình với một số màu phông chữ khác nhau? Bạn có thể thay đổi màu phông chữ bằng cách sử dụng CSS. Viết tắt của Cascading Style Sheets, đây là ngôn ngữ mặc định được sử dụng để tạo và quản lý style của bất kỳ trang web nào.

Làm thẻ Tiêu đề tự đổi màu với CSS

  • Tác giả: chiaseit.mobie.in
  • Đánh giá: 4 ⭐ ( 9765 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn quá chán nản với giao diện hiện tại của wapsite của mình vì nó quá lỗi thời, so với các trang wap hiện đại hiện nay. Hôm

Thuộc tính Màu sắc trong CSS

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 3 ⭐ ( 1936 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn tự học CSS này, bạn sẽ tìm hiểu các phương pháp định nghĩa các giá trị màu khác nhau trong CSS theo 3 cách khác nhau

Thay đổi thuộc tính CSS bằng jQuery

  • Tác giả: quachquynh.com
  • Đánh giá: 3 ⭐ ( 2216 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php