یک CSS از قوانین استایل تشکیل شده است که توسط مرورگر تفسیر شده و سپس بر روی عناصر متناظر در سند شما اعمال می‌شود. یک قانون استایل از سه قسمت تشکیل شده است:
-
انتخابگر (Selector): انتخابگر یک تگ HTML است که استایل به آن اعمال می‌شود. این می‌تواند هر تگی مانند
<h1>یا<table>باشد. -
ویژگی (Property): ویژگی نوعی از ویژگی تگ HTML است. به طور ساده، همه ویژگی‌های HTML به ویژگی‌های CSS تبدیل می‌شوند. این‌ها می‌تواند رنگ، حاشیه و غیره باشند.
-
مقدار (Value): مقادیر به ویژگی‌ها اختصاص داده می‌شوند. به عنوان مثال، ویژگی رنگ می‌تواند مقدار قرمز یا #F1F1F1 و غیره داشته باشد.
به صورت کلی، دستور زبان استایل CSS به صورت زیر است:
selector {
property: value;
}
در اینجا، selector یک تگ HTML را انتخاب می‌کند و به آن یک یا چند ویژگی با مقدار مربوطه اعمال می‌شود.
مثال ارائه شده به شما نشان می‌دهد چگونه می‌توانید یک حاشیه برای یک جدول تعریف کنید:
table {
border: 1px solid #C00;
}
این مثال نشان می‌دهد که چگونه می‌توانید حاشیه یک جدول را تعریف کنید. در اینجا، table یک انتخابگر است که به همان تگ HTML تعلق دارد. border یک ویژگی است که حاشیه جدول را تعیین می‌کند و 1px solid #C00 یک مقدار است که به این ویژگی اختصاص داده شده است.
مقدار 1px solid #C00 به این معنی است که حاشیه جدول یک پیکسل عرض دارد، از نوع خط خورده (solid) و با رنگ قرمز (#C00) است.
انتخاب‌کننده نوع (Type Selector)
انتخابگرهای نوعی (Type Selectors) در CSS برای اعمال استایل به تمام عناصری که با یک تگ HTML خاص تطابق دارند استفاده می‌شوند. به عبارت دیگر، انتخابگر نوعی از تگ‌ها برای تعیین استایل به کلیه آن تگ‌ها در صفحه وب استفاده می‌شود.
به عنوان مثال، اگر شما می‌خواهید رنگ متن تمام عناصر <p> (پاراگراف) در صفحه وب خود را تغییر دهید، می‌توانید از انتخابگر نوعی p استفاده کنید.
مثال:
/* اعمال استایل به تمام پاراگراف‌ها */
p {
color: blue;
}
در این مثال، تمام عناصر <p> در صفحه وب با رنگ آبی (blue) اعمال استایل می‌شوند. این استایل به تمام عناصری که با تگ <p> در سند HTML تطابق دارند، اعمال می‌شود، بدون توجه به مکان یا ویژگی‌های دیگری که ممکن است داشته باشند.
انتخابگرهای عمومی (Universal Selectors)
انتخابگرهای عمومی (Universal Selectors) در CSS با استفاده از علامت ‘*’ تعریف می‌شوند. این انتخابگر به همه عناصر در صفحه وب شما اعمال می‌شود. به عبارت دیگر، این انتخابگر همه عناصر HTML را انتخاب می‌کند، بدون توجه به نوع یا تعداد تگ‌ها.
مثال:
/* اعمال استایل به تمام عناصر در صفحه وب */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
در این مثال، این انتخابگر به تمام عناصر در صفحه وب شما اعمال می‌شود. سپس، یک سری ویژگی‌های استایل به همه این عناصر اختصاص داده می‌شود. به عنوان مثال، تمام عناصر برای حذف هرگونه حاشیه (margin) و فاصله داخلی (padding) از همه لبه‌ها مقدار ۰ دریافت می‌کنند. همچنین با تعیین مقدار box-sizing: border-box;، اندازه عناصر با در نظر گرفتن حاشیه و پرشینگ‌ها تعیین می‌شود.
انتخابگرهای فرزند (Descendant Selectors)
انتخابگرهای فرزند (Descendant Selectors) در CSS برای اعمال استایل به عناصری که داخل یک عنصر دیگر (فرزند) قرار دارند، استفاده می‌شوند. این انتخابگرها از فرمت ancestor descendant استفاده می‌کنند، که به معنای اعمال استایل به عنصرهای descendant که داخل عنصر ancestor قرار دارند است.
مثال:
/* اعمال استایل به تمام عناصر که داخل عنصر با کلاس .container قرار دارند */
.container p {
font-size: 16px;
color: #333;
}
در این مثال، استایل به تمام عناصر <p> اعمال می‌شود که داخل عنصری با کلاس .container قرار دارند. به عبارت دیگر، این استایل به همه پاراگراف‌هایی اعمال می‌شود که به عنوان فرزندان داخل عنصری با کلاس .container قرار دارند.
انتخابگرهای کلاس (Class Selectors)
انتخابگرهای کلاس (Class Selectors) در CSS برای اعمال استایل به عناصری که دارای یک کلاس خاص هستند، استفاده می‌شوند. کلاس‌ها به کمک ویژگی class در HTML تعریف می‌شوند و می‌توانند به هر عنصری اختصاص یابند.
مثال:
<!-- HTML -->
<div class="box">This is a box</div>
<p class="highlight">This is a highlighted paragraph</p>
/* CSS */
.box {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
}
.highlight {
color: red;
font-weight: bold;
}
در این مثال، دو کلاس به نام‌های .box و .highlight در CSS تعریف شده است. اولین کلاس .box به عناصری اعمال می‌شود که دارای کلاس box در HTML هستند. این استایل یک پس‌زمینه رنگی، یک حاشیه، و یک فاصله داخلی را برای آن عناصر اعمال می‌کند. دومین کلاس .highlight به عناصری اعمال می‌شود که دارای کلاس highlight در HTML هستند و به آن‌ها رنگ و وزن متن تغییر می‌دهد.
انتخابگرهای شناسه (ID Selectors)
انتخابگرهای شناسه (ID Selectors) در CSS برای اعمال استایل به عناصری که دارای یک شناسه (ID) منحصر به فرد در سند HTML هستند، استفاده می‌شوند. شناسه‌ها با استفاده از ویژگی id در HTML تعریف می‌شوند و باید برای هر عنصر فقط یک بار استفاده شوند.
مثال:
<!-- HTML -->
<div id="header">This is the header</div>
<p id="content">This is the content</p>
/* CSS */
#header {
background-color: #333;
color: white;
padding: 10px;
}
#content {
font-size: 14px;
line-height: 1.5;
}
در این مثال، دو شناسه به نام‌های header و content در HTML تعریف شده است. اولین شناسه header به عناصری اعمال می‌شود که دارای شناسه header در HTML هستند و به آن‌ها یک پس‌زمینه رنگی، رنگ متن سفید و فاصله داخلی اعمال می‌شود. دومین شناسه content به عناصری اعمال می‌شود که دارای شناسه content در HTML هستند و به آن‌ها اندازه متن و فاصله بین خطوط مشخصی داده می‌شود.
انتخابگرهای فرزند (Child Selectors)
انتخابگرهای فرزند (Child Selectors) در CSS برای اعمال استایل به عناصری که به طور مستقیم زیرمجموعه یک عنصر دیگر (والد) هستند، استفاده می‌شوند. این انتخابگرها از فرمت parent > child استفاده می‌کنند.
مثال:
<!-- HTML -->
<div class="container">
<h2>عنوان</h2>
<p>متن پاراگراف ۱</p>
<p>متن پاراگراف ۲</p>
</div>
/* CSS */
.container > p {
color: blue;
}
در این مثال، استایل به تمام عناصر <p> اعمال می‌شود که به عنوان فرزندان مستقیم داخل عنصر با کلاس .container در سند HTML قرار دارند. این استایل فقط بر روی پاراگراف‌هایی اعمال می‌شود که به طور مستقیم زیرمجموعه عنصر .container هستند و نه پاراگراف‌های دیگری که درون عنصر .container قرار دارند، مانند همسایگان یا فرزندان پاراگراف‌ها.
انتخابگرهای ویژگی (Attribute Selectors)
انتخابگرهای ویژگی (Attribute Selectors) در CSS برای اعمال استایل به عناصری که دارای ویژگی‌های خاص در سند HTML هستند، استفاده می‌شوند. این انتخابگرها به ویژگی‌های مختلفی از عناصر، مانند ویژگی‌های class، id و دیگر ویژگی‌های HTML، اشاره می‌کنند.
دو نوع اصلی انتخابگر ویژگی عبارتند از:
- انتخابگر ویژگی وجودی (Existence Attribute Selectors): این انتخابگرها برای انتخاب عناصری استفاده می‌شوند که دارای یک ویژگی خاص هستند، بدون توجه به مقدار آن ویژگی. این انتخابگرها با استفاده از علامت
[attribute]تعریف می‌شوند.
مثال:
/* انتخاب همه عناصری که دارای ویژگی title هستند */
[title] {
color: blue;
}
- انتخابگر ویژگی با مقدار (Value Attribute Selectors): این انتخابگرها برای انتخاب عناصری استفاده می‌شوند که دارای یک ویژگی خاص با یک مقدار خاص هستند. این انتخابگرها با استفاده از عبارت
[attribute=value]تعریف می‌شوند.
مثال:
/* انتخاب همه عناصری که دارای ویژگی href با مقدار "https://example.com" هستند */
[href="https://example.com"] {
text-decoration: underline;
}
این انتخابگرها به عناصری که دارای یک ویژگی خاص هستند و مقدار آن ویژگی با مقدار مشخص شده برابر است، اشاره می‌کنند.
قواعداستایل چندگانه (Multiple Style)
اگر شما نیاز دارید که برای یک عنصر تعدادی قوانین استایل مختلف تعریف کنید، می‌توانید این قوانین را ترکیب کنید و مقادیر متناظر را در یک بلوک تکی تعریف کنید. معمولاً این کار برای افزودن استایل‌های متعدد به یک عنصر مفید است.
به عنوان مثال:
/* CSS */
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
در این مثال، تمامی قوانین استایل برای عنصر <h1> در یک بلوک تکی قرار دارند. هر خط شامل یک ویژگی و مقدار متناظر است که با یک سمیکولن (;) جدا شده‌اند. این روش می‌تواند کد CSS را خوانای‌تر و سازماندهی‌تر کند، به خصوص وقتی که تعدادی از ویژگی‌ها برای یک عنصر تعیین می‌شود.
انتخاب‌کننده گروه‌بندی (Grouping Selector)
در CSS، شما می‌توانید یک استایل را به چندین انتخابگر (Selector) اعمال کنید. برای این کار، انتخابگرها را با یک کاما (,) از یکدیگر جدا می‌کنید. این روش به شما این امکان را می‌دهد که یک استایل را به چندین عنصر یا گروهی از عناصر اعمال کنید.
به عنوان مثال:
/* CSS */
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
در این مثال، استایل‌های تعریف شده برای عناوین <h1>، <h2> و <h3> استفاده می‌شوند. با استفاده از این روش، شما می‌توانید استایل‌های مشابه را برای چندین انتخابگر در یک بلوک تعریف کنید، که این امر کد CSS را کوتاه‌تر و خواناتر می‌کند.
همچنین، شما می‌توانید انتخابگرهای مختلفی را که شناسه‌های (ID) مختلفی دارند، با یکدیگر ترکیب کنید. به عنوان مثال:
/* CSS */
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
در این مثال، استایل‌های مختلف برای عناصری با شناسه‌های مختلف تعریف شده‌اند، اما تمامی آن‌ها دارای ویژگی‌های مشابهی هستند که در یک بلوک تعریف شده‌اند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام