این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش نحوه ایجاد فایل CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه ایجاد فایل CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
یک فایل CSS
یک فایل CSS پسوندش css. می باشد، یعنی در واقع هر فایلی رو که دیدید پسوندش css. بود یعنی اون فایل یک فایل CSS یاهم معروف به StyleSheet می باشد.
کلمه CSS مخفف Cascading Style Sheets می باشد که با استفاده از آن میتوان به یک صفحه وب استایل داد، پس بطور کلی وظیفه استایل دهی و صفحه آرایی صفحات وب بر عهده این زبان می باشد.
ما از روش های مختلفی میتونیم از زبان CSS استفاده کنیم که ان شاالله در بخش های بعدی این روش هارو بطور کامل آموزش خواهم داد ولی در این جلسه میخوایم نحوه ایجاد فایل CSS رو یاد بگیریم.
Free-Learn
نرم افزار ساخت فایل CSS
کلا هر نرم افزاری رو که باهاش HTML رو مینویسید ، زبان CSS هم میشه باهاش ایجاد کرد و دستوراتشو نوشت و هیچ فرقی نمیکنه. ( یعنی اینجوری نیست بگیم برای CSS نرم افزار مخصوص و برای HTML هم جدا مخصوص داره )
حالا من فرض میکنم که شما هیچ نرم افزار خاصی ندارید و میخوایم با استفاده از نرم افزار NotePad موجود در سیستم عامل ویندوز استفاده کنیم و یه فایل CSS ایجاد کنیم. ( یا هم اگه از سیستم عامل Mac استفاده میکنید باید نرم افزار TextEdit رو باز کنید )
حالا علی یارت از هر نرم افزاری که استفاده میکنی اون نرم افزار رو بازش کن و دستورات زیر رو داخلش تایپ کن: ( مثلا من از نوت پد داخل ویندوز استفاده میکنم )
|
1 2 3 4 5 6 7 8 |
body{ background-color: blue; color: white; } p{ color: yellow; } |
سپس باید فایل رو ذخیره یا Save کنیم، داخل نرم افزار نوت پد از منوی File بروی گزینه Save یا Save as کلیک نمایید ( شما هم اگه از نرم افزار خاصی استفاده میکنید درکل فرقی نمیکنه و باید فایل رو ذخیره کنید )
داخل نرم افزار نوت پد ، باید خودمون بصورت دستی پسوند فایلمون رو مشخص کنیم، پس باید پسوندش رو css. بزاریم.
خب تموم شد رفت، حالا فایل CSS ما ایجاد شد و میخوایم به فایل HTML مون وصلش کنیم، برای اینکار کافیه از تکه کد زیر در قسمت هِد یا HEAD ( یاهم همون تگ head ) صفحه HTML مون استفاده نماییم :
|
1 2 3 |
<head> <link rel="stylesheet" href="MyFile.css"> </head> |
توجه داشته باشید که در قسمت href باید آدرس دقیق فایل CSS مون رو وارد نماییم، مثال :
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="files/mystyle.css"> </head> <body> <h2>سایت آموزشی فری لرن</h2> </body> </html> |
خب تبریک میگم شما با موفقیت تونستید یک فایل CSS ایجاد نمایید، حالا فقط میمونه یادگیری دستورات زبان CSS که اونم در بخش های بعدی بصورت کامل یاد خواهید گرفت.
Free-Learn
نکات و توضیحات
- من در این آموزش از نرم افزار NotePad داخل ویندوز استفاده کردم ولی خب همونطور که گفتم درکل فرقی نمیکنه و هر نرم افزاری هم که باشه درکل یکارو میکنن و شما فقط کافیه تو اون نرم افزاری که دارید دستوراتتون رو بنویسید و با فرمت css. ذخیره کنید.
