HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Hướng dẫn CSS

TRANG CHỦ CSS Giới thiệu CSS Cú pháp CSS Bộ chọn CSS CSS Cách thực hiện Nhận xét CSS Màu CSS
Màu sắc RGB HEX HSL
Nền CSS
Màu nền Hình nền Bối cảnh Lặp lại Tệp đính kèm nền Tốc ký nền
Đường viền CSS
Biên giới Chiều rộng biên giới Màu viền Các mặt biên giới Tốc ký biên giới Viền tròn
Lề CSS
Lợi nhuận Margin Collapse
CSS Padding Chiều cao / Chiều rộng CSS Mô hình hộp CSS Đề cương CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Văn bản CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Phông chữ CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Biểu tượng CSS Liên kết CSS Danh sách CSS Bảng CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Hiển thị CSS Chiều rộng tối đa CSS Vị trí CSS CSS Z-index CSS Overflow CSS Float
Float Clear Float Examples
Khối nội tuyến CSS Căn chỉnh CSS Bộ kết hợp CSS Lớp giả CSS Phần tử giả CSS Độ mờ của CSS Thanh điều hướng CSS
Navbar Vertical Navbar Horizontal Navbar
Trình đơn thả xuống CSS Thư viện hình ảnh CSS Hình ảnh CSS Sprites Bộ chọn CSS Attr Biểu mẫu CSS Bộ đếm CSS Bố cục trang web CSS Đơn vị CSS Đặc tính CSS CSS! Quan trọng Các hàm toán học CSS

CSS nâng cao

Góc làm tròn CSS Hình ảnh đường viền CSS Nền CSS Màu CSS Từ khóa màu CSS CSS Gradients
Linear Gradients Radial Gradients Conic Gradients
Bóng CSS
Shadow Effects Box Shadow
Hiệu ứng văn bản CSS Phông chữ Web CSS Chuyển đổi CSS 2D Chuyển đổi CSS 3D Chuyển đổi CSS Hoạt ảnh CSS Chú giải công cụ CSS Hình ảnh phong cách CSS Phản chiếu hình ảnh CSS CSS object-fit Vị trí đối tượng CSS Mặt nạ CSS Các nút CSS Phân trang CSS CSS Nhiều cột Giao diện người dùng CSS Biến CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Kích thước hộp CSS Truy vấn phương tiện CSS Ví dụ về CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS đáp ứng

Giới thiệu về RWD RWD Viewport Chế độ xem lưới RWD Truy vấn phương tiện RWD Hình ảnh RWD RWD Video Khung RWD Mẫu RWD

Lưới CSS

Grid Intro Vùng chứa lưới Mục lưới

CSS SASS

Hướng dẫn SASS

Ví dụ về CSS

Mẫu CSS Ví dụ về CSS câu đố css Bài tập CSS Chứng chỉ CSS

Tham chiếu CSS

Tham chiếu CSS Bộ chọn CSS Chức năng CSS Tham chiếu CSS Aural Phông chữ An toàn trên Web CSS Hoạt hình CSS Đơn vị CSS Công cụ chuyển đổi CSS PX-EM Màu CSS Giá trị màu CSS Giá trị mặc định của CSS Hỗ trợ trình duyệt CSS

Màu CSS

❮ Trước Kế tiếp ❯

CSS hỗ trợ hơn 140 tên màu, giá trị HEX, giá trị RGB , giá trị RGBA, giá trị HSL, giá trị HSLA và độ mờ.

Màu RGBA

Giá trị màu RGBA là phần mở rộng của các giá trị màu RGB với kênh alpha - chỉ định độ mờ cho một màu.

Giá trị màu RGBA được chỉ định bằng: rgba (đỏ, lục, lam, alpha). Tham số alpha là một số trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).

rgba (255, 0, 0, 0,2);
rgba (255, 0, 0, 0,4);
rgba (255, 0, 0, 0,6);
rgba (255, 0, 0, 0,8);

Ví dụ sau xác định các màu RGBA khác nhau:

Thí dụ

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

Màu HSL

HSL là viết tắt của Hue, Saturation và Lightness.

Giá trị màu HSL được chỉ định với: hsl (màu sắc, độ bão hòa, độ đậm nhạt).

  1. Hue là một mức độ trên bánh xe màu (từ 0 đến 360):
    • 0 (hoặc 360) là màu đỏ
    • 120 là màu xanh lá cây
    • 240 là màu xanh lam
  2. Độ bão hòa là giá trị phần trăm: 100% là màu đầy đủ.
  3. Độ sáng cũng là một tỷ lệ phần trăm; 0% là màu tối (đen) và 100% là màu trắng.
hsl (0, 100%, 30%);
hsl (0, 100%, 50%);
hsl (0, 100%, 70%);
hsl (0, 100%, 90%);

Ví dụ sau xác định các màu HSL khác nhau:

Thí dụ

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

Màu HSLA

Giá trị màu HSLA là phần mở rộng của các giá trị màu HSL với kênh alpha - chỉ định độ mờ cho một màu.

Giá trị màu HSLA được chỉ định bằng: hsla (màu, độ bão hòa, độ đậm nhạt, alpha), trong đó tham số alpha xác định độ mờ. Tham số alpha là một số trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).

hsla (0, 100%, 30%, 0,3);
hsla (0, 100%, 50%, 0,3);
hsla (0, 100%, 70%, 0,3);
hsla (0, 100%, 90%, 0,3);

Ví dụ sau xác định các màu HSLA khác nhau:

Thí dụ

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */

Độ mờ

Thuộc tính CSS opacityđặt độ mờ cho toàn bộ phần tử (cả màu nền và văn bản sẽ mờ đục / trong suốt).

Giá opacitytrị thuộc tính phải là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).

rgb (255, 0, 0); độ mờ: 0,2;
rgb (255, 0, 0); độ mờ: 0,4;
rgb (255, 0, 0); độ mờ: 0,6;
rgb (255, 0, 0); độ mờ: 0,8;

Lưu ý rằng văn bản ở trên cũng sẽ trong suốt / mờ đục!

Ví dụ sau cho thấy các phần tử khác nhau có độ mờ:

Thí dụ

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */

Kiểm tra bản thân với các bài tập

Bài tập:

Chèn giá trị màu RGBA để có màu nền đỏ đầy đủ của phần tử <h1>, không có độ trong suốt.

<style>
h1 {
  background-color: ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


❮ Trước Kế tiếp ❯