٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش نحوه افزودن CSS

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

محمد یوسفی

6 جولای 2021

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


سه روش برای درج CSS

سه روش برای قرار دادن یک صفحه سبک وجود دارد:

  • CSS خارجی
  • CSS داخلی
  • Inline CSS

CSS خارجی

با استفاده از یک شیوه نامه خارجی ، فقط با تغییر یک پرونده می توانید ظاهر یک وب سایت را تغییر دهید!

هر صفحه HTML باید حاوی ارجاع به پرونده سبک خارجی در داخل عنصر <link> ، در داخل بخش head باشد.

مثال

سبک های خارجی در داخل عنصر <link> در داخل بخش <head> صفحه HTML تعریف می شوند:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

یک شیوه نامه خارجی می تواند در هر ویرایشگر متنی نوشته شود ، و باید با پسوند css ذخیره شود.

پرونده خارجی .css نباید حاوی برچسب های HTML باشد.

در اینجا نحوه به نظر رسیدن پرونده “mystyle.css” وجود دارد:

“mystyle.css”

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

توجه: فاصله ای بین مقدار خاصیت و واحد اضافه نکنید (مانند margin-left: 20 px;). روش صحیح این است:margin-left: 20px;


CSS داخلی

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

سبک داخلی در داخل عنصر <style> ، در داخل بخش head تعریف شده است.

مثال

سبک های داخلی در داخل عنصر <style> ، در داخل بخش <head> صفحه HTML تعریف می شوند:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Inline CSS

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

برای استفاده از سبک های درون خطی ، ویژگی style را به عنصر مربوطه اضافه کنید. ویژگی style می تواند شامل هر خاصیت CSS باشد.

مثال

سبک های درون خطی در ویژگی “style” از عنصر مربوطه تعریف می شوند:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

نکته: یک سبک داخلی بسیاری از مزایای یک صفحه سبک را از دست می دهد (با مخلوط کردن محتوا با ارائه). از این روش کم استفاده کنید.


ورق های چند سبک

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

فرض کنید که یک سبک سبک خارجی برای عنصر <h1> سبک زیر را داشته باشد:

h1 {
  color: navy;
}

سپس ، فرض کنید که یک صفحه سبک داخلی دارای سبک زیر برای عنصر <h1> باشد:

h1 {
  color: orange;   
}

مثال

اگر سبک داخلی پس از پیوند به صفحه سبک خارجی تعریف شود ، عناصر <h1> “نارنجی” خواهند بود:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

مثال

با این حال ، اگر سبک داخلی قبل از پیوند به صفحه سبک خارجی تعریف شده باشد ، عناصر <h1> “navy” خواهند بود:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

دستور آبشار

وقتی بیش از یک سبک برای یک عنصر HTML مشخص شده باشد ، از چه سبکی استفاده می شود؟

با توجه به قوانین زیر ، که در آن شماره یک دارای بالاترین اولویت است ، تمام سبک های یک صفحه به یک صفحه سبک جدید “مجازی” تبدیل می شوند:

  1. سبک درون خطی (درون یک عنصر HTML)
  2. ورق های سبک خارجی و داخلی (در بخش سر)
  3. مرورگر به طور پیش فرض

بنابراین ، یک سبک داخلی دارای بالاترین اولویت است و سبک های خارجی و داخلی و پیش فرض های مرورگر را نادیده می گیرد.

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها