جلسه 24 ام آموزش CSS : دستورات @ در سی اس اس

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

در این جلسه ، شما را با چهار دستور @ به شرح زیر آشنا می کنیم .

@import : شما با استفاده از این دستور ، فایل های css دیگری را درون فایل css فعلی وارد می کنید .
@charset : شما با استفاده از این دستور ، کاراکتر ست فایل css را تنظیم می کنید.
@font-face : شما با استفاده از این دستور ، برای صفحه html ، فونت تنظیم می کنید .
!important : شما با استفاده از این دستور ، مشخص می کنید که دستوری خاص بر سایر دستورات فایل css ، مقدم شود .

توجه : دستورات @ دیگری نیز وجود دارد که در جلسات بعدی ، به شما آموزش داده می شود .

دستور @import

شما با استفاده از دستور @import می توانید فایل های استایل دهی دیگر را ، درون فایل css فعلی ، وارد کنید . شما باید این دستور را در اول فایل css فعلی ، قبل از اینکه هر دستور css دیگری را بنویسید ، استفاده کنید . شما برای مقدار دهی به این دستور باید یک آدرس url را بنویسید .

این دستور به یکی از دو روش زیر نوشته می شود .

<style tyle="text/css">
   <!--
   @import "mystyle.css";
   or
   @import url("mystyle.css");
   .......other CSS rules .....
   -->
</style>

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

دستور @charset

اگر شما برای نوشتن کدهای css خود ، به هر دلیلی ، از کاراکتر ستی غیر از ASCII یا ISO-8859-1 استفاده می کنید ، بهتر است که از دستور @charset استفاده کرده و برای فایل css خود ، کاراکتر ست تعریف کنید . لازم به ذکر است که شما باید این دستور را در ابتدای فایل css خود و به عنوان اولین دستور ، مورد استفاده قرار دهید . برای مقدار دهی به این دستور باید یکی از کاراکتر ست های استاندارد را وارد کنید . به مثال زیر توجه کنید :

<style tyle="text/css">
   <!--
   @charset "iso-8859-1"
   .......other CSS rules .....
   -->
</style>

استفاده از دستور @font-face

شما از دستور @font-face ، استفاده می کنید تا ویژگی های فونت را برای صفحه وب ، تنظیم کنید . شما با استفاده از دستور @font-face ، همچنین می توانید یک فونت را برای دانلود قرار دهید ، البته این کار به لحاض مسائل اجرایی ، دارای محدودیت هایی می باشد .

به این نکته توجه داشته باشید که به صورت کلی ، دستور @font-face ، دستوری پیچیده است و استفاده از آن فقط برای کسانی که با جوانب مختلف فونت ها آشنایی دارند ، پیشنهاد می شود .

حالا به مثال زیر توجه کنید :

<style tyle="text/css">
   <!--
   @font-face {
      font-family: "Scarborough Light";
      src: url("http://www.font.site/s/scarbo-lt");
   }
   @font-face {
      font-family: Santiago;
      src: local ("Santiago"),
      url("http://www.font.site/s/santiago.tt")
      format("truetype");
      unicode-range: U+??,U+100-220;
      font-size: all;
      font-family: sans-serif;
   }
   -->
</style>

استفاده از دستور !important

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

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

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

<style tyle="text/css">
   <!--
   p { color: #ff0000; }
   p { color: #000000; }
   -->
</style>

مثال 2 : حالا اگر شما بخواهید اطمینان حاصل کنید که رنگ پاراگراف همیشه قرمز بماند ، شما باید دستور !important را به کد اضافه کنید . پس اگر بخواهید که رنگ پاراگراف همواره قرمز بماند ، باید به صورت زیر عمل کنید .

<html>
   <head>
   
      <style tyle="text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>
      
   </head>
   <body>
      <p>Tutorialspoint.com</>
   </body>
</html>

حالا نتیجه کدهای بالا را مشاهده کنید .

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

جلسه 24 ام آموزش CSS : دستورات @ در سی اس اس

دستور @import

دستور @charset

استفاده از دستور @font-face

استفاده از دستور !important

آیا نیاز به مدرک هم دارید؟