همه آنچه باید در مورد CSS بدانید!

همه آنچه باید در مورد CSS بدانید!

خلاصه

CSS مخفف Cascading Style Sheets است و زبانی است که برای استایل سازی ارائه بصری صفحات وب استفاده می شود. به کمک این زبان می توان به مرورگرها گفت که چگونه بخش های مختلف یک صفحه وب را ارائه دهند. در این مقاله مروری بر این زبان و تفاوت آن با HTML آورده شده است.

معرفی CSS

مخفف Cascading Style Sheets است و زبانی است که برای استایل سازی ارائه بصری صفحات وب استفاده می شود. این زبانی است که به مرورگرها می گوید چگونه بخش های مختلف یک صفحه وب را ارائه دهند.

هر مورد یا عنصر در یک صفحه وب بخشی از سندی است که به زبان نشانه گذاری نوشته شده است. در بیشتر موارد، HTML زبان نشانه گذاری است، اما زبان های دیگری مانند XML نیز در حال استفاده هستند.

همه آنچه باید در مورد CSS بدانید!

چه کسی CSS را اختراع کرده است؟

طبق ویکی پدیا، تولد این زبان عمدتا به Håkon Wium Lie نروژی نسبت داده می شود، که در سال 1994 به دنبال ایجاد یک صفحه استایل استاندارد برای شبکه جهانی وب بود.

 

اولین سایتی که آقای Lie، CSS را روی آن آزمایش کرد، مرورگر وب Arena بود. Lie از ابتدای خلق خود به ایجاد تیم های CSS1 ، CSS2 و RFC 2318 با تیم برنرز لی و رابرت کیلیاو پرداخت. این زبان در دهه اول وجود خود (1994 – 2004)، با تمام مشخصات خود به یک استاندارد وب مستقر تبدیل شد که تا حد زیادی بر ظاهر و دسترسی به شبکه جهانی وب تاثیر می گذارد.

همه آنچه باید در مورد CSS بدانید!

استانداردهای وب موضوعی است که برای Lie مهم است. از زمان ارائه این زبان وی از بازیکنان اصلی فناوری مانند مایکروسافت و سایر مرورگرها درخواست کرده است تا از استانداردهای رایج وب پشتیبانی کنند و همچنان به توسعه استفاده از CSS برای چاپ وب و صفحه بندی روی صفحه ادامه می دهد.

 

تفاوت بین CSS1 ، CSS2 و CSS3 چیست؟

در نسخه اول (1996) به کاربر این امکان را می دهد که استایل و اندازه قلم را انتخاب کرده و رنگ متن و پس زمینه را تغییر دهد.

در نسخه دوم (1998) از قابلیت هایی برخوردار است که به کاربر اجازه می دهد صفحه آرایی را طراحی کند.

در نسخه سوم (1999) به کاربر این امکان را می دهد تا ارائه هایی را از اسناد ایجاد کند و از طیف گسترده ای از قلم ها از جمله موارد موجود در Google و Typecast را انتخاب کند. به طور منحصر به فرد، نسخه سوم به کاربر اجازه می دهد تا حاشیه های گرد را ترکیب کند و از چندین ستون استفاده کند.

 

CSS با HTML چه تفاوتی دارد؟

اولین چیزی که باید هنگام نزدیک شدن به مبحث CSS درک کنید این است که چه موقع باید از یک زبان استایل مانند این استفاده کنید و چه زمانی از یک زبان نشانه گذاری مانند HTML استفاده کنید.

 

  • تمام محتوای مهم وب سایت باید با استفاده از یک زبان نشانه گذاری مانند HTML به وب سایت اضافه شود.
  • ارائه محتوای وب سایت باید توسط یک زبان استایل تعریف شود.

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

همه آنچه باید در مورد CSS بدانید!

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

 

سینتکس CSS

سینتکس این زبان شامل Selector(انتخابگر)ها، Property  (خصوصیات)، Value(مقادیر)، Declaration(اعلان )ها، Declaration block بلوک های اعلامیه است. در ادامه هر کدام از این مفاهیم توضیح داده شده اند.

  • Selector: یک قطعه کد است که برای شناسایی عنصر صفحه وب یا عناصری که قرار است تحت تاثیر استایل ها قرار بگیرند استفاده می شود.
  • Property: جنبه ای از عنصری است که قرار است تحت تاثیر قرار گیرد. به عنوان مثال رنگ، padding، حاشیه و پس زمینه از خصوصیات این زبان هستند که بیشتر مورد استفاده قرار می گیرند.
  • value: برای تعریف یک ویژگی از مقدار استفاده می شود. به عنوان مثال ممکن است به خاصیت رنگ، مقدار قرمز اینگونه انتصاب داده شود: color: red;.
  • Declaration: به مجموعه یک خاصیت و یک مقدار اعلامیه گفته می شود.
  • declaration block: در بسیاری از موارد، چندین اعلامیه برای یک انتخابگر اعمال می شود. بلوک اعلان اصطلاحی است که برای اشاره به همه اظهارات اعمال شده بر یک انتخابگر استفاده می شود.

 

با CSS کاربر چه کارهایی می تواند انجام دهد؟

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

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