css

ایجاد فایل css

ایجاد فایل css

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

پس تا انتها با دنیای میلاد وردپرس باشید و لذت ببرید از این پست…

ایجاد فایل css
ایجاد فایل css

بیشتر بدانید:

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

 

آنچه در این جلسه میخوانید : 

  • 1 فایل CSS
  • 2 نرم افزار ساخت فایل CSS
  • 3 آموزش نحوه ایجاد فایل CSS در نرم افزار Notepad ویندوز
  • 4 آموزش نحوه ایجاد فایل CSS در نرم افزار ++Notepad
  • 5 نحوه متصل کردن فایل CSS به فایل HTML

فایل CSS

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

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

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

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

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

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

بیشتر بخوان بیشتر بدان  نمایش موقعیت کنونی کاربران در وبسایت وردپرس بدون افزونه

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

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

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

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

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

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

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

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

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

بیشتر بخوان بیشتر بدان  قالب وردپرس با سئوی بالا

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بیشتر بخوان بیشتر بدان  روش های کاربردی برای رفع خطای عدم بازسازی رمز عبور در وردپرس
create_cssfiles_in_notepadplus-3
create_cssfiles_in_notepadplus-3

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

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

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

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

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

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

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

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

باعث افتخار است که با کامل ترین مرجع وردپرس در ایران زمین همراه شدید.

موفق باشین… 😉

 

Click to rate this post!
[Total: 1 Average: 5]
نوشته ایجاد شد 325

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نوشته های مرتبط

متنی که میخواهید برای جستجو وارد کرده و دکمه جستجو را فشار دهید. برای لغو دکمه ESC را فشار دهید.

بازگشت به بالا