ویژگیها و خصوصیات در CSS
ویژگیها و خصوصیات در CSS به اجزای اصلی استایلدهی به عناصر HTML تبدیل میشوند. هر ویژگی یک جنبه خاص از ظاهر یا رفتار یک عنصر را تعیین میکند. برای هر ویژگی، مقدار خاصی باید تعیین شود که نحوه نمایش آن ویژگی را تعیین میکند.
ساختار کلی ویژگیها در CSS
هر ویژگی در CSS شامل نام ویژگی (Property) و مقدار آن (Value) است. این ویژگیها معمولاً در یک بلوک CSS به شکل زیر نوشته میشوند:
property: value;
}
در اینجا:
- property: نام ویژگی است.
- value: مقدار ویژگی است که نحوه عملکرد آن ویژگی را مشخص میکند.
انواع ویژگیها و خصوصیات در CSS
-
ویژگیهای مربوط به رنگ و پسزمینه
- color: رنگ متن را تعیین میکند.
p {
color: blue;
} - background-color: رنگ پسزمینه عنصر را تعیین میکند.
div {
background-color: lightgray;
} - background-image: تصویر پسزمینه را تنظیم میکند.
body {
background-image: url('background.jpg');
} - border: حاشیه (border) عنصر را تنظیم میکند.
div {
border: 2px solid black;
} - opacity: شفافیت (مقدار 0 برای شفاف و 1 برای غیرشفاف) عنصر را تنظیم میکند.
.overlay {
opacity: 0.5;
}
- color: رنگ متن را تعیین میکند.
-
ویژگیهای مربوط به اندازه و موقعیت
- width: عرض عنصر را تعیین میکند.
div {
width: 100px;
} - height: ارتفاع عنصر را تعیین میکند.
div {
height: 200px;
} - margin: فاصله بیرونی (حاشیه) عنصر از دیگر عناصر را تنظیم میکند.
div {
margin: 10px;
} - padding: فاصله داخلی (فضای داخلی بین محتوا و حاشیه) عنصر را تنظیم میکند.
div {
padding: 20px;
} - position: نحوه موقعیتدهی عنصر را تعیین میکند.
div {
position: absolute;
top: 50px;
left: 100px;
}
- width: عرض عنصر را تعیین میکند.
-
ویژگیهای مربوط به فونتها و متون
- font-family: نوع فونت استفاده شده برای متن.
p {
font-family: Arial, sans-serif;
} - font-size: اندازه فونت.
p {
font-size: 16px;
} - font-weight: ضخامت فونت (مثل bold برای پررنگ کردن متن).
p {
font-weight: bold;
} - line-height: فاصله بین خطوط متن.
p {
line-height: 1.5;
} - text-align: تراز متن (چپ، راست، وسط).
p {
text-align: center;
} - text-transform: تغییر حالت متن (حروف بزرگ، کوچک یا عنوانی).
p {
text-transform: uppercase;
}
- font-family: نوع فونت استفاده شده برای متن.
-
ویژگیهای مربوط به چیدمان و نمایش
- display: نوع نمایش عنصر را تعیین میکند.
div {
display: block;
} - visibility: تعیین میکند که آیا عنصر بهطور مخفی است یا نه (با اینکه هنوز در چیدمان صفحه تأثیر دارد).
div {
visibility: hidden;
} - float: برای قرار دادن عنصر در سمت چپ یا راست و آزاد کردن جریان دیگر عناصر استفاده میشود.
img {
float: left;
} - clear: مشخص میکند که آیا عنصر باید از کنار عناصر شناور (float) دور بماند یا خیر.
div {
clear: both;
}
- display: نوع نمایش عنصر را تعیین میکند.
-
ویژگیهای مرتبط با متحرکسازی و انیمیشن
- transition: برای اعمال تغییرات تدریجی به ویژگیهای عنصر به کار میرود.
div {
transition: all 0.5s ease-in-out;
} - animation: برای افزودن انیمیشنها به عناصر استفاده میشود.
div {
animation: fadeIn 2s ease-in-out;
}
- transition: برای اعمال تغییرات تدریجی به ویژگیهای عنصر به کار میرود.
-
ویژگیهای مربوط به حاشیهها و حاشیههای داخلی
- border-radius: شعاع گردی گوشههای عنصر.
div {
border-radius: 10px;
} - box-shadow: سایهای به اطراف عنصر اضافه میکند.
div {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
- border-radius: شعاع گردی گوشههای عنصر.
-
ویژگیهای مرتبط با تعامل با کاربر
- cursor: ظاهر اشارهگر موس را تغییر میدهد.
button {
cursor: pointer;
} - user-select: تعیین میکند که آیا کاربر میتواند متن را انتخاب کند یا خیر.
p {
user-select: none;
}
- cursor: ظاهر اشارهگر موس را تغییر میدهد.
-
ویژگیهای مربوط به نمایش صفحات و تنظیمات پرینت
- page-break-before: تعیین میکند که آیا صفحه باید قبل از عنصر جدید قطع شود یا خیر.
h1 {
page-break-before: always;
} - media@: برای تعیین استایلها در دستگاههای مختلف (رسانههای مختلف) استفاده میشود.
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
- page-break-before: تعیین میکند که آیا صفحه باید قبل از عنصر جدید قطع شود یا خیر.
خلاصه
ویژگیها در CSS تعیین میکنند که چگونه عناصر HTML نمایش داده میشوند و چه ویژگیهایی را باید در بر داشته باشند. این ویژگیها شامل رنگ، اندازه، موقعیت، فونت، چیدمان، انیمیشن، حاشیهها و بسیاری از موارد دیگر میشوند. هر ویژگی در CSS نیاز به یک مقدار خاص دارد که تعیین میکند نحوه رفتار یا ظاهر عنصر چگونه خواهد بود.
