Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

Màu chữ và màu nền trong CSS

4.4/5 - (8 bình chọn)

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 đó.

Xem thêm: Cú pháp CSS

Màu chữ và màu nền trong CSS feature_image

Trước khi vào nội dung chính, mình nói thêm 1 chút về các cách viết mã màu. Trong CSS mã màu được viết theo rất nhiều cách tùy theo cách sử dụng và thói quen lập trình của mỗi người. Nó được chia thành 6 cách viết nhưng ở đây mình chỉ giới thiệu 4 cách viết đầu vì nó được sử dụng rộng rãi và phổ biến nhất

  • Predefined: Là màu được định nghĩa sẵn trong HTML.
  • Hexadecimal colors: Là hệ màu sử dụng hệ số thập lục phân
  • RGB colors: là hệ màu với 3 màu Red, Green, Blue
  • RGBA colors: là hệ màu với 4 màu: Red, Green, Blue, Alpha
  • HSL colors: Là hệ màu với 3 màu: Hue, Saturation, Lightness
  • HSLA colors: Là hệ màu với 4 màu: Hue, Saturation, Lightness và Alpha.

Predefined: Là màu sắc được định nghĩa sẵn trong HTML và CSS như: white (màu trắng), red (màu đỏ), blue (màu xanh dương)… còn rất nhiều các màu khác nữa, mời các bạn tham khảo chúng ở đây: https://www.w3schools.com/colors/colors_names.asp

Hexadecimal color: chúng được định nghĩa bởi mã hexa, cụ thể là #RRGGBB. Trong đó RR là mã màu đỏ, GG là mã màu xanh lá cây, BB là mã màu xanh dương. Tất cả chúng nằm trong khoảng từ 00 đến FF

Ví dụ: Các màu hexa cơ bản:

#div1 { color: #ff0000; }    /* Màu đỏ*/

#div2 { color: #00ff00; }    /* Màu xanh lá*/

#div3 { color: #0000ff; }    /* Màu xanh dương*/

RGB colors: Là mã màu được định nghĩa bởi 3 màu chủ đạo là Red(R), Green(G) và Blue(B). Mỗi tham số xác định cường độ của màu và chúng được giới hạn từ 0 đến 255 hoặc một giá trị phần trăm (0 đến 100)

Ví dụ:

#div1 { color: rgb(255, 0, 0); }      /* Màu đỏ */

#div2 { color: rgb(0, 255, 0); }      /* Màu xanh lá */

#div3 { color: rgb(0, 0, 255); }      /* Màu xanh dương*/

RGBA colors: Cũng tương tự như mã màu RGB, nhưng chúng có thêm 1 thuộc tính thứ 4 là Alpha dùng để làm mờ hoặc làm rõ màu thêm. Chúng được giới hạn từ 0.0 đến 1.0

Ví dụ:

#div1 { color: rgba(255, 0, 0, 0.3); }

/* Màu đỏ nhưng có thêm thuộc tính opacity: 0.3 để làm mờ màu đi */

Quay trở lại vấn đề chính là màu chữ và màu nền trong CSS. Màu chữ màu nền là một trong những thuộc tính được sử dụng nhiều trong CSS. Nắm được kiến thức về màu sắc thì sẽ phối màu thì bạn sẽ làm cho trang web của mình trở nên đẹp và bắt mắt hơn rất nhiều.

Màu chữ

Có rất nhiều tài liệu nói về màu chữ trong Css. Tuy nhiên theo mình màu chữ được sử dụng để thiết lập màu cho một phần tử nào đó trong html. Cú pháp của nó được thê hiện qua bảng sau:

Màu chữ và màu nền trong CSS cu-phap-mau-chu-trong-css

Trông có vẻ phức tạp nhưng thực ra nó rất đơn giản. Nó được thể hiện qua ví dụ sau:

Ví dụ

Màu chữ và màu nền trong CSS mau-chu-trong-css

Kết quả sẽ được như sau:

Màu chữ và màu nền trong CSS mau-chu-trong-css-b

Màu nền

Vậy chúng ta thay đổi được màu chữ được thì liệu có thể thay đổi được màu nền không? Câu trả lời được giải đáp qua bảng sau:

Màu chữ và màu nền trong CSS cu-phap-mau-nen-trong-css

Tương tự như màu chữ (color), bạn có thể thêm màu nền cho bất kỳ đối tượng nào trong body như thẻ a, thẻ p, thẻ div… Giá trị mặc định của màu nền là màu trong suốt (transparent), điều này có ý nghĩa là nếu một phần tử nào đó không được định nghĩa màu thì mặc định nó sẽ nhận màu nền là trong suốt để làm nổi bật màu chữ lên.

Tuy nhiên không phải lúc nào cũng tốt, nếu chúng ta để màu chữ là màu trắng và để màu nền là transparent thì đó quả thật là một điều không thể chấp nhận được. Vì chúng sẽ hòa lẫn vào nhau khiến chúng ta không phân biệt được đâu là chữ và đâu là màu nền. Vì vậy chúng ta cần phải hiểu rõ giá trị của màu chữ cũng như màu nền để kết hợp chúng cho tốt.

Ví dụ:

Màu chữ và màu nền trong CSS mau-nen-trong-css

Kết quả là:

Màu chữ và màu nền trong CSS mau-nen-trong-css-b

Màu chữ và màu nền trong trang web rất quan trọng, nó có rất nhiều màu và sẽ có vô số cách phối màu. Vì vậy qua bài này mình mong các bạn sẽ hiểu được phần nào về màu chữ và màu nền trong css là như thế nào. Đồng thời cũng hiểu được các mảng cũng như mã màu trong CSS là như thế nào, cũng như biết cách phối màu cho thật đẹp và bắt mắt. Chúc các bạn thành công!

Xem thêm: Dịch vụ thiết kế website

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Tại sao bạn nên sử dụng trang đích thay vì trang web của bạn. Hãy cùng tìm hiểu 5 lý...
    25 giây trước
  2. Công cụ tìm kiếm của Google sử dụng nhiều phương pháp để xác định trang nào được hiển thị đầu...
    20 giây trước
  3. Đây là một số câu hỏi mà chúng ta đã có trong năm qua khi HTTPS trở nên phổ biến....
    28 giây trước
  4. Làm đẹp là khao khát, mong muốn chính đáng của mỗi người. Không chỉ riêng chị em phụ nữ, bất...
    12 giây trước
  5. Việc xếp hạng kết quả tìm kiếm trên các công cụ tìm kiếm là vô cùng quan trọng. Vì vậy,...
    14 giây trước
  6. Hiện nay trên thế giới có rất nhiều nền tảng mạng xã hội thu hút được người dùng từ mọi...
    1 giây trước
  7. Google AMP WordPress Plugin sẽ tự động tạo ra thêm cho bạn thêm một phiên bản riêng cho điện các...
    14 giây trước
  8. Với xu hướng toàn cầu hóa, mọi thứ phát triển vượt bậc nhất là Internet. Hiện nay, có rất nhiều...
    23 giây trước
  9. Bạn đã có ý tưởng tuyệt vời cho một doanh nghiệp trực tuyến chưa? Nếu có, hãy bắt tay vào...
    9 giây trước
  10. Tổng quát Hướng dẫn Tổng quan Chào mừng bạn đến với Chương trình Xếp hạng Chất lượng tìm kiếm! Là...
    10 giây trước