اساسی‌ترین گرامر CSS

CSS 语法

قوانین CSS از دو بخش اصلی تشکیل شده‌اند: انتخاب‌کننده و یک یا چند بیانیه.

انتخاب‌کننده {declaration1; declaration2; ... declarationN }

انتخاب‌کننده معمولاً عناصر HTML است که می‌خواهید استایل تغییر دهید.

هر بیانیه از یک ویژگی و مقدار تشکیل شده است.

ویژگی (ویژگی) چیزی است که می‌خواهید از آن استایل تنظیم کنید. هر ویژگی یک مقدار دارد. ویژگی و مقدار با نقطه و کاما از یکدیگر جدا می‌شوند.

انتخاب‌کننده {ویژگی: مقدار}

این خط کد نقش دارد که رنگ نوشتار عناصر h1 را قرمز تعریف کند و اندازه فونت را 14 پیکسل تنظیم کند.

در این مثال، h1 انتخاب‌کننده است، color و font-size ویژگی‌ها هستند و red و 14px مقادیر هستند.

h1 {color:red; font-size:14px;}

این نمودار تصویری شما را از ساختار کد بالا آگاه می‌کند:

CSS 语法

توجه:بیانیه‌ها را با قید‌ها احاطه کنید.

روش‌های مختلف نوشتن مقادیر و واحدها

علاوه بر کلمه انگلیسی red، می‌توانیم از مقادیر رنگی شانزده‌ساعتی #ff0000 استفاده کنیم:

p { color: #ff0000; }

برای صرفه‌جویی در بایت‌ها، می‌توانیم از فرمول کوتاه‌تر CSS استفاده کنیم:

p { color: #f00; }

ما می‌توانیم از دو روش برای استفاده از مقادیر RGB استفاده کنیم:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

لطفاً توجه داشته باشید که هنگام استفاده از RGB درصدی، حتی اگر مقدار 0 باشد، باید از نماد درصد استفاده کنید. اما در موارد دیگر این کار لازم نیست. به عنوان مثال، وقتی اندازه 0 پیکسل باشد، پس از 0 نیازی به استفاده از واحد px نیست، زیرا 0 همیشه 0 است، چه واحدی باشد.

به یاد داشته باشید که باید از قید‌ها استفاده کنید

توجه:اگر مقدار چند کلمه‌ای باشد، باید مقدار را در قید‌ها قرار دهید:

p {font-family: "sans serif";}

بیانیه‌های چندگانه:

توجه:اگر بخواهید بیش از یک بیانیه تعریف کنید، باید هر بیانیه را با نقطه و کاما از دیگری جدا کنید. مثال زیر روشی را نشان می‌دهد که چگونه می‌توان یک پاراگراف میانی قرمز تعریف کرد. آخرین قانون این است که نیازی به استفاده از نقطه و کاما نیست، زیرا نقطه و کاما در زبان انگلیسی یک نماد جداکننده است، نه نماد پایان. اما، بیشتر طراحان با تجربه معمولاً از نقطه و کاما در پایان هر بیانیه استفاده می‌کنند، زیرا این کار می‌تواند از اشتباهات هنگام اضافه یا حذف بیانیه‌ها جلوگیری کند. مثل این:

p {text-align:center}; color:red;}

باید هر خط تنها یک ویژگی را توضیح دهد، این کار باعث افزایش خوانایی تعریف استایل می‌شود، مانند این:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

فضاهای خالی و حروف بزرگ/کوچک

بیشتر استایل‌ها شامل چندین قانون هستند و بیشتر قوانین شامل چندین اعلام هستند. استفاده از چندین اعلام و فضاهای خالی باعث می‌شود استایل‌ها راحت‌تر ویرایش شوند:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

حضور یا عدم حضور فضاهای خالی تأثیری بر عملکرد CSS در مرورگر ندارد، همچنین، برخلاف XHTML، CSS نسبت به حروف بزرگ و کوچک حساس نیست. اما یک استثنا وجود دارد: اگر در حال کار با مستند HTML باشد، نام‌های class و id نسبت به حروف بزرگ و کوچک حساس هستند.