چگونه CSS را اضافه کنیم

15 دقیقه Article پیش‌نمایش

سه روش اضافه کردن CSS به HTML

CSS رو میشه به سه روش به صفحه HTML اضافه کرد. هر روش موقعیت و کاربرد خاص خودش رو داره.

۱. Inline CSS (درون‌خطی) - خط به خط

مستقیماً داخل تگ HTML با استفاده از attribute یعنی style:

عنوان قرمز
پاراگراف با پس‌زمینه زرد

معایب Inline:

▹اگه بخواید ۱۰۰ تا پاراگراف قرمز داشته باشید، باید ۱۰۰ بار تکرار کنید!
▹کد HTML شلوغ و غیرقابل نگهداری میشه
▹نمی‌تونید از قابلیت‌های پیشرفته CSS (مثل :hover) استفاده کنید

کی ازش استفاده کنیم؟ فقط برای تست‌های سریع یا ایمیل‌های HTML (که CSS خارجی پشتیبانی نمیشه).

۲. Internal CSS (داخلی) - توی همون صفحه

داخل تگ <style> که توی <head> قرار می‌گیره:


<html>
<head>
  
</head>
<body>
  عنوان من
  پاراگراف من
</body>
</html>

مزایا: تمام استایل‌های یک صفحه در یک جا! خوانایی بهتر از Inline.
معایب: اگه ۱۰ صفحه دارید، باید ۱۰ بار تکرار کنید. اگه بخواید رنگ اصلی سایت رو عوض کنید، باید ۱۰ فایل ویرایش کنید!

۳. External CSS (خارجی) - روش حرفه‌ای! ⭐

یک فایل جدا به نام style.css می‌سازید و داخل HTML لینکش می‌کنید:

فایل: style.css

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

h1 {
  color: #F1F5F9;
  text-align: center;
}

.button {
  background-color: #F1F5F9;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

فایل: index.html


<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  عنوان من
  <button class="button">کلیک کنید</button>
</body>
</html>

چرا External بهترینه؟

▹✅ یک فایل CSS برای ۱۰۰۰ صفحه HTML!
▹✅ تغییر یک خط، همه صفحات آپدیت میشن
▹✅ مرورگر فایل CSS رو کش می‌کنه → سایت سریع‌تر لود میشه
▹✅ کد تمیز و قابل نگهداری
▹✅ کار تیمی راحت‌تر (یکی روی HTML کار کنه، یکی روی CSS)

اولویت‌بندی: اگه سه تا با هم باشن چی؟

اگه برای یک المان هم Inline، هم Internal و هم External استایل نوشته بشه، کدوم اعمال میشه؟

اولویت (از بالاترین به پایین‌ترین):

▹Inline CSS (داخل تگ)
▹Internal/External (هر کدوم که آخرین باشه، برنده میشه)

مثال اولویت:

/* External: style.css */
p { color: blue; }

/* Internal: داخل <head> */


/* Inline */
متن من

نتیجه: متن قرمز میشه، چون Inline اولویت بالاتری داره!

🎯 تمرین: ساخت اولین صفحه با CSS خارجی

مرحله ۱: یک فایل HTML۳ به نام index.html بسازید با این محتوا:


<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>تمرین CSS</title>
  
</head>
<body>
  به سایت من خوش اومدید
  این اولین پاراگراف منه.
  این پاراگراف دوم.
</body>
</html>

مرحله ۲: یک فایل به نام style.css در همون پوشه بسازید:

body {
  background-color: #e0f7fa;
  font-family: Tahoma;
}

h1 {
  color: #F1F5F9;
  text-align: center;
}

p {
  color: #F1F5F9;
  line-height: 1.8;
}

مرحله ۳: فایل HTML رو با مرورگر باز کنید و نتیجه رو ببینید!

💡 راه حل: چطوری فایل CSS رو لینک کنیم؟

این خط رو داخل <head> اضافه کنید:

<link rel="stylesheet" href="style.css">

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید

ParsRepo