استایل دهی inline چیست و چرا نباید از آن استفاده کنیم ؟

ساعت : ۱۳:۴۳

تاریخ : ۸ بهمن ۱۳۹۷

روش های استایل دهی با CSS

همون طور که می دونید از css برای زیباسازی و استایل دهی به صفحات وب استفاده می کنیم. برای استایل دهی به صفحات htmlما سه راه پیش رو داریم: استایل دهی inline internal و external. تو این مقاله از سری آموزش های css به توضیح هر کدوم از این روش های استایل دهی می پردازیم و معایب استایل دهی inline رو برای شما بیان می کنیم.

استایل دهی inline

استایل دهی external

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

اینجا csspark_styles.css یک فایل جداگانه با پسوند css هست که به کمک تگ link به صفحه html اضافه شده :


<link rel="stylesheet" href="csspark_styles.css">

استایل دهی internal

تو استایل دهی internal هم مانند استایل دهی خارجی تمام کدهای css شما تو یک قسمت قرار می گیرند، ولی نه تو یه فایل خارجی جدا. بلکه داخل همون صفحه html شما و تو یک تگ style در قسمت head. تو این روش هم ممکنه بتونید کدهای css رو داخل یک صفحه html دیگه کپی کنید تا اون صفحه هم استایل دهی بشه ولی خب روش خوبی نیست. استایل دهی داخلی برای زمانی مناسبه که میخواید یک تک صفحه رو استایل دهی کنید و کاری به بقیه صفحات سایت ندارید.

استایل دهی inline

همون طور که از نامش پیداست، استایل دهی inline به معنی استایل دهی درون خطی هست و برای استایل دادن به یک تگ خاص استفاده میشه. برای مثال فرض کنید میخواید به یک تگ div که تو قسمت خاصی از صفحه قرار گرفته یه سری استایل بدید تا از سایر خطوط متمایز بشه. تو این چنین موارد طبق مثال زیر میتونید از استایل دهی inline استفاده کنید:


<div style="margin:0 auto"></div>

استایل دهی inline

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

استفاده از روش استایل دهی inline کار غیر استانداردی نیست ولی خب توصیه می کنیم از این روش استفاده نکنید. استفاده از این روش یه سری مشکلات و معایب برای شما به وجود میاره که در ادامه اونارو توضیح میدیم.

  • افزایش حجم صفحات

    زمانی که از استایل دهی درون خطی استفاده می کنید، حجم فایل های شما تا حد زیادی افزایش پیدا میکنه و این موضوع یک نکته منفی برای سایت شما به حساب میاد. از اونجایی که موتورهای جستجو به سرعت بارگذاری سایت اهمیت زیادی میدند، سنگین شدن صفحاتتون میتونه اثر منفی بر روی سئو سایتتون داشته باشه.

  • دشواری ویرایش

    ویرایش کدهایی که به صورت inline استایل دهی شدند، مشکلات زیادی داره. به خصوص زمانی که تعداد خطوط کدهای شما خیلی بالاست یا چند فایل جدا دارید، پیدا کردن این استایل ها و تغییر اونها یک کار سخت و طاقت فرسا و در برخی موارد حتی غیرممکنه.

  • ایجاد مشکل برای کدهای css خارجی

    استایل هایی که به صورت inline به صفحات html داده شدند، نسبت به استایل های خارجی الویت بالاتری دارند و همین موضوع باعث ایجاد برخی مشکلات میشه. مثلا زمانی که میخواید یک سری تگ رو با یک کلاس خاص استایل دهی کنید و یکی از این تگ ها یک استایل درون خطی داره، ممکنه اون استایل درون خطی نظم کدهای شما رو بهم بزنه و از عمل کردن اون استایل خارجی جلوگیری کنه.

در صورتی که به آموزش html css و یا آموزش jquery و یا آموزش bootstrap علاقه دارید میتونید از آموزش های پروژه محور و کاربردی سی اس اس پارک استفاده کنید که ضمانت بازگشت وجه هم داره.



  • استایل دهی inline چیست و چرا نباید از آن استفاده کنیم ؟
    نام نویسنده : امیرمسعود طالاری
  • استایل دهی inline چیست و چرا نباید از آن استفاده کنیم ؟
    نام نویسنده : رضا ابولحسن زاده
  • استایل دهی inline چیست و چرا نباید از آن استفاده کنیم ؟
    نام نویسنده : رضا ابولحسن زاده
  • استایل دهی inline چیست و چرا نباید از آن استفاده کنیم ؟
    نام نویسنده : رضا ابولحسن زاده

درباره نویسنده : برنامه نویس وب و کارشناسی ارشد رشته نرم افزار

پاسخی بگذارید

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