برنامه نویسی با زبان CSS

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

CSS چندین نسخه مختلف دارد که هر کدام ویژگی‌ها و قابلیت‌های جدیدی را ارائه می‌دهند. برخی از نسخه‌های CSS عبارتند از:

• CSS1: نسخه اولیه CSS که در سال ۱۹۹۶ معرفی شد و قابلیت‌های ابتدایی برای طراحی صفحات وب را فراهم می‌کرد، مانند تعیین رنگ، فونت، حاشیه، پس زمینه و غیره.
• CSS2: نسخه دوم CSS که در سال ۱۹۹۸ معرفی شد و قابلیت‌های پیشرفته‌تری را اضافه کرد، مانند پشتیبانی از رسانه‌های مختلف (مانند صفحه، صوت، تصویر و غیره)، تعیین موقعیت المنت‌ها، تولید محتوا خودکار، تغییر شکل متن و غیره.
• CSS3: نسخه سوم CSS که در سال ۲۰۱۲ معرفی شد و قابلیت‌های بسیار پیشرفته‌ای را به CSS اضافه کرد، مانند انعطاف‌پذیری در طراحی (Responsive Design)، انیمیشن، تبدیلات (Transforms)، افکت‌های تصویری (Filters)، گرادیان (Gradients)، سایه (Shadow)، تغییر شکل (Shape) و غیره.

آموزش css

بعلاوه CSS همچنین دارای چندین ماژول است که هر کدام به بخش خاصی از CSS مربوط می‌شوند و قابل استفاده به صورت جداگانه هستند. برخی از ماژول‌های CSS عبارتند از: Flexbox, Grid, Text, Color, Backgrounds and Borders, Transitions, Animations و غیره.

برای فهمیدن کدام نسخه یا ماژول CSS را باید استفاده کنید، باید به چند عامل توجه کنید، مانند:

• هدف و نیاز شما: بسته به اینکه شما چه نوع وبسایتی می‌خواهید طراحی کنید و چه قابلیت‌ها و افکت‌هایی را می‌خواهید به آن اضافه کنید، ممکن است نیاز به استفاده از نسخه‌ها و ماژول‌های مختلف CSS داشته باشید. برای مثال، اگر شما می‌خواهید یک وبسایت پاسخگو (Responsive) داشته باشید که در ابعاد و دستگاه‌های مختلف به خوبی نمایش داده شود، ممکن است نیاز به استفاده از ماژول‌های Flexbox یا Grid داشته باشید. یا اگر شما می‌خواهید انیمیشن‌های جذاب و حرکات پویا را به صفحات وب خود اضافه کنید، ممکن است نیاز به استفاده از ماژول‌های Transitions یا Animations داشته باشید.
• پشتیبانی از مرورگر‌ها: بعضی از نسخه‌ها و ماژول‌های CSS ممکن است توسط همه یا بعضی از مرورگر‌های رایج پشتیبانی نشوند یا نیاز به استفاده از پیشوند (Prefix) خاص داشته باشند. برای مثال، بعضی از قابلیت‌های CSS3 توسط مرورگر Internet Explorer پشتیبانی نمی‌شوند یا نیاز به استفاده از پیشوند -ms- دارند. برای بررسی پشتیبانی از مرورگر‌های مختلف، شما می‌توانید از سایت‌هایی مانند Can I use استفاده کنید.
• کارآمدی و سادگی: بعضی از نسخه‌ها و ماژول‌های CSS ممکن است کارآمدتر و ساده‌تر از دیگران باشند و به شما کمک کنند تا با کد کمتر و خواناتر، طرح بندی و ظاهر مناسب را برای صفحات وب خود انجام دهید. برای مثال، استفاده از Flexbox یا Grid برای چینش المنت‌های صفحات وب سادگیر و منعطف تر از استفاده از Floats یا Positioning است. شما باید با توجه به پروژۀ خود، کارآمدترین و سادگیرین راه حل را انتخاب کنید.

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

• • انیمیشن: با استفاده از خصوصیت animation شما می‌توانید حرکات پویا و جذاب را به المنت‌های صفحات وب خود اضافه کنید. شما می‌توانید مقادیر مختلفی را برای animation تعیین کنید، مانند نام، مدت زمان، تعداد تکرار، سرعت، حالت و غیره. همچنین شما می‌توانید با استفاده از @keyframes نقاط مختلف حرکت را تعریف کنید.
  • تغییر شکل: با استفاده از خصوصیت transform شما می‌توانید المنت‌های صفحات وب خود را به صورت دو بعدی یا سه بعدی تغییر شکل دهید. شما می‌توانید عملیات‌های مختلفی را بر روی المنت‌ها انجام دهید، مانند تغییر اندازه، چرخش، انحراف، انعکاس و غیره.
  • گرادینت: با استفاده از خصوصیت background-image شما می‌توانید تصاویر پس زمینه با گذار رنگ (Gradient) را برای المنت‌های صفحات وب خود ایجاد کنید. شما می‌توانید نوع، جهت، رنگ و توقف‌های گذار رنگ را تعیین کنید. گرادینت‌ها می‌توانند خطی (Linear) یا شعاعی (Radial) باشند.
  • افکت‌های تصویری: با استفاده از خصوصیت filter شما می‌توانید افکت‌های تصویری مختلف را بر روی المنت‌های صفحات وب خود اعمال کنید. شما می‌توانید از افکت‌های آماده استفاده کنید یا خودتان افکت سفارشی خود را با استفاده از تابع custom() بسازید. برخی از افکت‌های تصویری عبارتند از: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia و غیره.
  • سایه: با استفاده از خصوصیات box-shadow و text-shadow شما می‌توانید سایه را به جعبه‌ها و متون صفحات وب خود اضافه کنید. شما می‌توانید مقادیر مختلفی را برای سایه تعیین کنید، مانند موقعیت، اندازه، رنگ و پخش.

اطلاعات بیشتر