آموزش قوانین @ در CSS

saber

4 سال پیش

امتیاز دهید post

آموزش قوانین @ در CSS

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش قوانین @ در CSS خواهیم پرداخت.

این فصل قوانین مهم @ زیر را پوشش می دهد –

قانون import@: شیوه نامه دیگری را به شیت استایل فعلی وارد می کند.
قانون charset@: نشان دهنده کاراکتری است که شیت استایل از آن استفاده می کند.
قانون font-face@: برای توصیف جامع صورت فونت برای استفاده در یک سند استفاده می شود.
قانون important! حاکی از آن است که یک قانون تعریف شده توسط کاربر باید بر سبك های نویسنده اولویت داشته باشد.

توجه – قوانین @ دیگری وجود دارد که در درس های بعدی به آنها خواهیم پرداخت.

قانون import@

قانون import@ به شما امکان می دهد سبک ها را از یک شیوه نامه دیگر وارد کنید. این باید در ابتدای شیت استایل قبل از هر یک از قوانین ظاهر شود و مقدار آن یک URL است.

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

&lt;style type = "text/css"&gt;
   &lt;!--
      @import "mystyle.css";
      or
      @import url("mystyle.css");
      .......other CSS rules .....
   --&gt;
&lt;/style&gt;

<!--

@import "mystyle.css";

@import url("mystyle.css");

.......other CSS rules .....

-->

</style>

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

قانون charset@

اگر سند خود را با استفاده از مجموعه کاراکترهایی غیر از ASCII یا ISO-8859-1 می نویسید ، ممکن است بخواهید قانون charset@ را در بالای شیت استایل خود تنظیم کنید تا مشخص کند که این صفحه سبک در چه کاراکترهایی نوشته شده است.

قانون charset@ باید درست در ابتدای شیت استایل و حتی بدون فاصله قبل از آن نوشته شود. این مقدار به صورت نقل قول نگهداری می شود و باید یکی از مجموعه های استاندارد نویسه باشد. به عنوان مثال –

&lt;style type = "text/css"&gt;
   &lt;!--
      @charset "iso-8859-1"
      .......other CSS rules .....
   --&gt;
&lt;/style&gt;

<!--

@charset "iso-8859-1"

.......other CSS rules .....

-->

</style>

قانون font-face@

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

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

در اینجا یک مثال آورده شده است –

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

<!--

@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!

قانون important! راهی برای ایجاد آبشار CSS شما فراهم می کند. این همچنین شامل قوانینی است که همیشه باید اعمال شوند. یک قانون با داشتن یک ویژگی مهم همیشه اعمال خواهد شد ، مهم نیست که این قانون کجا در سند CSS نشان داده شده است.

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

&lt;style type = "text/css"&gt;
   &lt;!--
      p { color: #ff0000; }
      p { color: #000000; }
   --&gt;
&lt;/style&gt;

<!--

p { color: #ff0000; }

p { color: #000000; }

-->

</style>

بنابراین، اگر می خواستید مطمئن شوید که یک ویژگی همیشه اعمال می شود ، ویژگی important را به تگ اضافه می کنید. بنابراین ، برای اینکه متن پاراگراف همیشه قرمز باشد ، باید آن را به صورت زیر بنویسید –

&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         p { color: #ff0000 !important; }
         p { color: #000000; }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;Tutorialspoint.com&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

p { color: #ff0000 !important; }

p { color: #000000; }

</style>

</head>

<body>

<p>Tutorialspoint.com</p>

</body>

</html>

در اینجا { color: #ff0000 !important; } را اجباری کرده ایم، اکنون این قانون همیشه اعمال می شود حتی شما قانون دیگری را تعریف کرده اید p {color: # 000000؛ }

این نتیجه زیر را ایجاد می کند –

Tutorialspoint.com

1	Tutorialspoint.com

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش قوانین @ در CSS

آموزش قوانین @ در CSS

قانون import@

قانون charset@

قانون font-face@

قانون important!

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش قوانین @ در CSS

قانون import@

قانون charset@

قانون font-face@

قانون important!

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه