هر زبانی نحو یا سینتکس مربوط به خود را دارد. ویکی پدیا نحو را به صورت زیر تعریف می کند:

نحو یا جمله‌شناسی به دانش مطالعهٔ قواعد مربوط به نحوهٔ ترکیب و در کنار هم آمدن واژه‌ها به‌منظور ایجاد و درک جملات در یک زبان اطلاق می‌شود.

برای اینکه بتوانیم به زبان CSS صحبت کنیم باید اجزا مختلف آن و نحوه ترکیب آن اجزا را باهم بشناسیم.

ادامه مطلب

 

دستور سی اس اس زیر را در نظر بگیرید:

 

body {
  background-color: green;
}

 

تصویر زیر قسمت های مختلف این دستور را نشان می دهد:

 

 

 

به کل تکه کد بالا Ruleset یا یک دستور CSS گفته می شود. هر دستور دارای یک Selector یا انتخابگر است که کار آن انتخاب عنصر HTML برای استایل دهی می باشد.

هر بلاک کد در CSS با یک } شروع می شود و با یک { بسته می شود. در بین این دو علامت Declaration یا اعلان های CSS قرار می گیرند. به عنوان مثال در زیر دو اعلان نوشته شده است:

 

color: black;
font-weight: bold;

 

و هر اعلان دارای دو قسمت است قسمت اول Property یا ویژگی و قسمت دوم مقدار یا ارزش یا همان Value می باشند. این دو قسمت بوسیله علامت : باید از هم جدا شوند و هر اعلان باید با ; تمام شود.

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

ناگفته نماند که میتوان در یک دستور CSS از چند انتخابگر هم استفاده کرد به عنوان نمونه در مثال زیر سه انتخابگر دیده می شوند که توسط ویرگول از هم جدا شده اند:

 

header section,
.nav,
footer {
  border-bottom: 1px solid khaki;
}

 

 

سینتکس توضیحات

نکته دیگری که باید در مورد سینتکس زبان CSS بدانیم نحوه نوشتن توضیحات یا Comment در کد است.

برای نوشتن توضیحات در CSS کافی است توضیحات را با علامت */ شروع و با علامت /* به پایان برسانیم. در این صورت هر آنچه که بین این دو علامت نوشته شود توسط مرورگر پردازش نشده و نادیده گرفته می شود.

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

 

/* توضیح در سی اس اس */

body {
  color: red;
}

/*
   توضیحات...
   چند....
   خطی.....
 */

p {
  padding-right: 1em;
}

/*------------------------------------*\
  توضیح خوشگل برای مشخص کردن قسمت های مختلف کد مثلا :)
\*------------------------------------*/

div {
  width: 33%;
}

/**
 * توضیح شیک و مجلسی
 */

header {
  height: 300px;
}