برنامه نویسیسی اس اس (CSS)طراحی سایتفرانت اند (Front-end)

سی اس اس (CSS) چیست و چه کاربردهایی دارد؟ | بررسی ارتباط CSS و HTML

اگر ‌بخواهید در مسیر برنامه نویسی تحت وب قدم بردارید، اولین نام‌هایی که به آن‌ها برخورد ‌می‌­کنید HTML و CSS است. حال اگر دانش کافی از HTML دارید و ‌می‌خواهید بدانید که CSS چیست و چه کاربردی دارد؟ چرا باید از سی اس اس استفاده کنیم؟ و نسخه‌ها و انواع CSS کدام‌اند؟ با ما در این مقاله همراه باشید، چون در ادامه این مقاله به یررسی کامل سی اس اس می‌پردازیم.

CSS چیست؟

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

CSS چیست؟
CSS چیست؟

 

CSS و HTML مکمل و جدا‌ناپذیر

همانطور که در مقاله HTML چیست؟ به آن اشاره کردیم، اچ تی ام ال اسکلت و چارچوب یک صفحه وب را تشکیل ‌می‌دهد و CSS نقش دادن جلوه و ظاهر به صفحات را دارد. حال آیا ‌می‌توانیم از یکی از آن دو استفاده نکنیم؟ جواب قطعاً نه است. دلیل آن هم کاملا واضح است اول از همه ما به HTML برای به وجود آمدن صفحات نیاز داریم. سپس اگر از CSS استفاده نکنیم، صفحه­ وب ما نه جذاب و زیبا خواهد بود نه نظم لازمه را دارد و به شما قول ‌می‌دهم هیچ کس در آن صفحه ۱۰ ثانیه هم نمی‌ماند.

CSS و HTML مکمل و جدا‌ناپذیر
CSS و HTML مکمل و جدا‌ناپذیر

 

چرا باید از سی اس اس استفاده کنیم؟

بهترین زبان استایل‌دهی برای صفحات وب CSS است، موارد زیر برخی از مهم‌ترین دلایل استفاده از CSS است:

چرا باید از سی اس اس (CSS) استفاده کنیم؟
چرا باید از سی اس اس (CSS) استفاده کنیم؟

 

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

 

تاریخچه CSS و انواع آن

سی اس اس اولین بار توسط Håkon Wium Lie در سال ۱۹۹۴ مطرح شد. در ابتدا از CSS زیاد استقبال نشد و همچنین در آن زمان چندین زبان مشابه نیز موجود بودند و به رقابت ‌می‌پرداختند. در نهایت در سال ۱۹۹۶ کنسرسیوم جهانی وب (W3C) زبان CSS1 را پیشنهاد داد؛ البته این موضوع که CSS1 توسط Bert Bos توصیه شده بود خیلی تاثیر گذار بود. برت بوس جزو نویسندگان CSS 1 بود و از او به عنوان یکی از خالقان سی اس اس یاد ‌می‌شود.

 

CSS 1

اولین بار W3C در تاریخ ۱۷ اکتبر ۱۹۹۶ سی اس اس ۱ را پیشنهاد داد. توسعه دهندگان اصلی آن Hakon Wium Lie و Bert Bos شناخته ‌می‌شوند. از جمله قابلیت‌های این نسخه:

  • ویژگی‌های فونت مانند نوع متن ، اهمیت و تأکید
  • رنگ متن، پس‌ز‌مینه و سایر عناصر
  • ویژگی‌های متنی مانند فاصله بین کلمات، حروف و خطوط متن
  • ترازبندی متن، تصاویر، جداول و سایر عناصر
  • Margin، border، padding و قرارگیری بیشتر عناصر
  • شناسایی منحصر به فرد و طبقه بندی عمو‌می گروه­های صفت(attributes)

امروزه W3C دیگر CSS 1 را پیشنهاد نمی‌کند.

 

CSS 2

سی اس اس۲ در سال ۱۹۹۸ توسط W3C منتشر شد. CSS 2 نسبت به CSS 1 تفاوت‌های زیر را دارا بود:

  • موقعیت مطلق(Absolute)، موقعیت نسبی(relative)، تثبیت جایگاه عناصر در صفحه(fixed positioning of elements) و هنگا‌می که دو تگ روی یکدیگر قرار ‌می‌گیرند کدام رو باشد و کدام زیر (z-index)
  • مفهوم انواع رسانه‌ها، پشتیبانی از aural style sheets
  • متن دوطرفه و ویژگی‌های جدید فونت مانند سایه‌ها.

امروزه W3C دیگر CSS 2 را پیشنهاد نمی‌کند.

 

CSS 2.1

این نسخه از CSS یک به روز ‌رسانی برای نسخه ۲ به حساب ‌می­آید که صرفاً خطاها و باگ‌های موجود را برطرف کرده است. W3C فرآیند استانداردسازی سختی دارد که گریبان‌گیر این نسخه شد. برای اولین بار در سال ۲۰۰۴ در ‌میان پیشنهاد کاندیدا قرار گرفت و در سال ۲۰۰۵ برای بررسی بیشتر بازگردانده شد. دوباره در سال ۲۰۰۷ به عنوان کاندید، پیشنهاد شد و در سال ۲۰۰۹ دو بار به روز شد، بخاطر به روز رسانی‌ها دوباره در سال ۲۰۱۰ به بخش پیش‌نویس آخر برگردانده شد. در نهایت در سال ۲۰۱۱ پس از بررسی توسط کمیته مشورتی W3C به عنوان پیشنهاد W3C برای عموم منتشر شد.

 

CSS 3

سی اس اس ۳ در سال ۱۹۹۹ منتشر شد و در طی سالیان بروز­رسانی تفاوت‌های زیر را رقم زد:

  • بر خلاف CSS 2 که تنها یک سند است و ویژگی‌های مختلفی را تعریف ‌می­کند، CSS 3 به چندین سند جداگانه به نام ماژول (Modules) دسته‌بندی ‌می‌­شود. هر ماژول قابلیت‌های جدیدی را اضافه ‌می‌کند یا ویژگی‌های موجود از قبل در سی اس اس ۲ را بهبود ‌می‌بخشد.
  • سرعت CSS 3 از سرعت CSS 2 بیشتر است، وقتی مباحث سئو در وبسایت را در نظر بگیریم این فاکتور بسیار مهم است.
  • با استفاده از سی اس اس۱ یا ۲ یا ۲.۱ نمی‌توان صفحات ریسپانسیو(صفحه­ای responsive است که با تغییر سایز صفحه یا مرورگر انسجام و زیبایی خود را از دست ندهد) ساخت اما این امکان در ورژن۳ فراهم شده است.
  • سی اس اس ۳ امکان ایجاد انیمیشن سه بعدی (animation) و تحول‌های سه بعدی (transform) را فراهم کرده که باعث زیبایی و جذب مخاطب بیشتری ‌می‌شود، این امکان در نسخه‌های سابق وجود نداشت.
  • در CSS 3 طراحان ‌می‌توانند از فونت‌های ویژه‌ای مانند Google fonts و Typecast استفاده کنند.
  • در سی اس اس ۲ انتخابگر‌ها (selectors) ساده هستند اما در نسخه ۳ بصورت دنباله‌ای از انتخابگر‌های ساده‌اند.
  • در CSS 3 امکان گرد کردن حاشیه‌ها (border) فراهم شد.
  • این نسخه پشتیبانی بیشتری از انواع سیستم‌های رنگی را دارا است.
  • در CSS 3 ما با آزادی عمل بیشتری ‌می‌توانیم متن‌ها را بخش بندی کنیم و در ستون‌های مُجزا قرار دهیم تا مخاطب خوانایی بهتری را تجربه کند.

CSS 3 آخرین نسخه‌ی رسمی CSS است، هرچند حرف‌های ضد و نقیضی درباره نسخه۴ این زبان زده ‌می­شود اما هنوز رسماً W3C در این باره حرفی نزده است. در اینترنت برای سی اس اس کتابخانه‌هایی موجود است، برای مثال W3.CSS که برای سایت معروف w3schools.com است به نسخه ۴.۱۵ رسیده، نسخه‌های این مدل کتابخانه‌ها را با نسخه‌های اصلی CSS اشتباه نگیرید.

 

پشتیبانی مرورگر‌ها از CSS

امروزه تما‌می مرورگر‌ها از CSS پشتیبانی کاملی دارند و برنامه نویس‌ها جای هیچ نگرانی برای استفاده از CSS ندارند. در ابتدای ظهور CSS تنها مرورگری که پشتیبانی خوبی از خود نشان نداد اینترنت اکسپلورر بود؛ البته Internet Explorer  نیز از نسخه ۴ پشتیبانی خود را از سی اس اس شروع کرد. برای بررسی دقیق و تک تک ویژگی‌های(property) CSS ‌می‌توانید از سایت w3schools.com استفاده کنید.

 

چگونه از CSS استفاده کنیم؟

وقتی به زبان CSS کد ‌می‌زنیم در حالت کلی ۳ بخش داریم:

  • Selector یا همان انتخاب کننده که ما در این بخش انتخاب ‌می‌کنیم که ‌می‌خواهیم چه قسمتی از HTML را تحت تاثیر قرار دهیم.
  • Property یا همان ویژگی که در این جا انتخاب ‌می‌کنیم که آن قسمت انتخاب شده از چه لحاظ مورد تغییر قرار گیرد، مثلا برای تغییر رنگ متن یک پاراگراف از پراپرتی color استفاده ‌می­کنیم.
  • Value یا مقدار که در این بخش مقدار یا نوع property را انتخاب ‌می‌کنیم مثلا برای تغییر رنگ متن به قرمز از مقدار red و یا از انواع سیستم رنگ‌ها مانند RGB و یا HEX استفاده ‌می‌کنیم.

پاراگراف ما با این کد به رنگ قرمز در ‌می‌آید:

 

چگونگی اضافه کردن CSS به HTML

ما برای اضافه کردن سی اس اس در کل ۳ روش داریم:

چگونگی اضافه کردن CSS به HTML
چگونگی اضافه کردن CSS به HTML
  1. درون‌خطی
  2. داخلی
  3. خارجی

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

روش درون‌خطی (Inline style)

در این روش ما کد‌های CSS را درون تگ‌های HTML توسط صفت style ‌می‌نویسیم و باید این کار را برای تما‌می تگ‌ها انجام بدهیم. مشکلات این روش زمانی نمایانگر ‌می­شود که پروژه ما بزرگ شود، برای اعمال تغییرات باید تک تک عناصر را عوض کنیم. این روش از نظر نظم و سرعت عمل برای اصلاح ضعیف است و استفاده از آن پیشنهاد نمی‌شود اما اینطور هم نیست که اصلا از آن استفاده نکنیم!

 

روش داخلی (Internal style)

در این روش ما تما‌می کد‌ها را با استفاده از تگ <style> در درون تگ <head> اچ تی ام ال ‌می‌نویسیم. این روش ضعف روش قبل را ندارد و معمولا برای صفحات خاص (صفحاتی که قرار است با بقیه‌ی صفحات سایت ما متفاوت باشد) بکار ‌می­رود.

 

روش خارجی (External style)

این بار ما کد‌هایمان را در یک صفحه متفاوت با پسوند .css ایجاد ‌می‌کنیم و سپس توسط تگ <link> در درون تگ <head> فایل سی اس اس خود را به  HTML اضافه ‌می‌کنیم. در این روش ما بهترین بازدهی کد‌نویسی، نظم و سرعت عمل را در اختیار داریم. در اکثر پروژه‌های بزرگ ما از این روش استفاده ‌می‌کنیم.

 

اگر از هر سه روش برای یک عنصر استفاده کنیم اولویت با کدام است؟
  1. روش inline style
  2. روش External style و Internal style (هر کدام که در تگ head پایین‌تر نوشته شده باشد آن اعمال خواهد شد)
  3. پیش‌فرض مرورگر‌­ها

 

بررسی SASS ،LESS و تفاوت آن­ها با CSS

هنگامی که پیرامون CSS فعالیت ‌می‌کنیم به نام‌هایی مانند SASS و یا LESS برخورد ‌می‌کنیم. حال اگر ‌می‌خواهید بدانید که مفهوم آن‌ها چیست و چه تفاوتی با CSS دارند ادامه این مقاله شما را در این راه یاری ‌می­‌کند.

 

SASS چیست؟

SASS یک پیش پردازنده (pre-processor) برای CSS است و یا به زبانی دیگر یک نسخه توسعه یافته CSS است. SASS که مخفف “Syntactically Awesome Style Sheets” است در سال ۲۰۰۶ توسط Hampton Catlin طراحی و توسط Natalie Weizenbaum توسعه داده شد.

SASS چیست؟
SASS چیست؟

پیش پردازنده CSS چیست؟ pre-processor یک زبان اسکریپت نویسی (scripting language) است که به برنامه نویس‌ها این اجازه را ‌می‌دهد تا کد‌ها را به یک زبان بنویسند سپس آن را به زبان CSS تبدیل کنند.

SASS با استفاده از زبان Ruby از سمت سرور پردازش ‌می­‌شود، اما ‌می­‌توان با استفاده از یک Precompiler LibSass آن را به زبان‌های دیگری تجزیه و از زبان روبی جدا کرد.

 

مزایای SASS

  • کد­های تمیز‌تر، سریع‌تر و کمتری نسبت به سی اس اس داریم.
  • از بقیه پیش پردازنده‌ها و به نظر بعضی حتی از خود CSS قدرتمندتر و پایدارتر است.
  • با تمام نسخه‌های CSS سازگار است پس ‌می‌توانیم از هر کتابخانه CSS موجود استفاده کنیم.
  • در این پیش پردازنده ما ‌می‌توانیم از عملیات‌هایی مانند اضافه کردن متغییر‌ها (variables)، قوانین تو در تو(nested rules)، mixins، inline imports، operators، extend/inheritance و غیره استفاده کنیم که در CSS نمی‌توانستیم.
  • آزادی عمل برای برنامه نویسان بسیار مهم است، از آن جا که SASS یک زبان open-source است پس به دل برنامه ­نویسان ‌می‌نشیند.
  • در آن ‌می‌توانیم از توابع مفید مختلفی مانند توابع‌ای برای تغییر آسان رنگ یا متغییر‌ها و توابع ریاضی استفاده کنیم.
  • ویژگی‌های پیشرفته‌ای مانند دستورالعمل کنترل کتابخانه را دارا است.
  • فریم ورک‌های زیادی مانند Compass، Bourbon، Susy و… را دارد.
  • بیش از ۱۴ سال پشتیبانی فعال تیم سازنده به معنای اطمینان و بلوغ این پیش پردازنده است.
  • بازخورد‌های SASS متنوع است، اما اکثر توسعه دهندگان خوب، آن را انتخاب ‌می­کنند.

 

معایب SASS

  • پیش پردازنده‌ها یک مرحله تدوین و اشکال زدایی دارند، شاید اول خوب بنظر برسد اما این اشکال زدایی از برنامه نویسی هم سخت تر است و یک نقطه ضعف بزرگ است.
  • احتمال دارد فایل SASS ما خیلی کوچک باشد اما پس از کامپایل به CSS فایلِ بزرگی به ما دهد.
  • برخی از مزایا مانند Inspector داخلی مرورگر‌­ها را از دست ‌می­دهیم.
  • اگر مستقیم به سراغ یادگیری SASS برویم در نوشتن کد در خود CSS به مشکل ‌می­خوریم.
  • چون به کامپایلر نیاز داریم پس یک مرحله اضافی داریم.

در ساس ما برای فایل خود دو پسوند .sass و .scss ‌می­توانیم داشته باشیم، حال به این ‌می‌پردازیم که کدام بهتر است؟ و یا از کدام استفاده کنیم؟

 

SCSS چیست و چه تفاوتی با SASS دارد؟

SCSS مخفف کلمه “Sassy Cascading Style Sheets” است. در اصل SCSS همان SASS است و همان کار را ‌می‌کند، فقط تفاوت آن­ها از لحاظ نوشتن است.

مقایسه SCSS با SASS
مقایسه SCSS با SASS

