شروع کار و راه اندازی IDE و ویرایشگر CSS

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

فهرست مطالب

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

ویرایشگر زبان CSS

در مطلب شروع و راه اندازی زبان HTML در مورد نحوه ساخت فایل html توضیح دادیم و ساخت فایل css بی شباهت به آن نیست.

برای شروع، یک فایل html می سازیم.

به این صورت عمل کنید:

یک پوشه جدید بسازید و درون آن کلیک راست کرده و گزینه New > Text Document را انتخاب کنید تا یک فایل با فرمت txt ساخته شود.

سپس روی فایل ساخته شده کلیک راست کرده و با استفاده از گزینه Rename نام و فرمت فایل را به index.html تغییر دهید.

نکته: در صورتی که امکان تغییر فرمت فایل میسر نمی باشد از سربرگ View در ویندوز گزینه File name extensions را فعال کنید.

حالا فایل html ساخته شده را با برنامه Notepad ویندوز باز کرده و کد زیر را درون آن قرار داده سپس ذخیره کنید.

کد:

<!DOCTYPE html>
<html>
  <head>
    <title>CodeUni.Ir</title>
  </head>
  <body>
          
  </body>
</html>

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

نکته: کدهای css را باید درون تگ style قرار داد.

کد:

<!DOCTYPE html>
<html>
  <head>
    <title>CodeUni.Ir</title>
      <style>
        /* CSS Code */
      </style>
  </head>
  <body>

  </body>
</html>

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

طبق روش ساخت فایل html، درون همان پوشه کلیک راست کرده و گزینه New > Text Document را انتخاب کنید تا یک فایل با فرمت txt ساخته شود. بر روی فایل ساخته شده کلیک راست کرده و با استفاده از Rename نام و فرمت فایل را به style.css تغییر دهید.

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

کد:

<link rel="stylesheet" href="style.css" />

آدرس فایل css را در صفت href قرار می دهیم.

به عنوان مثال اگر فایل style.css را در پوشه theme قرار دهیم. فراخوانی به این صورت خواهد بود:

<link rel="stylesheet" href="/theme/style.css" />

کدهای ما به چه شکل شد؟

کد فایل index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>CodeUni.Ir</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>

  </body>
</html>

کد فایل style.css:

/* CSS Code */

چند مورد از IDE و ویرایشگر های سی اس اس:

برای سهولت و سرعت بیشتر نیاز به نرم افزاری داریم تا ابزارهای لازم برای نوشتن زبان css را فراهم کند.

IDE مخفف Integrated Development Environment که ترجمه آن به زبان فارسی محیط توسعه یکپارچه می شود این امکانات را فراهم می کند.

چند مورد از نرم افزار های مناسب این زبان:

  • NetBeans
  • Dreamweaver
  • Sublime Text
  • WebStorm
  • Visual Studio Code

معرفی مطالب در این زمینه