آموزش 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 یکی از مفرح ترین بخش های طراحی وب هست و همچنین یکی از آسون ترین ها بخش ها .

selector

هر دستور 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;
}