آموزش CSS (فصل اول)

استایل (CSS) چیست؟

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

1- CSS1
2- CSS2
3- CSS3
4- CSS-P

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

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

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

2- داخلی: (Internal)

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

3- خارجی: (External)

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

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

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

 

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

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

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

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

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

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

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

 

 

موارد مورد استفاده به جای Selector

در فرمول فوق به جای selector موارد زیر را می‌توان به کار برد:

1- HTML tag

2- Class

می توان اجزا داخل سند HTML را به صورت classهای مختلف طبقه بندی نمود تا بتوان هر کدام را به ترتیب استفاده نمود.
در این حالت در تگ مورد نظر، عبارت CLASS=classname را که در آن classname نام class مناسب می‌باشد را تایپ کنید و سپس در قسمت style صفحه html مانند نمونه زیر:

نکته: از class فقط در styleهای داخلی و خارجی می‌توان استفاده کرد.

3-Contextual

4- تو در تو (Nested)

می‌توان چند تگ را به صورت تو در تو قرار داد. در این صورت توسط یک فاصله (space) آنها را از هم جدا می‌کنند.

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

تمام قسمتهایی که داخل تگ h1 توسط EM علامتگذاری شده‌اند بصورت قرمز نشان می‌دهد اما تگهای EM موجود در بقیه متون دیگر بصورت قرمز نوشته نمی‌شوند.

5-پیوندها(Link)

کلمه link را برای تغییر ظاهر پیوندهایی که هنوز بر روی آنها کلیک نشده است تایپ کنید.
کلمه visited را برای تغییر ظاهر پیوندهایی که کلیک شده‌اند تایپ کنید.
کلمه active را برای تغییر ظاهر پیوندها در زمانی که کلیک می‌شوند تایپ کنید.
کلمه hover را برای تغییر ظاهر پیواندها در زمانیکه نشانگر موس روی آنها قرار می‌گیرد تایپ کنید.