ویژگی‌ها و خصوصیات در CSS

ویژگی‌ها و خصوصیات در CSS به اجزای اصلی استایل‌دهی به عناصر HTML تبدیل می‌شوند. هر ویژگی یک جنبه خاص از ظاهر یا رفتار یک عنصر را تعیین می‌کند. برای هر ویژگی، مقدار خاصی باید تعیین شود که نحوه نمایش آن ویژگی را تعیین می‌کند.

ساختار کلی ویژگی‌ها در CSS

هر ویژگی در CSS شامل نام ویژگی (Property) و مقدار آن (Value) است. این ویژگی‌ها معمولاً در یک بلوک CSS به شکل زیر نوشته می‌شوند:

در اینجا:

• property: نام ویژگی است.
• value: مقدار ویژگی است که نحوه عملکرد آن ویژگی را مشخص می‌کند.

انواع ویژگی‌ها و خصوصیات در CSS

1. ویژگی‌های مربوط به رنگ و پس‌زمینه

   • color: رنگ متن را تعیین می‌کند.
     undefined

     p {
       color: blue;
     }
   • background-color: رنگ پس‌زمینه عنصر را تعیین می‌کند.
     undefined

     div {
       background-color: lightgray;
     }
   • background-image: تصویر پس‌زمینه را تنظیم می‌کند.
     undefined

     body {
       background-image: url('background.jpg');
     }
   • border: حاشیه (border) عنصر را تنظیم می‌کند.
     undefined

     div {
       border: 2px solid black;
     }
   • opacity: شفافیت (مقدار 0 برای شفاف و 1 برای غیرشفاف) عنصر را تنظیم می‌کند.
     undefined

     .overlay {
       opacity: 0.5;
     }

2. ویژگی‌های مربوط به اندازه و موقعیت

   • width: عرض عنصر را تعیین می‌کند.
     undefined

     div {
       width: 100px;
     }
   • height: ارتفاع عنصر را تعیین می‌کند.
     undefined

     div {
       height: 200px;
     }
   • margin: فاصله بیرونی (حاشیه) عنصر از دیگر عناصر را تنظیم می‌کند.
     undefined

     div {
       margin: 10px;
     }
   • padding: فاصله داخلی (فضای داخلی بین محتوا و حاشیه) عنصر را تنظیم می‌کند.
     undefined

     div {
       padding: 20px;
     }
   • position: نحوه موقعیت‌دهی عنصر را تعیین می‌کند.
     undefined

     div {
       position: absolute;
       top: 50px;
       left: 100px;
     }

3. ویژگی‌های مربوط به فونت‌ها و متون

   • font-family: نوع فونت استفاده شده برای متن.
     undefined

     p {
       font-family: Arial, sans-serif;
     }
   • font-size: اندازه فونت.
     undefined

     p {
       font-size: 16px;
     }
   • font-weight: ضخامت فونت (مثل bold برای پررنگ کردن متن).
     undefined

     p {
       font-weight: bold;
     }
   • line-height: فاصله بین خطوط متن.
     undefined

     p {
       line-height: 1.5;
     }
   • text-align: تراز متن (چپ، راست، وسط).
     undefined

     p {
       text-align: center;
     }
   • text-transform: تغییر حالت متن (حروف بزرگ، کوچک یا عنوانی).
     undefined

     p {
       text-transform: uppercase;
     }

4. ویژگی‌های مربوط به چیدمان و نمایش

   • display: نوع نمایش عنصر را تعیین می‌کند.
     undefined

     div {
       display: block;
     }
   • visibility: تعیین می‌کند که آیا عنصر به‌طور مخفی است یا نه (با اینکه هنوز در چیدمان صفحه تأثیر دارد).
     undefined

     div {
       visibility: hidden;
     }
   • float: برای قرار دادن عنصر در سمت چپ یا راست و آزاد کردن جریان دیگر عناصر استفاده می‌شود.
     undefined

     img {
       float: left;
     }
   • clear: مشخص می‌کند که آیا عنصر باید از کنار عناصر شناور (float) دور بماند یا خیر.
     undefined

     div {
       clear: both;
     }

5. ویژگی‌های مرتبط با متحرک‌سازی و انیمیشن

   • transition: برای اعمال تغییرات تدریجی به ویژگی‌های عنصر به کار می‌رود.
     undefined

     div {
       transition: all 0.5s ease-in-out;
     }
   • animation: برای افزودن انیمیشن‌ها به عناصر استفاده می‌شود.
     undefined

     div {
       animation: fadeIn 2s ease-in-out;
     }

6. ویژگی‌های مربوط به حاشیه‌ها و حاشیه‌های داخلی

   • border-radius: شعاع گردی گوشه‌های عنصر.
     undefined

     div {
       border-radius: 10px;
     }
   • box-shadow: سایه‌ای به اطراف عنصر اضافه می‌کند.
     undefined

     div {
       box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
     }

7. ویژگی‌های مرتبط با تعامل با کاربر

   • cursor: ظاهر اشاره‌گر موس را تغییر می‌دهد.
     undefined

     button {
       cursor: pointer;
     }
   • user-select: تعیین می‌کند که آیا کاربر می‌تواند متن را انتخاب کند یا خیر.
     undefined

     p {
       user-select: none;
     }

8. ویژگی‌های مربوط به نمایش صفحات و تنظیمات پرینت

   • page-break-before: تعیین می‌کند که آیا صفحه باید قبل از عنصر جدید قطع شود یا خیر.
     undefined

     h1 {
       page-break-before: always;
     }
   • media@: برای تعیین استایل‌ها در دستگاه‌های مختلف (رسانه‌های مختلف) استفاده می‌شود.
     undefined

     @media (max-width: 600px) {
       body {
         background-color: lightblue;
       }
     }

      

خلاصه

ویژگی‌ها در CSS تعیین می‌کنند که چگونه عناصر HTML نمایش داده می‌شوند و چه ویژگی‌هایی را باید در بر داشته باشند. این ویژگی‌ها شامل رنگ، اندازه، موقعیت، فونت، چیدمان، انیمیشن، حاشیه‌ها و بسیاری از موارد دیگر می‌شوند. هر ویژگی در CSS نیاز به یک مقدار خاص دارد که تعیین می‌کند نحوه رفتار یا ظاهر عنصر چگونه خواهد بود.