آشنایی با CSS و کاربرد آن در طراحی وب

مقدمه : همانطور که در مطلب قبلی در مورد آشنایی با HTML ذکر کردیم می خواهیم با مفهوم صفحه آرایی اجزای صفحه یا به اصطلاح زبان CSS آشنا شویم و از مبانی اولیه آن شروع کنیم تا به خواص و مقادیر مهم آن بپردازیم. با سری آموزش های آشنایی با css همراه ما باشید.

آشنایی با CSS

قبل اینکه بخواهیم Css  رو تعریف کنیم ، باید راجع به صفحات وب توضیح بدهیم ، یه صفحه وب شامل متن ، صوت ، تصویر و … هست. برای اینکه اجزای وب کنارهم قرار بگیرند از html استفاده می کنیم ، با استفاده از عناصر و تگ های HTML می تونیم متون ، تصاویر ، ویدئوها ، صوت ها و … رو کنار هم قرار بدیم و برای کاربرای سایت نمایش بدهیم.

از وقتی که سبک کدنویسی تغییر و پیشرفت کرد، کاربرد  Css در طراحی وب یک امر عادی بشمار اومد. با استفاده از Div ها و Css می تونید به راحتی و بسیار سبک قالب وبلاگ شخصی خود را لایه بندی و طرح بندی کنید و اجزای صفحه ی وب رو بصورت کاملا زیبا استایل بندی کنید. حالا میریم سر اصل مطلب یعنی Css اصلا چی هست؟!

تعریف و مفهوم CSS

Css مخفف Cascading Style Sheets است که در معنای لغوی به روشی گفته می شود که برای قالب بندی و طراحی اجزای صفحه وبسایت کارایی دارد. شما می توانید بدون استفاده از کدهای HTML از طریق این استایل شیت ها (Style Sheet) می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کند شدن سرعت بارگزاری صفحه در اینترنت می شود جلوگیری کنیم.

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

در نسخه های مختلفی به بازار وب عرضه شد که در جلسه ی بعدی کاملا درباره نسخه های css صحبت می کنیم. فایل استایلها با فرمت css. ذخیره میشوند. سی اس اس از یک سری کد تشکیل شده که با استفاده از این کدها می تونید به راحتی به عناصر و کدهای HTML شمایل بدهید، به عنوان مثال می توانید تعریف کنید که سرتیتر خبر با فونت ضخیم آبی رنگ از خانواده  Tahoma نمایش داده بشه که این تعریف رو به صورت زیر مینویسید:

h1 {

font-family: Tahoma;

font-style: bold;

color: blue;

}

مزایای استفاده از CSS

طراحی ظاهر صفحات بدون استفاده از دستورات HTML

جلوگیری از تکرار دستورات

سرعت بارگذاری بیشتر برای صفحات

استفاده از فایل CSS خارجی جهت تغییر ظاهر هر تعداد صفحه ای که مایل هستیم.

طریقه نوشتن کدهای CSS

برای نوشتن دستورات CSS باید با مفاهیم زیر آشنا شویم :

  Selector

 Property

 Value

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

h1 {
color:blue;
}

این دستور بیانگر این موضوع است که تمام متونی که با تگ h1 نوشته می شود به رنگ آبی باشند. در اینن دستور h1 همان اشاره کننده یا Selector است، عبارت color همان خصوصیت یا Property می باشد و در نهایت Blue نیز مقدار یا Value می باشد.

دلیل استفاده و کاربرد CSS

در اینجا با اشاره به یک موضوع کلی ، دلیل استفاده از CSS را بیان می کنیم :

همانطور که می دانید صفحات HTML ، از عناصر مختلفی مثل پاراگراف ، جداول ، عنوان ها و … غیره تشکیل شده اند . امروزه صفحات وب از حالت ساده و یکنواخت خارج شده و طراحان سعی می کنند تا با استفاده از جلوه های تصویری مثل استفاده از رنگ های مختلف ، حالت های نمایش گوناگون و … به جذابیت و زیبایی صفحات بیافزایند.

فرض کنید که ما در صفحات یک وب سایت ، یکسری عنوان ها ، پارگراف ها و جداول داریم که این عناصر در بیشتر صفحات تکرار شده و دارای ویژگی های یکسانی هستند.

به طور مثال برخی از عنوان ها رنگ سبز داشته ، یا بعضی از پاراگراف ها دارای نوع و اندازه خاصی از Font هستند و یا جداول دارای پس زمینه رنگی هستند . در اینجا ۲ راه حل جهت تعیین خواص برای این عناصر وجود دارد :

۱- در درون هر صفحه ، خواص مشترک را در تمام صفحات و در درون تگ های مورد نظر به صورت تکی تعیین کنیم ، که این مسئله چند اشکال دارد :

• باعث تکرار شدن خواص مشترک عناصر در تمام صفحات و تگ های مورد نظر می شود.
• حجم کد نویسی بالا رفته و احتمال خطا افزایش می یابد.
• سرعت طراحی صفحات بسیار کاهش می یابد.
• اعمال تغییرات به عناصر بسیار وقت گیر بوده و کار زیادی را می طلبد.

۲- ما ابتدا عناصر با خواص مشابه را بر حسب id و class آنها ، در گروه های یکسان قرار می دهیم.

سپس در یک فایل Style بیرونی و یا در تگ Style در بخش Head صفحه ، خواص و ویژگی های مشترک را در یکجا برای همه آن گروه ها تعریف کرده و سپس هر یک از عناصر را به گروه مورد نظر ارتباط می دهیم.

برای آشنایی با روش دسته بندی و ارتباط عناصر در CSS ، به بخش آموزش تگ < style > در HTML بروید.

انجام روش دوم ، اشکالات روش اول را برطرف کرده و باعث می شود تا :

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

در این آموزش در مورد آشنایی با CSS مطالبی را آموختیم و سعی خواهیم کرد در مطالب بعدی گام به گام به آموزش های بعدی این موضوع بپردازیم.