HTML - Màu sắc

Chào mừng các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới đầy màu sắc của HTML. Là giáo viên máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn các bạn trong hành trình đầy màu sắc này. Cuối bài hướng dẫn này, bạn sẽ có thể vẽ nên những trang web với sự tự tin của mộtPicasso số hóa!

HTML - Colors

Các Phương Pháp Mã Màu HTML

Trước khi chúng ta bắt đầu phủ màu khắp các trang web của mình, hãy cùng tìm hiểu cách chúng ta có thể biểu diễn màu sắc trong HTML. Có nhiều cách để xác định màu sắc, và每一种都有自己的魅力. Hãy cùng nhìn qua từng phương pháp:

Tên Màu
Giá Trị Hexadecimal
Giá Trị RGB
Giá Trị RGBA
Giá Trị HSL
Giá Trị HSLA

Dưới đây là bảng tóm tắt các phương pháp này:

Phương Pháp	Ví Dụ	Mô Tả
Tên Màu	`red`	Các tên màu đã định nghĩa sẵn
Hexadecimal	`#FF0000`	Mã 6 chữ số biểu diễn giá trị RGB
RGB	`rgb(255, 0, 0)`	Giá trị Red, Green, Blue (0-255)
RGBA	`rgba(255, 0, 0, 0.5)`	RGB với giá trị Alpha (độ mờ)
HSL	`hsl(0, 100%, 50%)`	Màu, Độ bão hòa, Độ sáng
HSLA	`hsla(0, 100%, 50%, 0.5)`	HSL với giá trị Alpha

Đừng lo lắng nếu điều này trông giống như một hỗn hợp các chữ cái hiện tại. Chúng ta sẽ giải thích chi tiết từng bước!

Đặt Màu Chữ

Hãy bắt đầu với một điều đơn giản: thay đổi màu sắc của chữ. Chúng ta sử dụng thuộc tính color trong CSS để đạt được điều này. Dưới đây là một ví dụ:

<p style="color: blue;">Chữ này có màu xanh!</p>

Trong ví dụ này, chúng ta đang sử dụng một phong cách inline để đặt màu. Thuộc tính style cho phép chúng ta thêm CSS trực tiếp vào một phần tử HTML. Phần color: blue; đang指示 trình duyệt hiển thị chữ này với màu xanh.

Nhưng nếu chúng ta muốn sử dụng một gam màu xanh cụ thể? Đó là lúc các phương pháp mã màu khác trở nên hữu ích:

<p style="color: #0000FF;">Đây cũng là màu xanh, sử dụng mã hex!</p>
<p style="color: rgb(0, 0, 255);">Và đây là màu xanh sử dụng giá trị RGB!</p>

Cả hai ví dụ này sẽ tạo ra cùng một gam màu xanh như ví dụ đầu tiên. Mã hex #0000FF và giá trị RGB rgb(0, 0, 255) đều biểu diễn màu xanh nguyên chất.

Đặt Màu Nền

Bây giờ, hãy thêm một chút sống động cho trang web của chúng ta với các màu nền. Chúng ta sử dụng thuộc tính background-color cho điều này:

<div style="background-color: yellow; padding: 10px;">
Div này có nền màu vàng!
</div>

Trong ví dụ này, chúng ta đang đặt màu nền của một phần tử div thành vàng. padding: 10px; chỉ để cho chữ một chút không gian thở.

Nhớ khi tôi đề cập đến RGBA trước đó? Đây là nơi nó có thể rất hữu ích:

<div style="background-color: rgba(255, 255, 0, 0.5); padding: 10px;">
Div này có nền vàng bán trong suốt!
</div>

Phần 0.5 ở cuối rgba(255, 255, 0, 0.5) đặt độ mờ thành 50%, tạo ra một hiệu ứng bán trong suốt rất đẹp.

Đặt Màu Viền

Hãy khung công việc của chúng ta với các màu viền:

<div style="border: 2px solid green; padding: 10px;">
Div này có viền xanh!
</div>

Ở đây, chúng ta sử dụng thuộc tính border để tạo một viền 2 pixel rộng, solid màu xanh xung quanh div.

Chúng ta có thể làm cho viền của mình trở nên ấn tượng hơn bằng cách sử dụng các màu khác nhau cho mỗi bên của viền:

<div style="border-top: 2px solid red;
border-right: 2px solid green;
border-bottom: 2px solid blue;
border-left: 2px solid yellow;
padding: 10px;">
Div này có màu khác nhau cho mỗi bên viền!
</div>

Màu Sắc HTML - Tên Màu

HTML cung cấp một bộ các tên màu đã định nghĩa sẵn mà bạn có thể sử dụng. Những tên màu này rất tiện lợi khi bạn đang thử nghiệm hoặc cần một màu nhanh chóng mà không cần quan tâm đến các gam màu cụ thể.

