آموزش css – جلسه اول

نویسنده: فرزاد ربیعی
تاریخ: 2012 - 02 - 08
دسته بندی: CSS طراحی سایت

CSS
تکنیکی است که برای کنترل طراحی و فرمت بندی در صفحات وب از آن استفاده می شود. با css می توان قالب و فرمت (طراحی) را از محتویات آن صفحه جدا کرد.
مثلا برای فرمت بندی تگ های p که معرف پاراگراف است در صفحه وب می توان با چند خط کد، کل تگ های p را به فرمت دلخواه در آورد (مثلا رنگ آن ها را تغییر داد) .
CSS مخفف Cascading Style Sheet است به این معنا که اولویت بندی برای اثرگذاری فرمت ها به صورت آبشاری است. ترتیب آن از اولویت کم به زیاد به شرح زیر است:
۱)مقدار پیش فرض مرورگر
۲)فایل Style Sheet خارجی
۳) Style Sheetداخلی که در قسمت <head> تعریف شده است
۴) Inline Styleکه داخل عناصر HTML تعریف شده است
(این آیتم ها در مبحث های بعدی شرح داده می شود)
مزایای استفاده از CSS:
•    تمامی قالب ها را در یک یا چند فایل CSS برای کم شدن زمان ویرایش قرار داد.
•    سایت هایی که از فایل های CSS استفاده می کنند، سریع تر بارگذاری می شوند. چون این فایل یک بار توسط کلاینت دانلود شده و در حین دیدن آن وب سایت، دیگر نیازی به بارگذاری دوباره CSS نخواهد بود.
•    با جداسازی لایه نمایش از محتوا، می توانید از آن قالب در سایت های دیگر هم استفاده کنید.
•    ایجاد قالب های مختلف که می تواند برای موبایل ها یا دستگاه های دیگر به کار رود.
نسخه های CSS :
Css1: در سال ۱۹۹۶ توسط W3C (کنسرسیوم تعیین استانداردهای وب) منتشر شد. در این نسخه خصوصیاتی مانند تعیین رنگ،  تصویر پس زمینه و رنگ متون را میشد تعیین کرد.
CSS2: در سال ۱۹۹۸ معرفی شد. امکان ایجاد کادر، تعیین مکان آن ها و selector ها در این نسخه بود.
CSS2.1: به دلیل مشکلاتی که مرورگرها با نسخه ۲ داشتند و همین طور خطاهای موجود در آن، این نسخه جهت سازگاری با مرورگرها ارائه شد. در حال حاضر هم وقتی صحبت از css2 می شود، منظور همان نسخه ۲٫۱ است.
CSS3: در سال ۲۰۱۱ معرفی شد و به قسمت های مختلفی تقسیم می شود. در این نسخه ایجاد متن های چند ستونی، حاشیه های گرد، میزان شفافیت (opacity)، استفاده از رنگ های RGBA, HSL, HSLA و … اضافه شده است.  ضمنا مرورگرها از نسخه css3 به صورت کامل پشتیبانی نمی کنند(منهای دو مرورگر chrome  و safari که به طور کامل آن را پشتیبانی می کنند. این نسخه و البته نسخه های قبلی CSS، بدترین سازگاری را با internet explorer دارد). در جدول زیر آیتم هایی که مرورگرها از آن پشتیبانی می کند آمده است.


برای تمرین CSS، می توانید از برنامه های مختلف استفاده کنید. اگر نمی خواهید هیچ برنامه ای روی کامپیوترتان نصب کنید، می توانید از notepad که به صورت پیش فرض در سیستم عامل ویندوز وجود استفاده کنید. البته به دلیل این که فقط شما باید درون آن کد بنویسید و ظاهر خشکی دارد خیلی توصیه نمی شود. چنانچه بخواهید می توانید یکی از برنامه هایی که در زیر آمده استفاده کنید(برای کار با CSS، باید با تگ های html آشنایی داشته باشید):
Notepad++، Microsoft expression ،Adobe dream weaver، Komodo و …
CSSها را به سه صورت می توان به کار برد.( در هر سه حالتی که در زیر گفته می شود، هدف ما این است که نوشته های پاراگراف را به رنگ آبی درآوریم.)
۱) inline: در این حالت، فرمت یا همان CSS ما در خطی که قرار است بر آن فرمتی اعمال شود، قرار دارد.

<p style="text-align: right;"><p style=”color:blue;”>this is a sample</p></p>

۲) document: برای تعریف CSS در این حالت، باید یک تگ مانند مثال زیر مابین دو تگ <head> </head> بنویسید.

<style type=”text/css”>
p
{
 color:blue;
}
</style>

در این مثال ابتدا نام تگی که قرار است فرمت جدید (در اینجا رنگ نوشته) روی آن اعمال شود را می نویسیم، سپس در آکولاد باز و بسته ابتدا متغیر (color) و سپس مقدار (blue)آن را می نویسیم.
۳) external: برای این حالت، باید یک فایل با پسوند CSS ایجاد کنیم، در آن فایل فرمت ها را بنویسیم، سپس آدرس این فایل را از طریق تگ زیر که بین دو تگ <head> </head> است، به صفحه ها نسبت دهیم.

 <link rel=”stylesheet” type=”text/css” href=”example.css” />

محتویات فایل example.css می تواند مطابق زیر باشد:


{
color:blue;
}

برچسب: - - - -

مطالب مرتبط

درباره ی

در زمینه CSS، ASP.Net و شبکه (MCITP) فعالیت میکنم

۳ نظر به “آموزش css – جلسه اول” ثبت شده است

  1. bobak گفت:
    فوریه 9, 2012 در 6:57 ق.ظ

    Nice Job. keep it up

  2. سیاوش پاکسرشت گفت:
    فوریه 8, 2012 در 6:45 ب.ظ

    خیلی خوشحالم که یک آموزش خوب و کاربردی رو شروع کردید
    به نظر شما بهترین نرم افزار برای طراحی صفحات وب + css چیه؟

    • فرزاد ربیعی گفت:
      فوریه 8, 2012 در 9:55 ب.ظ

      من خودم با microsoft expression web 4 کار میکنم که به نوعی هم از css3 پشتیبانی میکند، ولی بستگی دارد که شما با چه زبان برنامه نویسی بخواهید کد بنویسید. مثلا کسانی که با asp.net کار می کنند از visual studio استفاده میکنند.