CSS چیست ؟ آشنایی با مقدمات سی اس اس

به طور کلی تاکنون با زبان نشانه گذاری html آشنا شدید. اکنون با آموزش css در خدمت شما هستیم. همان طور که می‌دانید، در طراحی یک سایت، با استفاده از تگ های HTML اسکلت و چارچوب اصلی سایت را می‌سازیم و با استفاده از سی اس اس ظاهر سایت را طراحی می‌کنیم. در واقع html و css دو جزء جدا نشدنی از یک سایت هستند.

تاریخچه سی اس اس (CSS)

در ابتدا باید بدانیم که تاریخچه ی css به چه صورت است؟ به صورت خلاصه، زبان css برای اولین بار در سال 1994 توسط آقای Hokan vium lie ارائه شد. سپس با تلاش های بیشتر او و همکاری تیم برنز لی و همچنین برت باس، این زبان گسترش یافت. در طول زمان سطح‌های مختلفی از آن ارائه و منتشر شد. در نهایت در سال 1999 نسخه ی css3 منتشر شد و ما نیز از این نسخه استفاده می‌کنیم.

چرا باید CSS را یاد بگیریم ؟

اکنون سوال مهمی که وجود دارد این است که یادگیری زبان css چه ضرورتی دارد؟ بدن یک انسان را تصور کنید. همان طور که بدن انسان از دو قسمت استخوان بندی و ظاهر تشکیل شده است، یک سایت هم از دو قسمت ساختار و ظاهر تشکیل شده است. چارچوب و اسکلت سایت را با کمک html و ظاهر آن را با css طراحی می‌کنیم. پس css برای زیبا کردن ظاهر سایت به کار می‌رود. در طراحی همه سایت‌ها از این دو زبان استفاده شده است. از جمله کاربردهای css می توانیم به تغییر سایز و رنگ متون، تغییر پس زمینه، و تغییر دادن فاصله المان‌ها از یکدیگر و جابه جایی آن‌ها و… اشاره کنیم.

حال می خواهیم بدانیم css به چه معناست؟ css مخفف عبارت casecading style sheets است و به معنای مجموعه صفحات آبشاری است. اما مفهوم آبشاری بودن یعنی چه؟

مفهوم آبشاری بودن در CSS – قوانین آبشاری CSS

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

کد ها و دستورات سی اس اس چگونه به سند html اضافه می شوند؟

برای این کار 3 حالت کلی وجود دارد:

• inline
• internal
• external

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

ساختار کلی css به چه صورت است؟

Selector{ property: value;

Property: value;

.

.

.

}

سلکتور به معنای انتخابگر هست که انواع مختلفی دارد و در جلسه ی آینده با آن آشنا می‌شوید.