سال های متمادی توسعه دهندگان وب از CSS به عنوان ابزاری برای style-دهی به متون صفحات وب چشم پوشی کرده و از آن در این راستا استفاده نمی کردند؛ با استفاده از آن تنها رنگی به این بخش و رنگی دیگر به بخش دیگر اضافه کرده و کار را با آن تا حدودِ کمی پیش برده اند. گرچه دلیل اصلی این کار پشتیبانی کمِ مرورگرها از css بوده است. خوشبختانه در این زمینه پیش رفت های خوبی صورت گرفته است.در این فصل اندکی بیشتر به مبحث css پرداخته و موارد زیر را با آن طراحی می کنیم:
- تغییر ظاهر و سایز بخش های مشخصی از محتوا
- تغییر پس زمینه و حاشیه های کار
- قرار دادن آیتم های مورد نظر، هر کجای صفحه وب که در نظر داریم
خوب بیایید شروع کنیم، ابتدا می آموزیم که چگونه باید با استفاده از 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 عملی نیست.
پس تا اینجا فهمیدیم که
- یک المان block-level می‌تواند المان‌های دیگر block-level و البته المان‌های inline را درون خود جای دهد.
- اما یک المان inline تنها قادر است المان‌های دیگرِ inline را درون خود جای دهد.
