آموزش صفات در CSS

در آموزشگاه طراحی سایت پرتو، ما با تمرکز بر دانش روز دنیا، دوره‌های عملی و پروژه‌محور برگزار می‌کنیم تا شما را به یک طراح وب حرفه‌ای تبدیل کنیم.

این مقاله، علاوه بر ویژگی‌های پایه‌ای CSS، به پراپرتی‌های مدرن و پرکاربرد مانند Flexbox، Grid Layout، Variables و Container Queries می‌پردازد تا بتوانید سایت‌های واکنش گرا، زیبا و کارآمد بسازید.

مقدمه‌ای بر ویژگی‌های CSS

CSS پراپرتی‌ها (properties) ابزارهایی هستند که ظاهر و رفتار عناصر HTML را کنترل می‌کنند.

یادگیری آن‌ها پایه طراحی وب است. اگر تازه‌کار هستید، شرکت در کلاس آموزش html-css در آموزشگاه پرتو را پیشنهاد می‌کنیم که از پایه تا پیشرفته پوشش می‌دهد.

ویژگی‌های پایه‌ای اندازه و باکس مدل

width و height

برای تعیین عرض و ارتفاع عناصر:

css

.box { width: 300px; height: 200px; }

می‌توانید از واحدهای %، vw، vh یا rem برای responsive بودن استفاده کنید.

overflow

کنترل محتوای خارج از ابعاد

visible (پیش‌فرض)

hidden
scroll
auto

border

ترکیب style، width و color

border: 2px solid #007bff;
border-radius: 8px; /* برای گوشه‌های گرد – مدرن و پرکاربرد */

margin و padding

margin: فاصله بیرونی (با auto برای وسط‌چین کردن).

padding: فاصله داخلی.

.container { margin: 0 auto; padding: 20px; }

موقعیت‌دهی (Positioning)

static (پیش‌فرض)

relative

absolute

fixed

sticky (مدرن و مفید برای هدرهای چسبنده)

ویژگی‌های متنی

color: رنگ متن.
font-family, font-size, font-weight, font-style
text-align, text-decoration, text-transform
line-height, letter-spacing
text-shadow: برای افکت سایه (مدرن).

پس‌زمینه (Background)

background-color
background-image, background-repeat, background-position, background-attachment
ویژگی‌های مدرن: background-size: cover;, multiple backgrounds.

ویژگی‌های مدرن Layout

در سال‌های اخیر، CSS از روش‌های قدیمی مانند float به سمت ابزارهای قدرتمندتر حرکت کرده. امروزه float فقط برای wrap متن اطراف تصاویر استفاده می‌شود.

Flexbox (برای layout یک‌بعدی)

.container {
display: flex;
justify-content: space-between; /* یا center, flex-start و غیره */
align-items: center;
gap: 20px; /* فاصله مدرن بین آیتم‌ها */
flex-wrap: wrap; /* برای responsive */
}

مناسب برای منوها، کارت‌ها و چیدمان خطی.

Grid Layout (برای layout دوبعدی)

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

قدرتمند برای گالری‌ها، داشبوردها و صفحات پیچیده.

در کلاس آموزش طراحی سایت پرتو، پروژه‌های واقعی با Grid می‌سازید.

 CSS Variables (Custom Properties)

برای تمینگ و نگهداری آسان:css

:root {
–primary-color: #007bff;
–spacing: 16px;
}
.element { color: var(–primary-color); padding: var(–spacing); }

Container Queries

استایل بر اساس اندازه کانتینر والد، نه ویوپورت:css

.container { container-type: inline-size; }
@container (min-width: 400px) {
.card { grid-template-columns: 1fr 1fr; }
}

ویژگی‌های لیست و نمایش

list-style-type, list-style-image, list-style-position
display: block, inline, inline-block, none, grid, flex

بهترین Practices

برای سئو و عملکرداز واحدهای نسبی (rem, em, %) استفاده کنید.

Media Queries و Container Queries برای responsive design ترکیب کنید.

از shorthand properties (مثل border یا background) بهره ببرید.

کد را minify کنید و از ابزارهایی مثل PostCSS برای ویژگی‌های پیشرفته استفاده کنید.

برای انیمیشن، از transition و animation ساده بهره بگیرید.

در کلاس آموزش html-css و کلاس آموزش طراحی سایت آموزشگاه پرتو، این ویژگی‌ها را با پروژه‌های واقعی (مانند ساخت لندینگ پیج واکنشگرا) تمرین می‌کنید و با ابزارهای مدرن مانند VS Code، Browser DevTools و Figma آشنا می‌شوید.

اگر آماده یادگیری حرفه‌ای هستید، همین حالا با آموزشگاه کامپیوتر پرتو تماس بگیرید و در کلاس‌ها ثبت‌نام کنید! سؤالاتتان را در کامنت‌ها بپرسید.