از این پست به بعد، هر از چند گاهی (گفتم گاهي!) نکات و درسهایی درباره CSS می نویسم؛ فكر مي كنم كم بهش پرداخته شده. از ابتدا و پایه شروع مي کنيم و پله پله پیش ميريم تا به نکات پیشرفته ی CSS برسیم.
بد نیست که در ابتدا با مقدمه ای درباره CSS و دلیل به وجودآمدن و فواید استفاده از آن شروع کنیم و اینکه اصلاً CSS چيه؟!!
اصلاً CSS چیست؟
CSS مخفف عبارت Cascading Style Sheets (شیوه نامه آبشاری؛ دلیل آبشاری بودنش به نوع متداول نوشتن کدها برمی گردد که در درسهای بعدی خواهیم دید!) است و وظیفه ی آن، چگونگی نمایش کدها و تگهای HTML هستند. استایلها در حالت عادی در برگه های استایل (Style Sheets) نوشته می شوند. این برگه ها معمولاً(و نه همیشه!) در فایلهای جداگانه ای با فرمت css. ذخیره می شوند. برگه های استایل (که به آنها «شیوه نامه» هم گفته می شود) از HTML 4.0 به این زبان اضافه شدند. مفیدترین خاصیت استفاده از استایلها صرفه جویی در وقت است! برای مثال شما یک وب سایت را در نظر بگیرید که از 100 صفحه ی مختلف تشکیل شده است. شما می توانید رنگ لینکها و نوشته ها و پس زمینه و فونت و اندازه ی آنها و ... را در هر کدام از این صفحات و به طور جداگانه تصحیح کنید، اما اگر بدانید که تنها با تعریف یک فایل CSS و لینک کردن صفحات به این فایل می توانید تنها با ویرایش این استایل، تاثیر آن را در تمام 100 صفحه ببینید، از کدام روش استفاده می کنید؟!
علاوه بر خصوصیت بالا، همچنین می توان برای چند جزء (مثلا فونت و رنگ ستون اصلی و ستون کناری) از یک کد استفاده کرد.
استفاده از CSS برای حل یک مشکل بزرگ!!!
HTML مخفف عبارت Hyper Text Mark-up Language است که اصولاً تگهای (Tags یا همان دستورات زبان HTML) مختلف این زبان برای تعریف محتویات یک صفحه به وجود آمدند. ساختار کلی یک سند HTML به صورت زیر است:
به تگهای head، body و html دقت کنید!
درون تگ head، معمولاً متاتگها که برای توضیح خصوصیات کلی صفحه از قبیل زبان و انکود صفحه و البته توضیحات و اطلاعاتی که برای موتورهای جستجو مفید است و همچنین عنوان صفحه قرار می گیرند. یکی از محلهایی که میتوان استایلها را در آن جای داد همین جاست!
آنچه شما از یک صفحه وب می بینید، آن محتویاتی است که درون تگ body قرار گرفته است! (توجه: مواظب باشید در شکل بالا تگ body را با خصوصیاتی که برای این تگ در css تعریف شده است، اشتباه نگیرید!)
برای مثال برای اینکه به برازر (Browser مثل اینترنت اکسپلورر یا اپرا و ...) بفهمانند که این جمله، یک تیتر است یا یک پاراگراف است و یا درون یک جدول است، دستورات (اول کلمه ی header؛ 1 نشان دهنده ی بزرگترین عنوان است) یا (اول کلمه پاراگراف) یا (به معنی جدول) و ... به وجود آمدند (همانطور که متوجه شدید اغلب(و نه همه!) تگهای HTML درون علامتهای<> قرار می گیرند و با بسته می شوند).
اینترنت اکسپلورر و نت اسکیپ (Netscape) - به عنوان دو پرچمدار برازرها - تگهای HTML مختلف زیادی را به این زبان اضافه کردند (مانند تگ ) که به تدریج باعث مشکل شدن تشخیص ساختار صفحات وب از محتوای آنها می شد. این واقعاً تبدیل به یک مشکل بزرگ شده بود!
برای حل این مشکل، W3C یا کنسرسیوم وب گستر جهانی (نترسید!!! منظورم همان World Wide Web یا www خودمان است!) که کار بررسی و تصویب استانداردهای HTML و زبانهای تحت وب را بر عهده دارد، استایلها را به HTML 4.0 اضافه کردند. در حالی که در HTML 4.0 می توانستیم به نحوه ی نمایش اغلب اجزاء HTML بپردازیم، در HTML 3.2 تنها فونت ها و رنگها قابل ویرایش بودند.
نسخه های Netscape 4.0 و Internet Explorer 4.0 هم دیگر از این شیوه نامه های آبشاری پشتیبانی می کردند.
استفاده از CSS مساوی است با صرفه جویی در وقت
همانطور که پیش از این گفتم، استایلها را میتوانیم در فایلی جداگانه قرار دهیم و با اتصال تمام صفحات یک سایت به همان یک استایل، خصوصیات اجزای مختلف صفحات را کنترل کنیم. این برای طراحان و گسترش دهندگان وب، فوق العاده بود، چرا که تنها با ویرایش یک فایل می توانستند خصوصیات و ساختار همه ی صفحات یک سایت را کنترل کنند. این موضوع، وقتی اهمیت بیشتری می یابد که شما صاحب یک وب سایت بزرگ باشید!
خوب! فکر می کنم تا اینجا تا حدودی با HTML و CSS و اهمیت CSS آشنا شدید. با یک سوال بحث را ادامه می دهیم.
هنگامی که چند استایل برای یک عنصر معین شود، از کدام استایل استفاده خواهد شد؟
خوب! به طور کلی استایلها به طور اولویت بندی شده در زیر می توانند مورد استفاده قرار گیرند (به ترتیب افزایش اولویت):
1. پیش فرض و تعیین شده توسط برازر (مثلا اگر هیچ رنگی برای یک لینک تعیین نکنید، اغلب برازرها لینک را با رنگ قرمز نشان می دهند)؛
2. استایل های بیرونی که به صفحه مرتبط هستند؛
3. استایلهای درونی (درون تگ استفاده می شوند؛ اغلب به دلیل دسترسی آسانتر به کد استایل، این روش در قالبهای وبلاگ ها استفاده می شود)؛
4. استایلهای داخل تگ یا درون خطی.
بنابراین استایلی که داخل تگهای html و به صورت مستقیم تعریف می شود بر بقیه ی انواع ارجحیت دارد.
تا اینجا، یک دید نسبتاً کلی نسبت به CSS پیدا کردیم. در پستهای بعدی، به یادگیری دستورات CSS می پردازیم و شروع به نوشتن استایل می کنیم.
