آموزش CSS بصورت کاملا تصویری از مقدماتی تا پیشرفته – جلسه ۱۷ (آخرین جلسه)

آموزش CSS

آموزش CSS

مقدمه ای کوتاه بر معرفی CSS : شیوه‌نامهٔ آبشاری یا روی‌انداز آبشاری سَبْک یا سی‌اس‌اس (به انگلیسی: CSS: Cascading Style Sheets) در کنار اچ‌تی‌ام‌ال هستهٔ فناوری ساخت صفحه‌های وب هستند. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است.

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

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

⬛️ شروع آموزش جلسه ۱۷ یادگیری زبان CSS :

🔴 ساخت یک نوار هدایتی در CSS :

نسخه نمایشی  Navigation Bar (نوار هدایتی)

  • خانه
  • اخبار
  • مقاله ها
  • فوروم
  • تماس با ما
  • درباره ما

⬅️ Navigation Bar :

برای استفاده آسان، وجود Navigation Bar یک بخش بسیار مهم برای وب سایت ها محسوب می شود.

با CSS می توان، منوهای خسته کننده HTML را به Navigation Barهای زیبا تبدیل کرد.

Navigation Bar = لیستی از لینک ها

navigation bar یا نوار هدایتی، اساساً لیستی از لینک هاست که با استفاده از عناصر <ul> و <li> ساخته می شوند:

حالا اجازه دهید تا bulletها ، margin و padding را از لیستمان حذف کنیم:

توضیح مثال بالا:

  • list-style-type:none – علامت ها یا bulletها را حذف می کند، یک navigation bar احتیاجی به علامتگذاری لیست ها ندارد.
  • خصوصیت margin و padding را با مقدار ۰ تنظیم می کنیم، تا تنظیمات پیشفرض مرورگر را حذف کنیم.

کد مثال بالا یک کد استاندارد است که هم در لینک های افقی و هم در لینک های عمودی استفاده می شود.

⬅️ Navigation Bar عمودی

برای ساخت یک Navigation Bar عمودی با توجه به کد بالا، فقط کافی است که برای گزینشگر a ، خصوصیت display را با مقدار “block” تنظیم کنیم:

توضیح مثال بالا:

  • با تنظیم خصوصیت display با مقدار “block” تمام تگ های <a> در یک خط جداگانه قرار می گیرند و تمام فضای لینک قابل کلیک کردن است (نه فقط متن لینک)، و این به ما اجازه می دهد تا عرض لینک را مشخص کنیم.
  • عناصر Block به صورت پیشفرض تمام عرض قابل دسترس را اشغال می کنند. ما می توانیم مشخص کنیم که ۶۰ پیکسل از یک خط را اشغال کند.

برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar عمودی

توجه: همیشه عرض تگ <a> استفاده شده در navigation bar را مشخص کنید. اگر انجام این کار را فراموش کنید، IE6 یک نتیجه غیرمنتظره تولید خواهد کرد.

⬅️ Navigation Bar افقی

دو راه برای ساخت Navigation Bar افقی وجود دارد. استفاده از لیست های inline یا floating

هر دو روش بخوبی کار خواهد کرد، اما اگر می خواهید لینک ها، اندازه یکسان داشته باشند باید از روش floating استفاده کنید.

لیست های inline

یک راه برای ساخت navigation bar افقی این است که عناصر <li> را به صورت inline مشخص کنیم:

توضیح مثال بالا:

  • به صورت پیشفرض یک عنصر <li> تمام فضای یک خط را اشغال می کند، با تنظیم خصوصیت display با مقدار “inline” شکستگی خط قبل و بعد هر لیست حذف خواهد شد، بنابراین تمام عناصر <li> در یک خط نمایش داده می شوند.

مشاهده جلسات قبل و بعد یادگیری CSS :

جلسه ۱۶

بهزاد صحرانورد
۸ دی ۱۳۹۶
237 بازدید

 برچسب ها: