آموزش قواعد دستوری CSS سی اس اس
در این قسمت قواعد دستوری CSS را مورد بحث قرار میدهیم. در کد نویسی فضا های خالی و خطوط اضافه برای درک بهتر و خوانایی بیشتر کدها به تعداد دلخواه هیچ مشکلی ندارد. CSS نسبت به حروف بزرگ و کوچک حساس نیست. البته در برخی موارد ، عوامل خارجی مثل نوع زبانی که از CSS استفاده می کند و یا سیستم عامل در این بین نقش دارند.
.
برای استانداردسازی کارتان همیشه دستورات را با حروف کوچک بنویسید. مثلا نام تگ ها در HTML به حروف بزرگ و کوچک حساس نیستند اما در XHTML این حساسیت وجود دارد. نام فونت ها هم به استثنای فونت های عمومی که برای CSS شناخته شده هستند ، در برخی سیستم عامل ها این حساسیت را دارند.
.
خوب میرویم طرف قواعد دستوری CSS برای نوشتن دستورات CSS می توانید از نرم افزار های مختلف استفاده کنید. نرم افزار های که معمولا استفاده می شود ++notepad یا Dreamweaver است.
توضیحات بیشتر در ادامه مطلب …
.
برای شروع به تصویر زیر دقت کنید:
.
.
در تصویر بالا:
خط اول کامنت (توضیحات) را نشان میدهد که شما قادر ید در هر قسمت از صفحه CSS برای آسانی کار و همچنان برای جلوگیری از سردرگمی از کامنت استفاده کنید. برای درج کردن کامنت (توضیحات) باید متن تان را بین علائم /* و */ قرار بدهید. البته شما نیز میتوانید توضیحات را به زبان فارسی درج کنید.
.
یادداشت: در صورت درج کردن کامنت فارسی باید در هنگام ثبت کردن سند Encoding آن را UTF- 8 را انتخاب نمایید. برای انجام این کار در برنامه ++notepad می توانید از منوی Encoding نوعیت کد آن را انتخاب نمایید.
.
خط دوم نشان دهنده یک قانون و یک دستور است که فایل بالا را به سند CSS ارتباط میدهد.
خط سوم دستوری است که مجموعه ای از قواعد را در برمیگیرد . در این دستور که مشاهده می کنید ما به صفحه که همان body محسوب میشود گفتیم تمامی رنگ فونت ها #… باشد و ضخامت فونت ها هم نرمال باشد.
.
همانطور که مشاهده می کنید ، برای نوشتن قواعد ابتدا نام Selector را می نویسیم سپس با علامت “{” بلاک را باز می کنیم و قواعد را نوشته می کنیم و سپس با علامت “}” بلاک را بسته می کنیم. قواعد در بلاک ها با کاراکتر “;” از هم جدا میشوند که برای قاعده آخر نیازی به این کاراکتر نیست چرا که قاعده ای بعد از آن نیست اما در صورت استفاده نیز کدام مشکلی ندارد. هر قاعده از یک نام و یک مقدار تشکیل میشود که با علامت “:” از هم تفکیک می شوند.
به تصویر زیر دقت کنید:
.
.
شکل زیر مطلب بالا را به شکل مفصل تر تشریح می کند:
.