انجمن متا: طراحی سایت و سئو - دانلود قالب و تم - کریپتو

کامپیوتر، اینترنت، شبکه، مدیریت محتوا، تم => زبان های برنامه نویسی => نويسنده: mohammad a در بعد از ظهر 14:20:15 - 10/19/11

عنوان: اموزش جامع css
رسال شده توسط: mohammad a در بعد از ظهر 14:20:15 - 10/19/11
بخش اول:مفاهیم پایه
CSS Basic
[/b]

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

نکته1: برای آموزش من سعی میکنم طبق سایت معروف و کاربردی http://www.w3schools.com (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های خارجی هم بگم،مزیتش اینه که اولا کدهاتون منسجم هستن دوما اونو میتونید تو کلی صفحه دیگه هم لینک بدید و تنها با تغییر اون تو کلی صفحه تغییر ایجاد کنید.
عنوان: پاسخ : اموزش جامع css
رسال شده توسط: mohammad a در بعد از ظهر 14:53:05 - 10/20/11
قسمت دوم: ساختار و سینتاکس CSS



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

(http://www.meta4u.com/forum/index.php?action=dlattach;topic=7772.0;attach=6055)
Selector معمولا همون المنت HTMLی هستش که میخواین روش نمایشش رو مشخص کنید.
هر declaration خودش دوتا قسمت داره یکی نوع خاصیت و یکی مقدار خاصیت.
هر Declaration با ; اتمام میشه.Declarationها رو دلبخواهی میتونید تو یه خط بنویسید ولی برای استاندارد نویسی و تمیزی کار بهتره هر Declaration رو تو یه خط یذارید.
Declarationها رو دسته جمعی یا تکی داخل براکتهای باز و بسته میذارن.

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

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

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

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

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



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

/*This is a comment*/



دومی:

//This is a comment



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

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