آشنایی با دستورات زبان CSS


CSS دستورات ساده ای دارد و از تعدادی کلمات کلیدی انگلیسی برای تعیین نام ویژگی های مختلف استایل استفاده می کند. یک صفحه استایل شامل لیستی از قوانین است. هر قانون یا مجموعه قوانین از یک یا چند انتخابگر و یک بلوک اعلان تشکیل شده است. هدف از این مقاله آشنایی اولیه شما عزیزان با دستورات زبان css می باشد. در زیر یک مثال کلی از بخش های اصلی ساختار نحوی (Syntax) این زبان را میبینید.

انتخاب گر (Selector)

در CSS ، انتخاب کنندگان با تطبیق برچسب ها و مشخصه ها در نشانه گذاری خود، مشخص می کنند که این قانون بر روی کدام قسمت از نشانه گذاری استایل اعمال می شود. یکی از اجزای دستورات زبان css ، انتخاب گر ها می باشند.

انتخاب کنندگان ممکن است به موارد زیر اعمال شوند:

  • همه عناصری که از یک نوع خاص هستند، به عنوان مثال هدرهای سطح دوم h2
  • عناصر مشخص شده توسط ویژگی ، به ویژه:
    • id: یک شناسه منحصر به فرد در سند ، مشخص شده با پیشوند # به عنوان مثال id#
    • class: شناسه ای که می تواند چندین عنصر را در یک سند حاشیه نویسی کند ، مشخص شده با پیشوند دوره مثلاً classname.
  • عناصر بستگی به نحوه قرارگیری آنها نسبت به سایرین در درخت سند دارد.

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

سینتکس دستورات css

بلوک اعلان (Declaration block)

بلوک اعلان، جز دیگری از دستورات زبان css است. شامل یک یا چند اعلان است که با علامت های نقطه ویرگول از هم جدا شده اند.

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

ویژگی ها در استاندارد CSS تعریف شده است. هر ویژگی شامل مجموعه ای از مقادیر ممکن می باشد. برخی از ویژگی ها می توانند بر روی هر نوع عنصری تأثیر بگذارند و برخی دیگر فقط در گروه خاصی از عناصر اعمال می شوند.

p {
  color: red;
  text-align: center;
}

توضیح مثال:

  • p یک انتخابگر در CSS است (این نشان دهنده عنصر HTML است که می خواهید استایل دهید: <p>).
  • color یک ویژگی است و red مقدار ویژگی است.
  • text-align یک ویژگی است ، و center مقدار این ویژگی است.

نحوه استفاده از css

قبل از روی کار آمدن CSS ، تقریباً همه ویژگیهای اسناد HTML در نشانه گذاری HTML موجود بود. تمام رنگ های قلم ، سبک های پس زمینه ، ترازبندی عناصر ، حاشیه ها و اندازه ها باید به طور صریح ، اغلب به طور مکرر ، در HTML توصیف میشدند. CSS به نویسندگان اجازه میدهد تا تعداد زیادی از اطلاعات را به فایل دیگری (صفحه استایل) منتقل کنند. در نتیجه HTML بسیار ساده تر میشود.

به عنوان مثال ، عناوین (عناصر h1) ، عناوین فرعی (h2) ، عناوین فرعی (h3) و غیره ، با استفاده از HTML به صورت ساختاری تعریف می شوند. در چاپ و روی صفحه ، انتخاب قلم ، اندازه ، رنگ و تأکید برای این عناصر نمایشی است.

آموزش نحوه استفاده با چند مثال ساده

قبل ازروی کار آمدن CSS ، نویسندگان اسنادی که می خواستند چنین ویژگی های تایپوگرافی را به عنوان مثال، به همه عناوین h2 اختصاص دهند، باید نشانه گذاری نمایش HTML را برای هر نوع آن عنوان تکرار میکردند. این امر اسناد را پیچیده تر ، بزرگتر و دارای خطاهای بیشتر و نگهداری از آنها دشوار میکرد. CSS امکان تفکیک ظاهر از ساختار را فراهم می کند. دستورات زبان CSS می توانند رنگ، قلم، ترازبندی متن، اندازه، حاشیه ها، فاصله، طرح و بسیاری دیگر از ویژگی های تایپوگرافی را تعریف کنند. همچنین میتوانند این کار را به صورت مستقل برای نماهای روی صفحه و چاپ انجام دهند. CSS همچنین سبک های غیر بصری مانند سرعت خواندن و تأکید را برای خوانندگان متن شنیداری تعریف می کند. W3C اکنون استفاده از همه نشانه گذاری HTML ارائه شده را منسوخ کرده است.

به عنوان مثال ، در HTML پیش از CSS ، یک عنصر عنوان با متن قرمز تعریف می شود:

<h1><font color="red">Chapter 1.</font></h1>

با استفاده از CSS، همان عنصر را میتوان با استفاده از ویژگی های استایل به جای ویژگی های نمایشی HTML کد گذاری کرد:

<h1 style="color: red;">Chapter 1.</h1>

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

<style>
    h1 {
        color: red;
    }
</style>

سپس تمام عناصر h1 در سند بدون نیاز به کد صریح به طور خودکار قرمز می شوند. اگر بعداً نویسنده می خواست عناصر h1 را آبی کند ، این کار با تغییر عنصر استایل به:

<style>
    h1 {
        color: blue;
    }
</style>

به جای اینکه با سختی لا به لای کدها گشته و رنگ را برای هر عنصر h1 تغییر دهید.

همانطور که در زیر توضیح داده شده است ، استایل ها را می توان در یک فایل CSS خارجی قرار داد و با استفاده از ساختار نحوی مشابه بارگذاری کرد:

<link href="path/to/file.css" rel="stylesheet" type="text/css">

این بیشتر باعث می شود که یک ظاهر طراحی شده از سند HTML جدا شود و امکان ویرایش مجدد چندین اسناد با ویرایش ساده یک فایل مشترک CSS خارجی فراهم می شود.

با آلفا سایبر همراه باشید تا همیشه به روز بمانید.

0.00 avg. rating (0% score) - 0 votes
0 نظرات

بدون نظر