مقدمه

قبل از ادامه شما باید درک پایه ای از زبان بر چسب گذاریHtml داشته باشید.

css چیست ؟

(Cascading Style Sheets) برگرفته ازابتدای کلمات برگ سبک دهی آبشاری می باشد. Css

 سبک ها (style)نحوه ی نمایش عناصرHtml راتعریف می کند.

 برگه های سبک دهی خارجی (External Style Sheets)مقدارزیادی صرفه جویی به عمل می آورند.

 برگه های سبک دهی خارجی در یک پرونده Css ذخیره می شوند.

سبک ها،راه حلی برای یک مشکل بزرگ

هیچگاه درHtmlتگ هایی برای فرمت دادن به یک پرونده در نظر گرفته نشد.در واقعHtml برای تعریف کردن محتوای یک پرونده در نظر گرفته شد:

This is a heading

This is a paragraph.

زمانی که تگ هایی مثل وخاصیت ها (attributes)به مشخصات3.2Html افزوده شد، یک کابوس برای توسعه دهندگان شروع شد.
توسعه وب سایت های بزرگ،جایی که فونت ها و خواص رنگ ها باید به هر صفحه ای اضافه میشد،یک پروسه طولانی وپر هزی

نه را در بر داشت. برای حل این مشکل،کنسرسیوم جهانی وبCss را ایجاد کرد.

در4.0Html،تمامی اطلاعات سبک دهی می توانست در یک فایل Cssجدا ذخیره شوند.امروزه همه مرورگرها از Cssپشتیبانی می کند.

صرفه جویی درکار

خارجی تعریف می شوند.Css چگونگی نمایش عناصر را تعریف می کند.به طور معمول سبک هادر یک پروندهCss

برگه های سبک دهی خارجی این امکان را برای شما فراهم میکنند که با تغییر یک خط کد،ظاهروساختارکلی (layout)تمامی

صفحات وب سایت را تغییر دهید.

دستور زبان

هرضابطهCss(Rule) از یک انتخاب گر(Selector) ویک ستون اعلان (Declaration)تشکیل می شود.

انتخابگر به عنصری در Html که می خواهد سبکی داشته باشد اشاره می کند.

ستون اعلان شامل یک یا چند اعلان می شود که با سمیکالن(;) از هم جدا شده اند. هراعلانی شامل یک نام

خاصیت ومقدار آن خاصیت می شود که با دو نقطه(:) از یکدیگر جدا می شوند.

مثال

یک اعلان Cssهمیشه با یک سمیکالن پایان می پذیرد وگروهی ازاعلان ها با دو کروشه بازوبسته احاطه می شوند.

{;P {color: red; text-align: center

برای آنکه کدCss خواناتر شود بهتراست هراعلان را در خطی جدا از بقیه قراردهیم.برای مثال:                                        

      
}p 
;color: red
{;text-align: center

توضیحات (comments) در css                                                                                                                               

Commentsبرای توضیح بیشتر کد بکار می رود ودر زمانی که می خواهید بعدا دوباره کد را ویرایش کنید به شما کمک میکند .

توضیحات توسط مرورگر نادیده گرفته شود.

یک توضیح Cssبا*/ آغاز وبا /* تمام می شوند.توضیحات نیز می توانند در چند خط بیان شوند.مثل:                              

             
}P 
;Color: red
/* This is a single-line comment */
;Text-align: center
{
/* This is
A multi-line
Comment */