جلسه چهارم : ایجاد فایل CSS و متصل کردن آن به فایل HTML
3.9 از 53 رای

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

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

سلام به شما همراهان دوست داشتنی میهن وردپرس که مشتاقانه در حال یادگیری طراحی وبسایت هستید! امیدوارم حالتان خوب باشد. خب در جلسه قبلی تا کجا پیش رفتیم؟ اگر یادتان باشد تک تک کدهای ساختار اصلی فایل HTML را برایتان توضیح دادم و با نحوه کامنت گذاری در HTML هم آشنا شدید. در این جلسه میخواهیم یک فایل CSS ایجاد کنیم و راه های متصل کردن آن به فایل HTML مان را هم یاد بگیریم. خب برویم سر اصل مطلب!

ایجاد یک سند CSS

بعد از اینکه سند HTML مان را ایجاد کردیم ، نوبت به ایجاد سند CSS مان میرسد. یعنی سندی که به وسیله آن بتوانیم سایتمان را رنگ آمیزی کنیم و به ظاهرش رنگ و لعاب ببخشیم. خب همانطور که قبلا هم گفتیم ، ما در این دوره آموزشی از ادیتور ++notepad استفاده میکنیم. شما می توانید از هر ادیتور دیگری که دوست دارید استفاده کنید!

نکته : معمولا فایل css را در کنار فایل html و در root قرار میدهند. یعنی فایل css را در داخل یک پوشه جداگانه دیگر قرار نمی دهند.

دستور کار :

گام اول :  ++notepad را باز کنید!

گام دوم : از منوی file گزینه new را بزنید.

گام سوم : از منوی file گزینه save as را بزنید.

گام چهارم :  نام فایل را style.css بگذارید و پسوند آن را CSS. قرار بدهید.

گام پنجم : در نهایت فایل را در پوشه mihanwp که قبلا ایجاد کرده بودید ذخیره کنید.

کار تمام است! به همین راحتی یک سند CSS را ایجاد کردید که می توانید در آن کد نویسی انجام دهید.

HTML و CSS پیوندتان مبارک!

خب حالا سوال این است که چطور فایل cssمان را به فایل htmlمان پیوند دهیم؟ به عبارتی چه کار کنیم که هر کدی که در فایل cssمان می نویسیم ، به فابل htmlمان اعمال شود؟

سه روش برای استفاده از css در html وجود دارد که هر سه روش را به طور کامل برایتان توضیح می دهم و باید به خوبی روش های گفته شده را فرا بگیرید چون بعدها خیلی به دردتان میخورد!

  1.  استفاده از تگ بسته <link> یا همان روش اکسترنال.
  2.  استفاده از روش مستقیم یعنی تگ باز و بسته <style></style>
  3.  استایل نویسی در درون خود تگ. روش درون تگی.

 

 

1- استفاده از تگ بسته <link> یا همان روش اکسترنال:

در این روش با استفاده از تگ بسته <link> که درون تگ بسته <head> قرار میگیرد فایل cssمان را به فایل htmlمان پیوند میدهیم. بهترین روش همین روش است و همواره توصیه شده از این روش برای استایل نویسی استفاده کنیم. این روش به دلیل منظم تر کردن کدها استفاده بسیاری دارد و تقریبا 90 درصد وبسایت ها از این روش استفاده میکنند. کد زیر را به خوبی حفظ کنید و چند بار بنویسید تا ملکه ذهنتان شود ، چون بسیار مهم است.

2- استفادi از روش مستقیم یعنی تگ باز و بسته <style></style> :

با استفاده از این روش می توانیم به صورت مستقیم در داخل فایل htmlمان کدهای cssمان را قرار بدهیم. البته یادتان باشد که تگ استایل باید حتما در داخل تگ head باشد. تصویر زیر را ببینید :

نوشتن استایل با تگ <style>

3- استایل نویسی در درون خود تگ. روش درون تگی :

در این روش با استفاده از اتربیوت(ویژگی یا صفت) style می توانیم در درون تگ ها استایل بنویسیم. این روش به دلیل به هم ریختگی کد ها توصیه نمیشود.

استایل نوشتن درون تگ

راستی به زودی فیلم آموزشی همین جلسه را هم برایتان میگذارم تا اگر جایی را متوجه نشدید ، بتوانید به خوبی یادش بگیرید. پس منتظر فیلم آموزشی این جلسه باشید…

برای این جلسه همین قدر کافی است. دوستتان دارم…

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.