Root trong CSS w3schools là gì?

Lớp giả này trong CSS khớp với phần tử gốc của tài liệu. Nó chọn cha cấp cao nhất trong cây tài liệu hoặc DOM

Trong HTML, phần tử luôn là phần tử gốc. Mặc dù. root tương đương với bộ chọn html vì cả hai đều nhắm mục tiêu cùng một phần tử, nhưng. bộ chọn gốc có độ đặc hiệu cao hơn

cú pháp

Ví dụ

Bây giờ, hãy thử bộ chọn html và. bộ chọn gốc đồng thời. Mặc dù cả hai đều hoạt động tương tự nhưng về vấn đề cụ thể,. bộ chọn gốc thắng

Ví dụ

Trong ví dụ này, chúng ta sẽ định nghĩa các thuộc tính giống nhau trong bộ chọn html cũng như trong. bộ chọn gốc. Các thuộc tính trong. bộ chọn gốc sẽ hoạt động vì tính đặc hiệu cao hơn. Nhưng những thuộc tính không có trong. bộ chọn gốc nhưng được đề cập trong bộ chọn html, thì các thuộc tính của bộ chọn html sẽ hoạt động

Ví dụ

Trong ví dụ trên, chúng ta có thể thấy rằng các thuộc tính màu nền và màu sắc đều được đề cập trong html cũng như trong. bộ chọn gốc, nhưng ở đầu ra, các thuộc tính được đề cập trong. bộ chọn gốc sẽ hoạt động. Điều này là do tính đặc hiệu cao hơn của. bộ chọn gốc

Các. lớp giả gốc đại diện cho một phần tử là gốc của tài liệu. Trong HTML, đây luôn là phần tử HTML

cú pháp

selector:root{ properties }

Ví dụ

[Phong cách. css]

 :root{
   background-color: #ccc;
 }

[mục lục. html]

This is a paragraph.

CSS định nghĩa. lớp giả gốc trong

Lớp giả CSS :root khớp với phần tử gốc của cây đại diện cho tài liệu. Trong HTML, :root đại diện cho phần tử

 :root{
   background-color: #ccc;
 }

 :root{
   background-color: #ccc;
 }

/* Selects the root element of the document:
    in the case of HTML */
:root {
  background: yellow;
}

:root

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

Bảng BCD chỉ tải trong trình duyệt có bật JavaScript. Bật JavaScript để xem dữ liệu

Tìm thấy một vấn đề với trang này?

• Chỉnh sửa trên GitHub
• Nguồn trên GitHub
• Báo cáo sự cố với nội dung này trên GitHub
• Bạn muốn tự khắc phục sự cố?

Sửa đổi lần cuối. Ngày 29 tháng 12 năm 2022, bởi những người đóng góp MDN

Các biến CSS có quyền truy cập vào DOM, nghĩa là bạn có thể tạo các biến có phạm vi cục bộ hoặc toàn cầu, thay đổi các biến bằng JavaScript và thay đổi các biến dựa trên truy vấn phương tiện

Một cách hay để sử dụng các biến CSS là khi nói đến màu sắc của thiết kế của bạn. Thay vì sao chép và dán nhiều lần các màu giống nhau, bạn có thể đặt chúng vào các biến

cách truyền thống

Ví dụ sau đây cho thấy cách truyền thống để xác định một số màu trong biểu định kiểu (bằng cách xác định màu sẽ sử dụng cho từng thành phần cụ thể)

Ví dụ

cơ thể {màu nền. #1e90ff;

h2 { đường viền dưới. 2px rắn #1e90ff;

.container {
  màu. #1e90ff;
  màu nền. #ffffff;
  phần đệm. 15px;
}

nút {
  màu nền. #ffffff;
  màu. #1e90ff;
  viền. 1px solid #1e90ff;
  phần đệm. 5px;
}

Cú pháp của hàm var()

Hàm

 :root{
   background-color: #ccc;
 }

Cú pháp của hàm

 :root{
   background-color: #ccc;
 }

Ghi chú. Tên biến phải bắt đầu bằng hai dấu gạch ngang (--) và phân biệt chữ hoa chữ thường

Cách hoạt động của var()

Đầu tiên. Các biến CSS có thể có phạm vi toàn cầu hoặc cục bộ

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

Để tạo một biến có phạm vi toàn cầu, hãy khai báo nó bên trong bộ chọn :root. Bộ chọn

 :root{
   background-color: #ccc;
 }

Để tạo một biến có phạm vi cục bộ, hãy khai báo nó bên trong bộ chọn sẽ sử dụng nó

Ví dụ sau tương tự như ví dụ trên, nhưng ở đây chúng ta sử dụng hàm

 :root{
   background-color: #ccc;
 }

Đầu tiên, chúng ta khai báo hai biến toàn cục (--blue và --white). Sau đó, chúng tôi sử dụng hàm

 :root{
   background-color: #ccc;
 }

Ví dụ

:root {
  --blue. #1e90ff;
  --white. #ffffff;
}

cơ thể {màu nền. var(--blue);

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

.container {
  màu. var(--blue);
  màu nền. var(--white);
  phần đệm. 15px;
}

nút {
  màu nền. var(--white);
  màu. var(--blue);
  viền. 1px solid var(--blue);
  phần đệm. 5px;
}

Ưu điểm của việc sử dụng var() là

• làm cho mã dễ đọc hơn (dễ hiểu hơn)
• làm cho việc thay đổi các giá trị màu dễ dàng hơn nhiều

Để thay đổi màu trắng xanh thành trắng xanh dịu hơn, bạn chỉ cần thay đổi hai giá trị biến

Ví dụ

:root {
  --blue. #6495ed;
  --white. #faf0e6;
}

cơ thể {màu nền. var(--blue);

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

.container {
  màu. var(--blue);
  màu nền. var(--white);
  phần đệm. 15px;
}

nút {
  màu nền. var(--white);
  màu. var(--blue);
  viền. 1px solid var(--blue);
  phần đệ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

 :root{
   background-color: #ccc;
 }

Gốc trong CSS là gì?

Gốc trong HTML là gì?

Sự khác biệt giữa gốc và HTML là gì?

Root có nghĩa là gì trong JavaScript?