دسته بندی: سی‌اس‌اس CSS

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

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

آموزش رفع مشکل Render Blocking CSS Fix Render Blocking CSS درباره خطای Render Blocking CSS و نحوه حل آن Render blocking CSS چیست؟ Render Blocking CSS باعث تاخیر در لود شدن یک وب سایت می شود. هر کدام از فایل های CSS قالب سایت تان، باعث تاخیر در رندر شدن وب سایت می شوند. هرچه […]


افزایش سرعت لود سایت با ادغام تصاویر توسط تکنیک CSS Sprites

افزایش سرعت لود سایت با ادغام تصاویر توسط تکنیک CSS Sprites

ادغام تصاویر توسط تکنیک CSS Sprites Combine images using CSS sprites ترکیب تصاویر با استفاده از روش CSS Sprites   فواید استفاده از تکنیک CSS Sprites چیست؟ فرض کنید شما 6 تصویر در صفحه اصلی سایت تان دارید و مرورگر باید تمام این تصاویر را بطور جداگانه دانلود کند. اگر بتوان این 6 تصویر را […]


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

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

 نحوه فشرده‌سازی فایل‌های CSS و اهمیت آن Minify & Compress CSS فشرده‌سازی (مینی‌فای کردن) فایل‌های CSS فشرده‌سازی CSS (Minifying CSS) چیست؟ همانطور که از نام آن مشخص است، به معنای کوچک سازی فایل های css و فشردن آنها می باشد. از آنجائیکه فایل های css بطور پیش فرض، بصورت render blocking می باشند، ضروریست که […]


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

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

آموزش مدیا کوئری‌ در CSS برای طراحی واکنش‌گرا Introdunction to media queries نحوه تعریف مدیا کوئری (Media Query) در CSS   مدیا کوئری‌ها (Media Queries) دستورالعمل های css می باشند که استفاده از آنها برای طراحی وب سایت ها و وبلاگ های مدرن الزامی می باشد. مدیاکوئری شامل دستوراتی است که در سایزهای مختلف اسکرین […]


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

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

آموزش فریم‌ورک Foundation-بخش10-منو،ویدیو،تصویر بخش دهم: منوی چسبنده (Sticky Navigation)، ویدیوی ریسپانسیو، تصاویر بندانگشتی (Thumbnail) منوی چسبنده، ویدیوی ریسپانسیو، تصاویر بندانگشتی و راست‌چین   در مقاله قبل، المان های جدول، پنل، باکس قیمت و… را بررسی کردیم.   پلاگین Magellan: ممکن است در برخی از پروژه ها نیاز باشد منوی سایت با اسکرول کاربر، در صفحه باقی […]


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

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

آموزش فریم‌ورک Foundation-بخش9-جدول،پنل بخش نهم: جدول، باکس های قیمت، پنل و… المان‌های جدول، پنل، باکس قیمت، پلاگین JoyRide   در بخش قبل، المان‌های progress, alert, tooltip, … در فریم ورک foundation  را معرفی و بررسی کردیم. در این بخش، المان های table ، pricing table و پلاگین Joyride را بررسی می کنیم. پنل ها (Panels): با تعریف […]


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

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

آموزش فریم‌ورک Foundation-بخش8-alert-tooltip بخش هشتم: آموزش المان‌های progress, alert, tooltip, … المان‌های Tooltip، Chart، Progress، Alert در مقاله قبل، نحوه شخصی سازی فرم تماس با را در فریم ورک Foundation آموزش دادیم. در این بخش از آموزش فریم ورک فاندیشن، المان های Progress و Alert و Tooltip را بررسی می کنیم و از آنها در یک […]


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

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

آموزش فریم‌ورک Foundation-بخش7-فرم سفارشی بخش هفتم: فرم های سفارشی (Custom Forms) طراحی فرم‌های سفارشی در فریم‌ورک فاندیشن   در مقاله قبل، المان های دکمه (button) و لیست بازشو (DropDown List) را بررسی کردیم. پس از بررسی و سفارشی سازی دکمه ها در فریم ورک فاندیشن، در ادامه این سری از مقالات، می خواهیم نحوه سفارشی […]


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

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

آموزش فریم‌ورک Foundation-بخش6-دکمه و لیست بازشو بخش ششم: دکمه (Button) و لیست بازشو (DropDown List) دکمه و لیست بازشو در فریم‌ورک Foundation   در مقاله قبل، نحوه سفارشی سازی منوی بالا (Top Bar Customization) در فریم ورک foundation را توضیح دادیم.  در این بخش از آموزش فریم ورک فاندیشن (Foundation Framework) المان های دکمه (Button)، لیست […]


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

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

آموزش فریم‌ورک Foundation-بخش5-سفارشی‌سازی منو بخش پنجم: سفارشی سازی منوی بالا (Top Bar Customization) سفارشی‌سازی منوی بالا در فریم‌ورک فاندیشن   در مقاله قبل، نحوه پیاده‌سازی نوار بالا (TOP BAR) آموزش داده شد. در این مقاله می خواهیم چگونگی سفارشی سازی این المان مهم را آموزش دهیم. فریم ورک فاندیشن، امکانات و ویژگی های خوبی برای […]


معرفی 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 و غیره ارائه می شود.