✦ ✦
♥
✚
✚ ✚
📞 02166056460
✚
♥
✦ ✦
مقالات طراحی سایت
آموزش برنامه نویسی
آموزش CSS سی اس اس
آموزش خواص مقدماتی Css

آموزش خواص مقدماتی Css

10 / 10
از 2 کاربر
بازگشت به لیست مقالات » | چهارشنبه 22 مهر 1405 در ساعت 15 و 13 دقیقه | نظرات کاربران ( 1 )
💡 شروع یادگیری CSS
آموزش CSS یکی از قدم های مهم برای یادگیری طراحی سایت است. CSS ظاهر صفحات وب را کنترل می کند؛ از اندازه و رنگ نوشته ها گرفته تا چیدمان جدول ها و جایگاه تصویر پس زمینه. آشنایی با ویژگی های پایه، به شما کمک می کند کدها را بهتر بخوانید و ظاهر صفحات را با دقت بیشتری تغییر دهید.
📘 از ویژگی ها تا کاربرد عملی
در این راهنما، ویژگی هایی مانند vertical-align، تنظیم حاشیه جدول، اندازه و حالت نمایش متن و موقعیت تصویر پس زمینه را به زبان ساده بررسی می کنیم. برای هر مورد، کاربرد مقادیر رایج و نکته هایی را می خوانید که هنگام پیاده سازی در یک صفحه واقعی به کار می آیند. اگر در ابتدای مسیر هستید، ابتدا با ساختار HTML آشنا شوید و سپس مثال ها را در یک فایل آزمایشی اجرا کنید.
فهرست مطالب:
  1. آموزش CSS: ۵ نکته مهم درباره ویژگی های پایه
  2. نمونه های کاربردی در CSS
  3. مقایسه سریع ویژگی های CSS
  4. ۱۰ پرسش آموزشی درباره ویژگی های CSS
  5. ۵ نکته مهم درباره اجرای بهتر CSS
  6. نتیجه گیری
  7. سوالات متداول ویژگی های CSS

آموزش CSS: ۵ نکته مهم درباره ویژگی های پایه

⭐ چرا این ویژگی ها را یاد بگیریم؟
درک ویژگی های پایه CSS باعث می شود بتوانید اجزای صفحه را بدون تغییرهای پراکنده و آزمون وخطای بی هدف تنظیم کنید. این پنج نکته، مجموعه ای از قابلیت های مرتبط با ترازبندی، جدول، تایپوگرافی و پس زمینه را پوشش می دهند. با تمرین مرحله ای، هم دلیل هر تغییر را بهتر متوجه می شوید و هم در عیب یابی ظاهر صفحه سریع تر عمل می کنید.

۱. vertical-align؛ تنظیم ترازبندی عمودی

۱
ویژگی vertical-align جایگاه عمودی یک عنصر را نسبت به خط متن یا عنصر دربرگیرنده مشخص می کند. این ویژگی بیشتر برای عناصر درون خطی، تصویرهای داخل متن و سلول های جدول کاربرد دارد و نباید آن را راهکاری عمومی برای وسط چین کردن هر نوع عنصر دانست. مقدارهای رایج آن شامل baseline، top، text-top، middle، bottom و text-bottom است.
🧩 بالانویس، زیرنویس و مقادیر عددی
مقدارهای super و sub عنصر را به شکل بالانویس یا زیرنویس نسبت به خط متن جابه جا می کنند؛ این کاربرد برای نمایش توان ها یا نمادهای علمی مناسب است. همچنین می توانید فاصله را با یک مقدار طولی مانند 4px تعیین کنید. در CSS مدرن، مقدارهای طولی برای این ویژگی مجاز هستند، اما نتیجه به نوع عنصر و نحوه چیدمان آن وابسته است.
📌
مثال کاربردی: اگر آیکونی کوچک در کنار یک عنوان متنی کمی پایین تر دیده می شود، می توانید مقدار vertical-align: middle; را امتحان کنید. سپس صفحه را در اندازه های مختلف بررسی کنید؛ گاهی تنظیم ارتفاع خط یا استفاده از Flexbox برای چیدمان کلی، نتیجه قابل پیش بینی تری دارد.

۲. border-collapse و border-spacing؛ کنترل خطوط جدول

۲
border-collapse تعیین می کند که حاشیه خانه های جدول به صورت جداگانه نمایش داده شوند یا حاشیه های مجاور با هم ادغام شوند. مقدار collapse خطوط مشترک را به یک خط تبدیل می کند و برای جدول های فشرده مناسب است. مقدار separate حاشیه هر خانه را جدا نگه می دارد و امکان نمایش فاصله میان خانه ها را فراهم می کند.
📊 فاصله میان خانه ها
border-spacing فاصله میان حاشیه خانه های جدول را کنترل می کند و زمانی اثر دارد که border-collapse: separate; فعال باشد. برای نمونه، border-spacing: 8px; فاصله ای یکسان میان خانه ها ایجاد می کند. می توان دو مقدار نوشت تا فاصله افقی و عمودی متفاوت باشد؛ برای مثال border-spacing: 10px 4px;.
⚠️ نکته مهم درباره ترکیب این دو ویژگی
وقتی حاشیه ها در حالت collapse ادغام شده اند، فاصله گذاری میان خانه ها با border-spacing اعمال نمی شود. اگر هدفتان ساخت جدولی با خطوط جدا و فضای خالی میان سلول هاست، حالت separate را انتخاب کنید. این تفاوت کوچک، ظاهر جدول را به شکل محسوسی تغییر می دهد.

۳. caption-side و empty-cells؛ جزئیات نمایش جدول

۳
عنوانی که با تگ <caption> به جدول اضافه می شود، به کمک caption-side می تواند در بالا یا پایین جدول قرار بگیرد. مقدارهای رایج این ویژگی top و bottom هستند. برای نمونه، عنوانی مانند «مقایسه مشخصات محصولات» را بهتر است نزدیک جدول قرار دهید تا ارتباط آن با داده ها روشن باشد.
✅ نمایش خانه های خالی
empty-cells مشخص می کند خانه های خالی جدول نمایش داده شوند یا نه. مقدارهای آن show و hide هستند. این ویژگی در جدول هایی که حاشیه خانه ها از هم جداست معنا پیدا می کند؛ بنابراین اگر جدول از border-collapse: collapse; استفاده کند، انتظار نداشته باشید empty-cells ظاهر خانه خالی را تغییر دهد.
📌
مثال: در یک جدول برنامه هفتگی ممکن است بعضی خانه ها داده نداشته باشند. اگر ساختار جدول حاشیه های جداگانه داشته باشد، می توانید با empty-cells: hide; خانه های خالی را پنهان کنید یا با show مرزهای آن ها را نگه دارید. پیش از انتخاب، بررسی کنید که حذف ظاهری خانه باعث دشوار شدن خواندن ردیف ها نشود.

۴. table-layout؛ انتخاب روش محاسبه عرض ستون ها

۴
table-layout الگوریتم مورد استفاده مرورگر برای تعیین عرض ستون های جدول را مشخص می کند. با مقدار auto، محتوا در محاسبه عرض ستون ها نقش دارد؛ در نتیجه ستون دارای متن طولانی ممکن است فضای بیشتری بگیرد. این شیوه برای جدول هایی مناسب است که اندازه محتوا از پیش قابل پیش بینی نیست.
⚙️ حالت fixed و کنترل ابعاد
مقدار fixed امکان کنترل روشن تر عرض جدول و ستون ها را فراهم می کند؛ به ویژه وقتی برای جدول عرض مشخص و برای ستون ها اندازه تعیین کرده باشید. این روش می تواند محاسبه چیدمان را ساده تر کند، اما متن طولانی همچنان باید به شکلی مناسب مدیریت شود تا از محدوده سلول بیرون نزند. برای جدول های ثابت، ترکیب آن با width: 100%; و تنظیم عرض ستون ها را آزمایش کنید.
🧪 مثال در جدول مقایسه
فرض کنید جدولی سه ستون برای نام محصول، قیمت و توضیح دارد. اگر طول توضیحات در هر ردیف متفاوت است، auto می تواند چیدمان را با محتوا هماهنگ کند. اگر می خواهید ستون ها اندازه مشخصی داشته باشند، fixed را همراه با تعیین عرض بررسی کنید و نتیجه را در نمایشگر کوچک نیز بیازمایید.

