Tìm hiểu về màu HTML: tìm hiểu cách thay đổi phông chữ hoặc màu nền HTML, cách thêm giá trị RGB vào HTML và hơn thế nữa trong hướng dẫn về màu HTML của chúng tôi.

Bạn đang xem : màu nền văn bản đầu vào html

TL; DR – Màu HTML có thể được xác định theo tên, giá trị RGB, RGBA, HEX, HSL hoặc HSLA và áp dụng cho nền hoặc văn bản.

Xác định Màu HTML

Không có thẻ màu HTML đặc biệt, vì thiết kế không phải là chức năng chính của HTML. Tô màu trang web của bạn là một phần của tạo kiểu nội tuyến CSS . Điều này có nghĩa là bạn cần sử dụng thuộc tính style trong thẻ mở mà bạn muốn thêm màu HTML vào.

Bạn có thể sử dụng thuộc tính color để thay đổi màu của văn bản hoặc background-color để thay đổi màu của nền . Cả hai thuộc tính này đều lấy tên màu , RGB , RGBA , HEX , HSL hoặc giá trị HSLA .

​​HTML Màu: Văn bản hoặc Nền

Có một số thuộc tính bạn có thể sử dụng để xác định màu – HTML background-color và HTML color . Như tên cho thấy, cái đầu tiên được sử dụng để thay đổi màu của nền . Bằng cách sử dụng thuộc tính color đơn giản, bạn sẽ thay đổi màu của văn bản .

Cả màu nền HTML và thuộc tính màu đều có thể nhận các giá trị được xác định trong tên , RGB , RGBA , HEX , giá trị HSL hoặc HSLA .

Bột màu

RGB (176,224,230)

RGBA (176, 224, 230, 1)

# B0E0E6

HSL (187, 52%, 80%)

HSLA (187, 52%, 80%, 1)

Điều quan trọng cần lưu ý là thuộc tính background-color cung cấp màu cho nền của văn bản , nhưng không phải cho toàn bộ tài liệu . Nếu bạn muốn thay đổi màu HTML cho toàn bộ trang, bạn nên sử dụng thuộc tính bgcolor trong thẻ mở của phần & lt; body & gt; :

Ví dụ

  

& lt;

body

bgcolor

=

"# def28d"

& gt;

& lt;

h2

style

=

" color: # 731768; "

& gt;

Tôi đang sử dụng mã HEX để gán màu cho văn bản này và cho toàn bộ tài liệu

& lt; /

h2

& gt;

Dùng thử Trực tiếp Tìm hiểu trên Udacity

Lưu ý: được thêm vào & lt phần; body & gt; , thuộc tính bgcolor không hỗ trợ giá trị RGB. Sử dụng tên màu hoặc giá trị HEX.

Cách xác định màu

Tên

Tên màu mô tả tên cụ thể cho màu HTML. Có 140 tên màu được hỗ trợ trong CSS và bạn có thể sử dụng bất kỳ tên nào trong số chúng cho các phần tử của mình. Ví dụ: bạn có thể chỉ cần sử dụng red để xác định HTML red:

màu đỏ

Ví dụ

  

& lt;

h2

style

=

"color: pink;"

& gt;

Tôi đang sử dụng tên màu để gán màu cho văn bản này

& lt; /

h2

& gt;

& lt;

h2

style

=

" background-color: steelblue; "

& gt;

Tôi đang sử dụng tên màu để gán màu cho nền này

& lt; /

h2

& gt;

& lt;

h2

style

=

" background-color: brown; color: bisque; "

& gt;

Tôi đang sử dụng tên màu để gán màu cho nền và văn bản này

& lt; /

h2

& gt;

Dùng thử Trực tiếp Tìm hiểu trên Udacity Udacity Ưu điểm

  • Thiết kế đơn giản (không có thông tin không cần thiết)
  • Các khóa học chất lượng cao (ngay cả những khóa học miễn phí)
  • Nhiều tính năng

