دستورات و کلمات کلیدی در CSS

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

مقدار قرار گرفته برای یک ویژگی در CSS می تواند یک کلمه یا یک لیست از کلمات باشد. کلمات این لیست با یک فاصله سفید از یکدیگر جدا می شوند. اگر ما از یک ویژگی یا مقدار نادرست در یک دستور CSS استفاده کنیم، تمام دستور نادیده گرفته خواهد شد. از این رو، دستورات زیر با شکست مواجه خواهند شد:

brain-size: 2cm; /* این ویژگی ناشناخته است */
color: ultraviolet; /* این مقدار ناشناخته است */

 فرض کنید که یک ویژگی در CSS داشته باشیم که مقدار آن، از چند کلمه تشکیل شده باشد؛ این کلمات معمولا با استفاده از فاصله های سفید از یکدیکر جدا می شوند؛ در برخی موارد نیز، با اسلش(/) یا کاما ازیکدیگر جدا می شوند. همه ی پروپرتی ها نمی توانند چند کلمه ی کلیدی را بپذیرند، اما بسیاری از آنها مانند ویژگی font می تواند چنین کاری انجام دهد.

فرض کنید که می خواهیم یک فونت Tahoma با سایز  متوسط(medium) را برای متن یک پاراگراف تعیین کنیم؛ درست مانند تصویر 2.3:

(تصویر 2.3)

دستور CSS ما به صورت زیر خواهد بود:

p {font: medium Tahoma;}

به فاصله ی سفید بین کلمات medium و Tahoma توجه کنید؛ به هریک از کلمات medium و Tahoma یک کلمه ی کلیدی گفته می شود. اولین کلمه، نشان دهنده ی سایز فونت است و دومین کلمه نام فونت را مشخص می کند. فاصله ی سفید به مرورگر امکان می دهد تا بین این دو کلمه ی کلیدی تمایز قائل شود و آنها را به درستی اعمال کند.  سمی کالن(;) نیز مشخص می کند که دستور ما به پایان رسیده است. به این دلیل به مقادیر مذکور کلمه ی کلیدی گفته می شود که، همه ی آنها با هم، یک مقدار را برای ویژگی font تشکیل می دهند. بعنوان مثال، دستور زیر را در نظر بگیرید:

rainbow: red orange yellow green blue indigo violet;

 هیچ ویژگی به نام rainbow وجود ندارد اما ما از این مثال، برای نشان دادن مقصود خود استفاده می کنیم. مقدار ویژگی rainbow برابر با red orange yellow green blue indigo violet است. این هفت کلمه ی کلیدی، یک مقدار واحد را برای ویژگی rainbow تشکیل می دهند. ما می توانیم این مقدار را برای ویژگی rainbow به صورت زیر باز-تعریف کنیم:

rainbow: infrared red orange yellow green blue indigo violet ultraviolet;

 اکنون ما یک مقدار جدید برای ویژگی rainbow داریم که به جای 7 کلمه، از 9 کلمه تشکیل شده است. با اینکه این دو مقدار کمی با دیگر مقادیر مشابه هستند، اما یکتا هستند، مانند 0 و 1 که یکتا هستند. این کار، ممکن است خیلی انتزاعی به نظر برسد، اما ضروری است که برخی از تاثیرات ظریف اختصاصی و روش آبشاری(cascade) را بیاموزید(بعدا در این کتاب در مورد روش آبشاری توضیحات بیشتری داده خواهد شد).

همان طور که مشاهده کردید، کلمات کلیدی CSS معمولا به وسیله ی فاصله ی سفید از یکدیگر جدا می شوند. در CSS2.1 یک استثنا وجود دارد: در ویژگی سی اس اس font، دقیقا یک مکان وجود دارد که می توانیم از یک اسلش(/) برای جدا کردن دو کلمه ی کلیدی استفاده کنیم. به مثال زیر توجه کنید:

h2 {font: large/150% sans-serif;}

در کد بالا، علامت اسلش، کلمات کلیدی که سایز فونت(font size) و ارتفاع خط(line height) را تشکیل می دهند، از یکدیگر جدا کرده است. تنها مکانی که استفاده از علامت اسلش برای نشان دادن دستور font مجاز است، همین جا است. تمام دیگر کلمات کلیدی مجاز برای font باید با استفاده از یک فاصله ی سفید از یکدیگر جدا شوند. از علامت اسلش در برخی مقادیر دیگر ویژگی ها نیز استفاده می شود. مانند ویژگی های زیر:

• background
• border-image
• border-radius
• grid
• grid-area
• grid-column
• grid-row
• grid-template
• mask-border

برخی از کلمات کلیدی نیز وجود دارند که به وسیله ی کاما از یکدیگر جدا می شوند. وقتی که می خواهیم چندین مقدار، مانند چندین تصویر پس زمینه(background image) یا چندین transition و سایه(shadows) تعریف کنیم،مقدار این دستورات با کاما از یکدگر جدا می شوند. همچنین پارامترهای درون تابع هایی مثل linear gradient با کاما از یکدیگر جدا می شوند، درست مانند مثال زیر:

.box {box-shadow: inset -1px -1px white,
                  3px 3px 3px rgba(0,0,0,0.2);
      background-image: url(myimage.png),
          linear-gradient(180deg, #FFF 0%, #000 100%);
      transform: translate(100px, 200px);
}
a:hover {transition: color, background-color 200ms ease-in 50ms;}

دستورات بالا، نمونه ای از دستورات پایه هستند، اما می توانند بسیار پیچیده تر شوند. در بخش بعدی به شما نشان می دهیم که CSS چقدر می تواند قدرتمند باشد.