نحو (سینتکس) CSS

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

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

برای اینکه بتوانیم به زبان 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;
}

 

بریم بازی

بیشتر بخوانید

مطالب مرتبط

3 دیدگاه برای “نحو (سینتکس) CSS”

    1. سلام، در بحث های طراحی سایت قسمت کلاینت در حالت عمومی اگر بخوایم جواب بدیم:

      به ویژگی هایی که به عنصر HTML داده میشه میگیم Attribute 

      
<input class="" type="" placeholder="" width="" data-model="" />

      در اینجا class، type، placeholder، width و data-model همه attributeهای عنصر input هستند.

      و به ویژگی هایی که در یک اعلان قرار میگیرند در سی اس اس Property گفته میشه:

      
input {
  display: inline-block;
  height: 100px;
  width: 100px;
  background-image: url();
}

      اینجا موارد display، height، width، background-image رو Property میگیم.

      پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

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