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 SPANp>

روش های متفاوتی برای اضافه کردن 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 پلی بزنند