Làm cách nào để tô màu trong 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à được áp dụng cho nền hoặc văn bản

nội dung

  • 1. Xác định màu HTML
  • 2. Màu HTML. Văn bản hoặc Nền
  • 3. Các cách xác định màu sắc
  • 3. 1. Tên
  • 3. 2. Giá trị RGB và RGBA
  • 3. 3. Giá trị HEX
  • 3. 4. Giá trị HSL và HSLA
  • 4. Màu HTML. Mẹo hữu ích

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 kiểu dáng 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

<body bgcolor="#def28d">

<h2 style="color: #731768;">
 I am using HEX codes to assign colors to this text and to the whole document
</h2>
1 để thay đổi màu của văn bản hoặc
<body bgcolor="#def28d">

<h2 style="color: #731768;">
 I am using HEX codes to assign colors to this text and to the whole document
</h2>
2 để thay đổi màu nền. Cả hai thuộc tính này đều có tên màu, giá trị RGB, RGBA, HEX, HSL hoặc HSLA

Màu HTML. 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

<body bgcolor="#def28d">

<h2 style="color: #731768;">
 I am using HEX codes to assign colors to this text and to the whole document
</h2>
2 và HTML
<body bgcolor="#def28d">

<h2 style="color: #731768;">
 I am using HEX codes to assign colors to this text and to the whole document
</h2>
1. Như tên cho thấy, cái đầu tiên được sử dụng để thay đổi màu nền. Bằng cách sử dụng thuộc tính
<body bgcolor="#def28d">

<h2 style="color: #731768;">
 I am using HEX codes to assign colors to this text and to the whole document
</h2>
1 đơn giản, bạn sẽ thay đổi màu của văn bản

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

Bột xanh

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

<body bgcolor="#def28d">

<h2 style="color: #731768;">
 I am using HEX codes to assign colors to this text and to the whole document
</h2>
2 cung cấp màu cho nền của văn bản chứ không phải cho toàn bộ tài liệu. Nếu bạn muốn thay đổi màu HTML cho cả trang, bạn nên sử dụng thuộc tính
<h2 style="color: pink;">
I am using a color name to assign a color to this text
</h2>

<h2 style="background-color: steelblue;">
I am using a color name to assign a color to this background
</h2>

<h2 style="background-color: brown; color: bisque;">
I am using a color name to assign a color to this background and text
</h2>
3 trong thẻ mở của phần

Sao chép ví dụ

<body bgcolor="#def28d">

<h2 style="color: #731768;">
 I am using HEX codes to assign colors to this text and to the whole document
</h2>

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

Note: added in the section, the bgcolor attribute does not support RGB values. Use either a color name or a HEX value.

Các cách để xác định màu sắc

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

<h2 style="color: pink;">
I am using a color name to assign a color to this text
</h2>

<h2 style="background-color: steelblue;">
I am using a color name to assign a color to this background
</h2>

<h2 style="background-color: brown; color: bisque;">
I am using a color name to assign a color to this background and text
</h2>
4 để xác định màu đỏ HTML

màu đỏ

Sao chép ví dụ

<h2 style="color: pink;">
I am using a color name to assign a color to this text
</h2>

<h2 style="background-color: steelblue;">
I am using a color name to assign a color to this background
</h2>

<h2 style="background-color: brown; color: bisque;">
I am using a color name to assign a color to this background and text
</h2>

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

Làm cách nào để tô màu trong html?

ưu

  • 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í)
  • Tính năng đa dạng

Những đặc điểm chính

  • chương trình cấp bằng nano
  • Thích hợp cho doanh nghiệp
  • Giấy chứng nhận hoàn thành trả tiền

LOẠI TRỪ. GIẢM GIÁ 75%

Làm cách nào để tô màu trong html?

ưu

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

Những đặc điểm chính

  • Rất nhiều khóa học đa dạng
  • chính sách hoàn tiền trong 30 ngày
  • Giấy chứng nhận hoàn thành miễn phí

THẤP NHƯ 12. 99$

Làm cách nào để tô màu trong html?

ưu

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

Những đặc điểm chính

  • Giấy chứng nhận hoàn thành miễn phí
  • Tập trung vào các kỹ năng khoa học dữ liệu
  • Lịch học 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 màu đỏ HTML giống như bạn đã thấy trong phần trước, chúng tôi sẽ phải sử dụng

<h2 style="color: pink;">
I am using a color name to assign a color to this text
</h2>

<h2 style="background-color: steelblue;">
I am using a color name to assign a color to this background
</h2>

<h2 style="background-color: brown; color: bisque;">
I am using a color name to assign a color to this background and text
</h2>
5

RGB(255,0,17)

Sao chép ví dụ

<h2 style="color: rgb(252, 156, 249);">
I am using RGB codes to assign a color to this text
</h2>

<h2 style="background-color: rgb(255, 236, 139);">
I am using RGB codes to assign a color to this background
</h2>

<h2 style="color: rgb(255, 236, 139); background-color: rgb(143, 188, 143);">
I am using RGB codes to assign a color to this background and text
</h2>

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ó thêm 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à biểu thị độ mờ. Nó có thể được xác định trong một số từ 0 (không trong suốt) đến 1 (hoàn toàn trong suốt)

Sao chép ví dụ

<h2 style="color: rgba(252, 156, 249, 0.25);">
RGBA values let you set custom opacity - compare these two lines
</h2>

<h2 style="color: rgba(252, 156, 249, 0.75);">
RGBA values let you set custom opacity - compare these two lines
</h2>

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

Giá trị HEX

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ả cá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 dương

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

<h2 style="color: pink;">
I am using a color name to assign a color to this text
</h2>

<h2 style="background-color: steelblue;">
I am using a color name to assign a color to this background
</h2>

<h2 style="background-color: brown; color: bisque;">
I am using a color name to assign a color to this background and text
</h2>
6

#0000fe

Sao chép ví dụ

________số 8

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

Giá trị HSL và HSLA

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 màu sắc, độ bão hòa và độ sáng

  • Hue được xác định theo độ từ 0 đến 360. Trên một bánh xe màu, màu đỏ là 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 (đầy đủ màu sắc)
  • Độ 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 HTML, bạn có thể sử dụng

<h2 style="color: pink;">
I am using a color name to assign a color to this text
</h2>

<h2 style="background-color: steelblue;">
I am using a color name to assign a color to this background
</h2>

<h2 style="background-color: brown; color: bisque;">
I am using a color name to assign a color to this background and text
</h2>
7

hsl(240, 100%, 50%)

Sao chép ví dụ

<body bgcolor="#def28d">

<h2 style="color: #731768;">
 I am using HEX codes to assign colors to this text and to the whole document
</h2>
0

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

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à biểu thị độ mờ được xác định trong một số từ 0 đến 1