آموزش جامع HTML, CSS و JavaScript
آموزش HTML
تگهای پایه HTML
🔰 تگهای ساختاری
<html>– ریشه سند<head>– اطلاعات سند<body>– محتوای صفحه<div>– بخشبندی<span>– بخش درون خطی
📝 تگهای متنی
<h1> تا <h6>– عنوانها<p>– پاراگراف<strong>– پررنگ<em>– تاکیدی<a>– لینک
🖼️ تگهای رسانه
<img>– تصویر<video>– ویدئو<audio>– صدا<iframe>– قاب تعبیه
📊 تگهای جدول و لیست
<table>– جدول<ul> & <ol>– لیست<li>– آیتم لیست<form>– فرم
مثال HTML
<html lang=“fa” dir=“rtl”>
<head>
<title>صفحه نمونه</title>
</head>
<body>
<h1>عنوان اصلی</h1>
<p>این یک پاراگراف است.</p>
<a href=“#”>لینک نمونه</a>
</body>
</html>
تمرین ۱: صفحه معرفی
یک صفحه HTML ساده طراحی کنید که شامل موارد زیر باشد:
- ✅ یک عنوان اصلی با تگ
<h1> - ✅ یک پاراگراف معرفی خود با تگ
<p> - ✅ یک تصویر با تگ
<img> - ✅ یک لینک به شبکه اجتماعی خود
- ✅ یک لیست از مهارتهایتان
تمرین ۲: جدول برنامه هفتگی
یک جدول HTML برای برنامه هفتگی خود ایجاد کنید:
- ✅ جدول با تگ
<table> - ✅ سطر هدر با
<th>برای روزهای هفته - ✅ حداقل ۳ سطر برای فعالیتها
- ✅ استفاده از
borderبرای حاشیه - ✅ اضافه کردن رنگ پسزمینه به هدر
پاسخ تمرین ۱: صفحه معرفی مدرس کامپیوتر
👩 مریم منفرد – مدرس و توسعهدهنده فرانتاند
کد HTML صفحه معرفی مریم منفرد
<!– ===== صفحه معرفی مریم منفرد – مدرس کامپیوتر ===== –>
<!– تمرین HTML درس ۱: ایجاد صفحه معرفی شخصی –>
<div style=“max-width: 900px; margin: 0 auto; background: linear-gradient(135deg, #f8f0ff 0%, #ffe9f4 100%); padding: 35px; border-radius: 25px; box-shadow: 0 20px 40px rgba(255, 107, 149, 0.2); border: 3px solid #ff6b95;”>
<!– عنوان اصلی با نام و تخصص –>
توضیح کدهای این قسمت
<h1 style=“color: #d44a6e; font-size: 42px; text-align: center; border-bottom: 4px solid #ff9aa2; padding-bottom: 18px; margin-top: 0; font-weight: 700; text-shadow: 2px 2px 4px rgba(255, 107, 149, 0.2);”>
👩🏫 سلام! من مریم منفرد هستم
</h1>
<!– تصویر پروفایل با افکتهای زیبا –>
<div style=“text-align: center; margin-bottom: 35px;”>
<img src=“https://randomuser.me/api/portraits/women/44.jpg”
alt=“تصویر پروفایل مریم منفرد”
style=“width: 180px; height: 180px; border-radius: 50%; border: 6px solid #ff9aa2; box-shadow: 0 10px 25px rgba(255, 107, 149, 0.4); object-fit: cover; transition: transform 0.3s ease;”
onmouseover=“this.style.transform=’scale(1.05)'”
onmouseout=“this.style.transform=’scale(1)'”>
</div>
<!– پاراگراف معرفی با استایل ویژه –>
<div style=“background: linear-gradient(to right, #fff6f9, #fff0f5); padding: 25px; border-radius: 18px; border-right: 8px solid #ff6b95; margin-bottom: 30px; box-shadow: 0 8px 20px rgba(255, 107, 149, 0.15);”>
<p style=“font-size: 22px; line-height: 1.9; color: #4a4a4a; margin: 0; font-weight: 500;”>
من مریم منفرد هستم، مدرس کامپیوتر و علاقهمند به برنامهنویسی وب.
از سال ۱۳۹۸ وارد دنیای برنامهنویسی شدم و الان به صورت تخصصی روی
توسعه فرانتاند کار میکنم. عاشق تکنولوژیهای جدید هستم و
از آموزش برنامهنویسی به دیگران لذت میبرم! ✨
</p>
</div>
<!– شبکههای اجتماعی با دو لینک –>
<div style=“display: flex; justify-content: center; gap: 20px; margin: 35px 0;”>
<a href=“https://github.com/maryammonfared”
target=“_blank”
style=“background: #24292e; color: white; padding: 14px 32px; text-decoration: none; border-radius: 40px; font-size: 20px; display: inline-flex; align-items: center; gap: 10px; border: 2px solid white; box-shadow: 0 8px 15px rgba(0,0,0,0.2); transition: all 0.3s;”
onmouseover=“this.style.transform=’translateY(-3px)’; this.style.boxShadow=’0 12px 20px rgba(0,0,0,0.3)’;”
onmouseout=“this.style.transform=’translateY(0)’; this.style.boxShadow=’0 8px 15px rgba(0,0,0,0.2)’;”>
🐙 گیتهاب من
</a>
<a href=“https://linkedin.com/in/maryammonfared”
target=“_blank”
style=“background: #0077b5; color: white; padding: 14px 32px; text-decoration: none; border-radius: 40px; font-size: 20px; display: inline-flex; align-items: center; gap: 10px; border: 2px solid white; box-shadow: 0 8px 15px rgba(0,0,0,0.2); transition: all 0.3s;”
onmouseover=“this.style.transform=’translateY(-3px)’; this.style.boxShadow=’0 12px 20px rgba(0,0,0,0.3)’;”
onmouseout=“this.style.transform=’translateY(0)’; this.style.boxShadow=’0 8px 15px rgba(0,0,0,0.2)’;”>
💼 لینکدین من
</a>
</div>
<!– عنوان مهارتها –>
<h2 style=“color: #d44a6e; font-size: 30px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px;”>
🔧⚡ مهارتهای تخصصی من
</h2>
<!– لیست مهارتها با طراحی کارتی و رنگهای جذاب –>
<ul style=“display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0; list-style: none;”>
<li style=“background: linear-gradient(145deg, #ff6b95, #ff8da1); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(255,107,149,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
🟠 HTML5 & CSS3
</li>
<li style=“background: linear-gradient(145deg, #ffb347, #ffa07a); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(255,179,71,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
🟡 JavaScript (ES6+)
</li>
<li style=“background: linear-gradient(145deg, #6c5ce7, #a29bfe); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(108,92,231,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
🟣 React.js
</li>
<li style=“background: linear-gradient(145deg, #00b894, #55efc4); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(0,184,148,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
🟢 Vue.js
</li>
<li style=“background: linear-gradient(145deg, #e17055, #fab1a0); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(225,112,85,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
🟠 Python
</li>
<li style=“background: linear-gradient(145deg, #0984e3, #74b9ff); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(9,132,227,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
🔵 Git & GitHub
</li>
<li style=“background: linear-gradient(145deg, #e84342, #ff7675); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(232,67,66,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
🔴 Responsive Design
</li>
<li style=“background: linear-gradient(145deg, #f39c12, #f1c40f); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(243,156,18,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
🟡 Tailwind CSS
</li>
<li style=“background: linear-gradient(145deg, #8e44ad, #9b59b6); color: white; padding: 15px; border-radius: 12px; text-align: center; font-size: 20px; font-weight: 600; box-shadow: 0 8px 15px rgba(142,68,173,0.3); border: 2px solid white; display: flex; align-items: center; justify-content: center; gap: 8px;”>
🟣 Figma
</li>
</ul>
<!– نقل قول انگیزشی –>
<div style=“background: #fff0e7; padding: 20px; border-radius: 15px; margin: 35px 0 20px; border: 2px dashed #ff9aa2; text-align: center;”>
<p style=“font-size: 22px; color: #b84a62; font-style: italic; margin: 0;”>
“یادگیری برنامهنویسی، یادگیری هنر حل مسئله است!” 💫
</p>
</div>
<!– footer –>
<hr style=“border: 2px solid #ffc0cb; margin: 30px 0 20px; border-radius: 5px;”>
<p style=“text-align: center; color: #b84a62; font-size: 20px; font-weight: 500; margin-bottom: 0;”>
✨ طراحی شده با 💖 توسط مریم منفرد – مدرس کامپیوتر و توسعهدهنده فرانتاند ✨
</p>
</div>
خروجی زنده صفحه معرفی مریم منفرد
👩🏫 سلام! من مریم منفرد هستم
من مریم منفرد هستم، مدرس کامپیوتر و علاقهمند به برنامهنویسی وب.
از سال ۱۳۹۸ وارد دنیای برنامهنویسی شدم و الان به صورت تخصصی روی
توسعه فرانتاند کار میکنم. عاشق تکنولوژیهای جدید هستم و
از آموزش برنامهنویسی به دیگران لذت میبرم! ✨
پاسخ تمرین ۱: صفحه معرفی شخصی
کد HTML صفحه معرفی
<!– ===== صفحه معرفی شخصی ===== –>
<div style=“max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);”>
<!– عنوان اصلی –>
<h1 style=“color: #2c3e50; font-size: 36px; text-align: center; border-bottom: 3px solid #3498db; padding-bottom: 15px;”>
👋 سلام! من مریم منفرد هستم
</h1>
<!– تصویر پروفایل –>
<div style=“text-align: center; margin-bottom: 30px;”>
<img src=“https://randomuser.me/api/portraits/men/32.jpg”
alt=“تصویر پروفایل”
style=“width: 150px; height: 150px; border-radius: 50%; border: 5px solid #3498db; box-shadow: 0 5px 15px rgba(0,0,0,0.2);”>
</div>
<!– پاراگراف معرفی –>
<p style=“font-size: 18px; line-height: 1.8; color: #34495e; background: #f8f9fa; padding: 20px; border-radius: 10px; border-right: 5px solid #3498db;”>
من مریم منفرد هستم، مدرس کامپیوتر و علاقهمند به برنامهنویسی وب.
از سال ۱۳۹۸ وارد دنیای برنامهنویسی شدم و الان به صورت تخصصی روی
توسعه فرانتاند کار میکنم. عاشق تکنولوژیهای جدید هستم!
</p>
<!– لینک شبکه اجتماعی –>
<div style=“text-align: center; margin: 30px 0;”>
<a href=“https://github.com/aliahmadi”
target=“_blank”
style=“background: #24292e; color: white; padding: 12px 30px; text-decoration: none; border-radius: 25px; font-size: 18px; display: inline-block; border: 2px solid white; box-shadow: 0 5px 10px rgba(0,0,0,0.2);”>
🐱 پروفایل گیتهاب من
</a>
</div>
<!– لیست مهارتها –>
<h2 style=“color: #2c3e50; font-size: 24px; margin-bottom: 15px;”>🔧 مهارتهای من</h2>
<ul style=“display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 0; list-style: none;”>
<li style=“background: #3498db; color: white; padding: 12px; border-radius: 8px; text-align: center; font-size: 18px; box-shadow: 0 3px 6px rgba(52,152,219,0.3);”>
✅ HTML5 & CSS3
</li>
<li style=“background: #f39c12; color: white; padding: 12px; border-radius: 8px; text-align: center; font-size: 18px; box-shadow: 0 3px 6px rgba(243,156,18,0.3);”>
✅ JavaScript (ES6+)
</li>
<li style=“background: #27ae60; color: white; padding: 12px; border-radius: 8px; text-align: center; font-size: 18px; box-shadow: 0 3px 6px rgba(39,174,96,0.3);”>
✅ React.js
</li>
<li style=“background: #9b59b6; color: white; padding: 12px; border-radius: 8px; text-align: center; font-size: 18px; box-shadow: 0 3px 6px rgba(155,89,182,0.3);”>
✅ Python
</li>
<li style=“background: #e74c3c; color: white; padding: 12px; border-radius: 8px; text-align: center; font-size: 18px; box-shadow: 0 3px 6px rgba(231,76,60,0.3);”>
✅ Git & GitHub
</li>
<li style=“background: #1abc9c; color: white; padding: 12px; border-radius: 8px; text-align: center; font-size: 18px; box-shadow: 0 3px 6px rgba(26,188,156,0.3);”>
✅ Responsive Design
</li>
</ul>
<!– footer –>
<hr style=“border: 1px dashed #bdc3c7; margin: 30px 0 20px;”>
<p style=“text-align: center; color: #7f8c8d; font-size: 16px;”>
✨ ساخته شده با ❤️ توسط مریم منفرد – ۱۴۰۵ ✨
</p>
</div>
خروجی زنده صفحه معرفی
👋 سلام! من مریم منفرد هستم
من مریم منفرد هستم، مدرس کامپیوتر و علاقهمند به برنامهنویسی وب.
از سال ۱۳۹۸ وارد دنیای برنامهنویسی شدم و الان به صورت تخصصی روی
توسعه فرانتاند کار میکنم. عاشق تکنولوژیهای جدید هستم!
🔧 مهارتهای من
- ✅ HTML5 & CSS3
- ✅ JavaScript (ES6+)
- ✅ React.js
- ✅ Python
- ✅ Git & GitHub
- ✅ Responsive Design
✨ ساخته شده با ❤️ توسط مریم منفرد – ۱۴۰۵ ✨
نکات آموزشی این تمرین:
- ✅ استفاده از تگ
<h1>برای عنوان اصلی - ✅ استفاده از تگ
<p>برای پاراگراف معرفی - ✅ استفاده از تگ
<img>با ویژگیهای src و alt - ✅ استفاده از تگ
<a>با target=”_blank” برای باز شدن در تب جدید - ✅ استفاده از تگهای
<ul>و<li>برای لیست مهارتها - ✅ استفاده از استایلهای CSS برای زیباسازی (border-radius, box-shadow, gradient)
آموزش CSS
مفاهیم پایه CSS
🔵 کلاس (Class)
برای گروهبندی عناصر استفاده میشود:
background: blue;
}
🆔 آیدی (ID)
برای عناصر منحصر به فرد:
color: red;
}
🎯 سلکتور تگ
استایل دادن به همه تگها:
font-size: 16px;
}
📦 باکس مدل
پدینگ، حاشیه، مارجین:
padding: 20px;
margin: 10px;
}
مثال کامل CSS
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}#main-title {
color: #333;
text-align: center;
font-size: 32px;
}
تمرین ۳: طراحی کارت
یک کارت پروفایل با CSS طراحی کنید:
- ✅ یک
<div>با کلاس.profile-card - ✅ اضافه کردن border-radius برای گوشههای گرد
- ✅ استفاده از box-shadow برای سایه
- ✅ تنظیم padding و margin مناسب
- ✅ تغییر رنگ پسزمینه با گرادیانت
تمرین ۴: استایلدهی با آیدی
یک بخش خبرنامه با آیدی استایل دهید:
- ✅ یک
<div>با آیدی#newsletter - ✅ تنظیم رنگ پسزمینه آبی روشن
- ✅ استایلدهی به دکمه ارسال
- ✅ استفاده از border برای حاشیه
- ✅ اضافه کردن icon با Font Awesome
آموزش JavaScript
مفاهیم پایه JavaScript
🔄 متغیرها
const age = 25;
var isActive = true;
🎯 توابع
alert(“سلام!”);
}
🖱️ رویدادها
console.log(‘کلیک شد’);
});
🔍 DOM
document.querySelector(‘.box’);
مثال تعاملی JavaScript
<script>
document.getElementById(‘demo-btn’).onclick = function() {
alert(‘سلام! شما روی دکمه کلیک کردید’);
};
</script>
تمرین ۵: ماشین حساب ساده
یک ماشین حساب جمع دو عدد با JavaScript بسازید:
- ✅ دو فیلد ورودی با
<input> - ✅ دکمه محاسبه با رویداد کلیک
- ✅ دریافت مقادیر با
document.getElementById - ✅ نمایش نتیجه در یک
<div> - ✅ تبدیل رشته به عدد با
parseInt()
تمرین ۶: حالت تاریک/روشن
یک دکمه برای تغییر تم صفحه ایجاد کنید:
- ✅ دکمه “تغییر تم” با رویداد کلیک
- ✅ استفاده از
classList.toggle() - ✅ تعریف کلاس
.dark-modeدر CSS - ✅ تغییر رنگ پسزمینه و متن
- ✅ استفاده از شرط if برای تشخیص حالت فعلی
پروژه نهایی: ساخت اپلیکیشن Todo List
همه مفاهیم HTML، CSS و JavaScript را در این پروژه ترکیب کنید:
📋 بخش HTML
- ✅ یک
<input>برای وظیفه جدید - ✅ دکمه “افزودن” با آیدی
#add-btn - ✅ یک
<ul>با آیدی#task-list - ✅ هر آیتم لیست شامل متن و دکمه حذف
🎨 بخش CSS
- ✅ استایلدهی به لیست با کلاس
.task-item - ✅ دکمه حذف با رنگ قرمز
- ✅ هاور افکت برای آیتمها
- ✅ طرحبندی با flexbox
⚡ بخش JavaScript
- ✅ رویداد کلیک برای دکمه افزودن
- ✅ ایجاد عناصر جدید با
createElement() - ✅ اضافه کردن به لیست با
appendChild() - ✅ حذف آیتمها با
remove() - ✅ جلوگیری از افزودن وظیفه خالی
<div class=“todo-container”>
<h1>لیست وظایف</h1>
<div class=“input-group”>
<input type=“text” id=“task-input” placeholder=“وظیفه جدید…”>
<button id=“add-btn”>➕ افزودن</button>
</div>
<ul id=“task-list”></ul>
</div>
نکات طلایی برای تمرینات
🔰 HTML
تمام تمرینات را ابتدا در HTML پیادهسازی کنید و سپس CSS و JS را اضافه کنید.
🎨 CSS
از کلاسها برای استایلدهی گروهی و از آیدیها برای عناصر یکتا استفاده کنید.
⚡ JavaScript
تمرینات را گام به گام انجام دهید و هر بار کنسول مرورگر را بررسی کنید.
✨ تمام تمرینات را در ویرایشگر وردپرس با بلاک “Custom HTML” امتحان کنید! ✨
جزوه آموزش HTML برای وردپرس
یادگیری HTML برای سفارشیسازی وردپرس
مقدمه
HTML (زبان نشانهگذاری فرا متنی) پایه و اساس همه صفحات وب است. برای سفارشیسازی وردپرس، HTML ضروری است. در این جلسه با اصول HTML را برای استفاده در وردپرس آشنای میشوید
وردپرس از HTML برای ساختار صفحات استفاده میکند. وقتی یک پست یا صفحه ایجاد میکنید، محتوای شما به HTML تبدیل میشود.
ساختار پایه HTML
هر سند HTML دارای یک ساختار پایه است که شامل تگهای اصلی میباشد:
<!DOCTYPE html>
<html lang=“fa” dir=“rtl”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>عنوان صفحه</title>
</head>
<body>
<!– محتوای صفحه اینجا قرار میگیرد –>
</body>
</html>
تگهای مهم HTML
در وردپرس، این تگها بیشترین استفاده را دارند:
<h1>عنوان اصلی</h1>
<h2>عنوان فرعی</h2>
<p>این یک پاراگراف است.</p>
<strong>متن پررنگ</strong>
<em>متن تاکیدی</em>
<a href=“https://example.com”>لینک</a><!– تگهای رسانه –>
<img src=“image.jpg” alt=“توضیح تصویر”>
<!– تگهای ساختاری –>
<div>بخشبندی صفحه</div>
<span>بخشبندی درون خطی</span>
در ویرایشگر وردپرس، هنگام استفاده از HTML مراقب باشید که تگها را به درستی ببندید. تگهای باز میتوانند باعث بهم ریختگی صفحه شوند.
کار با کلاسها و شناسهها در وردپرس
وردپرس به طور خودکار کلاسهای CSS به عناصر اضافه میکند. شما هم میتوانید کلاسهای سفارشی اضافه کنید:
<div class=“my-custom-class wp-block” id=“unique-section”>
<p class=“text-highlight”>این یک متن برجسته است.</p>
</div>
کلاسهای رایج وردپرس
aligncenter– برای هم تراز کردنalignleft– برای تراز به چپalignright– برای تراز به راستwp-caption– برای کپشن تصاویرwp-block– برای بلوکهای گوتنبرگ
ایجاد لیست در HTML
لیستها در وردپرس برای منوها، فهرست مطالب و … استفاده میشوند:
<ul>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ul><!– لیست مرتب –>
<ol>
<li>گام اول</li>
<li>گام دوم</li>
<li>گام سوم</li>
</ol>
جاسازی محتوا در وردپرس
در وردپرس میتوانید ویدئو، نقشه و سایر محتواها را جاسازی کنید:
<iframe width=“560” height=“315”
src=“https://www.youtube.com/embed/VIDEO_ID”
frameborder=“0” allowfullscreen>
</iframe>
میتوانید با HTML و CSS داخلی دکمههای زیبا ایجاد کنید:
style=“background: #4CAF50; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; display: inline-block;”>
دکمه وردپرس
</a>
جدولها در HTML
برای نمایش دادههای ساختاریافته در وردپرس:
<table class=“wp-table”>
<tr>
<th>عنوان ستون ۱</th>
<th>عنوان ستون ۲</th>
</tr>
<tr>
<td>داده ۱</td>
<td>داده ۲</td>
</tr>
</table>
نکات پایانی
- همیشه از ویرایشگر HTML در وردپرس برای اضافه کردن کدهای پیچیده استفاده کنید.
- از پلاگینهایی مانند “HTML Editor Syntax Highlighter” برای خوانایی بهتر کدها استفاده کنید.
- برای یادگیری بیشتر، به ابزار “Inspector” مرورگر خود مراجعه کنید تا HTML تولید شده توسط وردپرس را بررسی کنید.
در ویرایشگر گوتنبرگ وردپرس، میتوانید از بلاک “Custom HTML” برای اضافه کردن کدهای HTML سفارشی استفاده کنید. این بلاک کدهای شما را بدون تغییر نمایش میدهد.
آموزش Class, ID و Style در HTML & CSS
🎯 استایلدهی به عناصر با کلاس و آیدی
تگ <style> چیست؟
🧩 تعریف
تگ <style> برای نوشتن کدهای CSS در داخل صفحه HTML استفاده میشود.
p {
color: blue;
font-size: 20px;
}
</style>
✅
محل قرارگیری: معمولاً در داخل تگ <head> قرار میگیرد.
کلاس (Class) در CSS
🔵 کلاس چیست؟
کلاس یک ویژگی (attribute) در HTML است که به عناصر یک نام گروهی میدهد. چندین عنصر میتوانند کلاس یکسان داشته باشند.
⚡ نحوه استفاده
در CSS با . (نقطه) و در HTML با class="نام-کلاس"
کد HTML
این یک جعبه است
</div>
<p class=“box”>
این هم یک جعبه است
</p>
کد CSS
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
}
💡
نکات مهم کلاس:
- ✅ یک عنصر میتواند چندین کلاس داشته باشد:
class="box red large" - ✅ چندین عنصر میتوانند یک کلاس مشترک داشته باشند
- ✅ نام کلاسها به حروف بزرگ و کوچک حساس هستند (case-sensitive)
آیدی (ID) در CSS
🆔 آیدی چیست؟
آیدی یک شناسه یکتا (Unique) برای هر عنصر است. هر آیدی فقط باید به یک عنصر در صفحه اختصاص داده شود.
⚡ نحوه استفاده
در CSS با # (تگ) و در HTML با id="نام-آیدی"
کد HTML
این هدر صفحه است
</div>
<button id=“submit-btn”>
ارسال
</button>
کد CSS
background: #333;
color: white;
padding: 30px;
}
⚠️
تفاوت کلاس و آیدی:
📋 کلاس (.)
- ✅ چندین بار قابل استفاده
- ✅ چندین کلاس برای یک عنصر
- ✅ برای گروهبندی عناصر
🆔 آیدی (#)
- ❌ فقط یک بار در صفحه
- ❌ یک آیدی برای هر عنصر
- ✅ برای عناصر منحصر به فرد
مقایسه کامل Class و ID
| ویژگی | کلاس (Class) | آیدی (ID) |
|---|---|---|
| نماد در CSS | .classname | #idname |
| تکرار در صفحه | ✅ چندین بار مجاز | ❌ فقط یک بار |
| تعداد برای هر عنصر | چندین کلاس مجاز | فقط یک آیدی |
| کاربرد اصلی | استایلدهی گروهی | شناسایی عناصر یکتا |
.button {
padding: 10px 20px;
border: none;
border-radius: 5px;
}
#submit-btn {
background: #28a745;
color: white;
}
مثال عملی ترکیبی
کد HTML کامل
<h2 id=“title” class=“text-center text-blue”>
سلام دنیا!
</h2>
<p class=“text-content”>
این یک پاراگراف با کلاس است
</p>
<button id=“btn” class=“btn-primary btn-large”>
کلیک کن
</button>
</div>
کد CSS کامل
.card {
background: white;
border-radius: 10px;
padding: