مقالات این سری آموزشی :

1. آشنایی با CSS و شروع کار با آن
2. آموزش انتخابگر ها (Selectors) در CSS
3. روش های اضافه کردن CSS به سایت
4. آموزش قرار دادن تصویر پس زمینه در CSS

سلام دوستان

یه مدت فتولیا خوابیده بود به علت مشکلات سرور که با تعویض سرور مرتفع شده فعلا . بعد از این سعی می کنیم به صورت جدی تر مطالب خوبی رو آماده کنیم که یکی اش همین آموزش css هست . امیدوارم مورد استفاده تون قرار بگیره

قبل از شروع این مبحث لازم هست که اطلاعاتی در مورد HTML داشته باشید

CSS چیست ؟

• CSS مخفف Cascading Style Sheets
• استایل ها مشخص می کنند که عناصر HTML به چه شکلی نمایش داده شوند
• استایل ها به HTML 4.0 برای حل یک مشکل اضافه شدند
• با استایل ها خارجی می توان صرفه جویی زیادی در زمان و انرژی هنگام طراحی صفحات وب کرد
• استایل های خارجی داخل یک فایل CSS ذخیره می شوند

استایل ها یک مشکل بزرگ را حل می کنند

HTML در ابتدا هرگز در نظر نداشت تگ هایی برای قالب بندی و شکل دهی عناصر صفحه ارائه کند

نحوه نمایش محتویات در HTML به این صورت تعریف شده بود :

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

هنگامی که تگ هایی نظیر <font> به HTML 3.2 اضافه شدند کابوس توسعه دهندگان وب شروع شد.اضافه کردن رنگ و فونت در توسعه وب سایت های بزرگ به هر بخش کوچکی از صفحه وب ، پروسه ای زمانبر و پر هزینه بود

برای حل همین مشکل بود که کنسرسیوم جهانی وب (W3C) پروژه CSS را شروع کرد

در HTML 4 تمام بخش های مربوط به قالب بندی صفحه بایستی در یک فایل جداگانه CSS قرار بگیرند (در استایل خارجی)

خوشبختانه امروزه همه مرورگر ها حتی IE مخوف هم از CSS پشتیبانی خوبی به عمل می آورند

CSS در عمر شما صرفه جویی می کند !

همونطور که در بالا گفته شد ، قبل از CSS برای زیباتر کردن و رنگ و لعابی به صفحه وب دادن مجبور بودند از تگ های مثل font,b,i و … استفاده کنند و این کار رو باید برای تک تک عناصر سایت تکرار می کردند.حالا تا به اینجا هم اگر مشکل خاصی به نظر نیاید فرض کنید مشتری تصمیم می گرفت رنگ یک بخش از سایت را که در همه صفحات هم وجود دارد عوض کند . باید همه صفحات رو باز کنه و تغییر رو اعمال کنه .

ولی در صورت استفاده از CSS فقط کافیست یک خط کد را ادیت کنین تا تغییر اعمال شود. فکر می کنم به اندازه کافی در مورد لزوم استفاده از CSS توضیح دادیم . اگه موافق باشین شروع کنیم به یاد گرفتن CSS . بزن بریم …

ساختار CSS

یادگیری CSS یکی از مفرح ترین بخش های طراحی وب هست و همچنین یکی از آسون ترین ها بخش ها .

هر دستور CSS از یک انتخابگر (Selector) و تعدادی تعریف (Declaration) تشکیل شده است که با علامت ; از هم جدا می شوند(مثل شکل فوق)

انتخابگر در کل آن عنصری از صفحه وب را مشخص می کنه که می خواهیم به آن استایل بدهیم

هر تعریف نیز از یک مشخصه (property) و یک مقدار (Value) تشکیل شده است

مثال

هر تعریف CSS با سمی کولن ; به پایان می رسد و همه تعریف ها یکجا داخل کروشه {} قرار می گیرند

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

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

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

پیش نمایش

کامنت گذاری

کامنت ها برای گذاشتن توضیح در بین کدهای CSS بکار می روند و می توانند هنگام ویرایش کدها در آینده کمک کننده باشند.البته هر چیزی که بین توضیحات قرار دهید توسط مرورگر نادیده گرفته می شود . برای همین جهت غیرفعال کردن موقتی کدهای css هم می شود از کامنت استفاده کرد

کامنت با /* شروع می شود و با */ پایان می یابد.مثل این :

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

منبع