CSS ghi đè màu kế thừa

Các phần tử có thể chuyển thông tin kiểu văn bản xuống phần tử con của chúng. Bạn có thể đặt kiểu văn bản trên các phần tử gốc, các kiểu này sẽ xếp tầng xuống và bạn có thể ghi đè các kiểu này trên các phần tử con của chúng

Người ta thường sử dụng kỹ thuật này để đặt các kiểu phông chữ chung trên thẻ Nội dung, để căn chỉnh văn bản và các thành phần khác bên trong các phần và để ghi đè các kiểu khối liên kết mặc định. Dưới đây là ba ví dụ được trình bày sâu hơn để cho thấy cách thức hoạt động của xếp tầng kiểu văn bản

Ví dụ 1 — Kế thừa các style từ Body

Trong ví dụ này, chúng tôi có một bố cục đơn giản

Không có phần tử nào trong số này có tên lớp hoặc kiểu

Theo mặc định, các thành phần này kế thừa kiểu dáng văn bản của chúng từ Nội dung. Bạn có thể thấy điều này bằng cách nhấp vào chỉ báo màu cam bên cạnh kiểu văn bản. Thay đổi họ phông chữ trên Nội dung do đó sẽ thay đổi họ phông chữ cho tất cả các phần tử con của nó.  

Bạn có thể ghi đè kiểu văn bản kế thừa này bằng cách chọn một trong các thành phần văn bản và thay đổi họ phông chữ. Sau đó, bạn sẽ thấy một chỉ báo màu xanh lam cho biết rằng một thay đổi kiểu dáng đã được thực hiện trên thành phần đó

Bạn có thể xóa kiểu này bằng cách nhấp vào chỉ báo màu xanh lam và chọn “Xóa kiểu này” (hoặc giữ ALT và nhấp). Xóa kiểu sẽ đặt họ phông chữ trở lại kế thừa từ phần thân

Lưu ý rằng nội dung là thành phần cấp cao nhất, những thay đổi được thực hiện đối với nội dung sẽ chỉ ảnh hưởng đến trang cụ thể đó. Để áp dụng kiểu cho nội dung của tất cả các trang, trước tiên hãy chọn phần tử nội dung và xóa tên lớp. Sau đó, bạn có thể chọn Thẻ của nó và thay đổi kiểu văn bản

Ví dụ 2 — Kế thừa kiểu từ Mục

Mặc dù một phần không phải là thành phần văn bản, bạn có thể áp dụng kiểu phông chữ tại đây. Theo mặc định, một phần sẽ kế thừa kiểu dáng văn bản của nó từ phần tử nội dung. Bạn có thể ghi đè điều này bằng cách chọn phần và thay đổi kiểu văn bản

Trước khi thực hiện những thay đổi này, các phần tử Tiêu đề và Đoạn văn đã tìm kiếm tất cả các cách lên đầu cấu trúc phân cấp để lấy các kiểu văn bản của chúng từ phần thân. Lưu ý cách thức, sau khi các thay đổi được thực hiện, cả Tiêu đề và Đoạn văn—con của thành phần phần—hiện kế thừa các kiểu này. Điều này là do việc thay đổi kiểu văn bản trên phần tử phần đã phá vỡ chuỗi kế thừa từ phần thân

Việc thay đổi căn chỉnh văn bản thành Trung tâm trên một phần là điều phổ biến. Điều này sẽ căn chỉnh tất cả các phần tử văn bản và khối nội tuyến, như hình ảnh và nút, bên trong một phần được căn giữa

Ví dụ 3 — Khối liên kết

Trong ví dụ này, có một số văn bản được lồng trong Khối liên kết. Bạn có thể trực tiếp tạo kiểu cho văn bản này hoặc bạn có thể chọn Khối liên kết và thực hiện các thay đổi tại đây. Giống như trước đây, những thay đổi kiểu này sẽ phá vỡ chuỗi kế thừa và khiến văn bản kế thừa từ Khối liên kết. Để kiểm tra điều này, bạn có thể chọn thành phần văn bản và nhấp vào chỉ báo màu cam để thấy rằng các thay đổi kiểu văn bản trên Khối liên kết cũng được thay đổi tại đây

Bạn cũng có thể ghi đè các kiểu văn bản màu xanh lam mặc định của Khối liên kết bằng cách chọn thành phần văn bản và thực hiện các thay đổi. Logic tương tự cũng được áp dụng ở đây—việc tạo kiểu trực tiếp cho thành phần văn bản sẽ ghi đè mọi kiểu văn bản kế thừa

Từ trang trước, chúng ta đã biết rằng các biến toàn cục có thể được truy cập/sử dụng trong toàn bộ tài liệu, trong khi các biến cục bộ chỉ có thể được sử dụng bên trong bộ chọn nơi nó được khai báo

Nhìn vào ví dụ từ trang trước

Thí dụ

nguồn gốc {
--màu xanh da trời. #1e90ff;
--trắng. #ffffff;
}

cơ thể người {
màu nền. var(--blue);
}

h2 {
viền dưới. 2px solid var(--blue);
}

thùng đựng hàng {
màu. var(--blue);
màu nền. var(--white);
đệm. 15px;
}

cái nút {
màu nền. var(--white);
màu. var(--blue);
biên giới. 1px solid var(--blue);
đệm. 5px;
}

Đôi khi chúng tôi muốn các biến chỉ thay đổi trong một phần cụ thể của trang

Giả sử chúng ta muốn có một màu xanh lam khác cho các phần tử nút. Sau đó, chúng ta có thể khai báo lại biến --blue bên trong bộ chọn nút. Khi chúng ta sử dụng var(--blue) bên trong bộ chọn này, nó sẽ sử dụng giá trị biến cục bộ --blue được khai báo tại đây

Chúng tôi thấy rằng biến --blue cục bộ sẽ ghi đè biến --blue toàn cầu cho các phần tử nút

Thí dụ

nguồn gốc {
--màu xanh da trời. #1e90ff;
--trắng. #ffffff;
}

cơ thể người {
màu nền. var(--blue);
}

h2 {
viền dưới. 2px solid var(--blue);
}

thùng đựng hàng {
màu. var(--blue);
màu nền. var(--white);
đệm. 15px;
}

cái nút {
--màu xanh da trời. #0000ff;
màu nền. var(--white);
màu. var(--blue);
biên giới. 1px solid var(--blue);
đệm. 5px;
}

Thêm một biến cục bộ mới

Nếu một biến chỉ được sử dụng ở một nơi duy nhất, chúng ta cũng có thể khai báo một biến cục bộ mới, như thế này

Thí dụ

nguồn gốc {
--màu xanh da trời. #1e90ff;
--trắng. #ffffff;
}

cơ thể người {
màu nền. var(--blue);
}

h2 {
viền dưới. 2px solid var(--blue);
}

thùng đựng hàng {
màu. var(--blue);
màu nền. var(--white);
đệm. 15px;
}

cái nút {
--button-blue. #0000ff;
màu nền. var(--white);
màu. var(--button-blue);
biên giới. 1px solid var(--button-blue);
đệm. 5px;
}

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ chức năng var()

Làm cách nào để kế thừa màu trong CSS?

Làm cách nào để kiểm soát tính kế thừa trong CSS?

Ghi đè CSS hoạt động như thế nào?

Làm cách nào để ghi đè CSS nội tuyến mà không cần sử dụng quan trọng?