[mohammad a]

بخش اول:مفاهیم پایه
CSS Basic

[/b]

سمت اول: آشنایی با CSS و مقدمه ای بر اون

نکته1: برای آموزش من سعی میکنم طبق سایت معروف و کاربردی http://www.w3schools.com پیش برم تا آموزشهای منسجمی داشته باشیم.
نکته2:چند قسمت اول برای کسایی هستش که چیزی از CSS نمیدونن پس تقریبا تئوری هستش،ولی به مرور زمان بحث رو میکشونیم به عملی.

پیشنیاز چی نیاز دارید؟
خب کاملا مبرهنه! شما باید آشنایی حداقلی با HTML/XHTML داشته باشید.اگر همچین آشنایی ای ندارید پیشنهاد نمیکنم این سری اموزشها رو ادامه بدید.

CSS چیه؟
کوتاه شده ی Cascading Style Sheets هستش به معنای شیوه نامه آبشاری،همچنین:
•   تعیین نحوه ی نمایش HTML.
•   از HTML4.0 به بعد اضافه شده.
•   شیوه نامه های خارجی میتونین استفاده کنین که کدهای منسجمی بنویسید.
•   کدهای CSS خارجی در فایلی با پسوند css قرار میگیرن.
•   کدهای CSS داخلی هم که داخل خود فایل HTML نوشته میشن.
اینو اضافه کنم که HTML قبل از CSS از تگهای خاصی برای فرمتدهی استفاه نمیکرد(اصلا نداشت) به جز چندتا تگ مثل:
Font,p,h1
خب اینا رو فرض کنید تو یه صفحه صدجا استفاده کرده باشید ولی ناگهان قصد کنید که فونت کل صفحه رو عوض کنید،چی کار میکردید؟یعنی باید میشستید کل تک تک تگهای مثلا font رو پیدا میکردید و عوضشون میکردید!چه کار وحشتناکی نه؟!
خب CSS اومد و یه همچین مشکلهایی رو حل کرد،با CSS یه خط کد کافی بود تا عوض شه و کل فونت مثلا صفحه تغییر کنه،به همین راحتی که کلی در وقت و هزینه صرفه جویی میشد.
در حقیقت CSS به HTML میگه چه جوری نمایش داده بشه،در مورد CSSهای خارجی هم بگم،مزیتش اینه که اولا کدهاتون منسجم هستن دوما اونو میتونید تو کلی صفحه دیگه هم لینک بدید و تنها با تغییر اون تو کلی صفحه تغییر ایجاد کنید.

[mohammad a]

قسمت دوم: ساختار و سینتاکس CSS



CSS یه خطش دو قسمت اصلی داره یه selector و یه یا چندتا Declaration به شکل زیر:


Selector معمولا همون المنت HTMLی هستش که میخواین روش نمایشش رو مشخص کنید.
هر declaration خودش دوتا قسمت داره یکی نوع خاصیت و یکی مقدار خاصیت.
هر Declaration با ; اتمام میشه.Declarationها رو دلبخواهی میتونید تو یه خط بنویسید ولی برای استاندارد نویسی و تمیزی کار بهتره هر Declaration رو تو یه خط یذارید.
Declarationها رو دسته جمعی یا تکی داخل براکتهای باز و بسته میذارن.

کد [انتخاب] Expand

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

تو مثال بالا ما یه سلکتور داریم و دوتا Declaration،یه P یه روبروش یه براکت باز شده و انتهای کار بسته شده پس:

Selector : P
Declarations : color:red; و text-align:center;

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

کد [انتخاب] Expand

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


کامنتها یا توضیحات
این کامنت گذاری چیز خوبیه حتما تو کاراتون به کار ببرید،و ازش استفاده بهینه داشته باشید،از کامنت برای توضیحات در مورد کد ،نویسنده کد،ورژن و ... هر چیز به درد بخور استفاده میشه،مرورگر کامنتها رو نادیده میگیره،اما چه جوری کامنت گذاری میکنن؟
به دو صورت میتونیم کامنت بذاریم:

کد [انتخاب] Expand

/*This is a comment*/



دومی:

کد [انتخاب] Expand

//This is a comment



اولی برای تعداد زیادی کد خط هم میشه استفاده شه ولی دومی فقط مختص یه خط هستش و یه خط رو کامنت میکنه،فقط یه مثال دیگه از اولی و دومی بزنم برا فهم مطلب:

کد [انتخاب] Expand

/*
This
is
a
comment
*/
,
//This
//is
//a
//comment