سی‌اس‌اس CSS

معرفی CSS:

سی اس اس یا Cascading Style Sheets به صفحات html استایل و زیبایی می دهد. Css مستقل از html کار می کند و می توان در فایلی جدا (مثلا styles.css) آنرا تعریف کرد. یادگیری و فهم css آسان است اما در عین حال می تواند ویژگی های بصری خوبی را به داکیومنت html اضافه کند.

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

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

انواع سلکتورهای CSS:

المان های موجود در یک صفحه HTML را به روش های گوناگونی می توان انتخاب (Select) کرد. به هر یک از این روش ها سلکتور (Selector) می گویند.

فرض کنید المان زیر را در یک صفحه وب داریم:

Test Parag

به چند طریق می توان المان های یک داکیومنت html را انتخاب کرد:

  • سلکتور المان: با نوشتن نام المان می توان به آن استایل داد. مانند: p{color:red;}
  • سلکتور آیدی: انتخاب المان با تعریف آیدی آن. مانند: #test1{color:black;}
  • سلکتور کلاس: انتخاب المان توسط کلاس: مانند: .test{color:yellow;}
  • سلکتور کلی: با تعریف علامت ستاره یا * می توان استایل دلخواه را روی تمام المان های صفحه html اعمال کرد. مانند: *{margin:0;}

در دسته بندی css از مجله آموزشی محتوا، مقالاتی راجع به تکنیک های css ، فرم ورک های css مانند فاندیشن، زبان های SASS و LESS و غیره ارائه می شود.

آموزش کامل پیش‌پردازنده LESS

آموزش کامل پیش‌پردازنده LESS

آموزش کامل پیش‌پردازنده LESS » در این مقاله ، زبان شیوه نامه LESS را معرفی کرده و کار با برنامه winless و فایل less.min.js و mixin ها را آموزش می دهیم.

آموزش Sass – نصب، تعریف متغیر، عملگر، پارشیال و میکسین

آموزش Sass – نصب، تعریف متغیر، عملگر، پارشیال و میکسین

آموزش Sass - نصب، تعریف متغیر، عملگر، پارشیال و میکسین » در این مقاله، SASS را معرفی کرده و تعریف متغیر، عملگر، تو در تو نویسی، ارث بری، میکسین را می گوییم

مثال‌های SASS و کامپایل آن به CSS – بخش اول

مثال‌های SASS و کامپایل آن به CSS – بخش اول

مثال‌های SASS و کامپایل آن به CSS - بخش اول » در این مقاله، 29 مثال کاربردی از SASS را بررسی خواهیم کرد. مانند: تودرتو نویسی، import کردن، پارشیال ها و...

مثال‌های SASS و کامپایل آن به CSS – بخش دوم

مثال‌های SASS و کامپایل آن به CSS – بخش دوم

مثال‌های SASS و کامپایل آن به CSS - بخش دوم » مثال هایی از زبان sass در زمینه extend ، at-root ، دستور شرطی if و حلقه های شرطی while و... خواهیم دید.

آموزش Flexbox در طراحی سایت

آموزش Flexbox در طراحی سایت

آموزش Flexbox در طراحی سایت : در این مقاله آموزشی، خاصیت FlexBox را در css برای طراحی قالب وب سایت آموزش می دهیم. معرفی خاصیت FlexBox و فواید آن، تبدیل ستون به Flexbox Container، تبدیل باکس خبر به Flex Container، افزودن چند ستون تو در تو و طراحی واکنش‌گرا توسط FlexBox.

۲۰ تکنیک برای نوشتن کدهای CSS پیشرفته

۲۰ تکنیک برای نوشتن کدهای CSS پیشرفته

20 تکنیک برای نوشتن کدهای CSS پیشرفته : در این مقاله، تکنیک هایی برای نوشتن پیشرفته CSS را آموزش می دهیم. مانند: استفاده از Flexbox، CSS reset، خاصیت border-box، خاصیت border-collapse، ایجاد انیمیشن css توسط transform، کدهای فشرده CSS (Minified)، استفاده از وب سایت Caniuse.com و غیره...

معرفی بهترین فریم‌ورک‌های متریال دیزاین

معرفی بهترین فریم‌ورک‌های متریال دیزاین

معرفی بهترین فریم‌ورک‌های متریال دیزاین » در این مقاله آموزشی، 16 کتابخانه و فریم ورک برای طراحی متریال را معرفی می کنیم. مانند: foundation، Material Design Lite، Materialize، Material-UI، MUI CSS، Polymer، Ionic Material، Material Foundation، Surface، Essence، Angular Material و غیره

آموزش فریم‌ورک Foundation-بخش۱-معرفی و مقدمه

آموزش فریم‌ورک Foundation-بخش۱-معرفی و مقدمه

آموزش فریم‌ورک Foundation-بخش1-معرفی و مقدمه » در این مقاله، فریم ورک فاندیشن foundation را معرفی می کنیم و نحوه دانلود و شروع کار را خواهیم آموخت. همچنین ویژگی‌های اختصاصی فریم‌ورک فاندیشن را بیان کرده و وب سایت های معتبر و معروفی که از این فریم ورک بهره برده اند را معرفی می کنیم.

آموزش فریم‌ورک Foundation-بخش۲-سیستم گرید

آموزش فریم‌ورک Foundation-بخش۲-سیستم گرید

آموزش فریم‌ورک Foundation-بخش2-سیستم گرید » آموزش سیستم گرید فریم ورک فاندیشن (Foundation grid system) بهمراه معرفی پلاگین اسلایدر اوربیت orbit

آموزش فریم‌ورک Foundation-بخش۳-منو Navigation

آموزش فریم‌ورک Foundation-بخش۳-منو Navigation

آموزش فریم‌ورک Foundation-بخش3-منو Navigation » در این مقاله پلاگین section ، منوی کناری side nav ، زیر منو sub nav را بررسی خواهیم کرد. همچنین اتریبیوت data-section، لینک‌دهی عمقی (Deep Linking)، Sub Nav در فریم ورک فاندیشن، صفحه بندی (Pagination) و نکات صفحه‌بندی در المان pagination را بررسی می کنیم

آموزش فریم‌ورک Foundation-بخش۴-نوار بالا top bar

آموزش فریم‌ورک Foundation-بخش۴-نوار بالا top bar

آموزش فریم‌ورک Foundation-بخش4-نوار بالا top bar » در این مقاله، منوی واقع در نوار بالا (top bar) را بررسی می کنیم و مثال های کاربردی را بیان می کنیم. سرفصلها: افزودن لینک های والد (Adding Parent Links)، افزودن زیرمنو (Adding Submenu)، افزودن باکس جستجو (Adding Search Input) و...

آموزش فریم‌ورک Foundation-بخش۵-سفارشی‌سازی منو

آموزش فریم‌ورک Foundation-بخش۵-سفارشی‌سازی منو

آموزش فریم‌ورک Foundation-بخش5-سفارشی‌سازی منو » نحوه شخصی سازی منوی افقی اصلی (Top Bar Customization) را آموزش می دهیم. شامل تعریف کدهای HTML و CSS دلخواه برای منو و نشانه‌گذاری نوار بالا (Top bar markup) و تنظیمات مدیا کوئری (Setting up the Media Query) و...

آموزش فریم‌ورک Foundation-بخش۶-دکمه و لیست بازشو

آموزش فریم‌ورک Foundation-بخش۶-دکمه و لیست بازشو

آموزش فریم‌ورک Foundation-بخش6-دکمه و لیست بازشو » در این مقاله آموزشی، المان های دکمه و گروه دکمه‌ها (button groups)، نوارهای دکمه (Button Bars)، لیست بازشو و پلاگین clearing را بررسی می کنیم.

آموزش فریم‌ورک Foundation-بخش۷-فرم سفارشی

آموزش فریم‌ورک Foundation-بخش۷-فرم سفارشی

آموزش فریم‌ورک Foundation-بخش7-فرم سفارشی » در این مقاله، طراحی فرم‌های سفارشی در فریم‌ورک فاندیشن و نیز نحوه سفارشی کردن فرم تماس را آموزش می دهیم.

آموزش فریم‌ورک Foundation-بخش۸-alert-tooltip

آموزش فریم‌ورک Foundation-بخش۸-alert-tooltip

آموزش فریم‌ورک Foundation-بخش8-alert-tooltip » در این مقاله، المان های alert و progress و chart.js و tooltip و ریست کردن فرم را در فاندیشن آموزش می دهیم.

آموزش فریم‌ورک Foundation-بخش۹-جدول،پنل

آموزش فریم‌ورک Foundation-بخش۹-جدول،پنل

آموزش فریم‌ورک Foundation-بخش9-جدول،پنل » در این مقاله، المان های جدول (table)، پنل (panel)، جدول قیمت (Price Tables) و پلاگین Joyride را معرفی می کنیم.

آموزش فریم‌ورک Foundation-بخش۱۰-منو،ویدیو،تصویر

آموزش فریم‌ورک Foundation-بخش۱۰-منو،ویدیو،تصویر

آموزش فریم‌ورک Foundation-بخش10-منو،ویدیو،تصویر » در این مقاله، منوی چسبنده (sticky navigation)، ویدیوی ریسپانسیو، تصاویر بندانگشتی و... را آموزش می دهیم.

آموزش مدیا کوئری‌ در CSS برای طراحی واکنش‌گرا

آموزش مدیا کوئری‌ در CSS برای طراحی واکنش‌گرا

آموزش مدیا کوئری‌ در CSS برای طراحی واکنش‌گرا » در این مقاله، مدیا کوئری ها را معرفی کرده و نحوه استفاده از آنها را در یک سایت ریسپانسیو بیان می کنیم.

نحوه فشرده‌سازی فایل‌های CSS و اهمیت آن

نحوه فشرده‌سازی فایل‌های CSS و اهمیت آن

نحوه فشرده‌سازی فایل‌های CSS و اهمیت آن » در این مقاله، دلایل فشرده سازی و کوچک کردن فایل های CSS و نیز روش های فشرده کردن فایل CSS را آموزش می دهیم.

ترتیب استایل‌های CSS و اسکریپت‌های JS

ترتیب استایل‌های CSS و اسکریپت‌های JS

ترتیب استایل‌های CSS و اسکریپت‌های JS » در این مقاله، ترتیب استایل های css و اسکریپت های javascript را بیان می کنیم و دلیل اهمیت ترتیب آنها را می گوییم.

ادغام تصاویر توسط تکنیک CSS Sprites

ادغام تصاویر توسط تکنیک CSS Sprites

ادغام تصاویر توسط تکنیک CSS Sprites » در این مقاله، نحوه استفاده از تکنیک css sprites به منظور ترکیب یا ادغام تصاویر در قالب وب سایت را آموزش می دهیم.

آموزش رفع مشکل Render Blocking CSS

آموزش رفع مشکل Render Blocking CSS

آموزش رفع مشکل Render Blocking CSS » در این مقاله، خطای Render blocking CSS را تعریف کرده و برای رفع این مشکل، راهکارهایی را ارائه می دهیم.