Learn CSS in One Day and Learn It Well (Includes HTML5)

1. مبانی CSS: انتخاب‌گرها، ویژگی‌ها و مقادیر

نحوۀ نوشتن به این صورت است: انتخاب‌گر { ویژگی : مقدار; ویژگی : مقدار; ویژگی : مقدار; }

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

• انتخاب‌گرهای عنصر (مانند p، div)
• انتخاب‌گرهای کلاس (مانند .classname)
• انتخاب‌گرهای ID (مانند #idname)
• انتخاب‌گرهای ویژگی (مانند [attribute="value"])
• انتخاب‌گرهای شبه‌کلاس (مانند :hover، :first-child)

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

• color
• font-size
• background-color
• margin
• padding

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

2. مدل جعبه CSS: محتوا، padding، حاشیه و margin

تمام عناصر در CSS به‌عنوان جعبه‌ها در نظر گرفته می‌شوند.

درک اجزای جعبه. مدل جعبه CSS شامل چهار جزء اصلی است:

1. محتوا: متن یا تصاویر واقعی
2. Padding: فضای بین محتوا و حاشیه
3. حاشیه: خطی که دور padding قرار دارد
4. Margin: فضای خارج از حاشیه

کنترل ابعاد جعبه. می‌توانید این اجزا را با استفاده از ویژگی‌های مختلف دستکاری کنید:

• width و height: تعیین ابعاد محتوا
• padding: تنظیم فضای داخل حاشیه
• حاشیه: تعریف سبک، عرض و رنگ حاشیه
• margin: کنترل فضای خارج از حاشیه

عرض کل یک عنصر برابر با مجموع عرض محتوا، padding چپ و راست، حاشیه چپ و راست و margin چپ و راست است. درک این مدل برای کنترل دقیق چیدمان و جلوگیری از همپوشانی یا مشکلات فاصله‌گذاری غیرمنتظره بسیار مهم است.

3. موقعیت‌دهی و شناور کردن عناصر برای کنترل چیدمان

شناور کردن یک تکنیک است که برای ترتیب‌دهی عناصر در یک صفحه استفاده می‌شود.

روش‌های موقعیت‌دهی. CSS چهار روش اصلی موقعیت‌دهی را ارائه می‌دهد:

1. ایستا: موقعیت‌دهی پیش‌فرض
2. نسبی: موقعیت‌یابی نسبت به موقعیت طبیعی خود
3. ثابت: موقعیت‌یابی نسبت به نمای صفحه
4. مطلق: موقعیت‌یابی نسبت به نزدیک‌ترین عنصر والد موقعیت‌یابی شده

عناصر شناور. شناور کردن به عناصر این امکان را می‌دهد که به سمت چپ یا راست حرکت کنند و سایر محتواها در اطراف آن‌ها جریان یابند. نکات کلیدی درباره شناور کردن:

• float: left; یا float: right; مقادیر رایج هستند
• عناصر شناور از جریان طبیعی سند حذف می‌شوند
• ویژگی clear می‌تواند برای جلوگیری از شناور شدن عناصر در کنار موارد خاص استفاده شود

ترکیب تکنیک‌های موقعیت‌دهی و شناور کردن امکان ایجاد چیدمان‌های پیچیده و کنترل دقیق بر جای‌گذاری عناصر در یک صفحه وب را فراهم می‌کند. این برای ایجاد طراحی‌های پاسخگو که در اندازه‌های مختلف صفحه و دستگاه‌ها کار می‌کنند، ضروری است.

4. استایل‌دهی متن و فونت‌ها برای بهبود خوانایی

ویژگی‌های متن و فونت در CSS برای فرمت‌بندی ظاهر کلمات و متن در یک صفحه وب استفاده می‌شوند.

ویژگی‌های فونت. CSS چندین ویژگی برای کنترل ظاهر فونت ارائه می‌دهد:

• font-family: نوع قلم را تنظیم می‌کند
• font-size: اندازه متن را تنظیم می‌کند (px، em، %، کلمات کلیدی)
• font-weight: کنترل ضخامت
• font-style: سبک ایتالیک یا نرمال را اعمال می‌کند

ویژگی‌های متن. ویژگی‌های اضافی بر ارائه متن تأثیر می‌گذارند:

• color: رنگ متن را تنظیم می‌کند
• text-align: کنترل تراز افقی
• line-height: تنظیم فاصله بین خطوط
• letter-spacing و word-spacing: تنظیم فاصله بین حروف و کلمات

استفاده صحیح از این ویژگی‌ها خوانایی و جذابیت بصری را افزایش می‌دهد. در نظر داشته باشید که از واحدهای نسبی مانند em یا % برای اندازه‌های فونت استفاده کنید تا مقیاس‌پذیری در دستگاه‌های مختلف تضمین شود. ترکیب ویژگی‌های مختلف برای ایجاد یک سبک تایپوگرافی منسجم و جذاب برای وب‌سایت شما مهم است.

5. پس‌زمینه‌ها و رنگ‌ها برای افزایش جذابیت بصری

CSS به ما انعطاف‌پذیری زیادی در نحوه نمایش تصویر می‌دهد.

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

• background-color: رنگی ثابت را تنظیم می‌کند
• background-image: تصویری را به‌عنوان پس‌زمینه اعمال می‌کند
• background-repeat: کنترل تکرار تصویر
• background-position: تنظیم محل تصویر
• background-attachment: تعیین می‌کند که آیا پس‌زمینه با محتوا اسکرول می‌شود یا خیر

تعیین رنگ. رنگ‌ها می‌توانند با استفاده از:

1. نام‌های رنگ (مانند قرمز، آبی)
2. مقادیر هگزادسیمال (#RRGGBB)
3. نوتیشن RGB (rgb(r,g,b))
4. RGBA برای شفافیت (rgba(r,g,b,a))

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

6. ایجاد چیدمان‌های پاسخگو با ویژگی‌های نمایش و دید

CSS دارای دو ویژگی است که به ما اجازه می‌دهد یک عنصر را حذف یا پنهان کنیم.

ویژگی نمایش. ویژگی نمایش کنترل می‌کند که یک عنصر چگونه رندر شود:

• block: تمام عرض را اشغال می‌کند و در یک خط جدید شروع می‌شود
• inline: فقط عرض لازم را اشغال می‌کند و در یک خط جدید شروع نمی‌شود
• inline-block: ویژگی‌های هر دو را ترکیب می‌کند
• none: عنصر را از چیدمان حذف می‌کند

ویژگی دید. این ویژگی می‌تواند عناصر را پنهان کند:

• visible: پیش‌فرض، عنصر نمایش داده می‌شود
• hidden: عنصر پنهان است اما هنوز فضایی را اشغال می‌کند

تکنیک‌های طراحی پاسخگو:

• از media queries برای اعمال استایل‌های مختلف بر اساس اندازه صفحه استفاده کنید
• از چیدمان‌های شبکه‌ای انعطاف‌پذیر با عرض‌های درصدی استفاده کنید
• از max-width و min-width برای کنترل اندازه‌گیری عناصر استفاده کنید

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

7. استایل‌دهی به لیست‌ها، لینک‌ها و نوارهای ناوبری برای تعامل کاربر

نوارهای ناوبری معمولاً به‌عنوان یک لیست نامرتب در HTML ایجاد می‌شوند و با استفاده از ویژگی‌های لیست و لینک در CSS استایل‌دهی می‌شوند.

استایل‌دهی به لیست‌ها. CSS ویژگی‌هایی برای سفارشی‌سازی ظاهر لیست ارائه می‌دهد:

• list-style-type: نوع علامت‌گذاری را تنظیم می‌کند (مانند دیسک، مربع، عددی)
• list-style-image: از تصویر سفارشی به‌عنوان علامت‌گذاری استفاده می‌کند
• list-style-position: موقعیت علامت‌گذاری را نسبت به متن کنترل می‌کند

استایل‌دهی به لینک‌ها. لینک‌ها می‌توانند بر اساس وضعیت خود استایل‌دهی شوند:

• a:link - لینک‌های بازنشده
• a:visited - لینک‌های بازدید شده
• a:hover - موس بر روی لینک‌ها
• a:active - لینک‌های فعال

ایجاد نوارهای ناوبری. مراحل ایجاد یک نوار ناوبری پایه:

1. با یک لیست نامرتب در HTML شروع کنید
2. استایل پیش‌فرض لیست را حذف کنید (list-style-type: none;)
3. آیتم‌های لیست را به‌عنوان عناصر درون‌خطی یا شناور استایل‌دهی کنید
4. padding و margin مناسب را اعمال کنید
5. اثرات hover را برای تعامل اضافه کنید

استایل‌دهی مؤثر به لیست‌ها، لینک‌ها و عناصر ناوبری تعامل کاربر و ناوبری سایت را بهبود می‌بخشد. در نظر داشته باشید که از استایل‌های یکسان در سرتاسر سایت خود استفاده کنید تا طراحی منسجم‌تری ایجاد کرده و تجربه کاربری را بهبود ببخشید.

8. سفارشی‌سازی جداول برای بهبود ارائه داده‌ها

جداول HTML به‌طور پیش‌فرض ظاهری زشت دارند. با این حال، با استفاده از برخی استایل‌دهی‌های ساده CSS، می‌توانیم به‌راحتی آن‌ها را به جداول زیبا تبدیل کنیم.

ویژگی‌های استایل‌دهی جدول. ویژگی‌های کلیدی برای سفارشی‌سازی جدول:

• border: حاشیه‌هایی به جدول و سلول‌ها اضافه می‌کند
• border-collapse: مدل حاشیه را کنترل می‌کند (جدا یا ادغام شده)
• width و height: ابعاد جدول و سلول‌ها را تنظیم می‌کند
• text-align و vertical-align: تراز محتوا را کنترل می‌کند
• background-color: پس‌زمینه‌ای به جدول یا سلول‌ها اضافه می‌کند

تکنیک‌های پیشرفته استایل‌دهی جدول:

• از انتخاب‌گر nth-child() برای استایل‌دهی ردیف‌های متناوب استفاده کنید
• اثرات hover را به ردیف‌ها برای تعامل اضافه کنید
• از ویژگی‌های colspan و rowspan برای چیدمان‌های پیچیده استفاده کنید

جداول پاسخگو. برای جداول سازگار با موبایل:

• در نظر داشته باشید که از overflow-x: auto; برای اسکرول افقی استفاده کنید
• از media queries برای تنظیم چیدمان جدول در صفحه‌های کوچک استفاده کنید
• برای صفحه‌های بسیار کوچک، چیدمان‌های جایگزین (مانند چیدمان عمودی سلول‌ها) را در نظر بگیرید

جداول با استایل خوب به خوانایی داده‌ها و درک کاربر کمک می‌کنند. هنگام طراحی جداول، بر روی وضوح و سادگی تمرکز کنید و از استایل‌ها برای برجسته‌سازی اطلاعات مهم و راهنمایی چشم کاربر در داده‌ها استفاده کنید.

آخرین به‌روزرسانی:: August 9, 2024