Màu sắc trong CSS

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    11 thg 9, 2022

  • Số lượt xem

    264 lượt xem


Trong CSS, màu sắc được xác định bằng các màu có sẵn (red, white, ...vv), hoặc các mã màu như: RGB, HEX, HSL, RGBA, HSLA.


Những màu có sẵn trong CSS

Những màu này đã được định nghĩa từ trước:

DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

 

CSS/HTML hỗ trợ 140 màu tiêu chuẩn.


Màu nền trong CSS

Ta có thể chỉnh màu phông nền của các thẻ HTML:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ví dụ

<h1 style="background-color:DodgerBlue;">Hello World</h1>  <p style="background-color:Tomato;">Lorem ipsum...</p>

 


Màu chữ trong CSS

Chúng ta có thể chỉnh màu chữ của những đoạn text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ví dụ

<h1 style="color:Tomato;">Hello World</h1>  <p style="color:DodgerBlue;">Lorem ipsum...</p>  <p style="color:MediumSeaGreen;">Ut wisi enim...</p>

 


Màu viền trong CSS

Ta có thể chỉnh màu viền của thẻ HTML:

Hello World

Hello World

Hello World

Ví dụ

<h1 style="border:2px solid Tomato;">Hello World</h1>  <h1 style="border:2px solid DodgerBlue;">Hello World</h1>  <h1 style="border:2px solid Violet;">Hello World</h1>

 


Những giá trị màu sắc

Trong CSS, màu sắc được xác định bằng giá trị RGB , giá trị HEX, giá trị HSL, giá trị RGBA, và giá trị HSLA:

Dưới đây là màu "Tomato" được xác định qua các mã khác nhau:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

 

Cũng là màu "Tomato" nhưng trong suốt 50%:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

 

Ví dụ

<h1 style="background-color:rgb(255, 99, 71);">...</h1>  <h1 style="background-color:#ff6347;">...</h1>  <h1 style="background-color:hsl(9, 100%, 64%);">...</h1>    <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>  <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

 

Học nhiều hơn về các mã màu

Bạn sẽ được học chi tiết về RGB, HEX and HSL trong những chương tiếp.


Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.