تعداد بازدید این مطلب: ۳۱۲

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

اجزای تشکیل دهنده صفحات وب

تمام صفحات وب از ۳ جزء زیر تشکیل شده است:

  • Content (محتوا)

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

  • Presentation (نمایش)

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

  • Behavior (رفتار)

این قسمت با کد نویسی زبان JavaScript انجام می شود که به طور کامل در مقاله ای جداگانه به آن می پردازیم.

 

CSS چیست؟

 

CSS | بی لرن

 

CSS یک زبان برنامه نویسی ظاهری است که مخفف کلمات Cascading Style Sheets می باشد، که در زبان فارسی به آن استایل صفحات آبشاری گفته می شود. این زبان مجموعه ای از دستورات برنامه نویسی می باشد که برنامه نویس می تواند به وسیله آن، شکل و خصوصیات ظاهری تمام عناصر صفحات وب ‌را مشخص و تغییر دهد. برای ساخت بدنه و عناصر صفحات وب از HTML استفاده می کنیم و برای مشخص کردن ویژگی های هر عنصر در صفحات وب از کدهای css استفاده می کنیم. این دستورات دارای قابلیت ارث بری از والد خود (آبشاری) می باشد که برنامه نویس با این قابلیت می تواند همان تغییراتی که بر روی عنصر ها اعمال کرده است را بر روی فرزندان آن عنصر نیز اعمال نماید. 

 

CSS چه کاربردی دارد؟

 

CSS چه کاربردی دارد؟ | بی لرن

 

دستورات CSS دارای کاربردهای بسیار جذاب و کاربردی می باشد که در این قسمت به معرفی آنها می پردازیم.

  • جداسازی اطلاعات محتوا از اطلاعات ظاهری
  • طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی
  •  ایجاد فرمت ظاهری زیباتر، راحت‌تر 
  • سفارشی سازی وب سایت خود و نمایش آن
  • مشخص کننده ویژگی عناصر صفحات وب
  • صرفه جویی در زمان طراحی و حجم کدهای سایت
  • افزایش سرعت پردازش
  • پشتیبانی ۹۹٪ مرورگرها از CSS
  • عملکرد بالای css در مرورگرها 
  • تنظیم نمایش صفحه برای انواع مختلف دستگاه

 

معرفی نسخه های CSS 

CSS دارای ۴ نسخه CSS۴ ،CSS۳،CSS۲ ،CSS۱ می باشد که هر کدام دارای ویژگی هایی دارند.

CSS1

این نسخه اولین نسخهcss می باشد که در سال ۱۹۹۶ معرفی شد که دارای ویژگی های زیر می باشد و استفاده از آن پیشنهاد نمی شود.

  • افزودن امکاناتی همچون سبک و تنظیم برای متن
  • دارای قابلیت تغییر رنگ متن و پس زمینه متن و دیگر خصوصیات متن
  • امکان تنظیم Alignment یا فاصله بین کلمات و سطرها در متن 
  • امکان اضافه کردن Border  (کادر)، Margin (حاشیه) و Padding (لایه بندی) در صفحات وب
  • دارای قابلیت کلاس بندی ویژگی‌ها (Attributes)

CSS2

این نسخه در ۱۹۹۸ معرفی شده است و دارای ۲ اصلاحیه CSS 2.1 و CSS 2.2 می باشد که استفاده از این نسخه پیشنهاد نمی شود.

  • دارای قابلیت تنظیم جایگاه اجسام به سه روش ثایت، متغیر و وابسته به اجسام دیگر
  • دارای قابلیت شناخت انواع فایل‌های چند رسانه ای
  • دارای قابلیت تنظیم راست چین بودن نوشته ها

CSS3

این نسخه در سال ۱۹۹۹ منتشر گردید و باعث ایجاد تحول زیادی در این زبان برنامه نویسی شد.

  • دارای ساختار ماژولی
  • امکان استفاده از تصاویر در پس زمینه
  • دارای قابلیت اضافه کردن فرم‌های چند ستونی و …

CSS4

این نسخه، توسعه یافته و پیشرفته نسخه CSS3 می باشد که علاوه بر ویژگی های CSS3 دارای ویژگی های زیر می باشد.

  • قابلیت Background یا همان پس زمینه
  • قابلیت Image value
  • قابلیت Selectors یا همان قابلیت انتخاب 

 

