گام دوم در طراحی سایت(زبان CSS چیست؟)

زبان برنامه نویسی CSS مخفف Cascading Style Sheets می باشد و معنای لغوی آن قالب بندی و طراحی اجزای صفحه وبسایت می باشد. همانطور که از نام آن پیداست این زبان جهت تغییرات شکل ظاهری صفحات وبسایت استفاده می شود. زبان برنامه نویسی CSS بسیار ساده و در عین حال بسیار پرکاربرد می باشد. از آن می توان به جای استفاده از کدهای تکراری در HTML و یا همچنین از کدهای پیچیده جاوا اسکریپت استفاده کرد. زبان CSS از یک سری کد تشکیل شده که با استفاده از آنها می توان شکل ظاهری کدهای HTML را تغییر داد.

 

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

 

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

قسمت های تشکیل دهنده یک کد CSS :

من یک بلاک متن هستم، روی دکمه ویرایش کلیک کنید تا این متن را تغییر دهید. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

 

۱ـ قسمت Selector :

در این قسمت تگی از HTML که قرار است بر روی آن تغییرات اعمال شود نوشته می شود.

 

۲ـ قسمت Declaration :

دراین قسمت کلیه تغییرات نوشته می شود که البته خود آن به دو دسته Property و Value تقسیم می شود.

 

۳ـ قسمت Property :

دراین قسمت چیزی که قرار است تغییر کند نوشته می شود برای مثال در تصویر بالا رنگ و اندازه فونت قرار است تغییر کند.

 

۴ـ قسمت Value :

تغییری که قرار است اعمال شود دراین قسمت نوشته می شود برای مثال در تصویر بالا آبی و ۱۲px تغییرات اعمال شده می باشند.

سه روش برای اعمال کدهای CSS وجود دارد :

 

۱ـ CSS خارجی :

یعنی کدهای css خود را در یک صفحه با فرمت css. ذخیره کرده و در قسمت header صفحه html به آن لینک دهیم.این روش بهترین راه برای اضافه کردن کدهای CSS به صفحات وب سایت ما می باشند.

 

۲ـ CSS داخلی :

یعنی کدهای خود را در داخل تگ style صفحه HTML بنویسیم.

 

۳ـ سبک درون خطی:

همه تگ های زبان html دارای attribute هستندکه با استفاده از خصوصتی به نام style می توانید برای هر تگ استایل بنویسید، که کار اشتباهی است و بهتر است از آن استفاده نکنید.

نحوه فراخانی فایل CSS در فایل HTML :

برای فراخوانی فایل css در فایل html باید در داخل تگ head، تگ style را قرار بدهید که محتویات این تگ باید به صورت زیر باشد.

<link rel=”stylesheet” type=”text/css” href=”url”>

 

*در آینده به طور اختصاصی درباره کدهای CSS به صورت تصویری آموزش خواهیم داد.
پس با ما همراه باشید.
شما علاقه مندان می توانید از طریق کانال تلگرام آترا از مطالب جدید سایت به راحتی با خبر شوید و همچنین آموزش ها و اخبار تکنولوژی را دنبال کنید.
مطالب مرتبط :
آشنایی با سایت و اجزای آن
همه چیز درباره سئو و بهینه سازی سایت
گام اول در طراحی سایت(زبان HTML چیست؟)
پرکاربردترین تگ ها در زبان HTML
نظر شما در رابطه با این مقاله چیست؟ نظرات خود را با ما به اشتراک بگذارید.

 

روز و روزگارتون خوش.

دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *