نوشتن نظر کلیک کنید

جلسه بعدی جلسه قبلی

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

آخرین بروزرسانی: ۲۰ اسفند ۱۴۰۲

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

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

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

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

CSS خارجی (External CSS)
CSS داخلی (Internal CSS)
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 دارای اولویت بالاتری است:

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

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

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

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

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

CSS خارجی (External CSS)

مثال

CSS داخلی (Internal CSS)

مثال

CSS داخلی (درون‌خطی) (Inline CSS)

مثال

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

مثال

مثال

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

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

نظرات

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

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

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

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

CSS خارجی (External CSS)

مثال

CSS داخلی (Internal CSS)

مثال

CSS داخلی (درون‌خطی) (Inline CSS)

مثال

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

مثال

مثال

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

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

JavaScript – رویدادها (Events)

JavaScript – سازنده‌های شیء (Object Constructors)

JavaScript – نمایش شیء (Object Display)

نظرات

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