آموزش html , css

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

صفحات HTML نمی توانند به تنهایی زیبایی و پویایی داشته باشند. زبانهای مختلفی برای طراحی صفحات وب وجود دارد. ترکیب استفاده از این زبان ها منجر به خلق یک صفحۀ وب می شود. یکی از این زبان ها CSS است. زبان CSS می تواند به ظاهر صفحات وب جلوه های زیبایی دهد. بطور کلی برای استایل دهی با CSS برای HTML سه روش وجود دارد.

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

سه روش استایل دهی برای HTML به شرح زیر می باشند:

  • روش Inline
  • روش Internal
  • روش External

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

روش استایل دهی Inline

این روش یکی از بدترین روش های استایل دهی برای HTML است. چون توسعه آن بعداً سخت است. در این نوع استایل دهی، کدهای CSS، داخل سند HTML و عنصربه کار برده می شوند.

مثال:

خوب، دلیل سختی توسعۀ آن کاملاً روشن است. چون اگر من بخواهم تأثیر این کد تماماً عنصر P را در این صفحه در بربگیرد روش مناسبی نیست. همچنین نمی توانم از این کد چه در همین صفحه و چه در صفحات دیگر استفاده کنم.

پس این روش، روش مناسب و کاربردی نمی باشد، مگر در موارد خاص.

روش استایل دهی internal

 در این روش نیز کدهای CSS داخل سند HTML نوشته می شوند با این تفاوت که در این روش می توان کلاس و آی دی تعریف کرد. همچنین کدها داخل تگ شروع نوشته نمی شوند. و صرفاً داخل تگ شروع و پایانی </style><style> نوشته می شوند.

مثال:

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

روش استایل دهی External

روش رایج و استاندارد، استایل دهی، External بوده و کدهای آن در یک فایل جداگانه با پسوند CSS نوشته می شوند. در این نوع استایل دهی باید فایل CSS را به صفحه HTML تگ link لینک دهیم. تا بتوانیم از کلاس ها و آی دی های آن استفاده کنیم.

همین مثال بالا را در یک فایل CSS با نام Style.css می نویسیم:

پس از آن باید فایل css را به html لینک دهیم:

این کد را داخل تگ شروع و پایانی head قرار دهید.

برچسب ها

حسین درویشی

در حال تحقیق و مطالعه در حوزه هوش مصنوعی و کار با شبکه های عصبی هستم.

نوشته های مشابه

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

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

دکمه بازگشت به بالا