Các tính năng chính

  • Các chương trình nanodegree
  • Thích hợp cho doanh nghiệp
  • Chứng chỉ hoàn thành trả phí

ĐỘC QUYỀN: GIẢM GIÁ 75% < strong> Ưu điểm

  • Dễ dàng điều hướng
  • Không có vấn đề kỹ thuật
  • Có vẻ quan tâm đến người dùng

Các tính năng chính

  • Rất nhiều khóa học
  • 30 ngày chính sách hoàn lại tiền
  • Chứng chỉ hoàn thành miễn phí

AS THẤP NHƯ 12,99 đô la Datacamp Ưu điểm

  • Trải nghiệm người dùng tuyệt vời
  • Cung cấp nội dung chất lượng < / li>
  • Rất minh bạch về giá cả của họ

Các tính năng chính

  • Chứng chỉ hoàn thành miễn phí
  • Tập trung vào các kỹ năng khoa học dữ liệu
  • Thời gian biểu học tập linh hoạt

GIẢM GIÁ 75%

Giá trị RGB và RGBA

Giá trị RGB xác định màu HTML bằng cách trộn các giá trị đỏ, lục và lam. Số đầu tiên mô tả đầu vào màu đỏ, số thứ hai – đầu vào màu xanh lục và số thứ ba – đầu vào màu xanh lam.

Giá trị của mỗi màu có thể thay đổi từ 0 đến 255. Ví dụ: để có được HTML màu đỏ giống như bạn đã thấy trong phần trước, chúng tôi sẽ phải sử dụng RGB (255,0,17) :

RGB (255,0,17)

Ví dụ

  

& lt;

h2

style

=

"color: rgb (252, 156, 249);"

& gt;

Tôi đang sử dụng mã RGB để gán màu cho văn bản này

& lt; /

h2

& gt;

& lt;

h2

style

=

" background-color: rgb (255, 236, 139); "

& gt;

Tôi đang sử dụng mã RGB để gán màu cho nền này

& lt; /

h2

& gt;

& lt;

h2

style

=

" color: rgb (255, 236, 139); background-color: rgb (143, 188, 143); "

& gt;

Tôi đang sử dụng mã RGB để gán màu cho nền và văn bản này

& lt; /

h2

& gt;

Dùng thử Trực tiếp Tìm hiểu trên Udacity

Mặc dù các giá trị RGBA rất giống nhau nhưng chúng có một giá trị khác trong hỗn hợp. Giá trị thứ tư bổ sung A là viết tắt của alpha và đại diện cho độ mờ . Nó có thể được xác định bằng một số từ 0 (không trong suốt) đến 1 (hoàn toàn trong suốt):

Ví dụ

  

& lt;

h2

style

=

"color: rgba (252, 156, 249, 0,25);"

& gt;

Giá trị RGBA cho phép bạn đặt độ mờ tùy chỉnh - so sánh hai dòng này

& lt; /

h2

& gt;

& lt;

h2

style

=

" color: rgba (252, 156, 249, 0,75); "

& gt;

Giá trị RGBA cho phép bạn đặt độ mờ tùy chỉnh - so sánh hai dòng này

& lt; /

h2

& gt;

Dùng thử Trực tiếp Tìm hiểu trên Udacity

Giá trị HEX

< / h3>

Giá trị màu HEX hoạt động khá giống với RGB nhưng có vẻ khác. Khi bạn xác định HEX, mã chứa cả số từ 0 đến 9 và các chữ cái từ A đến F để mô tả cường độ của màu. Hai biểu tượng đầu tiên xác định cường độ màu đỏ, hai biểu tượng ở giữa – cường độ xanh lục và hai biểu tượng cuối cùng – cường độ xanh lam.

Ví dụ: để có được một HTML màu xanh đơn giản, chúng tôi sẽ sử dụng mã # 0000fe :

# 0000fe

Ví dụ

  

& lt;

h2

style

=

"color: # FC9CF9;"

& gt;

Tôi đang sử dụng mã HEX để gán màu cho văn bản này

& lt; /

