درس از مسیر CSS
چطور CSS را به صفحه HTML متصل کنیم؟
پاسخ کوتاه: CSS را می‌توان به سه روش به HTML متصل کرد: درون‌خطی روی خود عنصر، داخلی در تگ style، و خارجی با فایل جدا که توصیه‌شده‌ترین روش برای پروژه‌های واقعی است.
توضیح کامل
آموزش این درس
سه روش اتصال
- •روش درون‌خطی (inline): استایل مستقیم روی ویژگی style عنصر.
- •روش داخلی (internal): نوشتن استایل در تگ style داخل head.
- •روش خارجی (external): قرار دادن استایل‌ها در فایل css جدا و اتصال با تگ link.
روش خارجی بهترین گزینه برای پروژه‌های واقعی است، چون استایل از محتوا جدا می‌شود و در همه صفحات قابل استفاده مجدد است.
مثال کد
نمونه عملی
<head>
<link rel="stylesheet" href="styles.css" />
</head>تگ link در head فایل styles.css را به صفحه متصل می‌کند.
<head>
<style>
p {
color: #1f2937;
}
</style>
</head>خروجی: همه پاراگراف‌های صفحه با رنگ تیره نمایش داده می‌شوند.
اشتباهات رایج
مراقب این موارد باشید
- •اشتباه نوشتن مسیر فایل CSS در ویژگی href.
- •استفاده زیاد از استایل inline که نگه‌داری کد را سخت می‌کند.
- •قرار دادن تگ link خارج از head.
نکته‌های کاربردی
نکته‌های مهم
- •برای پروژه‌های واقعی از فایل CSS خارجی استفاده کنید.
- •نام فایل‌های CSS را واضح و مرتبط با کاربردشان انتخاب کنید.
تمرین
تمرین: اتصال استایل
- 1یک فایل styles.css بسازید و رنگ پاراگراف‌ها را تغییر دهید.
- 2فایل را با تگ link به صفحه HTML متصل کنید.
- 3نتیجه را در مرورگر بررسی کنید.
پروژه‌های آموزشی
تمرین‌های مرتبط با این مسیر
یک کارت محصول زیبا و ریسپانسیو بسازید و تمرین کنید چطور HTML و CSS را کنار هم به کار ببرید.
پروژه آموزشی فرم تعاملی با JavaScript
یک فرم با اعتبارسنجی ساده در مرورگر بسازید و تعامل کاربر را با JavaScript تمرین کنید.
این پروژه به‌زودی فعال می‌شود.
نیاز به طراحی سایت حرفه‌ای دارید؟
پروژه شما را با همین استانداردها می‌سازیم
اگر می‌خواهید به‌جای ساخت دستی، سایت آماده و حرفه‌ای داشته باشید، تیم ما کنار شماست.