آموزش نحوه ایجاد فایل CSS

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

آموزش نحوه ایجاد فایل CSS

Free-Learn

فایل CSS

یک فایل CSS با پسوند css. ایجاد و مورد استفاده قرار میگیرد، یعنی در واقع هر فایلی رو که دیدید پسوندش css. بود یعنی اون فایل یک فایل CSS می باشد.

سی اس اس مخفف کلمه ی Cascading Style Sheets می باشد که با استفاده از آن میتوان به یک صفحه وب استایل داد، پس بطور کلی وظیفه استایل دهی و صفحه آرایی صفحات وب بر عهده این زبان می باشد.

ما از روش های مختلفی میتونیم از CSS استفاده نماییم که ان شاالله در بخش های بعدی این روش هارو بطور کامل آموزش خواهم داد و شما نیز آنها را یاد خواهید گرفت.

البته بنده در مجموعه آموزش های زبان HTML روش های نحوه استفاده از CSS را در HTML آموزش داده ام که در صورت تمایل میتوانید از طریق لینک زیر آن را مشاهده نمایید.

پیشنهاد میکنم آموزش نحوه استفاده از CSS در HTML را مشاهده نمایید.

Free-Learn

نرم افزار ساخت فایل CSS

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

حال باز این نرم افزارها میتونن خیلی حرفه ای باشن ( مثله Dreamweaver ) و هم میتونن ساده باشن ( مثله ++NotePad ) که هر کدوم به نسبت ، میتونن ویژگی های خاص خودشونو داشته باشن.

درسته که یک نرم افزار خیلی حرفه ای میتونه خیلی کمک کننده باشه حالا از هر نظر، ولی بنظره شخصی بنده مهم نیست که نرم افزار چقدر حرفه ای هست مهم اینه که شما چقدر تو کدنویسی حرفه ای هستید.

اگه از من میشنوید سعی کنید با همین نرم افزار ساده NotePad خوده ویندوز یا نهایت با نرم افزار ++NotePad کدنویسی کنید تا بتونید دستورات رو بصورت ریشه ای در ذهنتون بکارید.

چرا که وابستگی بیش از اندازه به نرم افزارهای حرفه ای باعث میشه شما تو کدنویسی ضعیف باشید، به گونه ای که اگه اون نرم افزار رو از شما بگیرن دیگه شما هیچ کاری نمیتونید کنید.

پیشنهاد میکنم یه نگاهی به ادیتور آنلاین زبان های HTML , CSS , JS فری لرن بیندازید و در صورت تمایل از آن برای کدنویسی استفاده نمایید.

Free-Learn

آموزش نحوه ایجاد فایل CSS در نرم افزار Notepad ویندوز

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

بطور کلی ما ۳ روش برای استفاده از CSS در درون یک صفحه وب داریم :

  • سی اس اس خطی ( با استفاده از صفت Style اینکارو میکنیم )
  • سی اس اس داخلی ( باید دستورات CSS در درون تگ Style قرار بگیرند )
  • سی اس اس خارجی ( باید دستورات CSS در درون یک فایل مجزا با پسوند css. قرار بگیرند )

من کاری به روش اول و دوم ندارم چون آموزشش رو اینجا گذاشتم میتونید مشاهده نمایید ولی با روش سوم یعنی ایجاد فایل CSS خارجی کار داریم.

ما میخوایم یک فایل مجزای CSS ایجاد نماییم که بتونیم این فایل CSS مجزا رو به فایل HTML مون متصل نماییم و عملا یک فایل HTML جدا و یک فایل CSS جدا داشته باشیم که دیگه لازم نباشه از دستورات CSS در درون فایل HTML استفاده نماییم.

باز میگم نرم افزارهای زیادی برای ایجاد فایل CSS وجود دارند ولی ما میتونیم از نرم افزار ساده NotePad خوده ویندوز استفاده نماییم، پس لطفا این نرم افزار رو اجرا نمایید.

سپس دستورات زیر رو درون نرم افزار کپی کنید : ( چه بهتر که خودتون تایپ کنید )

آموزش نحوه ایجاد فایل CSS

سپس باید فایل رو ذخیره یا Save کنیم، از منوی File بروی گزینه Save یا Save as کلیک نمایید.

آموزش نحوه ایجاد فایل CSS

سپس باید پسوند یا فرمت فایلمون رو مشخص کنیم، چون یک فایل CSS میخوایم پس باید پسوندش رو css. بزاریم.

آموزش نحوه ایجاد فایل CSS
برای مشاهده در اندازه اصلی لطفا روی تصویر کلیک نمایید

Free-Learn

آموزش نحوه ایجاد فایل CSS در نرم افزار ++Notepad

ابتدا این نرم افزار رایگان را از سایت های معتبر فارسی زبان دانلود نمایید و یا میتوانید با کلیک بروی این لینک آخرین نسخه این نرم افزار را از سایت رسمی آن دریافت نمایید.

نرم افزار را نصب و سپس اجرا نمایید، وقتی نرم افزار را اجرا میکنید بصورت پیش فرض خودش یک صفحه خالی به شما نمایش میده و شما فقط باید شروع کنید به کدنویسی زبانی که مدنظرتونه.

ولی خب اگه بخواید یک فایل جدید در این نرم افزار ایجاد نمایید، همانند تصویر زیر بروی شکل مشخص شده کلیک نمایید، همچنین میتوانید از منوی File بروی گزینه New کلیک نمایید.

برای مشاهده در اندازه اصلی کلیک نمایید

حال دستورات مورد نظرتون رو درون این نرم افزار قرار دهید. ( تایپ کنید یا کپی / پیست نمایید ) ، سپس برای ذخیره فایل مورد نظر، همانند تصویر زیر بروی شکل مشخص شده کلیک نمایید، یا میتوانید از منوی File بروی گزینه Save یا Save As کلیک نمایید.

برای مشاهده در اندازه اصلی کلیک نمایید

در پنجره ای که به شما نمایش داده می شود، باید فرمت فایل مون رو مشخص کنیم، یعنی باید مشخص کنیم که این فایل یک فایل CSS می باشد، پس همانند تصویر زیر در قسمت Save as type نوع فایل را انتخاب نمایید.

برای مشاهده در اندازه اصلی کلیک نمایید

وقتی شما فرمت فایل را انتخاب نمایید بصورت خودکار نرم افزار خودش پسوند css. رو به نام فایل تون اضافه میکنه، و دیگه تمام کافیه برای ذخیره نهایی بروی دکمه Save کلیک نمایید.

اگر پس از انتخاب فرمت فایل ، پسوند فایل مورد نظر نمایش داده نشد ، یعنی اگر mystyle.css نشد، شما باید بصورت دستی خودتون حتما css. را اضافه نمایید در غیراینصورت فایل شما یک فایل css نخواهد بود.

برای مشاهده در اندازه اصلی کلیک نمایید

Free-Learn

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

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

برای اینکار کافیه از تکه کد زیر در قسمت هِد ( HEAD ) صفحه HTML مون استفاده نماییم :

توجه داشته باشید که در قسمت href باید آدرس محل فایل CSS را بصورت کامل و دقیق وارد نمایید، لطفا به مثال زیر توجه نمایید.

امتحان کنید

Free-Learn

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

در این بخش به پایان آموزش نحوه ایجاد فایل CSS رسیدیم، ممنون از همراهیتون و لطفا در ادامه و در بخش های بعدی با بنده همچنان همراه باشید.

دریافت PDF یا پرینت این مطلب