CSS و كاربرد آن در طرح های امروزی

CSS جایگزینی برای نمایش مبتنی بر HTML پیشنهاد می كند و اكنون به وسیله ی انجمن طراحی وب پذیرفته شده است . سازگاری css نیازمند برخی تغییرات از سوی تولید كنندگان وب است . css بسیار حساس به نحو دستوری است ، و اشتباهات كوچك می توند باعث شكست كامل یك قانون css شود . بنابراین ، طراحان باید از مشخصات آن آگاه باشند .

متاسفانه ، حتی اگر از قوانین پیروی كنید ، خطاهای آشكاری در پیاده سازی مرورگرهای پیشرفته وجود دارد . چیزهای زیادی وجود دارد كه باید درباره ی CSS بدانید ، و امكانات جدید هر لحظه اضافه می شود . CSS1 تعیین اولین شیوه نامه ، بیش از 50 خاصیت را تعریف می كند ، و CSS2 بیش از 50 خاصیت دیگر را . CSS2 تسهیلات تغییر مكان كه CSS-P نامیده می شود را به وجود آورده است . نگارش جدید كه CSS3 نام دارد قصد دارد امكانات ارائه بیشتری را به وجود آورد ، و با فناوری های دیگر ، نطیر اسكریپت و گرافیك های برداری ، بیشتر یكپارچه شود .

مهم است به خاطر داشته باشید كه HTML اساس و پایه ی یك صفحه وب است . CSS در واقع ، به طور مستقیم به استفاده صحیح از عناصر HTML یا XHTML استناد می كند . ولی ، اگر به كد ناهنجاری محدود شده باشند لزوما به طور قابل پیش بینی ای كار نمی كنند .

هر چند واضح است كه می خواهیم به برچسب های منطقی معنی بدهیم ، ولی مواظب باشید كه این به شما مجوز نمی دهد از CSS به جای كد HTML استفاده كنید . قوانینی كه ارائه محدود برخی برچسب ها را تغییر می دهند نباید به كار روند . برای مثال در اینجا باعث می شویم كه برچسب های <b> به طور غیر معمولی عمل كنند و تمام اشكال تزئینی پیوندها را حذف نمایند :

b {font-style:italic; font-weight:normal;}
a {text-decoration:none; color: black; }

( اگر به دلیل خاصی این قوانین را بازنویسی كرده اید ، حتما باید آن ها را توضیح گذاری كنید ) به خاطر مشكل معنای پیش فرض در HTML ، شاید برچسب های <div> و <span> فوق العاده مفید باشند . هم چنین برچسب <div> یك برچسب بلوكی است كه هیچ نمایش پیش فرضی ندارد ، بنابراین در حالت دهی به بخش های بزرگ یك سند مفید است . برای مثال :

<div style="background: lightblue; font-weight: bold; color: black;">
<p>This Paragraph is highlighted in blue.</p>
</div>

به طور مشابه برچسپ <span> هیچ معنی یا نمایش از پیش تعریف شده ایی ندارد ، ولی وقتی یك برچسب هیچ كاراكتر بازگشت به ابتدای خط ( carriage return ) را نداشته باشد ، هنگام الصاق اطلاعات سبك به چند كلمه یا حرف ، مفید به نظر می آید ، مانند مثال زیر :

<p>Calling out<span style="background-color:#99CC00; font-weight:bold; color:#000000"></span>isn't hard with SPAN</p>

روش های متفاوتی برای اضافه كردن CSS به سند HTML وجود دارد ، و همه آن ها داری مزایا و معایبی است كه قبل از اینكه روشی در نظر گرفته شود باید به دقت سبك و سنگین شود . ابتدا می توانید در بخش سر صفحه ی یك سند HTML با مشخص ساختن رابطه پیوندی به یك شیوه نامه ی خارجی ، به آن متصل شوید . برای مثال :

<link rel="stylesheet" href="styles/global.css" media="screen" />

روش دوم برای اضافه كردن CSS ، نهفته كردن آن است . وقتی یك شیوه نامه نهفته می شود ، قوانین شیوه نامه را به طور مستقیم درون سند HTML بنویسید . شیوه نامه ی گسترده شدن درون سند ( document-wide style ) یك راه بسیار ساده برای شروع استفاده از CSS است . یك برچسب <style> درون سر صفحه ی سند HTML قرار دهید . به دلیل اینكه چند شكل از شیوه نامه ها ممكن است اضافه شود ( فراتر از شكل استاندارد CSS ) باید هنوز هم صفت type را اضافه كنید تا نشان دهید كه كدام شكل از شیوه نامه را به كار می برید ، البته صرفنظر از پشتیبانی پیش فرض مرورگر از فناوری های شیوه نامه ها . به مثال های زیر توجه كنید :

شیوه نامه گسترده درون برجسب استایل

<style type="text/css">
body {background-color:#666666; font-size:9px; }
h1 {color:#990000;}
</style>

شیوه نامه پیوندی درون برجسب استایل

<style type="text/css">
@import url( wp-layout.css );
</style>

یك نگرانی در مورد شیوه نامه ها ی گنجانده شده این است كه همه ی مرورگرها اطلاعات شیوه نامه را به درستی درك نمی كنند . برای اجتناب از مشكلات ، اطلاعات شیوه نامه ها را با استفاده از روش توضیح گذاری HTML ، تبدیل به توضیحات كنید . به طوری كه این توضیحات روی صفحه نمایش نشان داده نمی شوند یا توسط مرورگرهای قدیمی تر ، به طور نادرستی تفسیر نمی گردند . ( نمی دانم نویسنده این مطلب را برای چه عصری از مرورگرها نوشته ! اما احتیاط شرط عقل است ! مهم تر از اون این یك استاندارد است ! پس طراحان موظف به انجام آن هستند )

CSS گسترده شده درون سند در مقایسه با CSS پیوندشده دارای معایب قابل ملاحظه ای است زیرا باید در هر صفحه كه استقاده می شود یك نسخه از آن كپی شود . این كار باعث سخت تر شدن این گونه سایت ها می شود و از حافظه نهائی محلی مرورگر نیز به شكل بهینه استفاده نمی شود .

آخرین روش به كار بردن CSS اعمال آن درون مولفه های ویژه با استفاده از صفت رایج style است . نیازی نیست كه این گونه اطلاعات مربوط به شیوه نامه ها از مرورگرهایی كه نسبت به شیوه نامه ها اطلاعی ندارند مخفی شود ، زیرا مرورگرها صفاتی كه نمی فهمند را در نظر نمی گیرند . به مثال زیر توجه كنید :

<p style="color:#3366FF; font-size:12px;">This is red blue text!</p>

ولی بسیاری از مزایای اصلی استفاده از CSS به این روش به دست نمی آید . زیرا CSS خیلی به برچسب وابسته هستند . در واقع ، همه توافق دارند كه این شیوه خیلی بهتر از به كاربردن برچسب های جدید جهت تشریح ظاهر صفحه نمی باشد . ولی برخی از طراحان از CSS به این روش استفاده می كنند تا از كد HTML قدیمی به CSS پلی بزنند .