در آموزش css3 در بحث قبلی به معرفی css3 پرداختیم؛ اما در اینجا یکسری قواعد دستوری آن را مورد بررسی قرار می دهیم که در ادامه مطرح شده است.

قواعد دستوری CSS

در این قسمت قواعد دستوری css را مورد بحث قرار می دهیم. در کد نویسی فضاهای خالی و خطوط اضافه برای درک بهتر و خوانایی بیشتر کدها به تعداد دلخواه هیچ مشکلی ندارد.

css نسبت به حروف بزرگ و کوچک حساس نیست. البته در برخی موارد، عوامل خارجی مثل نوع زبانی که از css استفاده می کند و یا سیستم عامل در این بین نقش دارند. برای استانداردسازی کارتان همیشه دستورات را با حروف کوچک بنویسید. مثلا نام تگ ها در html به حروف بزرگ و کوچک حساس نیستند اما در xhtml این حساسیت وجود دارد، نام فونت ها هم به استثنای فونت های عمومی که برای css شناخته شده هستند، در برخی سیستم عامل ها این حساسیت را دارند.

خوب می رویم طرف قواعد دستوری css، برای نوشتن دستورات css می توانید از نرم افزارهای مختلف استفاده کنید. نرم افزار هایی که معمولا استفاده می شود notepad++ یا dream weaver است. برای شروع به تصویر زیر دقت کنید:

در تصویر بالا:

خط اول کامنت (توضیحات) را نشان می دهد که شما قادرید در هر قسمت از صفحه css برای آسانی کار و همچنان برای جلوگیری از سردرگمی از کامنت استفاده کنید. برای درج کردن کامنت (توضیحات) باید متن تان را بین علامت /* و */ قرار بدهید. البته شما نیز می توانید توضیحات را به زبان فارسی درج کنید.

یادداشت: در صورت درج کردن کامنت فارسی باید در هنگام ثبت کردن سند encoding آن UTF-8 را انتخاب نمایید. برای انجام این کار در برنامه notepad++ می توانید از منوی encoding نوعیت کد را انتخاب کنید.

خط دوم نشان دهنده یک قانون و یک دستور است که فایل بالا را به سند css ارتباط می دهد.

خط سوم دستوری است که مجموعه ای از قواعد را در برمی گیرد. در این دستور که مشاهده می کنید ما به صفحه ای که همان body محسوب می شود گفتیم تمامی رنگ فونت ها #۰۰۰ باشد و ضخامت فونت ها هم نرمال باشد.

همانطور که مشاهده می کنید، برای نوشتن قواعد ابتدا نام selector را می نویسیم، سپس با علامت ” { ” بلاک را باز می کنیم و قواعد را می نویسیم و سپس با علامت ” } ” بلاک را می بندیم. قواعد در بلاک ها با کاراکتر ” ; ” از هم جدا می شوند که برای قاعده آخر نیازی به این کاراکتر نیست چرا که قاعده ای بعد از آن نیست، اما در صورت استفاده هر کدام مشکلی ندارد. هر قاعده از یک نام و یک مقدار تشکیل می شود که با علامت ” : ” از هم تفکیک می شوند.

به تصویر زیر دقت کنید:

در مطلب بعدی به مبحث واحد های اندازه گیری در css3 خواهیم پرداخت. با ما همراه باشید.