CSS root is a selector that is said to be the topmost element of the web page within the HTML. This element is available within the “structural pseudo-class” library, we can use this for style the topmost parent content from the child content. In CSS, the root element is playing a crucial role in selecting HTML elements. The selector is mainly used for refer element of any web page. In an, any HTML document file HTML element will always the highest level parent. This makes us predict the behavior of the root element easily. CSS is a page styling language that can be used for other document formats also, for example XML and SVG. The root selector pseudo-class can refer to different elements in such cases. So we can conclude that the root element always the topmost element of the HTML page. Real-Time Scenario: When we want to style the entire page into different background colors and middle portion of div tags with different colors then we go for root selector.
Ghi chú. Nếu chúng ta áp dụng bất kỳ cài đặt nào cho thẻ “body” hoặc thẻ “root” thì cả hai sẽ dẫn đến root nằm trên thẻ body
cú pháp
Bộ chọn gốc này được sử dụng để thực hiện các kiểu CSS cấp gốc như màu nền
Bắt đầu khóa học phát triển phần mềm miễn phí của bạn
Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác
Gói phát triển phần mềm tất cả trong một[hơn 600 khóa học, hơn 50 dự án]
Giá
Xem khóa học
600+ Khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập Trọn đời
4. 6 [83.855 xếp hạng]
:root {
//CSS styles
}
Ví dụ để triển khai gốc CSS
Dưới đây là một số ví dụ được đề cập
Ví dụ 1
Mã số
:root {
background-color: purple;
padding: 100px;
}
body {
background-color: white;
padding: 50px;
font-size: 22px;
color: brown;
}
h1
{
color: green;
text-align: center;
}
Introduction to root selector
CSS root is a selector which is said to be top most element of the web page within the HTML. This CSS root element is available within the “structural pseudo class” library, we can use this for style the top most parent content from the child content. In CSS the root element is really play crucial role for selecting HTML element. The CSS :root selector is mainly used for refer element of any web page. In an any HTML document file HTML element will always the highest level parent. Which makes us to predict the behavior of root element easily. As CSS is page styling language that can be used for other document formats also, for example XML and SVG. The root selector pseudo class can refer to different elements in such cases. So we can conclude that root element always the top most element of the HTML page.
đầu ra
Giải trình. Như bạn có thể thấy bộ chọn gốc áp dụng các kiểu cho phần tử trên cùng của HTML. Phần tử nội dung áp dụng các kiểu CSS cho ngay bên dưới phần của bộ chọn gốc
Ví dụ #2
Mã số
:root { /*root selector top most element styles*/
background-color: red;
transition: background-color .6s;
padding: 140px;
}
:root:hover {
background-color: blue;
}
body {/*body for just below of the root element styles*/
background-color: lightgreen;
padding: 50px;
font-size: 22px;
color: navy;
}
h1
{
color: green;
text-align: center;
}
Introduction to root selector
CSS root is a selector which is said to be top most element of the web page within the HTML. This CSS root element is available within the “structural pseudo class” library, we can use this for style the top most parent content from the child content. In CSS the root element is really play crucial role for selecting HTML element. . The CSS :root selector is mainly used for refer element of any web page. In an any HTML document file HTML element will always the highest level parent. Which makes us to predict the behavior of root element easily. As CSS is page styling language that can be used for other document formats also, for example XML and SVG. The root selector pseudo class can refer to different elements in such cases. So we can conclude that root element always the top most element of the HTML page.
đầu ra
Giải trình. Như bạn có thể thấy trong hình gốc ở trên, màu nền ban đầu là màu đỏ và khi chúng ta di chuột vào vùng màu đỏ thì màu đỏ chuyển sang màu xanh cho đến 0. 6 giây ngược lại. Phần tử nội dung áp dụng các kiểu CSS cho ngay bên dưới phần của bộ chọn gốc
Ví dụ #3
Mã số
:root { /*root selector top most element styles*/
background-color: fuchsia;
padding: 140px;
}
:root::before {
content: "This is root selecot area. I am just top element of the body.";
color: blue;
font-weight: bold;
font-size: 30px;
/* .. */
}
body {/*body for just below of the root element styles*/
background-color: lightpink;
padding: 50px;
font-size: 22px;
color: red;
}
h1
{
color: green;
text-align: center;
}
Introduction to root selector
CSS root is a selector which is said to be top most element of the web page within the HTML. This CSS root element is available within the “structural pseudo class” library, we can use this for style the top most parent content from the child content. In CSS the root element is really play crucial role for selecting HTML element. . The CSS :root selector is mainly used for refer element of any web page. In an any HTML document file HTML element will always the highest level parent. Which makes us to predict the behavior of root element easily. As CSS is page styling language that can be used for other document formats also, for example XML and SVG. The root selector pseudo class can refer to different elements in such cases. So we can conclude that root element always the top most element of the HTML page.
đầu ra
Giải trình. Như bạn có thể thấy, chúng ta có thể thấy văn bản riêng biệt trong bộ chọn gốc và vùng nội dung. Điều này có thể kết luận chúng tôi root là phần tử trên cùng trong HTML
Phần kết luận
Root trong CSS là một bộ chọn được sử dụng để chọn vùng trên cùng của phần tử HTML. Chúng tôi có thể áp dụng các kiểu cần thiết của người dùng cho khu vực bộ chọn gốc này
Bài viết được đề xuất
Đây là hướng dẫn về root CSS. Ở đây chúng tôi thảo luận về phần giới thiệu về gốc CSS, nó làm gì, cú pháp, ví dụ với đầu ra mã và giải thích. Bạn cũng có thể xem qua các bài viết liên quan khác của chúng tôi để tìm hiểu thêm –