تبلیغات
آموزش - آموزش CSS (جلسه چهارم)
طراحی و توسعه وبسایت
آموزش CSS (جلسه چهارم)
چهارشنبه 6 دی 1396 ساعت 07:51 ب.ظ | نوشته ‌شده به دست رضا راد | ( نظرات )
آموزش CSS (جلسه چهارم)

نحو (سینتکس) 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;
}



برچسب‌ها: CSS , طراحی صفحات وب ,

می توانید دیدگاه خود را بنویسید
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر
نظرات پس از تایید نشان داده خواهند شد.
 
نویسندگان
نظر سنجی
از مطالب وبسایت لذت بردید ؟





امکانات ویژه
تبدیل عکس به آیکون
دیگر موارد
تعداد مطالب :
تعداد نویسندگان :
آخرین بروز رسانی :
بازدید امروز :
بازدید دیروز :
بازدید این ماه :
بازدید ماه قبل :
بازدید کل :
آخرین بازدید :