آموزش CSS | ویژگی ها (Properties)

معرفی ویژگی ها و نحوه استفاده از آنها

CSS (Cascading Style Sheets) به ما این امکان را می‌دهد که استایل و طراحی صفحات وب را به راحتی مدیریت کنیم. ویژگی‌ها (Properties) در CSS به ما کمک می‌کنند تا مشخص کنیم که چه نوع تغییراتی باید بر روی المان‌های HTML اعمال شود. هر ویژگی به یک یا چند مقدار خاص نیاز دارد که تعیین می‌کند چگونه المان باید نمایش داده شود.

نحوه استفاده از ویژگی‌ها

برای استفاده از ویژگی‌ها در CSS، باید ابتدا یک انتخابگر (Selector) را مشخص کنیم که نشان‌دهنده‌ی المانی است که می‌خواهیم استایل آن را تغییر دهیم. سپس، در داخل آکولادها {}، می‌توانیم ویژگی‌ها و مقادیر مربوط به آن‌ها را تعریف کنیم.

به عنوان مثال:

h1 {
    color: blue;
    font-size: 24px;
}

در این مثال:

• h1 انتخابگری است که به تمام عناوین سطح اول (Heading 1) در صفحه HTML اشاره می‌کند.
• color یکی از ویژگی‌ها است که رنگ متن را مشخص می‌کند و مقدار آن blue است.
• font-size ویژگی دیگری است که اندازه فونت را تعیین می‌کند و مقدار آن 24px است.

انواع ویژگی‌ها

ویژگی‌ها در CSS به دسته‌های مختلفی تقسیم می‌شوند، از جمله:

1. رنگ (Color): برای تعیین رنگ متن یا پس‌زمینه استفاده می‌شود.

   • مثال: color: red;

2. پس‌زمینه (Background): برای تعیین رنگ یا تصویر پس‌زمینه المان‌ها استفاده می‌شود.

   • مثال: background-color: yellow;

3. ابعاد (Dimensions): برای تعیین عرض و ارتفاع المان‌ها استفاده می‌شود.

   • مثال: width: 100px; و height: 50px;

4. فاصله (Spacing): برای تعیین فاصله‌های داخلی و خارجی المان‌ها استفاده می‌شود.

   • مثال: margin: 10px; و padding: 5px;

5. فونت (Font): برای تعیین نوع و اندازه فونت استفاده می‌شود.

   • مثال: font-family: Arial; و font-size: 16px;

با استفاده از این ویژگی‌ها، می‌توانیم استایل‌های مختلفی را برای المان‌های HTML خود ایجاد کنیم و صفحات وب جذاب‌تری طراحی کنیم.

در ادامه، به بررسی ویژگی‌های خاصی مانند رنگ، پس‌زمینه، پهنا و ارتفاع خواهیم پرداخت.