جلسه چهارم: آموزش ساخت فایل CSS و اتصال به HTML

سلام به همراهان دوست‌داشتنی میهن وردپرس! در جلسه قبلی با ساختار اصلی فایل HTML و روش نوشتن کامنت آشنا شدیم. در این جلسه قراره ظاهر همون صفحه رو با CSS تغییر بدیم. اول یک فایل CSS می‌سازیم، بعد با سه روش استفاده از CSS در HTML آشنا می‌شیم و در آخر هم اتصال فایل به صفحه رو بررسی می‌کنیم.

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

آموزش ایجاد فایل CSS و وصل کردن اون به HTML

کدها رو می‌تونید با هر ویرایشگر متنی بنویسید. ما در این آموزش از Notepad++ استفاده می‌کنیم، ولی ویرایشگری که انتخاب می‌کنید تأثیری روی نتیجه نداره.

فایل CSS می‌تونه کنار فایل HTML باشه یا داخل پوشه‌ای مثل css و assets/css قرار بگیره. نکته مهم اینه که آدرس نوشته‌شده در ویژگی href با محل واقعی فایل هماهنگ باشه.

ساخت فایل CSS قدم‌به‌قدم

1. برنامه Notepad++ رو باز کنید.
2. از منوی File گزینه New رو بزنید.
3. دوباره به منوی File برید و گزینه Save As رو انتخاب کنید.
4. نام فایل رو style.css بذارید. بخش .css پسوند فایله و به ویرایشگر و مرورگر نشون می‌ده که این فایل کدهای CSS رو در خودش داره.
5. فایل رو در پوشه پروژه mihanwp و کنار فایل HTML ذخیره کنید.

به همین راحتی فایل CSS شما آماده‌ست و حالا می‌تونید کدهای مربوط به ظاهر صفحه رو داخلش بنویسید.

سه روش استفاده از CSS در HTML

برای استفاده از CSS در یک صفحه HTML سه راه اصلی دارید: فایل خارجی، تگ <style> و ویژگی style. برای بیشتر پروژه‌ها، فایل خارجی انتخاب بهتریه؛ چون کدهای HTML و CSS رو از هم جدا و مرتب نگه می‌داره.

1. اتصال یک فایل CSS خارجی با تگ <link>
2. نوشتن CSS داخل تگ <style>
3. نوشتن CSS در ویژگی style همون تگ HTML

روش اول: اتصال فایل CSS خارجی با تگ Link

در روش اول، تگ <link> رو داخل بخش <head> فایل HTML می‌ذاریم. این تگ یک عنصر خالی یا Void Element هست؛ یعنی چیزی داخلش نوشته نمی‌شه و تگ پایانی هم نداره.

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

مقدار stylesheet به مرورگر می‌گه فایلی که معرفی کردیم برای ظاهر صفحه‌ست. ویژگی href هم نشانی فایل CSS رو مشخص می‌کنه. اگه فایل style.css کنار فایل HTML باشه، همین آدرس کوتاه کار می‌کنه.

اگه فایل CSS رو در پوشه‌ای به نام css ذخیره کردید، مسیر رو این‌طوری بنویسید:

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

روش دوم: نوشتن CSS داخل تگ Style

در روش دوم، کدهای CSS رو داخل تگ <style> می‌نویسیم. جای این تگ معمولا در بخش <head> صفحه‌ست. این روش برای آزمایش‌های کوتاه یا صفحه‌ای با چند استایل محدود به کارتون میاد.

<head>  <style>    body {      background-color: lightblue;    }  </style></head>

روش سوم: نوشتن استایل داخل تگ HTML

در روش درون‌تگی یا Inline CSS، کد CSS داخل ویژگی style همون تگ HTML نوشته می‌شه. ویژگی همون اطلاعات اضافه‌ایه که داخل تگ قرار می‌گیره و رفتار یا ظاهرش رو مشخص می‌کنه.

<p style="color: blue;">این نوشته آبیه.</p>

اگه زیاد سراغ این روش برید، کدها شلوغ می‌شن و تغییر دادن استایل چند بخش سخت‌تر می‌شه. بااین‌حال، برای یک تغییر خیلی محدود، بعضی ایمیل‌های HTML یا استایلی که JavaScript به‌شکل پویا تنظیم می‌کنه، روش کاربردی‌ایه.

چطور مطمئن بشیم فایل CSS وصل شده؟

برای یک آزمایش سریع، کد زیر رو داخل فایل style.css بنویسید و فایل رو ذخیره کنید:

body {  background-color: lightblue;}

حالا فایل HTML رو در مرورگر باز یا صفحه رو تازه‌سازی کنید. اگه پس‌زمینه آبی روشن شد، یعنی اتصال درسته. اگه هیچ تغییری ندیدید، اول هر دو فایل رو ذخیره کنید و بعد صفحه رو با کلیدهای Ctrl + F5 دوباره بارگذاری کنید.

خطاهای رایج موقع اتصال CSS

• مسیر فایل اشتباهه: اگه فایل داخل پوشه css هست، باید href="css/style.css" رو بنویسید.
• پسوند فایل درست نیست: مطمئن بشید نام واقعی فایل style.css هست و فایل با نام style.css.txt ذخیره نشده.
• تگ Link جای درستی نیست: تگ <link> رو داخل بخش <head> بذارید.
• فایل‌ها ذخیره نشدن: بعد از هر تغییری، فایل‌های HTML و CSS رو ذخیره کنید.
• مرورگر نسخه قبلی رو نشون می‌ده: صفحه رو با Ctrl + F5 تازه‌سازی کنید.

تمرین این جلسه

یک فایل HTML و یک فایل به نام style.css بسازید. فایل CSS رو با روش خارجی به HTML وصل کنید. بعد رنگ پس‌زمینه صفحه و رنگ یک پاراگراف رو تغییر بدید. در قدم بعدی، فایل CSS رو به پوشه css ببرید و مسیر href رو طوری عوض کنید که اتصال دوباره برقرار بشه.

در بیشتر پروژه‌ها بهتره از فایل CSS خارجی استفاده کنید. با این روش فایل‌ها مرتب می‌مونن و تغییر دادن ظاهر چند صفحه راحت‌تر می‌شه. حالا فایل CSS رو ساختید، روش وصل کردنش به HTML رو بلدید و می‌تونید خطاهای رایج مربوط به مسیر فایل رو هم پیدا کنید.

جمع‌بندی

در این جلسه یاد گرفتید که فایل CSS رو با پسوند .css بسازید و با تگ <link> به فایل HTML وصل کنید. با روش‌های داخلی و درون‌تگی هم آشنا شدید، ولی برای بیشتر پروژه‌ها فایل خارجی انتخاب مرتب‌تر و کاربردی‌تریه. اگه استایل‌ها نمایش داده نشدن، اول مسیر href، پسوند فایل، محل تگ <link> و ذخیره شدن فایل‌ها رو بررسی کنید.

سوالات متداول

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.