CSS چیست ؟

CSS مخفف کلمات Cascading Style Sheets ميباشند که در فارسی به آن شیوه نامه آبشاری هم می گویند.
زبان HTML براي ايجاد يك سيستم كد سازي جهاني به وجود آمد تا بوسيله آن بتوان صفحات وب را بدون توجه به نوع كامپيوتر طراحي كرد. خاصيت مهم HTML قالب بندي ساختاري مي‌باشد ولی متاسفانه به طراحان قابلیت کنترل در همه زوایای صفحه را نمی‌دهد. برای قالب بندی و ایجاد افکت های بیشتر از CSS استفاده می‌کنیم.

از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت ( مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر ) را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم.

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

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

مزایای استفاده از CSS به صورت خلاصه به شرح زیر است :

1- کوتاه تر شدن کدهای برنامه (حتی تا نصف)
2- سرعت بار گذاری صفحات وب سایت افزایش یافته و صفحات وب شما سریع لود می شود
3- ایجاد تغییرات در صفحات وبسایت به سادگی انجام می گیرد. (شما یک فایل را تغییر میدهید و کل قالب سایت شما تغییر میکند)
4- محتوی و مطالب سایت از قالب تفکیک و جدا می شود

روشهای به کارگیری CSS

سه روش برای به کارگیری CSS وجود دارد:

1- محلی یا دستوری: (Inline)
در صورتیکه تا به حال از CSS استفاده نکرده‌اید بهتر است از این روش ساده استفاده کنید، اگر چه با این روش نمی‌توان یک style را برای یک مجموعه تگ در آن واحد اعمال کرد.
در این روش درون تگ HTML ای که می‌خواهیم قالب آن را تغییر دهیم ویژگی style را مانند زیر تایپ می‌کنیم



حوزه عمل آن فقط یک دستور است.

2- داخلی یا صفحه ایی: (Internal)

این روش برای صفحات مجزایی که متن طولانی دارند بسیار مناسب می‌باشد. بدین صورت می‌توان style را در بالای سند HTML برای کل متن تعریف نمود.
در اینحالت در داخل تگ < head > تگ < style > را مانند زیر تایپ کنید.


حوزه عمل آن یک صفحه است

3- خارجی: (External)

در صورتیکه بخواهید از یک style در چندین صفحه استفاده کنید این روش را به کار ببرید. در این حالت می‌توان برای تمام صفحات وب ظاهر متداول و یکسانی بوجود آورد. یعنی به جای آنکه برای هر صفحه از style های داخلی استفاده کنید می‌توانید تمام صفحات را با یک style خارجی طراحی کنید.



نکته: url در یک style sheet خارجی(HREF)، مرتبط با محل فایل مذکور بر روی server می‌باشد.

خوزه عمل ان هر فایل HTMLی است که به این فایل مراجعه می کند
ادامه : شکل در پست بعدی

در اینحالت هر تغییری که در صفحه style sheet ایجاد شود به طور اتوماتیک در همه صفحات اعمال خواهد شد. شکل زیر :

طریقه نوشتن CSS در روش داخلی و خارجی

طریقه نوشتن CSS در روش داخلی و خارجی به یکی از صورتهای عمومی زیر است:
فعلا فرض را بر این می‌گذاریم که selector همان تگ HTML است.



نکات مورد توجه:

- خصوصیات هر تگ بایستی بین دو علامت {} قرار داده شوند. در ضمن بین هر خصوصیت و مقدار مربوط به آن علامت ( : ) قرار داده می‌شود.
- می‌توان چند خصوصیت از یک تگ را به یکباره تعریف نمود. در این حالت خصوصیات مختلف را با علامت ( ; ) از هم جدا می‌کنند.
- میتوان خصوصیات چندین تگ را به یکباره تعریف نمود. البته مي بايستي هر کدام از تگها را با علامت (, ) از هم جدا نمود.

به عنوان مثال:


رنگ فونت هر سه تگ را قرمز می‌کند.

- از آنجا که تمام عناصر موجود در CSS توسط Browser ها شناخته نمی‌شود بهتر است محتویات داخل تگ < style > را بین دو علامت

قرار دهید تا مشخصه ‌های تگ در Browserهايي كه اين عناصر را نمي‌شناسند به صورت اشتباه نشان داده نشوند.