site-logo site-logo
CSS - درج (Inclusion)
نوشتن نظر کلیک کنید

CSS – نحوه استفاده (How To)

آخرین بروزرسانی: 

نحوه اضافه کردن CSS

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

سه روش برای وارد کردن CSS

سه روش برای وارد کردن یک فایل استایل وجود دارد:

  1. CSS خارجی (External CSS)
  2. CSS داخلی (Internal CSS)
  3. CSS داخلی (درون‌خطی) (Inline CSS)

CSS خارجی (External 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” به نظر می‌رسد:

body {
  background-color: lightblue;
}

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

توجه: بین مقدار خاصیت (مانند 20) و واحد (مانند px) فاصله نگذارید:

نادرست (با فاصله): margin-left: 20 px;

درست (بدون فاصله): margin-left: 20px;

CSS داخلی (Internal 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>

CSS داخلی (درون‌خطی) (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>

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

چندین فایل استایل

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

فرض کنید یک فایل استایل خارجی برای عنصر <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> به رنگ “سرمه‌ای” نمایش داده می‌شوند:

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

ترتیب استایل‌دهی (Cascading Order)

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

تمام استایل‌های موجود در صفحه به یک “استایل مجازی” ترکیب می‌شوند که با استفاده از قوانین زیر اعمال می‌شوند. عدد 1 دارای اولویت بالاتری است:

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

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

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

بیشتر بخوانید
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

بیشتر بخوانید
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.