مقدمه ای بر صفحات قالب بندی آبشاری

html ابزاری برای طراحی گرافیک صفحه نیست، بلکه روشی آسان برای نمایش متن در مرورگر است، مانند روشی که واژه پرداز word متون در صفحه نمایش می دهد. تگ ها طی سالیان سال اضافه شدند تا رنگ و روی به یک صفحه ساده (که در ابتدا طوسی رنگ بود) برسند.

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

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

یک صفحه قالب بندی چیست؟

اگر از یک واژه پرداز متنی مانند word استفاده کرده باشید می دانید که چگونه می توان به واژه پرداز گفت که رنگ متن را مشکی کند. به عنوان مثال تمام عنوان های صفحه می توانند سایز 28، پررنگ و به رنگ قرمز باشند. اگر مجددا همان عنوان را بخواهید داشته باشید، می توانید بر روی لیست کشویی کلیک کنید و آیتم عنوانی که قبلا تنظیم کرده اید را انتخاب نمایید.

تنها با html، این کار امکان پذیر نمی باشد. برای بکار بردن یک فرمت تنظیم شده بوسیله یک تگ، روش مشخص وجود ندارد.

اگر چه صفحات قالب بندی آبشاری، این امکان را به شما می دهد که تمام بلاک های متنی را با استفاده از یک تگ ساده، فرمت دهی کنید. اینکار نه تنها باعث خوانایی بیشتر می شود، بلکه اعمال تغییرات فرمت بلاکهای متنی را بسیار ساده می کند.

بعنوان مثال، در html اگر بخواهید اولین پاراگراف هر صفحه به صورت پررنگ و مورب باشد، می بایست کد زیر را برای هر پاراگرافی که لازم باشد، استفاده نمایید:

<P>
<B><i>This is the first paragraph on page One. The same font styles are needed for each page on my web site.</i></B>
<P/>

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

<P Class = "FirstParagraph">
This is the first paragraph on page one. The same font styles are needed for each page on my web site.
<P/>

مطمئنا موافق هستید که کد جدید بسیار تمیزتر می باشد و اگر تصمیم بگیرید که رنگ متن را تغییر دهید، تنها کافیست یک تغییر به صفحه قالب بندی خود بدهید تا تمام اولین پاراگرافها در صفحه تغییر کنند.

یک صفحه قالب بندی، کدهایی است که در میان تگ STYLE قرار گرفته اند و تگ پایانی برای توقف فرمت دهی بکار می رود.

<STYLE>

<STYLE/>

کدهای زیر، فرمتی هستند که رنگ متن را تغییر می دهند:

<STYLE>

{Font1 { Color: Blue.

</STYLE>

<"P Class =" Font1>

.This is my text

</P>

اگر چه ممکن است هنوز ترکیب بندی کدها را به خوبی درک نکرده باشید، نکته اینجاست که می توانید استایلهای دیگری به استایل فوق که ما آنرا Font نامگذاری کرده ایم اضافه نمایید.

ما یک استایل پررنگ و یک استایل سایز اضافه می کنیم:

<STYLE>

}Font1. 
;Color: Blue
;Font-size: 24pt
;Font-weight: Bold
{

</STYLE>

حالا تمام قسمتهایی که برای آنها این استایل را بکار برده ایم (Font1 و P class)، فرمت جدید را به خود می گیرند و لازم نیست که هیچ تغییری در تگهای P اعمال کنید.

بنابراین یک استایل، روشی برای تغییر بلاک های کد (یا حتی یک کلمه تنها) است. و فرمت را برای تمام بلاک ها اعمال می کند. به تگهای html خاصی در قسمت body صفحه احتیاج نیست. فقط یکبار استفاده از نام استایل کافیست تا فرمت مورد نظر بر تمام بلاک های مربوطه اعمال شود.