ما در SASS از نقطه-ویرگول (;)، پرانتز ( { ) استفاده نمی‌کنیم و به جای : از = و به جای $ از ! برای متغییر‌ها استفاده ‌می­کنیم. حال در SCSS دقیقا مانند خود سی اس اس از آن علامت­ها استفاده ‌می‌کنیم.

هر کدام مزیت خود را دارند اما در SASS سریع­تر و تمیز‌تر کد ‌می‌نویسیم حتی نیازی به @mixin و @include هم نداریم همان = و + هم کافی است، در سوی دیگر SCSS به دلیل سازگاری کامل با CSS یادگیری و کد‌نویسی آن راحت‌تر است. در حالت کلی تفاوت زیادی ندارند اما چون SCSS جدید‌تر است به SASS ترجیح داده ‌می­شود.

 

LESS چیست؟

یک پیش‌پردازنده دیگر CSS است که مانند SASS ما را در مدیریت و سفارشی سازی استایل‌دهی صفحات وب کمک ‌می‌کند. LESS که مخفف کلمات “Leaner Style Sheets” است در سال ۲۰۰۹ توسط Alexis Sellier منتشر شد. این پیش‌پردازنده ابتدا به زبان روبی نوشته شد اما در نسخه‌های بعدی به زبان جاوا اسکریپت نوشته شد و نسخه روبی آن منسوخ شد.

LESS چیست؟
LESS چیست؟

در اصل LESS یک کتابخانه جاوا اسکریپت است که عملکرد CSS خام را با متغییر‌ها، mixins، nesting و rule set loop گسترش ‌می­دهد.

 

مزیت‌ها و معایب LESS

‌می‌توان گفت LESS به عنوان جدی‌ترین رقیب SASS تقریبا از تمامی مزیت‌های آن برخوردار است، همچنین از آن جا که هر دو پیش‌پردازنده هستند یک سری معایب که در بالا به آن اشاره شد را دارند.

 

مقایسه SASS و LESS

  • یکی به زبان روبی و دیگری به زبان جاوا اسکریپت نوشته شده است که این تفاوت به هیچکدام از آن­ها برتری نمی‌دهد.
  • ممکن است شما توابع از پیش تعیین شده و یا فایل‌های mixins ساخته شده را بعدا به روز نمی‌کنید در این صورت ما در SASS ‌می‌توانیم از Compass استفاده کنیم، این فریم‌ورک خود را به روز ‌می‌کند و مشکل ما برطرف ‌می‌شود اما LESS این فریم‌ورک را ندارد. اگرچه در حالت کلی این وظیفه ما است تا خود پیش‌پردازنده و کتابخانه‌های مورد استفاده را به روز کنیم، این کار در SASS آسان‌تر است.
  • LESS به ما امکان انجام guarded mixins را ‌می‌دهد، به معنای دیگر به ما این امکان را ‌می‌دهد تا فقط در صورت بروز موقعیت‌های خاص mixins را فعال کنیم. در حالت دیگر در LESS ‌می‌توان یک mixins ‌می‌تواند خود را با استفاده از یک مقدار به روز شده فرا خواند و ایجاد یک حلقه کند. در سوی دیگر SASS دارای اوپراتور‌های منطقی و حلقه‌ای واقعی در زبان است، دستورات if/else/then، for loops، while loops و each loops را دارا است که نشان دهنده قدرت زبان SASS است.
  • LESS دارای وب سایت کاربردی‌تر و جذاب‌تری نسبت به SASS است، که از نظر محبوبیت بین برنامه نویسان Front-end یک مزیت محسوب ‌می­‌شود.
  • در SASS ما خود ‌می‌توانیم تصمیم بگیریم تا از کدام پسوند (.sass – .scss) استفاده کنیم، یا به زبانی دیگر نزدیک به CSS کد‌نویسی کنیم یا نه، امّا در LESS این حق انتخاب را نداریم و فقط ‌می­توان از یک پسوند و سبک استفاده کرد.
  • برخلاف SASS، LESS از @ برای اعلام متغییر‌ها استفاده ‌می‌کند که ممکن است باعث سردرگمی با @media و @keyframes شود.
  • یکی از مزیت‌های LESS نسبت به SASS نحوه‌ی اضافه کردن آن به پروژه است، که به راحتی با استفاده از NPM و یا قرار دادن قایل js امکان پذیر است.
  • LESS دارای محبوبیت خوبی بود چون در Bootstrap استفاده ‌می­شد امّا در نسخه ۴ Bootstrap از SASS استفاده شد و باعث کاهش محبوبیت LESS شد.

 

نتیجه‌گیری

ما در این مقاله بیان کردیم که دومین گام در زمینه برنامه‌نویسی تحت وب، مربوط به یادگیری CSS است. همچنین در بخش‌های جداگانه به اهمیت استفاده از  CSS، چگونگی استفاده از آن، انواع نسخه‌های آن و همچنین به ۲ پیش‌پردازنده مهم و معروف CSS اشاره کردیم. مسیر برنامه‌نویس شدن در حوزه فرانت اند (front end) بسیار جذاب و زیباست پس اگر قصد دارید پیمایش این مسیر را شروع کنید، سعی کنید خیلی زود به HTML و CSS مسلط شوید و به سراغ جاوااسکریپت بروید.

امیدوارم که از مطالعه این مقاله لذت برده باشید و بتوانید به بهترین شکل ممکن از اطلاعات آن استفاده کنید. منتظر دیگر مقالات جذاب ویتکس باشید؛ و همچنین می‌توانید این محتوا را در شبکه های اجتماعی با دوستان خود به اشتراک بگذارید تا آنان نیز از این محتوا استفاده کنند!

 

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

تیم تحریریه ویتکس

این محتوا توسط سعید علی وردی خانی، زهرا عباس زاده و محمدحسین گودرزی تولید و آماده شده است. تیم تحریریه ویتکس همواره در حال تلاش است تا در راستای رفع نیازها و دغدغه‌های ذهنی شما عزیزان گام بزرگی بردارد و همچنین در زمنیه بهبود وب فارسی نیز تاثیرگذار باشد.

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

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

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

دکمه بازگشت به بالا