Gốc trong CSS là gì?
|
Sau đó, trình duyệt web của bạn có thể áp dụng các kiểu này cho toàn bộ trang web của bạn, hãy tiếp tục đọc để nâng cao kỹ năng viết mã CSS của bạn với gốc CSS Show
nội dung Là gì. CSS gốc?:Root CSS, also called CSS. root là một lớp giả trong CSS đại diện cho phần tử gốc trong HTML i. e. Ngoài ra, phần tử < html > giống hệt với bộ chọn html trong CSS. Trong khối mã tiếp theo, chúng tôi trình bày cú pháp của CSS. nguồn gốc. nguồn gốc {/* Viết phong cách của bạn ở đây. */ } When you define any style in the CSS root selector, your web browser can apply it to elements in the element, where the only exception is when the CSS style is not inheritable. Furthermore, we said that the html selector in CSS and CSS :root are identical, there is a big difference between them. We’ll discuss this later in the article. Hiện tại, chúng ta hãy chú ý đến một số tính hữu ích của CSS. nguồn gốc Công dụng của CSS. Nguồn gốcCSS. root đơn giản hóa kiểu trang web của bạn. Đó là bởi vì khi bạn cần một phong cách toàn cầu cho trang web của mình, bạn có thể viết chúng bằng CSS. nguồn gốc. Hơn nữa, khi bạn cần cập nhật các kiểu này, bạn có thể cập nhật chúng tại một vị trí duy nhất, trong CSS. nguồn gốc. Làm như vậy, nó ngăn chặn việc lặp lại mã và đơn giản hóa việc bảo trì Như đã nói, chúng tôi đã phác thảo bên dưới một số trường hợp sử dụng mà CSS. root là dịch vụ tuyệt vời
– Khai báo các biến CSS toàn cụcBạn có thể viết các biến trong CSS trong phần khai báo của CSS. nguồn gốc. Sau đó, bạn có thể sử dụng các biến ở những nơi khác trong biểu định kiểu của mình. Bạn thực hiện việc này thông qua hàm CSS var() , nếu muốn, bạn có thể thay đổi giá trị của biến đó tại thời điểm gọi. Khi bạn cần cập nhật giá trị biến này, hãy thực hiện thay đổi tại CSS. nguồn gốc. Các quy tắc CSS khác sử dụng các biến sẽ nhận các thay đổi. Trong khối mã tiếp theo của chúng tôi, chúng tôi xác định một số biến gốc CSS trong CSS. nguồn gốc. Sau đó, ở các vị trí khác trong CSS của chúng tôi, chúng tôi sử dụng một số biến để tạo kiểu Chúng tôi sử dụng. phần tử gốc để tạo kiểu cho thẻ chính này. Đây là văn bản giả /** Xác định các biến CSS toàn cầu trong thư mục gốc **/ nguồn gốc { -màu chính. #1560bd; –màu viền. #1a1a1a; –phông chữ trắng. #ffffff; –chung-đệm. 1. 2em; –mb-2. 2em; } cơ thể người { trưng bày. lưới; mục địa điểm. trung tâm; chiều cao. 100vh; } chủ yếu { bề rộng. 50%; cỡ chữ. 1. 2em; chiều cao giữa các dòng. 1. 168; Chức vụ. liên quan đến; biên giới. var rắn 5px (–màu viền); đệm. var(–General-padding); } p chính. con đầu lòng { lề dưới. var(–mb-2); đề cương. var nét đứt 2px(–màu viền); } – Đặt màu nền của trang webNếu bạn đặt màu nền trang web của mình trong bộ chọn nội dung CSS, bạn có thể thực hiện tương tự trong thư mục gốc CSS. Chúng tôi trình bày một ví dụ trong khối mã tiếp theo, trong đó, chúng tôi xác định màu nền của trang web trong CSS. nguồn gốc. Khi bạn chạy mã trong trình duyệt web của mình, trang web sẽ có nền màu xanh lam, bây giờ bạn có thể thay đổi màu sắc và quan sát các thay đổi Chúng tôi sử dụng. phần tử gốc để đặt màu nền của trang web này. nguồn gốc { màu nền. #1560bd; } cơ thể người { trưng bày. lưới; mục địa điểm. trung tâm; chiều cao. 100vh; } chủ yếu { bề rộng. 50%; cỡ chữ. 1. 2em; chiều cao giữa các dòng. 1. 168; màu nền. #ffffff; biên giới. 5px cố định #1a1a1a; đệm. 1. 2em; } – Làm sinh động trang web của bạn trên HoverVới CSS. root, bạn có thể tạo hiệu ứng động cho nền trang web thông qua CSS. hover lớp giả. Đầu tiên, đặt màu nền trong CSS. nguồn gốc. Hơn nữa, bạn có thể đặt thuộc tính chuyển đổi CSS thành màu nền, bằng cách đảm bảo quá trình chuyển đổi có khung thời gian được chỉ định. Cuối cùng, đính kèm một CSS. hover lớp giả sang CSS. nguồn gốc. CSS. lớp giả di chuột phải có các kiểu thay đổi màu nền. Mã tiếp theo của chúng tôi chứa mã triển khai tạo hoạt ảnh cho trang web của bạn khi di chuột Chúng tôi đang tạo hoạt ảnh cho trang web này thông qua. phần tử gốc. Di chuột đến thanh trình duyệt web. Quan sát hiện tượng xảy ra. nguồn gốc { màu nền. #1a1a1a; chuyển tiếp. màu nền 0. 6s; } nguồn gốc. bay lượn { màu nền. #1560bd; } cơ thể người { trưng bày. lưới; mục địa điểm. trung tâm; chiều cao. 100vh; } chủ yếu { bề rộng. 50%; cỡ chữ. 1. 2em; chiều cao giữa các dòng. 1. 168; màu nền. #ffffff; biên giới. 5px rắn #c01; đệm. 1. 2em; } – Place Content Before the ElementBạn có thể đặt nội dung do CSS tạo trước phần tử mở CSS. trước phần tử giả trên CSS. nguồn gốc. Trong kiểu dáng của CSS. gốc và phần tử giả, hãy thêm các kiểu cần thiết. Trên hết, đặt thuộc tính hiển thị CSS của CSS. trước khi chặn. Our next code block has enough details on how to place generated content before the element. When you run the code in your web browser, the generated content should appear at the top of the page.Đây là một văn bản giả. nguồn gốc { màu nền. #aaa; } nguồn gốc. trước { nội dung. “Đây là nội dung được tạo thông qua phần tử giả CSS”; trưng bày. khối; căn chỉnh văn bản. trung tâm; trọng lượng phông chữ. Dũng cảm; cỡ chữ. 1. 2em; đệm. 0. 4em; } cơ thể người { trưng bày. lưới; mục địa điểm. trung tâm; chiều cao. 100vh; } chủ yếu { bề rộng. 50%; cỡ chữ. 1. 2em; chiều cao giữa các dòng. 1. 168; màu nền. #ffffff; biên giới. 5px rắn #c01; đệm. 1. 2em; } – Đặt Kích thước phông chữ gốcKích thước phông chữ gốc xác định kích thước phông chữ của thành phần còn lại trên trang web của bạn, theo mặc định là kích thước 16 pixel. Việc tăng lên 16 pixel, thông qua CSS, sẽ làm tăng kích thước phông chữ trên trang web của bạn, đây là những gì chúng tôi đã làm trong ví dụ mã tiếp theo của mình. Đây là một chương trình giới thiệu khác về những gì bạn có thể làm với CSS. nguồn gốc In our next code example, we set the font size of CSS :root to two em. This changes the default font size on your page to 32 pixels, which by default is 16 pixels in size. Afterwards, in the CSS rule for the Đây là một văn bản giả lớn. nguồn gốc { cỡ chữ. 3em; } cơ thể người { trưng bày. lưới; mục địa điểm. trung tâm; chiều cao. 100vh; } chủ yếu { bề rộng. 50%; chiều cao giữa các dòng. 1. 168; màu nền. #ffffff; biên giới. 5px rắn #c01; đệm. 1. 2em; /* * Chúng tôi xác định kích thước phông chữ trong * gốc em */ cỡ chữ. 2rem; } – Triển khai phông chữ cơ sở đáp ứngVới CSS. root, bạn có thể triển khai một phông chữ đáp ứng. Phông chữ này sẽ điều chỉnh kích thước phông chữ dựa trên chế độ xem của trình duyệt web của bạn, tuy nhiên, để đạt được độ phản hồi của phông chữ, bạn sẽ thay đổi kích thước phông chữ gốc dựa trên chế độ xem. Hơn nữa, điều này có nghĩa là bạn sẽ cần truy vấn phương tiện CSS Truy vấn phương tiện phải nhắm mục tiêu các điểm dừng khác nhau trong thiết kế của bạn, tại mỗi điểm dừng, hãy thay đổi kích thước phông chữ gốc. Chúng tôi chỉ cho bạn cách thực hiện việc này trong khối mã tiếp theo của chúng tôi. Chạy mã trong trình duyệt web của bạn, Sau đó thay đổi chế độ xem của trình duyệt của bạn và quan sát các thay đổi về kích thước phông chữ Kích thước phông chữ của văn bản này thay đổi dựa trên chế độ xem hiện tại của bạn. nguồn gốc { cỡ chữ. 0. 75em; } @media (chiều rộng tối thiểu. 800px) { nguồn gốc { cỡ chữ. 0. 875em; } } @media (chiều rộng tối thiểu. 1200px) { nguồn gốc { cỡ chữ. 1em; } } cơ thể người { trưng bày. lưới; mục địa điểm. trung tâm; chiều cao. 100vh; } chủ yếu { bề rộng. 50%; chiều cao giữa các dòng. 1. 168; màu nền. #ffffff; biên giới. 5px rắn #c01; đệm. 1. 2em; } độ đặc hiệuCSS. gốc có tính đặc hiệu cao hơn bộ chọn html đồng hành của nó trong CSS, mặc dù cả hai đều giống hệt nhau, tính đặc hiệu làm cho chúng khác biệt. Không có cách nào tốt hơn để chứng minh điều này ngoài một ví dụ mã, khi chúng tôi tìm hiểu Trong mã tiếp theo của chúng tôi, chính xác là CSS, chúng tôi đặt màu nền của trang web thông qua CSS. root và bộ chọn html trong CSS. Khi bạn chạy mã trong trình duyệt web của mình, trình duyệt web của bạn sẽ áp dụng màu nền trong CSS. nguồn gốc. Kết quả là trang web sẽ có màu nền xanh Nền của trang web này phải có màu xanh dương, không phải màu đen. nguồn gốc { /* * Trình duyệt web của bạn sẽ áp dụng điều này * màu nền */ màu nền. #1560bd; } html { /* * Trình duyệt web của bạn sẽ KHÔNG áp dụng điều này * màu nền */ màu nền. #1a1a1a; } cơ thể người { trưng bày. lưới; mục địa điểm. trung tâm; chiều cao. 100vh; } chủ yếu { bề rộng. 50%; chiều cao giữa các dòng. 1. 168; màu nền. #ffffff; biên giới. 5px rắn #c01; đệm. 1. 2em; } Di sảnCác phần tử trang web khác sẽ kế thừa một số thuộc tính nhất định từ CSS. root, một ví dụ về thuộc tính như vậy là CSS font-size. Trong ví dụ mã tiếp theo của chúng tôi, văn bản đoạn văn có kích thước phông chữ được tính toán là 19. 2 điểm ảnh. Trình duyệt web đến giá trị này sau khi nhân CSS. kích thước phông chữ gốc và 16 Văn bản này có cỡ chữ kế thừa là 19. 2 điểm ảnh. nguồn gốc { cỡ chữ. 1. 2em; } cơ thể người { trưng bày. lưới; mục địa điểm. trung tâm; chiều cao. 100vh; } chủ yếu { bề rộng. 50%; chiều cao giữa các dòng. 1. 168; màu nền. #ffffff; biên giới. 5px rắn #c01; đệm. 1. 2em; } Hỗ trợ trình duyệt webTất cả các trình duyệt web đều hỗ trợ CSS. nguồn gốc Phần kết luậnChúng tôi đã đi một chặng đường dài với CSS. nguồn gốc. Bạn đã học cách hoạt động của CSS. root và khi bạn có thể sử dụng nó. Dưới đây, chúng tôi trình bày cho bạn bản tóm tắt đầy đủ về mọi thứ mà chúng tôi đã dạy bạn trong bài viết này
 5/5 - (16 phiếu) Vị trí là tất cả Vị trí là tất cả. Tài nguyên Go-To của bạn để Tìm hiểu & Xây dựng. CSS, JavaScript, HTML, PHP, C++ và MYSQL Gốc trong HTML là gì?Phần tử HTML phần tử cấp cao nhất ) của một tài liệu HTML, vì vậy nó còn được gọi là . Tất cả các phần tử khác phải là hậu duệ của phần tử này.
Root trong CSS w3schools là gì?Định nghĩa và cách sử dụng
. bộ chọn gốc khớp với phần tử gốc của tài liệu The :root selector matches the document's root element . Trong HTML, phần tử gốc luôn là phần tử html.
Chức năng của phần tử gốc là gì?Chức năng của phần tử gốc là gì? . Các phần chính của một tài liệu HTML là gì? . the container element for all other elements in the document. What are the main sections of an HTML document? The head and body sections.
Root có phải là phần tử giả không?Trong đặc tả HTML,. root về cơ bản tương đương với bộ chọn html. Nếu bạn để ý tôi đã nói. root về cơ bản tương đương với bộ chọn html. Trên thực tế. bộ chọn gốc có nhiều quyền hơn html. Điều này là do nó thực sự được coi là bộ chọn lớp giả (như. con đầu lòng hoặc. bay lượn ). |
