فصل دوم: شیوه‌های درج CSS در HTML (روش‌های اضافه کردن CSS)

اموزش رایگان CSS

در این فصل با ۳ روش اصلی اضافه کردن CSS به صفحات HTML آشنا می‌شیم:

۱. استفاده از ویژگی style (درون‌خطی — Inline CSS)

در این روش، استایل مستقیماً به تگ HTML داده می‌شود.

<p style="color: blue; font-size: 20px;">این یک پاراگراف با رنگ آبی است.</p>
  • ساده است، اما فقط برای همان المان به کار می‌رود.
  • نگهداری برای پروژه‌های بزرگ سخت است.

۲. استفاده از تگ <style> در بخش <head> (درون سند — Internal CSS)

می‌تونید استایل را در بخش head صفحه قرار بدید تا روی چند المان اثر بگذاره.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>این یک پاراگراف سبز است.</p>
</body>
</html>
  • مناسب برای زمانی که فقط همین یک صفحه قرار است استایل خاص داشته باشد.

۳. استفاده از فایل CSS خارجی (External CSS)

فایل CSS را جداگانه ساخته و به فایل HTML لینک می‌کنیم.

index.html:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>این یک پاراگراف است که استایلش از فایل خارجی آمده.</p>
</body>
</html>

styles.css:

p {
  color: red;
  font-size: 22px;
}
  • حرفه‌ای‌ترین روش، مخصوصاً برای پروژه‌های بزرگ و چندصفحه‌ای.

تمرین فصل دو:

یک فایل HTML ساده بسازید و هر سه روش استفاده از CSS را امتحان کنید. ببینید کدام روش برای کدام موقعیت بهتر است و نتیجه را مقایسه کنید.

نکات سریع:

  • برای پروژه‌های کوچک Inline و Internal جواب می‌دهند.
  • برای پروژه‌های جدی و بزرگ حتماً CSS را به صورت External جدا کنید تا نگهداری‌اش ساده‌تر شود.

محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *