https://rayawp.ir/?p=26313

جلسه 1 آموزش CSS: نحوه ایجاد فایل CSS و اتصال آن به HTML

💻 ادیتور کد آنلاین رایاوردپرس کدهای این مقاله را می‌توانید در ادیتور آنلاین ما تست کنید! امتحان کن ⟶ جلسه 1 آموزش CSS: نحوه ایجاد فایل CSS و اتصال آن به HTMLسلام همراهان عزیز رایا

آخرین بروزرسانی: 28 اسفند 1403
بدون دیدگاه
زمان مطالعه: 7 دقیقه

💻

ادیتور کد آنلاین رایاوردپرس

کدهای این مقاله را می‌توانید در ادیتور آنلاین ما تست کنید!

امتحان کن ⟶

جلسه 1 آموزش CSS: نحوه ایجاد فایل CSS و اتصال آن به HTML

سلام همراهان عزیز رایا وردپرس! 😊
امیدواریم حالتون توپ باشه! حالا که جلسات HTML رو پشت سر گذاشتیم، وقتشه با هم به دنیای CSS پا بذاریم. در اولین جلسه از آموزش CSS، قدم‌های ابتدایی رو با هم برمی‌داریم: از ساخت فایل CSS تا وصل کردنش به فایل HTML. آماده‌ای که با هم این ماجراجویی جذاب رو شروع کنیم؟ 🚀✨ پس بزن بریم 🙂

📑 فایل CSS چیست؟

فایل CSS 📝 یک فایل متنی ساده با پسوند .css هست. این فایل شامل دستورات و قوانینی هست که به مرورگر میگه چطور عناصر HTML رو نمایش بده. مثلاً می‌تونی با CSS تعیین کنی که:

رنگ متن‌ها چی باشه
فونت‌ها چه مدلی باشن
اندازه‌ها و فاصله‌ها چقدر باشن
چیدمان و طرح‌بندی صفحه چجوری باشه
و خیلی چیزهای دیگه…

🛠️ چطور یک فایل CSS بسازیم؟

برای ایجاد و ساخت فایل CSS کافیه مراحل زیرو دنبال کنی:

جلسه 17 آموزش CSS: لینک ها (link) در CSS

مطالعه

📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

۱. ویرایشگر متنی رو باز کن

فرقی نداره از کدوم ویرایشگر استفاده می‌کنی؛ می‌تونی از Visual Studio Code، Sublime Text یا حتی Notepad استفاده کنی. (پیشنهاد ما VS Code هست چون رایگانه و کلی امکانات جذاب داره!)

۲. ایجاد فایل جدید

حالا نوبتشه که یه فایل جدید بسازی:

توی ویرایشگرت گزینه “New File” رو انتخاب کن.
اسم فایل رو به صورت style.css بذار.

🎯 نکته: حتماً پسوند .css رو بنویس؛ چون این پسوند باعث می‌شه مرورگر فایل رو به عنوان یک CSS (StyleSheet) تشخیص بده و استایل‌ها رو روی سایتت اعمال کنه.

۳. نوشتن کدهای استایل

بعد از ساخت فایل، اولین دستورهای CSS رو وارد کن. برای مثال، یه استایل ساده برای بدنه‌ی صفحه بنویس:

جلسه 20 آموزش CSS: فرم (form) در CSS

مطالعه

ساختار کلی به صورت زیره:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|

مثال:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|

این کد باعث می‌شه که پس‌زمینه‌ی صفحه به رنگ خاکستری ملایم تغییر کنه. 😊

جلسه 9 آموزش CSS: کار با حاشیه (Border) در CSS

مطالعه

تبریک میگم اولین فایل CSS ات رو ساختی 🙂

🚨 خطاهای رایج هنگام ساخت فایل CSS

نام فایل با حروف بزرگ:
اگر پسوند فایل رو به صورت style.CSS با حروف بزرگ بنویسی، استایل‌ها اعمال نمیشن!
🔴 راه حل: همیشه از حروف کوچک استفاده کن؛ یعنی پسوند فایل باید به صورت style.css باشه.
مسیر اشتباه در HTML:
اگر مسیر فایل CSS در تگ <link> اشتباه تنظیم بشه، فایل به درستی وصل نمیشه!

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|

فراموش کردن بسته شدن دستورات ( } یا ; ):
اگه فراموش کنی علامت‌های بسته شدن یا پایان دستورات رو وارد کنی، کدها به هم میریزن!
💥 راه حل: از ویرایشگرهایی مثل VS Code استفاده کن که خطاها رو به صورت واضح نشون می‌دن.

نحوه وصل کردن فایل CSS به HTML

حالا که فایل CSS رو ایجاد کردی، باید اون رو به HTML وصل کنی تا استایل‌های نوشته شده روی صفحه اعمال بشن و ظاهر سایتت رو زیباتر کنی. برای اتصال فایل CSS به HTML، سه روش اصلی وجود داره:

1. روش External (خارجی) – اتصال یک فایل CSS جداگانه

این روش بهترین و استانداردترین روش برای اضافه کردن CSS به HTML هست. در این روش، تمام استایل‌ها در یک فایل جداگانه ذخیره می‌شن و به کمک تگ <link> داخل بخش <head> فایل HTML فراخوانی می‌شن:

📌 مزیت این روش:

جلسه 7 آموزش CSS: کار با رنگ ها (colors) در CSS

مطالعه

مدیریت راحت‌ تر کدها ✅
سرعت بیشتر در ویرایش و تغییر استایل‌ها 🚀
استفاده مجدد از یک فایل CSS در چندین صفحه 📄

📌 چطور از این روش استفاده کنم؟
کافیه تگ <link> رو داخل <head> به این شکل قرار بدی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|

نکته مهم: در href باید مسیر درست فایل CSS 📝 رو بنویسی:

اگه فایل CSS 📝 و HTML در یک پوشه هستن: href="style.css"
اگه فایل CSS 📝 در پوشه‌ای به نام css هست: href="css/style.css"

2. روش Internal (داخلی) – نوشتن CSS داخل فایل HTML

این روش زمانی کاربرد داره که بخوای استایل‌های مربوط به یک صفحه خاص رو مستقیماً داخل همون فایل HTML بنویسی، بدون نیاز به فایل CSS جداگانه.

📌 مزیت این روش:

جلسه 15 آموزش CSS: فونت (Font) در CSS

مطالعه

مناسب برای صفحات کوچک یا تست‌های سریع ✅
نیازی به فایل خارجی نداره، همه‌چیز توی یک فایل HTML هست 📝

📌 چطور از این روش استفاده کنم؟
کافیه کدهای CSS رو داخل یک تگ <style> در بخش <head> فایل HTML قرار بدی، مثل این:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|

💡 نکته:

این روش برای پروژه‌های بزرگ توصیه نمیشه، چون استایل‌ها مستقیماً داخل HTML هستن و مدیریت کدها سخت‌تر میشه.
اگر استایل‌ها در چندین صفحه استفاده میشن، بهتره از روش External استفاده کنی تا تغییرات راحت‌تر و سریع‌تر انجام بشه.

3. روش Inline (درون‌ خطی) – نوشتن CSS مستقیماً داخل تگ‌ های HTML

در این روش، استایل‌ها مستقیماً داخل خود تگ‌های HTML و با استفاده از ویژگی style نوشته میشن. این روش فقط برای تغییرات جزئی یا موارد خاص استفاده میشه و برای پروژه‌های بزرگ اصلاً توصیه نمیشه! ❌

📌 مزیت این روش:

جلسه 15 آموزش CSS: فونت (Font) در CSS

مطالعه

مناسب برای تغییرات سریع و اضطراری ⏩
نیازی به فایل جداگانه یا تگ <style> نداره 📝

📌 چطور از این روش استفاده کنم؟
برای استفاده از CSS درون‌ خطی، کافیه از ویژگی style داخل تگ HTML موردنظر استفاده کنی، مثل این:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|

💡 نکته:

این روش باعث میشه کدهای HTML شلوغ و نامرتب بشن، چون استایل‌ها داخل هر تگ نوشته شدن.
در پروژه‌های واقعی، بهتره از روش‌های External یا Internal استفاده کنی تا کدهای تمیزتر و قابل‌مدیریت‌تری داشته باشی.
اگر نیاز به تغییرات زیادی داشته باشی، این روش اصلاً مناسب نیست! باید برای هر تگ جداگانه استایل بنویسی که کار رو سخت می‌کنه.

✅جنگ استایل‌ ها! اولویت‌ها در CSS

گاهی اوقات داخل یک کد HTML، ممکنه چندین روش مختلف برای افزودن CSS به کار رفته باشه، که از نظر استانداردی چندان جالب نیست. روش اصولی و توصیه‌شده، استفاده از CSS خارجی (External CSS) هست تا کدها تمیزتر و مدیریت‌شون راحت‌تر باشه.

اما گاهی پیش میاد که با یه کد مشابه زیر روبه‌رو میشی و نمی‌دونی چرا بعضی از استایل‌ها اعمال نمیشن! 🤔 اینجاست که اولویت‌بندی در وارد ماجرا میشه:

جلسه 23 آموزش CSS: نحوه اولویت بندی عناصر در CSS

مطالعه

اگه در یک فایل HTML از چند روش مختلف برای اعمال استایل استفاده کرده باشی، مرورگر طبق ترتیب زیر تصمیم می‌گیره که کدوم استایل رو اعمال کنه:

🚨 اینلاین (Inline): استایل مستقیم روی تگ HTML
📘 اینترنال (Internal): استایل داخل <style> توی همون فایل HTML
📂 اکسترنال (External): استایل داخل فایل جداگانه .css

قانون طلایی: هرچی نزدیک‌تر به المان باشه، اولویت بالاتری داره!

🔍 مثال: بیا یه مثال واقعی ببینیم که چطور این اولویت‌بندی کار می‌کنه:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|

🔍 بیایم کد بالا رو بررسی کنیم:

جلسه 12 آموزش CSS: ویژگی width و height در CSS

مطالعه

با روش اکسترنال (External) 🎨 گفتیم که رنگ متن <h1> آبی باشه.
با روش اینترنال (Internal) 🌿 تعیین کردیم که رنگ متن <h1> سبز باشه.
با روش اینلاین (Inline) 🔥 گفتیم که رنگ متن قرمز باشه.

❓ حالا به نظرت نتیجه نهایی چی میشه؟

✅ درست حدس زدی! متن <h1> در نهایت قرمز میشه! 🎯 چون روش اینلاین بالاترین اولویت رو داره و استایل‌های قبلی رو مرورگر نادیده می‌گیره. 🚀

⚠️ توجه! اگر پشت یک استایل از !important استفاده کنی، این دستور تمام اولویت‌ها رو زیر پا می‌ذاره! 😱

یعنی این استایل اولویت بالاتری از همه پیدا می‌کنه و حتی استایل‌های اینلاین که معمولاً بالاترین اولویت رو دارن رو هم نادیده می‌گیره!

جلسه 20 آموزش CSS: فرم (form) در CSS

مطالعه

📌 برای مثال، اگر توی یک استایل بنویسی:
  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

⚠️ هشدار: استفاده زیاد از !important باعث بهم ریختگی کدها میشه! فقط در مواقع ضروری ازش استفاده کن!

🎯 سخن پایانی

تبریک میگم! حالا تو یاد گرفتی چطور یک فایل CSS 📝 بسازی و اون رو به فایل HTML ات اضافه و وصلش کنی! یادت باشه که CSS یه دنیای بزرگه و هر چقدر بیشتر تمرین کنی، مهارتت بیشتر میشه. تا جلسه بعدی آموزش تو رو به خدای بزرگ میسپارمت فعلن 😉💖

موفق باشی! 💻✨

جلسه 21 آموزش CSS: عناصر Block و Inline در CSS

مطالعه

5/5 - (3 امتیاز)

اگه از مطالب سایت استفاده کردی و کارت رو راه انداخته، می‌تونی با یه حمایت کوچیک بهمون انگیزه بدی تا با قدرت کار تولید محتوای خفن تر و جذاب تر رو پیش ببریم 😉🥰

❤️ حمایت از رایا وردپرس

ارسال نظر ( 0 نظر تایید شده )

📖 آنچه خواهید خواند

12 نفر در حال مطالعه این مقاله

337 بازدید در 24 ساعت اخیر

4 نفر این پست رو بوکمارک کردن

7 دقیقه زمان مطالعه این مطلب

ما رو در شبکه های اجتماعی دنبال کن 😉❤️

سعید

250 مقاله

عاشق یادگیری و پیشرفت در برنامه نویسی و ارتقا مهارت هام هستم. سعی میکنم دانش و تجربیات ارزشمندم رو در رایا وردپرس باهاتون به اشتراک بزارم :)

مشاهده همه مقالات

جلسه 1 آموزش CSS: نحوه ایجاد فایل CSS و اتصال آن به HTML

ادیتور کد آنلاین رایاوردپرس

📑 فایل CSS چیست؟

🛠️ چطور یک فایل CSS بسازیم؟

جلسه 17 آموزش CSS: لینک ها (link) در CSS

۱. ویرایشگر متنی رو باز کن

۲. ایجاد فایل جدید

۳. نوشتن کدهای استایل

جلسه 20 آموزش CSS: فرم (form) در CSS

جلسه 9 آموزش CSS: کار با حاشیه (Border) در CSS

🚨 خطاهای رایج هنگام ساخت فایل CSS

نحوه وصل کردن فایل CSS به HTML

1. روش External (خارجی) – اتصال یک فایل CSS جداگانه

جلسه 7 آموزش CSS: کار با رنگ ها (colors) در CSS

2. روش Internal (داخلی) – نوشتن CSS داخل فایل HTML

جلسه 15 آموزش CSS: فونت (Font) در CSS

3. روش Inline (درون‌ خطی) – نوشتن CSS مستقیماً داخل تگ‌ های HTML

جلسه 15 آموزش CSS: فونت (Font) در CSS

✅جنگ استایل‌ ها! اولویت‌ها در CSS

جلسه 23 آموزش CSS: نحوه اولویت بندی عناصر در CSS

جلسه 12 آموزش CSS: ویژگی width و height در CSS

جلسه 20 آموزش CSS: فرم (form) در CSS

🎯 سخن پایانی

جلسه 21 آموزش CSS: عناصر Block و Inline در CSS

📖 آنچه خواهید خواند

ما رو در شبکه های اجتماعی دنبال کن<img loading="lazy" class="alignnone wp-image-5002 size-full" style="font-size: 13px;" src="https://www.rayawp.ir/wp-content/uploads/2024/09/Vector09-1.svg" alt="لبخند رایا وردپرس" width="28" height="26" />

ما رو در شبکه های اجتماعی دنبال کن