آموزش رفع مشکل Render Blocking CSS Fix Render Blocking CSS درباره خطای Render Blocking CSS و نحوه حل آن Render blocking CSS چیست؟ Render Blocking CSS باعث تاخیر در لود شدن یک وب سایت می شود. هر کدام از فایل های CSS قالب سایت تان، باعث تاخیر در رندر شدن وب سایت می شوند. هرچه […]
ادغام تصاویر توسط تکنیک CSS Sprites Combine images using CSS sprites ترکیب تصاویر با استفاده از روش CSS Sprites فواید استفاده از تکنیک CSS Sprites چیست؟ فرض کنید شما 6 تصویر در صفحه اصلی سایت تان دارید و مرورگر باید تمام این تصاویر را بطور جداگانه دانلود کند. اگر بتوان این 6 تصویر را […]
نحوه فشرده‌سازی فایل‌های CSS و اهمیت آن Minify & Compress CSS فشرده‌سازی (مینی‌فای کردن) فایل‌های CSS فشرده‌سازی CSS (Minifying CSS) چیست؟ همانطور که از نام آن مشخص است، به معنای کوچک سازی فایل های css و فشردن آنها می باشد. از آنجائیکه فایل های css بطور پیش فرض، بصورت render blocking می باشند، ضروریست که […]
آموزش مدیا کوئری در CSS برای طراحی واکنش‌گرا Introdunction to media queries نحوه تعریف مدیا کوئری (Media Query) در CSS مدیا کوئری‌ها (Media Queries) دستورالعمل های css می باشند که استفاده از آنها برای طراحی وب سایت ها و وبلاگ های مدرن الزامی می باشد. مدیاکوئری شامل دستوراتی است که در سایزهای مختلف اسکرین […]
آموزش فریم‌ورک Foundation-بخش10-منو،ویدیو،تصویر بخش دهم: منوی چسبنده (Sticky Navigation)، ویدیوی ریسپانسیو، تصاویر بندانگشتی (Thumbnail) منوی چسبنده، ویدیوی ریسپانسیو، تصاویر بندانگشتی و راست‌چین در مقاله قبل، المان های جدول، پنل، باکس قیمت و… را بررسی کردیم. پلاگین Magellan: ممکن است در برخی از پروژه ها نیاز باشد منوی سایت با اسکرول کاربر، در صفحه باقی […]
آموزش فریم‌ورک Foundation-بخش9-جدول،پنل بخش نهم: جدول، باکس های قیمت، پنل و… المان‌های جدول، پنل، باکس قیمت، پلاگین JoyRide در بخش قبل، المان‌های progress, alert, tooltip, … در فریم ورک foundation را معرفی و بررسی کردیم. در این بخش، المان های table ، pricing table و پلاگین Joyride را بررسی می کنیم. پنل ها (Panels): با تعریف […]
آموزش فریم‌ورک Foundation-بخش8-alert-tooltip بخش هشتم: آموزش المان‌های progress, alert, tooltip, … المان‌های Tooltip، Chart، Progress، Alert در مقاله قبل، نحوه شخصی سازی فرم تماس با را در فریم ورک Foundation آموزش دادیم. در این بخش از آموزش فریم ورک فاندیشن، المان های Progress و Alert و Tooltip را بررسی می کنیم و از آنها در یک […]
آموزش فریم‌ورک Foundation-بخش7-فرم سفارشی بخش هفتم: فرم های سفارشی (Custom Forms) طراحی فرم‌های سفارشی در فریم‌ورک فاندیشن در مقاله قبل، المان های دکمه (button) و لیست بازشو (DropDown List) را بررسی کردیم. پس از بررسی و سفارشی سازی دکمه ها در فریم ورک فاندیشن، در ادامه این سری از مقالات، می خواهیم نحوه سفارشی […]
آموزش فریم‌ورک Foundation-بخش6-دکمه و لیست بازشو بخش ششم: دکمه (Button) و لیست بازشو (DropDown List) دکمه و لیست بازشو در فریم‌ورک Foundation در مقاله قبل، نحوه سفارشی سازی منوی بالا (Top Bar Customization) در فریم ورک foundation را توضیح دادیم. در این بخش از آموزش فریم ورک فاندیشن (Foundation Framework) المان های دکمه (Button)، لیست […]
آموزش فریم‌ورک Foundation-بخش5-سفارشی‌سازی منو بخش پنجم: سفارشی سازی منوی بالا (Top Bar Customization) سفارشی‌سازی منوی بالا در فریم‌ورک فاندیشن در مقاله قبل، نحوه پیاده‌سازی نوار بالا (TOP BAR) آموزش داده شد. در این مقاله می خواهیم چگونگی سفارشی سازی این المان مهم را آموزش دهیم. فریم ورک فاندیشن، امکانات و ویژگی های خوبی برای […]
سی اس اس یا Cascading Style Sheets به صفحات html استایل و زیبایی می دهد. Css مستقل از html کار می کند و می توان در فایلی جدا (مثلا styles.css) آنرا تعریف کرد. یادگیری و فهم css آسان است اما در عین حال می تواند ویژگی های بصری خوبی را به داکیومنت html اضافه کند.
المان های موجود در یک صفحه HTML را به روش های گوناگونی می توان انتخاب (Select) کرد. به هر یک از این روش ها سلکتور (Selector) می گویند.
فرض کنید المان زیر را در یک صفحه وب داریم:
Test Parag
به چند طریق می توان المان های یک داکیومنت html را انتخاب کرد:
در دسته بندی css از محتوابان، مقالاتی راجع به تکنیک های css ، فرم ورک های css مانند فاندیشن، زبان های SASS و LESS و غیره ارائه می شود.