h2

& gt;

& lt;

h2

style

=

" background-color: # FFEC8B; "

& gt;

Tôi đang sử dụng mã HEX để gán màu cho nền này

& lt; /

h2

& gt;

& lt;

h2

style

=

" color: # B0E0E6; background-color: #ACAFFF; "

& gt;

Tôi đang sử dụng mã HEX để gán màu cho nền và văn bản này

& lt; /

h2

& gt;

Dùng thử Trực tiếp Tìm hiểu trên Udacity

HSL và HSLA Giá trị

Trong HTML, màu sắc cũng có thể được xác định trong các giá trị HSL. HSL là viết tắt của sắc độ , độ bão hòa độ sáng :

  • Hue được xác định theo độ từ 0 đến 360. Trên bánh xe màu, màu đỏ ở khoảng 0/360, màu xanh lá cây là 120 và màu xanh lam là 240.
  • Độ bão hòa được xác định theo tỷ lệ phần trăm từ 0 (đen trắng) đến 100 (đủ màu).
  • Độ sáng được xác định theo tỷ lệ phần trăm từ 0 (đen) đến 100 (trắng).

Ví dụ: để tô màu nền bằng màu xanh lam HTML, bạn có thể sử dụng hsl (240, 100%, 50%) :

hsl (240, 100%, 50%)

Ví dụ

  

& lt;

h2

style

=

"color: hsl (217, 97%, 57%);"

& gt;

Tôi đang sử dụng mã HSL để gán màu cho văn bản này

& lt; /

h2

& gt;

& lt;

h2

style

=

" background-color: hsl (218, 77%, 88%); "

& gt;

Tôi đang sử dụng mã HSL để gán màu cho nền này

& lt; /

h2

& gt;

& lt;

h2

style

=

" color: hsl (38, 95%, 25%); background-color: hsl (38, 77%, 88%); "

& gt;

Tôi đang sử dụng mã HSL để gán màu cho nền và văn bản này

& lt; /

h2

& gt;

Dùng thử Trực tiếp Tìm hiểu trên Udacity

Cũng giống như trong RGBA, giá trị thứ tư A trong các giá trị HSLA là viết tắt của alpha và đại diện cho độ mờ được xác định bằng một số từ 0 đến 1:

Ví dụ

  

& lt;

h2

style

=

"color: hsla (128, 95%, 25%, 0,25);"

& gt;

Giá trị HSLA cho phép bạn đặt độ mờ tùy chỉnh - so sánh hai dòng này

& lt; /

h2

& gt;

& lt;

h2

style

=

" color: hsla (128, 95%, 25%, 0,75); "

& gt;

Giá trị HSLA cho phép bạn đặt độ mờ tùy chỉnh - so sánh hai dòng này

& lt; /

h2

& gt;

Dùng thử Trực tiếp Tìm hiểu trên Udacity

HTML Color: Mẹo hữu ích

  • Việc sử dụng công cụ chọn màu đơn giản sẽ giúp bạn nhận được các giá trị RGB hoặc HEX chính xác của màu HTML mà bạn cần.
  • Có một số tên màu đoán thú vị trong một trò chơi đơn giản : một số tên có thể không trực quan như bạn nghĩ.


Xem thêm những thông tin liên quan đến chủ đề màu nền văn bản đầu vào html

How to Change Text Color in HTML

