آموزشها
قالبها
افزونهها
سایت برتر
هاست وردپرس
طراحی سایتجلسه چهارم : ایجاد فایل CSS و متصل کردن آن به فایل HTML
- مقالات آموزشی
- بروزرسانی شده در
سلام به شما همراهان دوست داشتنی میهن وردپرس که مشتاقانه در حال یادگیری طراحی وبسایت هستید! امیدوارم حالتان خوب باشد. خب در جلسه قبلی تا کجا پیش رفتیم؟ اگر یادتان باشد تک تک کدهای ساختار اصلی فایل HTML را برایتان توضیح دادم و با نحوه کامنت گذاری در HTML هم آشنا شدید. در این جلسه میخواهیم یک فایل CSS ایجاد کنیم و راه های متصل کردن آن به فایل HTML مان را هم یاد بگیریم. خب برویم سر اصل مطلب!
آنچه در این مقاله می‌خوانید
آموزش ایجاد فایل CSS و وصل کردن آن به قالب HTML
بعد از اینکه سند 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 وجود دارد که هر سه روش را به طور کامل برایتان توضیح می دهم و باید به خوبی روش های گفته شده را فرا بگیرید چون بعدها خیلی به دردتان میخورد!
- استفاده از تگ بسته <link> یا همان روش اکسترنال.
- استفاده از روش مستقیم یعنی تگ باز و بسته <style></style>
- استایل نویسی در درون خود تگ. روش درون تگی.
1- استفاده از تگ بسته <link> یا همان روش اکسترنال:
در این روش با استفاده از تگ بسته <link> که درون تگ بسته <head> قرار میگیرد فایل cssمان را به فایل htmlمان پیوند میدهیم. بهترین روش همین روش است و همواره توصیه شده از این روش برای استایل نویسی استفاده کنیم. این روش به دلیل منظم تر کردن کدها استفاده بسیاری دارد و تقریبا 90 درصد وبسایت ها از این روش استفاده می‌کنند. کد زیر را به خوبی حفظ کنید و چند بار بنویسید تا ملکه ذهنتان شود ، چون بسیار مهم است.
2- استفادi از روش مستقیم یعنی تگ باز و بسته <style></style> :
با استفاده از این روش می توانیم به صورت مستقیم در داخل فایل htmlمان کدهای cssمان را قرار بدهیم. البته یادتان باشد که تگ استایل باید حتما در داخل تگ head باشد. تصویر زیر را ببینید :
3- استایل نویسی در درون خود تگ. روش درون تگی :
در این روش با استفاده از اتربیوت(ویژگی یا صفت) style می توانیم در درون تگ ها استایل بنویسیم. این روش به دلیل به هم ریختگی کد ها توصیه نمیشود.
راستی به زودی فیلم آموزشی همین جلسه را هم برایتان میگذارم تا اگر جایی را متوجه نشدید ، بتوانید به خوبی یادش بگیرید. پس منتظر فیلم آموزشی این جلسه باشید…
برای این جلسه همین قدر کافی است. دوستتان دارم…