۵. ویژگی های متن و تصویر پس زمینه

۵
ویژگی های font-size، font-style، font-variant و font-weight بر خوانایی و جلوه نوشته اثر می گذارند. برای اندازه متن می توانید از واحدهایی مانند px، rem و درصد استفاده کنید؛ برای حالت متن از normal، italic یا oblique کمک بگیرید. وزن قلم نیز با مقادیر نامی مانند bold یا عددهای 100 تا 900 قابل تنظیم است، البته وزن های قابل نمایش به قلم بارگذاری شده بستگی دارند.
✍️ تفاوت ویژگی های متنی
font-variant می تواند شکل small-caps را برای حروف لاتین فعال کند. ویژگی font-stretch برای انتخاب درجه فشردگی یا کشیدگی قلم به کار می رود، اما نتیجه آن به وجود گونه های مناسب در قلم و پشتیبانی مرورگر وابسته است. این ویژگی متن را به جای تغییر اندازه، با توجه به عرض طراحی شده برای حروف نمایش می دهد؛ بنابراین بهتر است آن را روی قلم واقعی پروژه امتحان کنید.
🖼️ موقعیت تصویر پس زمینه
background-position محل قرارگیری تصویر پس زمینه را در عنصر تعیین می کند. مقدارهای کلیدی مانند left top، center center و right bottom جایگاه را با واژه مشخص می کنند. همچنین می توان از درصد یا واحدهایی مانند پیکسل استفاده کرد؛ مقدار نخست موقعیت افقی و مقدار دوم موقعیت عمودی را تعیین می کند. اگر یک مقدار بنویسید، مقدار دیگر به طور معمول در مرکز در نظر گرفته می شود.
📌
برای نمونه، background-position: center top; تصویر را در مرکز افقی و بالای عنصر می گذارد. در طراحی واکنش گرا، نقطه مهم تصویر ممکن است در صفحه کوچک از کادر بیرون برود؛ پس جایگاه پس زمینه را در چند عرض صفحه بررسی کنید. ویژگی هایی مانند background-size و background-repeat نیز در ظاهر نهایی نقش دارند.

نمونه های کاربردی در CSS

💻 تنظیم جدول و تایپوگرافی
کد زیر چند ویژگی پرکاربرد را کنار هم نشان می دهد. آن را در بخش CSS صفحه آزمایشی قرار دهید و مقادیر را تغییر دهید تا اثر هر ویژگی را جداگانه مشاهده کنید.
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 8px;
  table-layout: fixed;
}

td {
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  vertical-align: middle;
}

نمونه تنظیم تصویر پس زمینه

