جلسه چهارم : ساخت فایل CSS و متصل کردن آن به فایل HTML
جلسه چهارم : ساخت فایل CSS و متصل کردن آن به فایل HTML
سلام همانطور که می دانید در جلسه قبل آموزش آمدیم که به شما ساختار اصلی یک سایت را معرفی و آموزش داده ایم و حالا در این جلسه می خواهیم به شما آموزش دهیم چطور می توانید یک فایل css بسازید و بعد از آن با استفاده از کد نویسی آن را به فایل اصلی سایت خود یعنی فایل HTML متصل کنید ، امیدواریم که اون دسته افرادی که به دنبال یادگیری طراحی سایت هستید به جان و دل از این مقاله های آموزشی که در میهن آکادمی می باشد استفاده کنید
زیرا ما این مقاله ها را خودمان به صورت تخصصی به شما آموزش می دهیم و هیچ مجموعه آموزشی مانند ما با این روانی و سادگی آموزش نداده است ، همانطور که می دانید در جلسه قبل آمدیم به شما تک تک کد های ساختار اصلی فایل HTML را به شما آموزش دادیم و نحوه کامنت گذاری یا همان نظر دهی را به شما آموزش دادیم ، در این جلسه می خواهیم به شما آموزش دهیم که چطور یک فایل CSS را به فایل HTML متصل کنید.
آموزش ساخت فایل CSS و متصل کردن آن به قالب HTML
بعد از اینکه سند یا همان فایل HTML را در سایت خود ایجاد کردیم نوبت به این می رسد که یک فایل CSS هم در سایت خود بسازیم ، با این فایل CSS شما می توانید رنگ بندی سایت خود را مشخص کنید و به قولی سایت خود را رنگارنگ کنیم و یه تغییری در رنگ و لعاب آن سایت ببخشیم و همانطور که گفتیم ما در این دوره رایگان آموزشی از ادیتور یا همان برنامه کد نویسی NotePad++ استفاده می کنیم و شما می توانید هر ادیتوری که می خواهید استفاده کنید
نکته : معمولا فایل CSS را در کنار فایل html در فایل اصلی قالب ها که به گفته طراح های سایت فایل Root گفته می شود ، قرار می دهند و این فایل css را در یک پوشه جداگانه قرار نمی دهند
دستور کار :
همانطور که می دانید در جلسه قبل یک فایل HTML ساختیم این بار باید یک فایل CSS بسازیم و حالا می خواهیم باز همان روش را انجام دهیم ولی این بار یک فایل CSS بسازیم
مرحله اول : برنامه ادیتور خود را باز کنید من NotePad++ را باز می کنم
مرحله دوم : از قسمت منوی برنامه بر روی File کلیک می کنیم و بعد از آن بر روی گزینه New کلیک می کنیم.
مرحله سوم : از قسمت منو File بر روی گزینه Save As کلیک کنید
مرحله چهارم : نام این فایل را به نام style.css قرار دهید و پسوند آن را یادتان باشد CSS. قرار دهید
مرحله آخر : در آخر فایل را در پوشه Mihanacademy که قبلا ایجاد کرده اید ذخیره کنید
کار تمام است و شما به همین راحتی توانستید که یک فایل CSS در سیستم خود بسازید و کد نویسی CSS خود را شروع کنید.
HTML و CSS به پای هم پیر شوید 😍
خب حتما با خودت میگی که حالا چطور این فایل CSS را که ساخته ایم به فایل HTML مان پیوند دهیم و به عبارتی دیگر چه کار کنیم که هر کدی در فایل CSS خود داریم به فایل های HTML ما اعمال شود
اینجا شما سه روش برای استفاده از کد های CSS در HTML خود وجود دارد که اینجا هر سه روش را به طور کامل برای شما آموزش و توضیح می دهیم و اینجا می توانید هر کدام از این روش ها را که می خواهید در سایت خود استفاده کنید چون ، این روش ها یک جای برای شما می تواند مفید باشد.
- استفاده از تگ بسته <link> یا همان روش اکسترنال
- استفاده به روش مستقیم با تگ باز و بسته <style> </style>
- استایل نویسی در درون خود تگ ، یعنی روش درون تگی
روش اول : استفاده از تگ بسته <link> یا همان اکسترنال
در این روش شما می توانید با استفاده از تگ بسته لینک که درون تگ بسته <head> قرار می گیرد فایل CSS خود را به فایل HTML خود پیوند یا لینک می دهیم و بهترین روش برای استفاده از فایل سی اس اس در سایت همین روش می باشد و همیشه توصیه می شود از این روش برای استایل نویسی در سایت خود استفاده کنید ، زیرا این روش دلیل منظمی برای کد نویسی سایت می باشد و تقریبا 90 درصد سایت ها از این روش دارند استفاده می کنند و کد زیر را به خوبی در خاطر خود بسپارید و چند بار تمرین و تکرار کنید تا به خاطرتان سپرده شود ، زیرا بسیار مهم می باشد.
<head>
<link href="style.css" rel="stylesheet">
</head>
در کد بالا در قسمت href اینجا شما ویژگی یا همان صفت مربوط به کد را مشخص می کنید که این کلمه href برای لینک دهی در html استفاده می شود و اینجا style.css هم آدرس فایل CSS می باشد و کلمه rel هم مانند همان href یک نوع ویژگی یا اتربیوت می باشد و ریلیشن که StyleSheet می باشد برای برقراری ارتباط با فایل Style.css استفاده می شود.
روش دوم : استفاده مستقیم یعنی تگ باز و بسته <style> </style> :
با استفاده از این روش می خواهیم بدون اینکه در سایت خود لینک دهی کنیم ، کد های سی اس اس خود را بنویسیم و برای اینکه بتوانید این کار را انجام دهیم این خط کدی css را باید در قسمت Head سایت خود یعنی در فایل html ای که ساخته ایم بنویسیم مانند کد زیر
<head>
<style>
body {
background : red;
}
</style>
</head>
همانطور که در کد های بالا مشاهه می کنید این کد بالا پشت زمینه سایت شما را به رنگ قرمز تغییر می دهد و به شکل کد ها دقیق نگاه کنید ببینید که کجا نوشته شده است
روش سوم : استایل نویسی در داخل خود تگ یا همان روش داخل تگی :
در این روش شما می توانید با استفاده از تگ اتربیوت یا همان ویژگی Style که در قسمت بالا در بین تگ head نوشته شده است ولی این بار در تگ های داخل خطی خود بنویسید مانند کد زیر که مشاهده می کنید و اینجا شما زمانی که از تگ Style استفاده می کنید دیگر نیازی به نوشتن تگ در بخش head سایت خود ندارید
<h3 style="background : green;">اینجا میــــهن آکادمی می باشد</h3>
این خط کد بالا یک H3 شما را به رنگ سبز متن داخل آن را نمایش می دهد و نوشته اینجا میهن آکادمی می باشد را به رنگ سبز نمایش می دهد ، به همین راحتی شما می توانید در کد نویسی یک فایل css را به یک فایل html متصل کنید تا نمایش داده شود ، موفق و پیروز باشید
