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

استایل دهی 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>

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

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

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

• افزایش حجم صفحاتزمانی که از استایل دهی درون خطی استفاده می کنید. حجم فایل های شما تا حد زیادی افزایش پیدا میکند و این موضوع یک نکته منفی برای سایت شما به حساب می‌آید. از آنجایی که موتورهای جستجو به سرعت بارگذاری سایت اهمیت زیادی میدند. سنگین شدن صفحاتتان میتواند اثر منفی بر روی سئو سایتتان داشته باشد.
• دشواری ویرایشویرایش کدهایی که به صورت inline استایل دهی شدند، مشکلات زیادی دارد. به خصوص زمانی که تعداد خطوط کدهای شما خیلی بالاست یا چند فایل جدا دارید. پیدا کردن این استایل ها و تغییر آنها یک کار سخت و طاقت فرسا و در برخی موارد حتی غیرممکن است.
• ایجاد مشکل برای کدهای css خارجی

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