پیش نیازهای یادگیری CSS

برای یادگیری و استفاده از CSS باید ۳ پیش نیاز زیر را یاد بگیرید.

  • یادگیری کامل زبان برنامه نویسی HTML
  • یادگیری و تسلط بر مبحث پدر ـ فرزند (parent-child)
  • تسلط و یادگیری بر مفهوم عنصر و صفت (element, attribute)

 

ساختار یا بدنه CSS  

ساختار CSS از ۲ قسمت نام عنصر یا Selector و بخش اعلان یا Declaration تشکیل شده است.

نام عنصر (Selector)

قسمت معرفی یا صدا کردن عنصر صفحه وب می باشد که در HTML ساخته شده است.

بخش اعلان(Declaration)

این قسمت محل اختصاص دادن ویژگی و مشخصات به عنصر مورد نظر می باشد.

در تصور زیر h1 نام عنصر می باشد که متغیر می باشد و در میان علامت {} ویژگی و خصوصیت عنصر را با مقدار مورد نظر نوشته می شود. فراموش نکنید که نام عنصر متغیر می باشد و هر عنصر دارای ویژگی و خصوصیت مختص خود می باشد.

ساختار css | بی لرن

روش های اضافه کردن کدهای CSS به HTML همراه با اولویت آنها

برای استفاده و اضافه کردن کدهایCSS به HTML روش های مختلفی همچون inline style، internal style و External Style می باشد.

روش inline style

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

inline style | بی لرن

روش internal style

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

internal style | بی لرن

روش External Style

روش External Style که به آن اتصال خارجی گفته می شود، برای اتصال فایل CSS به کدهای HTML مورد استفاده قرار می گیرد. به اینصورت که فایلcss مورد نظر خود را با تگ های <link> با ویژگی href این تگ به html متصل نمایید. به شکل زیر توجه نمایید.

External Style | بی لرن

بنر آموزش رایگان html و css | بی لرن

 

اعمال دستورات بر روی یک عنصر واحد و یک گروه به چه صورت می باشد؟

برای اعمال ویژگی ها و دستورها به عناصر همانند ساختار CSS عمل می کنید. اما امکان دارد که بخواهید دستورات یا ویژگی ها را روی یک عنصر خاص یا یک گروه از عناصر اعمال نمایید، که در اینصورت باید به روش های زیر عمل نمایید:

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

در این روش باید همانند شکل زیر برای عنصر مورد نظر خود در کدهای HTML یک صفت id و نام  تعریف نمایید تا در زمان اعمال دستورات در CSS بتوانید با قرار دادن علامت “#” آن صفت را فراخوانی کنید و دستورات را تنها بر روی آن اعمال نمایید.

ID | بی لرن

 

 

 

اعمال دستورات بر روی یک گروه از عناصر

برای اعمال دستورات بر روی یک گروه از عناصر در html، یک صفت Class و یک نام تعریف نمایید و در قسمتcss با قرار دادن علامت “.” قبل از صفت Class آن را فراخوانی نمایید و دستورات را روی گروه مورد نظر اعمال نمایید.

 

class | بی لرن

 

سازگاری CSS ‌یعنی چه؟  

سازگاری بدین معنی است که کدهایی که شما در css طراحی می کنید با چند درصد از مرورگرهای فعلی (از مرورگرهای قدیم تا جدید) سازگار می باشد و دستورات را به درستی اجرا می کند.

 

چگونه مرورگرها از CSS پشتیبانی می کنند؟

 

مرورگرها | بی لرن

 

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

 

مزایا و معایب CSS 

CSS هم همانند دیگر زبان های برنامه نویسی، دارای مزایا و معایب می باشد.

 

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

 

پشتیبانی شدن از سمت مرورگرها

 

سازگاری بیشتر در طراحی

 

کد سبک

 

فرمت ظاهری زیباتر، راحت ‌تر  

 

سخن پایانی

در این مقاله به معرفی کامل زبان CSS از قبیل ساختار، کاربرد، پیش نیاز های لازم برای یادگیری، روش های اضافه کردن این زبان به HTML، مزایا و معایب و دیگر نکات کاربردی این زبان پرداخته شده است.

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