تعریف قوانین CSS3

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

فرمت قانون CSS3 به شکل زیر است:

selector {declaration; declaration; …}

در تعریف قانون، پنج راه برای تعریف انتخابگر وجود دارد:

»»نوع عنصر: این قانون برای تمام عناصر از نوع مشخص شده اعمال می شود.

»» ویژگی id: این قانون برای عنصر خاصی با مقدار id مشخص شده اعمال می شود.

»» خصیصه کلاس: این قانون برای همه عناصر با مشخصه اعمال می شود ارزش کلاس

»» شبه عنصر: این قاعده برای بخش خاصی از یک عنصر اعمال می شود.

»»شبه کلاس: این قاعده برای عناصر در یک حالت خاص اعمال می شود.

هر اعلان یک ویژگی سبک CSS3 و مقدار مربوط به آن را تعریف می کند. هر ملک یک سبک خاص (مانند یک رنگ یا یک فونت) را برای عنصری که قانون اعمال می کند ، تنظیم می کند.

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

در اینجا فرمت دارایی و ارزش آن همانطور که آنها را در اعلامیه فهرست می کنید آمده است:

property: value

در قسمت های بعدی، پنج روش برای تعریف انتخابگر را با جزئیات بیشتری توضیح می دهم.

نوع عنصر

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

h1 {color: red;}

این قانون تضمین می کند که مرورگر تمام عناصر h1 را در صفحه وب با استفاده از نمایش می دهد یک رنگ فونت قرمز اگر می‌خواهید سبک‌های یکسانی را برای چندین نوع عنصر اعمال کنید، می‌توانید یکی از این دو را انجام دهید :

آنها را به عنوان قوانین جداگانه فهرست کنید یا با جداسازی عناصر را در انتخابگر گروه بندی کنید نام عناصر با کاما، مانند زیر:

h1, p {color: red;}

این قانون به مرورگر دستور می دهد تا به تمام عناصر h1 و p با استفاده از رنگ فونت قرمز استایل دهد.

 ویژگی id

اگر نیاز به تعریف قانونی دارید که فقط برای یک عنصر در صفحه وب اعمال شود، از ویژگی id به عنوان انتخابگر استفاده کنید. برای تعیین یک ویژگی id به عنوان انتخابگر، محل را قرار دهید یک علامت پوند (#) در مقابل نام شناسه:

#warning {color: red;}

برای استفاده از قانون در کد HTML5 خود، فقط مقدار ویژگی id را به عنصر اعمال کنید شما باید استایل کنید:

<h1 id=”warning”>This is a bad selection.</h1>

مرورگر این قانون را در عنصر خاصی که از ویژگی id استفاده می کند اعمال می کند.

ویژگی کلاس

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

.warning {color: red;}

سپس فقط آن ویژگی کلاس را به هر عنصری که نیاز دارید با استفاده از آن قانون استایل دهید اعمال کنید:

<h1 class=”warning”>This is a bad selection.</h1>

<p class=”warning”>Please make another selection.</p>

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

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

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

p.warning {color: red;}

این قانون فقط برای عناصر p با مقدار مشخصه کلاس هشدار اعمال می شود.