استایل (style) در HTML

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

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

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

CSS درون خطی

CSS درون خطی یکی از روش‌های استایل‌دهی به عناصر HTML است که در آن، کدهای CSS به طور مستقیم داخل تگ HTML مربوطه قرار می‌گیرند. این روش در مقایسه با دو روش دیگر استایل‌دهی، یعنی CSS خارجی و CSS داخلی، مزایا و معایبی دارد.

نکته: طراحی داخلی CSS روش خوبی نیست و مدیریت و بروزرسانی آن دشوار است.

 
<p style="color: red; font-size: 18px;">این متن با CSS درون خطی استایل‌دهی شده است.</p>

در مثال بالا، از CSS درون خطی برای تغییر رنگ و اندازه فونت متن داخل تگ p استفاده شده است.

مزایای CSS درون خطی:

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

معایب CSS درون خطی:

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

توجه: برای اعمال تغییرات جزئی در استایل یک عنصر خاص، استفاده از CSS درون خطی می‌تواند مفید باشد.استفاده از CSS درون خطی باید با احتیاط انجام شود و فقط در مواقعی که ضروری است، از آن استفاده شود.

CSS داخلی

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

<head>
  <title>صفحه اصلی</title>
  <style>
    body {
      background-color: #ffffff;
      color: #000000;
      font-family: Arial, sans-serif;
    }
    
    h1 {
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>عنوان صفحه</h1>
  <p>محتوای صفحه</p>
</body>

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

مزایای استفاده از CSS داخلی:

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

معایب استفاده از CSS داخلی:

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

موارد استفاده از CSS داخلی:

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

نکته: CSS داخلی یک روش مناسب برای استایل‌دهی به صفحات وب است که مزایا و معایب خاص خود را دارد. استفاده از این روش زمانی مناسب است که می‌خواهید فقط یک صفحه خاص را با استایل‌های منحصر به فرد طراحی کنید یا تغییرات جزئی در استایل یک صفحه ایجاد کنید.

CSS خارجی

CSS خارجی یا External Style Sheet یکی از روش‌های محبوب برای استایل‌دهی به صفحات وب است. در این روش، کدهای CSS در یک فایل جداگانه با پسوند .css نوشته می‌شوند و سپس از طریق تگ <link> در صفحات HTML مورد نظر فراخوانی می‌شوند. در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

مزایای استفاده از CSS خارجی:

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

نحوه استفاده از CSS خارجی:

ایجاد فایل CSS: ابتدا باید یک فایل جدید با پسوند .css ایجاد کنید و کدهای CSS مورد نظر خود را در آن بنویسید.
لینک کردن فایل CSS: در صفحات HTML مورد نظر، باید از طریق تگ <link> به فایل CSS خارجی لینک دهید. برای این کار، باید کد زیر را در بخش <head> صفحه HTML قرار دهید: در کد پایین، mystyle.css نام فایل CSS خارجی است.


<link rel="stylesheet" type="text/css" href="mystyle.css">

فرض کنید که می‌خواهید رنگ پس‌زمینه تمام صفحات وب سایت خود را به رنگ آبی تغییر دهید. برای این کار، می‌توانید کد زیر را در فایل style.css خود بنویسید:

                                                                         HTML
<link rel="stylesheet" type="text/css" href="style.css">

                                                                          CSS  
 body {
   background-color: blue;
 }

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

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

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