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">
;( wp-layout.css ) @import url
<style/>

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

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

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

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

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