Cách Chỉnh Màu Nền (Background Color) Cho Phần Tử Trong CSS

Trang chủ » đổi Màu Thẻ Li Trong Html » Cách Chỉnh Màu Nền (Background Color) Cho Phần Tử Trong CSS

Có thể bạn quan tâm

  • HTML
  • CSS
  • JAVASCRIPT
  • JQUERY
  • MYSQL
  • PHP
CSS Bài 11: Cách thiết lập màu nền cho một phần tử Cách thiết lập màu nền cho một phần tử HTML

1) Cách thiết lập màu nền cho phần tử

- Thông thường thì các phần tử sẽ có nền "trong suốt", nếu muốn thiết lập lại màu nền cho phần tử thì chúng ta cần phải sử dụng thuộc tính background-color với cú pháp như sau:

background-color:value;

- Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị bên dưới:

transparent

- Nền của phần tử sẽ trong suốt.

 Xem ví dụ
color

- Chỉ định một màu sắc cụ thể (màu sắc này có thể được xác định dựa theo tên màu, giá trị rgb, giá trị hex, giá trị rgba, giá trị hsl, . . . .)

 Xem ví dụ
initial

- Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính background-color có giá trị là transparent)
inherit

- Kế thừa giá trị thuộc tính background-color từ phần tử cha của nó.

 Xem ví dụ

- Lưu ý: Thuộc tính background-color cũng thường được áp dụng trong việc đánh dấu văn bản.

Ví dụ: <!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> </head> <body> <p>Học <span style="background-color:red">CSS</span> miễn phí</p> </body> </html> Xem ví dụ

2) Điều chỉnh phạm vi được thiết lập màu nền

- Trong các bài học trước thì tôi đã từng có giới thiệu sơ qua về cấu trúc của một phần tử HTML, nó bao gồm bốn thành phần chính: margin border padding content

marginborderpaddingcontent

- Khi chúng ta sử dụng thuộc tính background-color để thiết lập màu nền cho phần tử thì mặc định phạm vi được thiết lập màu nền sẽ bắt đầu từ phần border cho đến hết phần content

marginborderpaddingcontent

- Tuy nhiên, với việc sử dụng thuộc tính background-clip thì chúng ta có thể điều chỉnh lại phạm vi được thiết lập màu nền của phần tử.

background-clip: value;

- Trong đó, value có thể được xác định dựa theo một trong năm loại giá trị như sau:

border-box

- Phạm vi được thiết lập màu nền sẽ bao gồm ba phần:

  • border
  • padding
  • content
 Xem ví dụ
padding-box

- Phạm vi được thiết lập màu nền sẽ bao gồm hai phần:

  • padding
  • content
content-box

- Phạm vi được thiết lập màu nền chỉ bao gồm phần: content
initial

- Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính background-clip có giá trị là border-box)
inherit

- Kế thừa giá trị thuộc tính background-clip từ phần tử cha của nó.
Tổng quan về CSS Làm thế nào để định dạng cho một phần tử ? Những kiến thức cơ bản trong việc viết mã CSS Xác định màu sắc (color) trong CSS Cách xác định bộ chọn (selector) của phần tử Cấu trúc phần tử trong CSS Tạo đường viền (border) cho phần tử Đường viền hình ảnh Thiết lập vùng đệm (padding) cho phần tử Xác định khoảng cách lề (margin) của phần tử Màu nền (background color) Kích thước phần tử Hình nền (background image) Thiết lập độ cong (radius) cho các góc của phần tử Tạo cái bóng (shadow) cho phần tử Các thuộc tính định dạng DANH SÁCH Các thuộc tính định dạng VĂN BẢN Bộ chọn dựa trên quan hệ huyết thống Cách xác định bộ chọn trong một số trường hợp đặc biệt Bộ chọn của các “thành phần” bên trong phần tử Cách định dạng cho bảng (table) bằng CSS Thuộc tính box-sizing trong CSS Các loại dấu trích dẫn (quote) được hỗ trợ trong CSS Chia văn bản thành nhiều cột Tạo một vài hiệu ứng đơn giản cho hình ảnh Chỉnh độ trong suốt của phần tử Tạo thanh cuộn (scroll) cho phần tử Xác định kiểu hiển thị (display) của phần tử Thiết lập vị trí cho phần tử Hiệu ứng chuyển động Cách sử dụng nhóm thuộc tính Transition Định dạng cho Liên kết Thuộc tính Float & Clear trong CSS Độ ưu tiên hiển thị là gì ?

Từ khóa » đổi Màu Thẻ Li Trong Html