alt

  • Tác giả: Internet Services and Social Networks Tutorials from HowTech
  • Ngày đăng: 2013-05-13
  • Đánh giá: 4 ⭐ ( 9798 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This tutorial will teach you the ways of changing text color in HTML. There are two basic ways of changing text in HTML.

    Don’t forget to check out our site http://howtech.tv/ for more free how-to videos!
    http://youtube.com/ithowtovids – our feed
    http://www.facebook.com/howtechtv – join us on facebook
    https://plus.google.com/103440382717658277879 – our group in Google+

    In this tutorial we will teach you the ways of changing text color in HTML. Changing color of the text in HTML can be done in many ways. One way is to set s universal color for the whole text and the other way is to use a color for a specific attribute. Overall, there are 16 million colors of HTML with their 6-digit hex codes which are easily available on the internet.

    Step 1: Set Universal Color of the Text in HTML

    In html, to change text color you can set the universal color. Setting universal color means to set a color for all attributes of text like heading, paragraph etc in the body element. To set the color, you can use any of the 6-digit code for the color value or simply write the name of the color, for example orange or any other, along with the text. This will change all the text on a web page to orange. Similarly, by setting the text attribute to blue, the text color of the web page changes to blue..

    Step 2: Change Text color of a paragraph in HTML

    If we don’t want to change the color of the complete text on the webpage, we can use the “font” element for changing text color in html. We have to first set the color value inside the font element. The color value can be set by any of the 6-digit Hex code or writing only the color name. The text has to be placed within the font element. Over here, let’s set the color to green and once your refresh the page, you can see that html changes the text color.

    Step 3: Change Line’s Text color in HTML

    In order to change the color of a single line, we enclose the text within the text color attribute and set the color to the desired color. This change is specific to a piece of text and overrules any text color set at the universal level or to the paragraph containing the line.

[Học HTML] Các thẻ định dạng chữ viết và văn bản

  • Tác giả: brandee.edu.vn
  • Đánh giá: 4 ⭐ ( 8762 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài này thuộc phần 6 của 11 phần trong serie Học HTML cơ bảnContents1.Tiêu đề và đoạn văn bản2.Các thẻ định dạng chữ viết3.Thẻ trích dẫn4.Thẻ định dạng sẵn5.Thuộc tính style để định dạng chữ viết5.1.Màu chữ5.2.Màu nền5.3.Kích thước chữ5.4.Font chữ5.5.Căn lề văn bản6.Lời kết6.1.Xem tiếp bài trong serie7.Bài liên quanBắt đầu từ phần này, chúng […]

Table trong HTML

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 1112 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo bảng trong HTML thì cần những gì? Nó có phức tạp không? Muốn thêm màu cho đường viền bảng, thêm màu nền cho chữ trong bảng thì làm như thế nào? Trong bài viết này Quantrimang.com sẽ trả lời những câu hỏi đó và hướng dẫn bạn những thao tác cơ bản với bảng trên HTML, ngoài ra còn khuyến mại thêm cách tô màu xen kẽ cho các hàng trong bảng HTML. Mời các bạn cùng theo dõi.

Thiết lập background trong HTML

  • Tác giả: camranh.khanhhoa.gov.vn
  • Đánh giá: 4 ⭐ ( 1032 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: blank page

Làm Cách Nào Để Thay Đổi Màu Chữ Trong Html ? Html — Css Thay Đổi Màu Phông Chữ Của Hộp Văn Bản

  • Tác giả: tiennghich.mobi
  • Đánh giá: 5 ⭐ ( 1789 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ tìm hiểu một thuộc tính khá quan trọng và được sử dụng khá phổ biến trong website đó là màu chữ và màu nền, Vậy chúng ta phải làm thế nào để kiểm soát và sử dụng nó cho phù hợp? Bài này sẽ giúp bạn trả lời câu hỏi đó

Luận văn Xây dựng trang web cá nhân HTML và CSS

  • Tác giả: luanvan.co
  • Đánh giá: 5 ⭐ ( 9518 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Luận văn Xây dựng trang web cá nhân HTML và CSS – Qua quá trình xây dựng website cá nhân và làm báo cáo thực tập đã giúp em thu hoạch được khá nhiều k…

Thiết lập màu trong HTML, Bảng mã màu trong HTML

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 5 ⭐ ( 4428 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết lập màu trong HTML, Bảng mã màu trong HTML. Màu tạo cảm giác về một vẻ bề ngoài đẹp cho trang web của bạn.

Xem thêm các bài viết khác thuộc chuyên mục: WordPress

See also  Cách xóa quảng cáo Ad.doubleclick.net - google ads doubleclick remove