قواعد CSS

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

به عنوان مثال، می توان قاعده ای تنظیم کرد که به مرورگر بگوید که تمام تگهای <p> چگونه تنظیم شوند و اولین خط آنها فرو رفته باشد، یا می توانید قاعده پاراگراف خود را ایجاد نمایید و آنرا برای یک پاراگراف بکار برید و نه برای تمام پارگرافها.

یک قاعده سه قسمت دارد:

انتخاب گر، ویژگی و مقدار.

انتخاب گر ID مشابه انتخاب گر کلاس است، اما برای شناسایی یک عنصر خاص در صفحه استفاده می شود. مثلا یک عنصر جعبه متنی در صفحه.

مثال زیر، نحوه استفاده انتخاب گر را نشان می دهد:

<style>

  {H1 {Color:Red

    {NewFont{Font-Size:16pt.

                            {NewTextboxColour{color:yellow#

<styel/>

در فرمت اول، H1 یک انتخاب گر html است. توجه کنید که علامتهای کوچکتری و بزرگتری از تگ حذف شده اند. با نوشتن یک انتخاب گر html، تمام تگهای html از آن نوع در صفحه به فرمتی که تنظیم کرده اید تغییر می یابند. بنابراین برای فرمت H1 که در بالا تنظیم شده است، تمام متنهایی که داخل تگ H1 نوشته شده اند، به رنگ قرمز تغییر خواهند کرد.

استایل دوم، NewFont. یک انتخاب گر کلاس است. دقت کنید که انتخاب گر کلاس با یک نقطه آغاز می شود. سپس نام کلاس نوشته می شود (هر عنوان که بخواهید). بین نقطه و عنوان کلاس و همچنین بین کلمات در عنوان کلاس فاصله ای وجود ندارد.

استایل سوم،NewTextboxColour#، یک انخاب گر ID است. انتخاب گر ID با یک علامت # آغاز می شود و سپس عنوانی دلخواه برای انتخاب گر ID نوشته می شود. هیچ فاصله ای بین علامت # و عنوان انتخاب گر وجود ندارد.

انتخاب گر:

سه نوع انتخاب گر CSS وجود دارد: انتخاب گر html، انتخاب گر کلاس و انتخاب گر ID.

یک انتخاب گر html، قسمت متن تگ html است. تگ کامل پاراگراف، <p> است. بنابراین انتخاب گر آن فقط p می باشد. به عبارت دیگر، با حذف علامتهای کوچکتری و بزرگتری از تگ، انتخاب گر html به دست می آید.

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

ویژگی و مقدار

بعد از تنظیم انتخاب گرها، برای آنها ویژگی و مقدار تعیین می کنیم.

ویژگی، چیزی است که می خواهید آنرا تغییر دهید. مانند فونت، رنگ، پشت زمینه، فاصله افقی و عمودی، متن و...

مقدار، تنظیمات جدید برای ویژگی انتخاب شده است. بعنوان مثال برای ویژگی رنگ، می توانیم از رنگهای واقعی مانند زرد، سبز، قرمز و یا از کد رنگها (#000000 و #FFF000) برای مقدار آنها استفاده نماییم.

ویژگی و مقدار آن داخل آکولاد قرار می گیرند. فرمت کلی به صورت زیر خواهد بود:

{selector {property:value

مثال:

{H1 {COLOR:RED

H1 یک انتخاب گر، Color یک ویژگی و Red مقدار ویژگی می باشد.

به علامت (:) بعد از عنوان ویژگی دقت کنید. این علامت برای جداسازی ویژگی از مقدار قرار می گیرد. بنابراین مرورگر تشخیص می دهد که در کدامیک ویژگی و کدامیک مقدار است. چنانچه قصد اضافه کردن ویژگی و مقدارهای بیشتری دارید، دو راه پیش رو دارید: تمام آنها در یک خط که هر جفت ویژگی و مقدار توسط یک سمی کولن (; ) جدا شده اند. یا می توانید هر جفت ویژگی-مقدار را در یک خط جدید قرار دهید که با (; ) از هم جدا شده اند.

مثال:

{;H1 {Color: Red; Font-weight: Bold; Font-Size: 16pt

نسخه چند خطی مشابه زیر است:

<STYLE>

H1

{

    Color:Red;

    Font-weight:Bold;

    Font-Size:16pt;

{

<STYLE/>

نسخه چند خطی، خوانایی بهتری دارد.

جمع بندی:

  • یک قاعده css سه بخش دارد: یک انتخاب گر، یک ویژگی و یک مقدار.
  • یک انتخاب گر می تواند انتخاب گر html، انتخاب گر کلاس و انتخاب گر ID باشد.
  • ویژگی و مقدار توسط یک جفت آکولاد از انتخاب گر متمایز می شوند.
  • یک ویژگی توسط دو نقطه (:) از مقدار جدا می شود.
  • اگر مایل به استفاده چندین ویژگی هستید، آنها را با سمی کولن (; ) از هم جدا نمایید.

در درس بعدی، یاد می گیرید که استایل ها را در کجا قرار دهید.