<p style="color: tomato;">Chữ này có màu cà chua!</p>
<p style="color: skyblue;">Chữ này có màu sky blue!</p>
<p style="color: mediumseagreen;">Chữ này có màu xanh dương biển!</p>

16 Màu Chuẩn W3C

W3C (World Wide Web Consortium) đã xác định 16 màu chuẩn được hỗ trợ bởi tất cả các trình duyệt. Những màu này là:

Đen
Bạc
Xám
Trắng
Đỏ đậm
Đỏ
Tím
Fuchsia
Xanh lá cây
Xanh lơ
Olive
Vàng
Xanh dương
Xanh
Xanh lam
Xanh dương nhạt

Dưới đây là một minh họa nhanh:

<table>
<tr>
<td style="background-color: black; color: white;">Đen</td>
<td style="background-color: silver;">Bạc</td>
<td style="background-color: gray;">Xám</td>
<td style="background-color: white;">Trắng</td>
</tr>
<tr>
<td style="background-color: maroon; color: white;">Đỏ đậm</td>
<td style="background-color: red;">Đỏ</td>
<td style="background-color: purple; color: white;">Tím</td>
<td style="background-color: fuchsia;">Fuchsia</td>
</tr>
<tr>
<td style="background-color: green; color: white;">Xanh lá cây</td>
<td style="background-color: lime;">Xanh lơ</td>
<td style="background-color: olive;">Olive</td>
<td style="background-color: yellow;">Vàng</td>
</tr>
<tr>
<td style="background-color: navy; color: white;">Xanh dương</td>
<td style="background-color: blue; color: white;">Xanh</td>
<td style="background-color: teal; color: white;">Xanh lam</td>
<td style="background-color: aqua;">Xanh dương nhạt</td>
</tr>
</table>

Đặt Màu Nền với Tên Màu

Chúng ta đã thấy cách đặt màu nền, nhưng hãy củng cố lại với các tên màu:

<div style="background-color: lavender; padding: 10px; margin: 5px;">Nền màu lavande</div>
<div style="background-color: mistyrose; padding: 10px; margin: 5px;">Nền màu hồng nhạt</div>
<div style="background-color: honeydew; padding: 10px; margin: 5px;">Nền màu hoa mật</div>

Những màu pastel mềm mại này có thể tạo ra một hiệu ứng dịu dàng trên trang web của bạn. Nhớ rằng, sự chọn màu có thể ảnh hưởng lớn đến tâm trạng và khả năng đọc của trang web của bạn!

Màu Sắc An Toàn cho Trình Duyệt

Trong những ngày đầu của internet, chúng ta phải lo lắng về các màu "an toàn cho trình duyệt" - một bảng màu 216 màu hiển thị nhất quán trên các trình duyệt và hệ điều hành khác nhau. Ngày nay, với các màn hình hiện đại, điều này ít quan trọng hơn. Tuy nhiên, vẫn tốt để biết về điều này cho tính tương thích ngược hoặc khi thiết kế cho các hệ thống cũ.

Dưới đây là một mẫu nhỏ các màu an toàn cho trình duyệt:

<div style="background-color: #FF0000; color: white; padding: 5px; margin: 2px;">Đỏ (#FF0000)</div>
<div style="background-color: #00FF00; padding: 5px; margin: 2px;">Xanh lá cây (#00FF00)</div>
<div style="background-color: #0000FF; color: white; padding: 5px; margin: 2px;">Xanh (#0000FF)</div>
<div style="background-color: #FFFF00; padding: 5px; margin: 2px;">Vàng (#FFFF00)</div>
<div style="background-color: #00FFFF; padding: 5px; margin: 2px;">Xanh dương nhạt (#00FFFF)</div>
<div style="background-color: #FF00FF; padding: 5px; margin: 2px;">Hồng (#FF00FF)</div>

Và thế là xong, các bạn! Bạn đã được trang bị kiến thức để thêm một chút màu sắc vào các trang web của mình. Nhớ rằng, với màu sắc tuyệt vời đến với trách nhiệm - hãy sử dụng quyền lực mới của bạn một cách khôn ngoan để tạo ra các trang web trực quan và dễ đọc.

Cuối cùng, đây là một câu đùa nhỏ cho các nhà phát triển web: Tại sao các nhà phát triển web lại thích chế độ tối? Bởi vì ánh sáng thu hút ruồi!

Tiếp tục thử nghiệm với màu sắc, và đừng ngại sáng tạo. Chúc các bạn may mắn và trang web của bạn luôn đầy màu sắc!

Credits: Image by storyset