🧭 کنترل جایگاه با درصد
در نمونه زیر، تصویر پس زمینه در نقطه میانی عنصر قرار می گیرد. با تغییر مقدارها به left top یا right bottom، محل شروع نمایش تصویر را مقایسه کنید. در مقدارهای درصدی، عدد نخست به محور افقی و عدد دوم به محور عمودی مربوط است.
.banner {
  background-image: url("image.jpg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

مقایسه سریع ویژگی های CSS

ویژگی کاربرد اصلی نمونه مقدار نکته
vertical-align ترازبندی عمودی متن یا عنصر درون خطی middle برای همه عناصر، جایگزین چیدمان Flexbox نیست.
border-collapse ادغام یا جداسازی حاشیه های جدول collapse روی فاصله خانه ها اثر می گذارد.
border-spacing تنظیم فاصله میان سلول ها 8px در حالت جدا بودن حاشیه ها کاربرد دارد.
caption-side تعیین جای عنوان جدول top عنوان جدول با تگ caption ساخته می شود.
empty-cells نمایش یا پنهان کردن خانه های خالی hide در جدول با حاشیه های جداگانه معنا دارد.
table-layout روش محاسبه عرض ستون ها fixed برای کنترل بهتر، عرض جدول و ستون ها را مشخص کنید.
font-size و font-weight کنترل اندازه و ضخامت متن 1rem و 700 خوانایی را در اندازه های مختلف صفحه بررسی کنید.
background-position تعیین محل تصویر پس زمینه center center نقطه کانونی تصویر را در موبایل هم بررسی کنید.

۱۰ پرسش آموزشی درباره ویژگی های CSS

۱. CSS چه نقشی در طراحی صفحه وب دارد؟

💡پاسخ کوتاه
CSS ظاهر و چیدمان عناصر HTML را مشخص می کند. با آن می توان رنگ، اندازه متن، فاصله ها، حاشیه ها و نمایش اجزای صفحه را کنترل کرد.
📘توضیح بیشتر
HTML ساختار و محتوای صفحه را تعریف می کند و CSS به آن ساختار ظاهر می دهد. برای مثال، یک عنوان HTML را می توان با CSS بزرگ تر کرد یا رنگ آن را تغییر داد. جداسازی محتوا از ظاهر، نگهداری و به روزرسانی پروژه را ساده تر می کند.

۲. vertical-align دقیقا چه چیزی را تراز می کند؟

💡پاسخ کوتاه
این ویژگی موقعیت عمودی عناصر درون خطی، محتوای سلول جدول و بعضی عناصر در یک خط را تنظیم می کند.
🧩توضیح بیشتر
برای تراز کردن تصویر کوچک کنار یک عبارت می توانید مقدار middle را آزمایش کنید. اگر هدف، چیدمان کلی چند بخش در مرکز یک والد است، ابزارهایی مانند Flexbox یا Grid اغلب انتخاب مناسب تری هستند. تفاوت زمینه کاربرد، از خطاهای رایج هنگام یادگیری CSS جلوگیری می کند.

۳. تفاوت collapse و separate در جدول چیست؟

💡پاسخ کوتاه
collapse حاشیه های مجاور را ادغام می کند؛ separate آن ها را جدا نگه می دارد.
📊توضیح بیشتر
اگر ظاهر فشرده و خطوط مشترک می خواهید، از collapse استفاده کنید. اگر برای خانه ها حاشیه مستقل یا فاصله می خواهید، separate مناسب تر است. در حالت دوم، ویژگی border-spacing نیز قابل استفاده خواهد بود.

۴. چه زمانی از border-spacing استفاده می کنیم؟

💡پاسخ کوتاه
هنگامی که حاشیه خانه های جدول جداست و می خواهید میان آن ها فاصله ایجاد کنید، از این ویژگی استفاده کنید.
🧪توضیح بیشتر
برای مثال، مقدار border-spacing: 6px; فاصله میان خانه ها را تعیین می کند. می توانید مقدار افقی و عمودی را جداگانه بنویسید. اگر ویژگی اثری نداشت، ابتدا مقدار border-collapse را بررسی کنید.

۵. caption-side برای چه عنصری است؟

💡پاسخ کوتاه
این ویژگی جای عنوانی را که با تگ <caption> به جدول افزوده شده، مشخص می کند.
📋توضیح بیشتر
عنوان به درک موضوع جدول کمک می کند و از نظر دسترس پذیری نیز مهم است. مقدار معمول top عنوان را بالا و bottom آن را پایین جدول قرار می دهد. بهتر است عنوان کوتاه و توصیفی باشد.

۶. empty-cells چه زمانی اثر دارد؟

💡پاسخ کوتاه
این ویژگی نمایش خانه های خالی را در جدول هایی با حاشیه های جداگانه کنترل می کند.
🔎توضیح بیشتر
مقدار show خانه خالی را نمایش می دهد و hide می تواند آن را پنهان کند. اگر حاشیه ها ادغام شده باشند، این ویژگی معمولا نتیجه مورد انتظار را ایجاد نمی کند. برای همین، هنگام بررسی مشکل، وضعیت مدل حاشیه جدول را نیز ببینید.

۷. تفاوت table-layout: auto و fixed چیست؟

💡پاسخ کوتاه
auto عرض ستون ها را با توجه به محتوا محاسبه می کند؛ fixed امکان کنترل ثابت تری فراهم می آورد.
⚙️توضیح بیشتر
اگر محتوا متغیر است، حالت خودکار می تواند انتخاب مناسبی باشد. اگر می خواهید ستون ها قابل پیش بینی بمانند، عرض جدول و ستون ها را مشخص کنید و از حالت ثابت کمک بگیرید. در هر دو روش، متن بلند و صفحه های کوچک را آزمایش کنید.

۸. برای تعیین اندازه متن از چه واحدی استفاده کنیم؟

💡پاسخ کوتاه
واحدهایی مانند rem، em، پیکسل و درصد کاربرد دارند؛ انتخاب مناسب به نیاز پروژه و مقیاس بندی طراحی وابسته است.
🔤توضیح بیشتر
واحد rem نسبت به اندازه ریشه صفحه محاسبه می شود و برای ایجاد مقیاس منسجم در اجزای مختلف مفید است. پیکسل برای اندازه دقیق مناسب است، اما در طراحی واکنش گرا باید خوانایی و امکان بزرگ نمایی را هم در نظر گرفت. انتخاب واحد به تنهایی کافی نیست؛ اندازه متن را در دستگاه های مختلف بررسی کنید.

۹. تفاوت font-style و font-weight چیست؟

💡پاسخ کوتاه
font-style حالت ظاهری مانند کج بودن متن را تعیین می کند و font-weight ضخامت نوشته را تنظیم می کند.
✍️توضیح بیشتر
برای نمایش متن کج می توانید از italic استفاده کنید و برای پررنگ کردن آن، وزن بالاتری مانند 700 یا bold انتخاب کنید. نتیجه به سبک های موجود در قلم وابسته است؛ اگر وزن انتخاب شده وجود نداشته باشد، مرورگر ممکن است نزدیک ترین حالت در دسترس را نمایش دهد.

۱۰. background-position چه مقادیری می پذیرد؟

💡پاسخ کوتاه
می توانید از واژه هایی مانند center، درصدها یا مقادیر طولی برای تعیین جایگاه افقی و عمودی تصویر استفاده کنید.
🖼️توضیح بیشتر
مقدارهایی مانند left top یا center center خوانا هستند و برای نمونه های ساده کاربرد دارند. مقدارهای درصدی کنترل دقیق تری روی جایگاه می دهند؛ برای مثال، 50% 50% تصویر را در مرکز قرار می دهد. در صفحه واکنش گرا، کادر عنصر و اندازه تصویر بر نتیجه نهایی اثر می گذارند.

۵ نکته مهم درباره اجرای بهتر CSS

۱. هر ویژگی را جداگانه آزمایش کنید

🧪توضیح و مثال
هنگام یادگیری، چند ویژگی را هم زمان تغییر ندهید. اگر جدول ناگهان ظاهر متفاوتی پیدا کرد، تغییر یک مقدار در هر مرحله به شما نشان می دهد کدام ویژگی باعث آن شده است. مثلا ابتدا فقط border-collapse را تغییر دهید و سپس فاصله خانه ها را تنظیم کنید.

۲. ساختار HTML را پیش از استایل بررسی کنید

🔍توضیح و مثال
بعضی ویژگی ها فقط روی ساختارهای مشخص معنا دارند. برای نمونه، ویژگی های مرتبط با عنوان و خانه های خالی جدول بدون نشانه گذاری درست جدول نتیجه مطلوبی نمی دهند. اگر یک قانون CSS عمل نکرد، وجود عنصر مناسب و محل قرارگیری آن را در HTML بررسی کنید.

۳. خوانایی را بر جلوه های نمایشی مقدم بدانید

✅توضیح و مثال
اندازه و وزن متن باید به خوانایی محتوا کمک کند. برای نمونه، استفاده بیش از اندازه از وزن های خیلی سنگین یا اندازه های بزرگ، سلسله مراتب دیداری صفحه را ضعیف می کند. عنوان، متن اصلی و توضیح فرعی را با تفاوتی روشن اما متعادل نمایش دهید.

۴. صفحه را در اندازه های مختلف بررسی کنید

📱توضیح و مثال
جدول یا تصویر پس زمینه ممکن است در صفحه بزرگ مناسب دیده شود اما در موبایل از کادر خارج شود. عرض های مختلف را آزمایش کنید و مطمئن شوید متن جدول قابل خواندن است. اگر لازم شد، برای جدول های عریض از ظرفی با پیمایش افقی استفاده کنید.

۵. نتیجه را در مرورگر و پروژه واقعی بسنجید

🧭توضیح و مثال
مثال آموزشی برای فهمیدن رفتار ویژگی ها مفید است، اما ظاهر نهایی ممکن است تحت تاثیر سبک های دیگر پروژه قرار بگیرد. اگر ویژگی کار نکرد، قوانین CSS هم نام، ترتیب آبشاری، ارث بری و ابزارهای توسعه مرورگر را بررسی کنید. تجربه کار با یک پروژه واقعی، تفاوت میان یادگیری حفظی و مهارت عملی را روشن می کند.

نتیجه گیری

🌱 جمع بندی کاربردی
یادگیری آموزش CSS با شناخت کاربرد واقعی هر ویژگی ساده تر می شود. vertical-align برای ترازبندی عناصر مناسب، ویژگی های جدول برای کنترل خطوط و ستون ها کاربردی، و ویژگی های متن و پس زمینه برای بهبود ظاهر صفحه ضروری هستند. هر مقدار را در یک نمونه کوچک آزمایش کنید و سپس نتیجه را در طراحی سایت و اندازه های مختلف صفحه بسنجید. این روش مرحله ای، پایه ای مطمئن برای گسترش مهارت های CSS و ساخت رابط های خوانا و منظم فراهم می کند.
🔗 یادگیری و بهینه سازی سایت
در کنار مهارت های فنی، توجه به تجربه کاربری و سئو به دیده شدن محتوای سایت کمک می کند. خدمات طراحی سایت نیز زمانی نتیجه بهتری دارند که سرعت، دسترس پذیری و ساختار صفحه از ابتدا در نظر گرفته شوند. در برنامه ریزی رشد سایت، موضوع خرید بک لینک را هم باید با دقت و بر اساس کیفیت و ارتباط منابع بررسی کرد.

سوالات متداول ویژگی های CSS

آیا vertical-align برای وسط چین کردن همه عناصر مناسب است؟

خیر. این ویژگی بیشتر برای عناصر درون خطی، محتوا در سلول جدول و موارد مشابه به کار می رود. برای چیدمان کلی عناصر در مرکز یک والد، معمولا Flexbox یا Grid انتخاب مناسب تری است.

آیا border-spacing با border-collapse: collapse کار می کند؟

خیر، برای ایجاد فاصله میان خانه ها باید حاشیه ها جدا باشند؛ بنابراین از border-collapse: separate; استفاده کنید و سپس مقدار border-spacing را تنظیم کنید.

تفاوت font-size و font-weight چیست؟

font-size اندازه نوشته را تعیین می کند و font-weight ضخامت قلم را تغییر می دهد. این دو ویژگی مستقل هستند و برای تنظیم ظاهر متن می توانند هم زمان استفاده شوند.

چگونه جای تصویر پس زمینه را در مرکز قرار دهیم؟

می توانید از دستور background-position: center center; یا background-position: 50% 50%; استفاده کنید. در نمایشگرهای کوچک نیز جایگاه تصویر را بررسی کنید.

چرا ویژگی های CSS گاهی اثر مورد انتظار را ندارند؟

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

ارسال نظر و نظرات ثبت شده
محمد :
0 0
ممنون بسیار مفید و کاربردی بود.
سایر مقالات
انتخابگرها در css انتخابگرها در css سلکتورهای CSS چیستند و چگونه از آنها استفاده کنیم؟ 💡آشنایی با سلکتورهای CSS سلکتورهای CSS ...
آموزش خواص پیشرفته Css آموزش خواص پیشرفته Css آموزش CSS و پنج نکته مهم برای طراحی بهتر صفحات 💡آشنایی با CSS آموزش CSS به شما کمک می کند ...
آموزش خواص مقدماتی Css آموزش خواص مقدماتی Css 💡 شروع یادگیری CSS آموزش CSS یکی از قدم های مهم برای یادگیری طراحی سایت است. CSS ظاهر صفحا ...
لوگو تلفن مشاوره : 02166056460
خانه منو تماس با ما
جستجو