طراحی سایت
ساناتک
دوشنبه 13 شهريور 1396
0
فصل چهارم استفاده از CSS برای قالب بندی صفحات

سال های متمادی توسعه دهندگان وب از CSS به عنوان ابزاری برای style-دهی به متون صفحات وب چشم پوشی کرده و از آن در این راستا استفاده نمی کردند؛ با استفاده از آن تنها رنگی به این بخش و رنگی دیگر به بخش دیگر اضافه کرده و کار را با آن تا حدودِ کمی پیش برده اند. گرچه دلیل اصلی این کار پشتیبانی کمِ مرورگرها از css بوده است. خوشبختانه در این زمینه پیش رفت های خوبی صورت گرفته است.در این فصل اندکی بیشتر به مبحث css پرداخته و موارد زیر را با آن طراحی می کنیم:

  1.  تغییر ظاهر و سایز بخش های مشخصی از محتوا
  2.  تغییر پس زمینه و حاشیه های کار
  3.  قرار دادن آیتم های مورد نظر، هر کجای صفحه وب که در نظر داریم

خوب بیایید شروع کنیم، ابتدا می آموزیم که چگونه باید با استفاده از css ظاهر و سایز آیتم های صفحه وبِ خود را تغییر دهیم. گرچه پیش از آن که این تکنیک را یاد بگیریم بهتر است نگاهی گذرا به تفاوت های بین block-level element و inline element ها بی‌اندازیم.

Block-level Element یا Inline Element

هر صفحه وب از دو نوع المان تشکیل شده است: block-level element و inline element.

بهتر است تفاوت های بین این دو را ابتدای کار درک کنیم، مخصوصاً زمانی که صحبت از CSS به میان آورده می شود.

قوانین پایه‌ایِBlock-level و المان های Inline

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

المان های Block-level نیز دقیقاً مانند این جعبه ها هستند. آن ها می توانند المان های کوچکتر از این دست را درون خود جای دهند. اما برای این کار قوانین خاصی وجود دارند، قوانینی که مشخص می‌کنند کدام نوع از Block-levelها می‌توانند درون انواع دیگر آن‌ها قرار گیرند. همان‌طور که یک جعبه بزرگ را نمی‌توان درون یک جعبه کوچکتر جای داد ما نیز نمی‌توانیم یک تگِ div را درون یک p قرار دهیم؛ گرچه عکس این کار انجام شدنی است. قوانین اینچنینی را به مرور زمان حس خواهید کرد، سپس می‌توانید کار خود را بررسی کرده و مشکلات کدنویسی‌های‌تان را خود دریابید. این از المان‌های Block-level

 اما المان‌های inline چگونه هستند؟ این‌ها را چون جعبه‌های جانبی و کوچکی تصور کنید که درون جعبه‌های اصلی خود جای می‌دهیم. آن‌ها را می‌توان درون جعبه‌های اصلی به گونه‌ای قرار داد تا از فضای خالی و بِلا استفاده درون آن‌ها استفاده کرد، یا این‌که خارج از جعبه‌های خود به طور جانبی و جدا از آن‌ها استفاده کنیم اما اینکه دیگر جعبه‌های خود را درون آن‌ها قرار دهیم کاری انجام ناشدنی است، در واقع قرار دادن یک المان block-level درون یک inline element عملی نیست.

پس تا اینجا فهمیدیم که

  1.  یک المان block-level می‌تواند المان‌های دیگر block-level و البته المان‌های inline را درون خود جای دهد.
  2.  اما یک المان inline تنها قادر است المان‌های دیگرِ inline را درون خود جای دهد.

 

تعداد بازدید: 30
مطالب دیگر آموزش طراحی سایت
margin و مرزبندی تگ هااستفاده از padding در تنظیم حاشیهجداسازی تگهای سایت غواصیStyle دهی به اضلاع یک تگحاشیه دار کردن Block level Element ها
 
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید