راهنما

آموزش CSS | ترکیب CSS با HTML و JavaScript

نحوه اضافه کردن CSS به صفحه HTML

برای اعمال استایل‌های CSS به یک صفحه HTML، سه روش اصلی وجود دارد که در ادامه هرکدام را با مثال ساده توضیح می‌دهیم. از آنجایی که شما از ویرایشگر آنلاین استفاده می‌کنید، نیاز به نصب هیچ نرم‌افزاری ندارید و می‌توانید مستقیماً کدها را در بخش HTML ویرایشگر تایپ کنید.

1. روش درون‌خطی (Inline CSS):
در این روش، استایل را مستقیماً داخل تگ HTML و با استفاده از ویژگی style می‌نویسید. این روش فقط روی همان تگ خاص تأثیر می‌گذارد.

مثال:

<p style="color: blue; font-size: 18px;">این متن آبی رنگ و با اندازه 18 پیکسل است.</p>

2. روش داخلی (Internal CSS):
استایل‌ها را در بخش <head> صفحه HTML و داخل تگ <style> می‌نویسید. این روش برای استایل‌دهی به کل صفحه مفید است.

مثال:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>این متن سبز رنگ و با اندازه 20 پیکسل است.</p>
</body>
</html>

3. روش خارجی (External CSS):
فایل CSS را به صورت جداگانه ایجاد کرده و سپس با استفاده از تگ <link> در بخش <head> به صفحه HTML متصل می‌کنید. این روش بهترین گزینه برای پروژه‌های چندصفحه‌ای است.

مثال:
فرض کنید فایلی به نام style.css دارید که در آن نوشته شده است:

p {
  color: red;
  font-size: 22px;
}

سپس در فایل HTML خود، لینک زیر را درون <head> قرار می‌دهید:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p>این متن قرمز رنگ و با اندازه 22 پیکسل است.</p>
</body>
</html>

نکته مهم:
در ویرایشگر آنلاین شما، معمولاً سه بخش جداگانه برای HTML، CSS و JavaScript وجود دارد. بنابراین برای استفاده از روش خارجی، کافی است کدهای CSS را در بخش مخصوص CSS بنویسید (بدون نیاز به تگ <style>) و نیازی به لینک‌دادن نیست؛ ویرایشگر به طور خودکار آن را به HTML متصل می‌کند.

پرسش و پاسخ این درس

برای ثبت پرسش ابتدا در سایت وارد شوید.

آموزش CSS | ترکیب CSS با HTML و JavaScript

خطای دسترسی

نحوه اضافه کردن CSS به صفحه HTML