CSS داخلی چیست؟

دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 11 بهمن 1399

CSS داخلی چیست؟ CSS داخلی یا Internal CSS، یکی از روش‌های استایل‌دهی به صفحات وب است که در آن کدهای CSS به طور مستقیم در داخل تگ <head> صفحه HTML قرار می‌گیرند. این روش در مقایسه با روش‌های دیگر مانند CSS خارجی، مزایا و معایبی دارد که در ادامه به بررسی آن‌ها می‌پردازیم.

نکات اصلی CSS داخلی:

قابل استفاده برای تمام عناصر HTML: می‌توان از CSS داخلی برای استایل‌دهی به تمام عناصر HTML مانند <div>، <p>، <h1> و غیره استفاده کرد.
قابل استفاده برای کلاس‌ها و آیدی‌ها: می‌توان از CSS داخلی برای استایل‌دهی به عناصر با کلاس‌ها و آیدی‌های خاص استفاده کرد.
قابل استفاده برای انیمیشن‌ها: می‌توان از CSS داخلی برای ایجاد انیمیشن‌های ساده استفاده کرد.

مزایای CSS داخلی:

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

معایب CSS داخلی:

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

نحوه استفاده از CSS:

ابتدا المان یا المان‌های HTML که می‌خواهید سبک‌های CSS را برای آن‌ها تعریف کنید را انتخاب کنید. به عنوان مثال، اگر می‌خواهید یک عنوان h1 را طراحی کنید، المان h1 را انتخاب کنید. حالا سبک‌های CSS مورد نظر خود را برای المان‌های انتخاب شده تعریف کنید. به عنوان مثال، می‌توانید فونت، رنگ متن، اندازه متن، پس زمینه و … را تعیین کنید. حالا که سبک‌های CSS را برای المان‌های خود تعریف کرده‌اید، آن‌ها را در داخل تگ‌های HTML خود قرار دهید. این کار با استفاده از تگ <style> انجام می‌شود.

به این مثال نگاه کنید تا ببینید چطور می توان عنصر <style> حاوی قوانین CSS را برای همه صفحه اضافه کرد:


<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>استفاده از CSS داخلی</title>
</head>
<body>
<!-- تعریف سبک‌های CSS داخلی -->
<style>
    h1 {
        color: blue;
        font-family: Arial, sans-serif;
    }

    p {
        font-size: 18px;
        line-height: 1.5;
    }
</style>

<!-- استفاده از المان‌ها با سبک‌های CSS داخلی -->
<h1>عنوان اصلی</h1>
<p>این یک متن معمولی است که سبک‌های CSS داخلی اعمال شده روی آن اثر می‌گذارد.</p>
</body>
</html>

در این مثال، سبک‌های CSS برای عنوان h1 و متن p تعریف شده‌اند و در داخل تگ <style> در همان صفحه HTML استفاده شده‌اند. وقتی صفحه HTML را باز کنید، تمام عناصر مرتبط با این سبک‌ها، ظاهر مشخص شده در CSS خواهند بود.

خلاصه CSS داخلی:

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

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