آموزش‌های گرامر پایه CSS

زبان نشانه‌نویسی CSS

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

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

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

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

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

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

این خط کد نقش دارد که رنگ متن عناصر 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 به حروف بزرگ و کوچک حساس هستند.