آموزش زبان CSS

همان طور که در بخش آموزش html گفته شد اگر طراحی سایت را به شکل ساخت یک ساختمان در نظر بگیریم در ابتدا ستون، سقف، دیوار و ... را می سازیم که تمام این موارد حکم html را در طراحی سایت دارد اما ساخت ساختمان فقط ستون، سقف و دیوار نیست! به عنوان مثل برای کامل شدن نیاز به کاشی کاری، سرامیک، گچ کاری، در، پنجره و ... دارد و تمام این موارد هست که یک ساختمان را کامل می کند پس اگر بدنه یک سایت را با html ساختیم برای کامل شدن و زیبایی آن به css نیاز داریم.

زبان CSS

زبان CSS (سی اس اس) به انگلیسی Cascading Style Sheets در دهه 90 قرن بیستم میلادی معرفی شد. قبل از معرفی زبان css سایت های اینترنتی، بسیار ساده طراحی می شدند و بعد از معرفی این زبان بود که تغییر بزرگی در طراحی سایت های اینترنتی به وجود آمد. با استفاده از css دست کاربر در طراحی بسیار باز است از طراحی منوهای مختلف گرفته تا تغییر رنگ، تنظیم فاصله ها، دکمه ها، فرم ها و ... همه این موارد با این زبان امکان پذیر هست.

نسخه های زبان CSS

از زمان معرفی این زبان، تاکنون نسخه های مختلفی از آن منتشر شده است.

CSS 1: اولین نسخه رسمی این زبان در سال 1996 میلادی معرفی شد. در این نسخه قابلیت تغییر رنگ متن، تغییر رنگ پس زمینه، هم تراز کردن متن، تنظیم فاصله متون و ... اضافه شد.

CSS 2: نسخه دوم این زبان در سال 1998 میلادی معرفی شد. در این نسخه قابلیت راست چین کردن، تغییر ترتیب عناصر، تنظیم موقعیت عناصر و ... اضافه شد. لازم به ذکر است جهت رفع باگ و مشکلات به وجود آمده، نسخه CSS 2.1 منتشر شد.

CSS 3: پرکاربردترین نسخه این زبان تا به امروز، در سال 1999 میلادی معرفی شد.

CSS 4 : در سال 2009 میلادی توسط W3C معرفی شد.

نمونه کد زبان CSS

برای مثال با استفاده از تگ پاراگراف در html یک متنی را می نویسیم و با زبان css فونت متن، رنگ متن و ... را تغییر می دهیم.

کد HTML:

<p>CodeUni.Ir</p>

کد CSS:

p {
  width: 300px;
  height: 100px;
  font: 12px tahoma;
  color: #333333;
  background: #f1f1f1;
  text-align: center;
}

همان طور که کد بالا را مشاهده می کنید ابتدا یک تگ p با مقدار CodeUni.Ir ساختیم.

در ادامه با استفاده از css تغییرات ظاهری مد نظر خود را ایجاد کردیم.

تغییرات ایجاد شده:

width: تنظیم عرض

height: تنظیم ارتفاع

font: تغییر نام، سایز و ... فونت متن

color: تغییر رنگ متن

background: تغییر رنگ یا عکس پس زمینه

text-align: تراز کردن متن

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

Selector (انتخابگر)

Declaration (اعلان)

اعلان یا Declaration شامل دو بخش است:

Property (ویژگی)

Value (مقدار)

Selector {
  Property: Value;
}

چه چیزی را می خواهیم تغییر دهیم؟

تگ p!

پس تگ p را به عنوان انتخابگر قرار می دهیم یعنی می خواهیم ظاهر این تگ تغییر کند.

بعد از انتخاب انتخابگر یک آکولاد باز و بسته {} ایجاد می کنیم.

کد:

p {

}

ویژگی های مدنظر را باید درون این آکولاد قرار داد.

به عنوان مثال می خواهیم عرض تگ p را برابر با 300 پیکسل قرار دهیم.

کد:

p {
  width: 300px;
}

در ادامه با آموزش های ما همراه باشید.