وقتی از کلاس مجازی :root در CSS استفاده می‌شود، این به معنای انتخاب المان ریشه در ساختار سلسله‌مراتبی سند است. در صورت استفاده از :root در HTML، به طور خاص به المان <html> اشاره می‌کند و به طور مشابهی عمل می‌کند با html selector. با این حال، ارزش بیشتری که :root دارد، این است که دارای اختصاصیت بیشتری نسبت به html است. این انتخاب‌کننده شامل تمامی المان‌ها یا تگ‌های HTML می‌شود.
استفاده از :root مزیتی دارد وقتی که متغیرهای CSS جهانی اعلام می‌شوند.
در زیر نحوه استفاده از :root به منظور تعریف متغیرهای CSS جهانی آمده است:
:root {
/* تعریف متغیرهای CSS جهانی */
--main-color: blue;
--secondary-color: white;
}در این مثال، متغیرهای CSS جهانی با استفاده از :root تعریف شده‌اند و می‌توانند در سراسر سند HTML مورد استفاده قرار گیرند. این متغیرها می‌توانند به عنوان مقادیر مرجع برای رنگ‌ها، پس‌زمینه‌ها، فونت‌ها و سایر ویژگی‌های CSS استفاده شوند.
Declaring Global CSS variables
این بخش نشان می‌دهد چگونه از کلاس مجازی :root برای تعریف متغیرهای CSS جهانی استفاده می‌شود. در این مثال، دو متغیر CSS به نام‌های –main-color و –secondary-color تعریف شده‌اند که می‌توانند در سراسر سند HTML مورد استفاده قرار گیرند. این متغیرها می‌توانند به عنوان مقادیر مرجع برای رنگ‌ها، پس‌زمینه‌ها، فونت‌ها و سایر ویژگی‌های CSS مورد استفاده قرار گیرند.
در زیر مثالی از استفاده از :root برای تعریف و استفاده از متغیرهای CSS نشان داده شده است:
<html>
<head>
<style>
:root {
--main-color: blue;
--secondary-color: white;
}
body {
background-color: var(--main-color);
}
h1 {
color: var(--secondary-color);
}
</style>
</head>
<body>
<h1>Welcome to CSS Root Example</h1>
<p>This is an example of using CSS root to define and use custom CSS variables.</p>
</body>
</html>در این مثال، متغیرهای –main-color و –secondary-color با استفاده از :root تعریف شده‌اند. در بخش style از این متغیرها برای تعیین رنگ پس‌زمینه بدنه (body) و رنگ متن تگ h1 استفاده شده است. با استفاده از var()، مقدار متغیرها به عنوان مقادیر CSS استفاده شده‌اند.
Styling Different Elements
این مثال نشان می‌دهد چگونه از انتخاب‌کننده :root برای استایل‌دهی به عناصر مختلف استفاده می‌شود و چگونه می‌توان از متغیرهای CSS جهانی در تمام سند HTML استفاده کرد.
در این مثال، با استفاده از :root سه متغیر CSS به نام‌های –primary-color، –secondary-color و –background-color تعریف شده‌اند که مقادیر رنگی را تعیین می‌کنند.
به طور خاص، در بخش style متغیرهای CSS با استفاده از :root تعریف شده‌اند. در بخش body از این متغیرها برای تعیین رنگ پس‌زمینه بدنه (body)، رنگ متن (color) و نوع فونت (font-family) استفاده شده است. همچنین، در بخش‌های h1 و p از متغیرهای CSS برای تعیین رنگ و حاشیه استفاده شده است.
از متغیرهای CSS به عنوان مقادیر رنگ برای متن و پس‌زمینه، و همچنین برای تعیین خواص دیگر مانند پد، شیادو و ترتیب محتوا استفاده شده است.
این مثال نشان می‌دهد که چگونه با استفاده از :root و متغیرهای CSS، می‌توان به طور موثر و کارآمد از استایل‌دهی یکپارچه در سراسر یک صفحه وب استفاده کرد.
<html>
<head>
<title>:root Example</title>
<style>
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--background-color: #fcfc90;
}
body {
background-color: var(--background-color);
color: var(--secondary-color);
font-family: Arial, sans-serif;
}
h1 {
color: var(--primary-color);
}
p {
margin-bottom: 1rem;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
background-color: LightYellow;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.button {
display: inline-block;
padding: 0.5rem 1rem;
background-color: var(--primary-color);
color: white;
text-decoration: none;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>:root Example</h1>
<p>This is an example of using the <code>:root</code> selector to define global CSS variables.</p>
<p>The primary color is set to <span style="color: var(--primary-color);">var(--primary-color)</span>.</p>
<p>The secondary color is set to <span style="color: var(--secondary-color);">var(--secondary-color)</span>.</p>
<p>The background color is set to <span style="background-color: var(--background-color); color: white;">var(--background-color)</span>.</p>
<a href="#" class="button">Demo</a>
</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام