آموزش CSS بصورت کاملا تصویری از مقدماتی تا پیشرفته – جلسه ۱۴

آموزش CSS

آموزش CSS

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

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

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

🔴 ترازبندی عناصر در CSS :

در CSS برای تراز بندی عناصر در جهت محور X روش های زیادی وجود دارد.

تراز بندی عناصر Block

یک عنصر block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.

مثال برای عناصر Block:

  • <h1>
  • <p>
  • <div>

برای ترازبندی متن، فصل Styling Text را مشاهده فرمایید.

در این فصل نشان خواهیم داد که چگونه یک عنصر Block را در جهت محور X تراز بندی کنید.

تراز بندی با استفاده از خصوصیت margin

عناصر Block را می توان با تنظیم خصوصیت margin با مقدار “auto” تراز بندی کرد.

توجه: استفاده از مقدار “auto” برای خصوصیت margin در IE8 و نسخه های پایین تر کار نخواهد کرد مگر اینکه یک !DOCTYPE در بالای صفحه HTML اعلان شود.

در مثال زیر مقدار “auto” مشخص می کند که فاصله حاشیه های چپ و راست یکسان باشد. بنابراین عنصر در وسط قرار خواهد گرفت:

نکته: اگر خصوصیت width با مقدار ۱۰۰% تنظیم شود، تراز بندی اثری نخواهد داشت.

تراز بندی با استفاده از خصوصیت position

یک روش دیگر برای ترازبندی عناصر استفاده از خصوصیت position است:

توجه: عنصری که به صورت Absolute موقعیت دهی می شود، در واقع از حالت عادی خارج شده است و می تواند روی دیگر عناصر قرار بگیرد.

سازگاری (Compatibility view)

زمانی که از این روش ها برای ترازبندی، استفاده می کنید، جهت جلوگیری از تفاوت ظاهر، در مرورگرهای مختلف، بسیار مناسب است که برای عنصر <body> خصوصیات padding و margin را با مقدار “0” تنظیم کنیم.

زمانی که از خصوصیت position برای تراز بندی استفاده می کنید، در مرورگر IE8 و نسخه های قبلتر یک مشکل بوجود می آید. در واقع اگر یک عنصر ظرف (container element) با عرض مشخص شده داشته باشیم (در این مورد  < “div class=”container>) و یک DOCTYPE! در بالای صفحه HTML اعلان نشده باشد با مشکل زیر، روبرو خواهیم شد:

IE8 و نسخه های قبلتر به اندازه ۱۷px به عنوان حاشیه راست (margin) اضافه می کند. به نظر می رسد که این فضا برای scrollbar رزرو شده است. بنابراین زمانی که از خصوصیت position استفاده می کنید همیشه یک DOCTYPE! در بالای صفحه HTML اعلان کنید.

ترازبندی با اسفاده از خصوصیت float

یک روش دیگر برای ترازبندی عناصر، استفاده از خصوصیت float است:

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

جلسه ۱۳

جلسه ۱۵

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

 برچسب ها: