آموزش CSS

سی اس اس ( CSS ) برای مدیریت ظاهر و قالب یک صفحه وب استفاده می شود. استفاده از سی اس اس بسیار ساده و آسان است .

CSS مخفف "Cascading Style Sheet" است . این آموزش هر سه نسخه CSS2 , CSS1 و CSS3 را پوشش می دهد و درک کاملی از CSS شامل اصول اولیه تا مفاهیم پیشرفته را ارائه می دهد.

چرا CSS یاد بگیریم؟

Cascading Style Sheets که به آن CSS می گویند ، یک زبان طراحی است که برای قدرتمند کردن و ساده کردن فرآیند زیباسازی طراحی صفحات وب ایجاد شده است.

برای این که تبدیل به یک طراح سایت خوب شویم و بتوانیم سایت هایی با ظاهر قابل قبول و زیبا طراحی کنیم ، ضرورت دارد CSS را یاد بگیریم

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

برنامه "سلام بر همگی" با استفاده از CSS

فقط برای اینکه کمی با ظاهر و ساختار CSS آشنا شوید ، یک کد CSS به اسم "سلام بر همگی" را اینجا مشاهده می کنید :

<!DOCTYPE html>
<html dir="rtl">
   <head>
      <title>برنامه سلام بر همگی در سی اس اس</title>
      <style>
      h1 {
         color: #36CFFF; 
      }
      </style>
   </head>	
   <body>
      <h1>سلام بر همگی</h1>
   </body>	
</html>

مثال بالا در مرورگر به شکل زیر نمایش داده می شود

برنامه hello world در css

کاربردهای CSS

همانطور که قبلا ذکر شد، CSS یکی از پرکاربردترین زبان‌های استایل دهی و مدیریت شکل و ظاهر در وب است. می خواهیم تعدادی از کاربردهای اصلی سی اس اس را باهم بررسی کنیم :

CSS باعث صرفه جویی در زمان طراحی سایت می شود - می توانید یک بار کدهای CSS را بنویسید و سپس از همان کد در چندین صفحه HTML استفاده مجدد کنید. می توانید برای هر عنصر HTML یک کد سی اس اس بنویسید و در هر صفحه که از آن عنصر استفاده شده ، ظاهر و قالب آن عنصر بر اساس کد سی اس اس نمایش داده شود.
صفحات سریع‌تر بارگذاری می‌شوند - اگر از CSS استفاده می‌کنید، در هنگام اولین نمایش سایت فایل های سی اس اس شما در مرورگر کاربر دانلود و اصطلاحا کش می شود و در هنگام رفتن از صفحه ای به صفحه دیگر یا بازدید مجدد نیاز به دانلود نیست و سایت سریع تر بارگذاری می شود .همچنین با توجه به استفاده یک فایل برای چندین صفحه ، تکرار کد به حداقل می رسد . بنابراین کد کمتر به معنای زمان دانلود سریعتر است.
تعمیر و نگهداری آسان - برای ایجاد یک تغییر کلی، به سادگی فایل سی اس اس را تغییر دهید، همه عناصر در تمام صفحات وب به طور خودکار به روز می شوند.
امکانات و ویژگی های بیشتر - سی اس اس برای شما امکانات بسیاری را برای استایل دهی به عناصر HTML فراهم می کند بطوریکه بدون استفاده از سی اس اس شما نمی توانید بسیاری از قالب ها با ظاهر مناسب و زیبا برای صفحات HTML بسازید
سازگاری صفحه وب با انواع دستگاه ها - شما با استفاده از کدهای سی اس اس می توانید وب سایتی طراحی کنید که در هر دستگاه متناسب با ابعاد آن نمایش داده شود . در اصطلاح فنی به این ویژگی ، ریسپانسیو یا واکنشگرا بودن سایت می گویند .
استانداردهای جهانی وب - امروزه تعدادی از ویژگی های HTML منسوخ شده اند و توصیه می شود از CSS بعنوان جایگزین استفاده کنید. بنابراین ایده خوبی است که از CSS در تمام صفحات HTML استفاده کنید تا آنها را با مرورگرهای آینده سازگار کنید.

مخاطبان

این آموزش CSS هم به دانش پژوهان و هم به متخصصانی که می خواهند وب سایت یا وبلاگ شخصی خود را زیبا و جذاب تر کنند، کمک می کند.

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

پیشنیاز آموزش

آشنایی با:

استفاده از ویرایشگر متن
نحوه ایجاد فولدر و فایل
جستجو در اینترنت با استفاده از مرورگرهایی مانند Chrome , Internet Explorer یا Firefox.
توسعه صفحات وب ساده با استفاده از HTML

اگر با HTML آشنایی ندارید ، توصیه می کنم در ابتدا حتما آموزش HTML در سایت ما را مطالعه کنید .

شروع دوره آموزش CSS