کدهای CSS چگونه در صفحات وب استفاده می شوند به همراه فیلم آموزشی

در این قسمت از آموزش CSS به بررسی و نحوه استفاده از کدهای CSS به روش های مختلف در طراحی صفحات وب میپردازیم

کدهای CSS

در یک صفحه وب چهار روش می توانید کدهای CSS خود را اجرا کنید. این چهار روش عبارتند از:

  •  In-line (درون خطی)
  • Internal (داخلی)
  •  external (خارجی)
  • import (ایمپورت کردن)

در این آموزش به بررسی تک تک موارد فوق می پردازیم و شما به راحتی می توانید تشخیص دهید که کدام یک از روش‌های فوق برای شما راحت تر و بهتر است

روش In-line (درون خطی)

در این روش در کنار عناصر HTML شما می توانید با استفاده از اتربیوت style کدهای CSS خود را تعریف کنید. بیشتر عناصر HTML از اتریبیوت style پشتیبانی می کند.

روش In-line (درون خطی) چگونه استفاده می شود؟

در مثال زیر شما به راحتی می توانید ببینید که ما با استفاده از روش In-line CSS پاراگراف خود را استایل دهی کردیم و رنگ قرمز را به آن اختصاص دادیم.

روش Internal (داخلی)

در این روش با استفاده از تگ شروع و پایان Style کدهای CSS خود را بین این تگ قرار میدهیم در این روش کد ها معمولاً داخل تگ head قرار می گیرند

روش Internal (داخلی) چگونه استفاده می شود؟

در این روش کافیست نام عنصر HTML مربوطه را آورده و کد های سی اس اس خود را داخل آکولاد قرار دهید.

به مثال زیر توجه کنید.

در مثال فوق پاراگرافی که با عنوان طراحی سایت تعریف شده است با استفاده از روش Internal CSS به آن رنگ قرمز اختصاص داده شده است.

تگ div نیز که با عنوان آموزش برنامه نویسی تعریف شده است به آن رنگ آبی و رنگ پس زمینه مشکی اختصاص داده شده است.

روش external (خارجی)

در این روش کدهای سی اس اس در یک فایل جدا با پسوند css. قرار می گیرد.

 به عنوان مثال اگر ما به پاراگراف استایل دهی کنیم، تمام پاراگراف هایی که در فایل HTML ما قرار دارند تغییرات بر روی آنها اعمال می شود و لازم نیست همانند روش In-line بر روی هر عنصر   دوباره استایل دهی را انجام دهیم.

روش external (خارجی) به شما کنترل بیشتر برای تغییرات در قالب برای هر  عنصر در HTML را می دهد.

روش external (خارجی) چگونه استفاده می شود؟

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

توجه کنید که برای رعایت اصول کد نویسی طراحی وب حتما آنرا بین دو تگ head قرار دهید.

مثال زیر به طور کامل نحوه استفاده از روش External را بیان می کند.

روش import (ایمپورت کردن)

روش دیگر برای بارگذاری فایل های CSS در HTML استفاده از روش ایمپورت می باشد.

در این روش همانند روش Internal در بین تگ head تگ style را قرار می دهیم با این تفاوت که با استفاده از کد زیر

فایل CSS را بین دو تگ استایل بار گذاری می کنیم.

مثال زیر به طور کامل نحوه استفاده از این روش را بیان می کند.

 

شما میتوانید فیلم آموزشی این قسمت را با لینک مستقیم دانلود کنید.

پیشنهاد می کنیم حتما بخوانید :

نظرات بسته شده است.