ساختار کلی زبان CSS

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب ساختار کلی زبان CSS از سری آموزش های CSS در خدمت شما عزیزان هستیم.

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

در مطالب قبلی گفته شده که زبان CSS یک زبان سمت کاربر است و توسط اکثر مرورگرهای امروزی پشتیبانی می شود. همچنین در مورد نحوه فراخوانی داخلی و خارجی این زبان توضیح دادیم.

به طور خلاصه فراخوانی داخلی به این شکل است:

<style>
  /* CSS Code */
</style>

فراخوانی خارجی هم به این شکل است:

<link rel="stylesheet" href="style.css" />

یک فراخوانی دیگر هم وجود دارد به نام فراخوانی خطی inline که توسط صفت style در عناصر استفاده می شود:

<p style="font-size:15px;">txt</p>

ساختار دستورات زبان CSS

ساختار Rule یا دستورات این زبان، شامل دو بخش است:

• Selector
• Declaration

Selector {
  Declaration (Property: Value;)
}

برای نوشتن یک Rule ابتدا باید Selector یا انتخابگر را انتخاب کنید. منظور از Selector یا انتخابگر، یعنی به کدام یک از عناصر HTML اشاره دارید. یک Rule با آکولاد { } باز و بسته می شود و هر چه میان این دو آکولاد قرار گیرد Declaration نام دارد.

به عنوان مثال می خواهیم به تگ p دسترسی داشته باشیم:

p {

}

هر Declaration شامل دو بخش است:

• Property
• Value

به عنوان مثال می خواهیم اندازه فونت و رنگ متن تگ p را با استفاده از CSS تغییر دهیم.

کد HTML:

<p>txt</p>

کد CSS:

p {
  font-size: 15px;
  color: #303030;
}

در مثال بالا Selector یا انتخابگر، به تگ p اشاره می کند.

دارای دو Declaration است.

هر Declaration شامل دو بخش Property و Value می باشد.

در مثال فوق font-size و color از نوع Property و 15px و #303030 از نوع Value است.

نکته 1: بعد از نوشتن Property با استفاده از دو نقطه : مقدار یا Value را می توان مشخص کرد.

نکته 2: بعد از نوشتن مقدار با استفاده از ; (Semicolon) اعلان یا Declaration را ببندید.

Property: Value;

چند نکته در مورد ساختار زبان CSS

نکته 1: همیشه آخرین تغییر، ملاک مرورگر خواهد بود. یعنی اگر اندازه متن را در فایل css تنظیم کردید و سپس با استفاده از فراخوانی خطی یا inline دوباره اندازه متن را تغییر داده باشید. آخرین تغییر اجرا خواهد شد.

نکته 2: در صورت رعایت قوانین کلی زبان، دستورات css را می توان پشت سرهم نوشت.