مشاوره رایگان

دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان

جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

استایل دهی inline و external و internal - بررسی تفاوت ها

ساختار اصلی یک سایت که (معروف است به front ) را می توان با زبان برنامه نویسی html طراحی نمود. این زبان یکی از پر کاربرد ترین زبان های برنامه نویسی سمت کاربر می باشد. اما این را نیز می دانیم که برای عملی کردن برخی رویداد ها در سایت مانند پویا سازی ، زیبایی و استایل دهی صفحات به زبان های css و javascript نیز نیاز داریم. یعنی html به تنهایی پاسخگوی نیاز های ما نخواهد بود .

از آنجا که css ارتباط تنگاتنگی با ظاهر گرافیگی وب سایت شما دارد ، بیان می کند که داکیومنت ها روی صفحه خروجی و در چاپ چگونه نشان داده شوند. CSS جایگزین های ساده و موثری را برای ویژگی های مختلف تگ های HTML ارائه می دهد. (همانطور که در مقالات پیشین راجع به اهمیت css و لزوم یادگیری آن بارها تذکر داده شد) با استفاده از CSS شما می توانید تعدادی از ویژگی های طراحی را برای یک سند HTML پیاده کنید .

به طور کلی ساخت ظاهر گرافیکی در HTML با استفاده از CSS ممکن است .

در CSS هر مشخصه دارای مقدار می باشد که به وسیله ی علامت (:) از هم جدا می شوند. توضیح مربوط به هر ویژگی نیز توسط علامت نقطه ویرگول (;) از یکدیگر جدا شده اند.

ابتدا اجازه بدهید که مثالی از داکیومنت HTML را مورد بررسی قرار دهیم که برای تعیین رنگ و اندازه ی فونت از تگ <font> استفاده می کند.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

می توانیم با استفاده از style sheet مثال بالا را مانند زیر بازنویسی کنیم.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

خروجی زیر ظاهر خواهد شد :

Hello, World!

شما می توانید به سه روش از CSS در HTML خود استفاده کنید :

Inline style sheet : در این روش از ویژگی style در تگ های HTML استفاده می شود.
Internal Style Sheet : در این روش از تگ <style> برای افزودن دستورات در المان <head> سند HTML استفاده می شود.
External Style Sheet : در این روش از فراخوانی یک فایل دیگر به داخل سند HTML استفاده می شود. قوانین style sheet را در یک فایل css مجزا تعریف می کند، و سپس آن فایل را با استفاده از برچسب در HTML وارد داکیومنت HTML شما می کند.

آشنایی با External Style Sheet :

اگر می خواهید از style sheet خود در صفحات مختلف استفاده کنید، توصیه می شود که یک style sheet متداول در یک فایل مجزا تعریف کنید. یک فایل cascading style sheet دارای ضمیمه هایی مانند css می باشد و با استفاده از تگ <link> وارد فایل های HTML خواهد شد. (راجع به تگ link در مقاله ی سربرگ head مفصل توضیح داده شد ، برای اطلاعات بیشتر به این مقاله مراجعه کنید )

ظاهرسازی به روش خارجی بسیار ایده آل است چون از کدهای CSS بارگزاری شده در تمام صفحات HTML استفاده می شود و نیازی نیست برای هر صفحه و یا برای هر تگ از css با نوشتن کدهای تکراری استفاده نمود.

در این روش که اصل معنای (CSS) را ادا می کند، می توانید برای تغییر ظاهری یک نوع تگ خاص در تمام صفحات سایت تنها با تغییر یک فایل خارجی CSS، ظاهر تمام تگ های مورد نظر در تمام صفحات سایت را تغییر دهید.

در نظر داشته باشید که یک سبک style sheet css را که دارای قوانین زیر است تعریف می کنیم.

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

خروجی زیر را خواهید دید :

This is red

This is thick

This is green

This is thick and green

آشنایی با Internal Style Sheet :

استفاده از CSS داخلی می تواند باعث ایجاد یک سبک کلی برای تمام آیتم های داخل صفحه شود و یا به یک آیتم خاص اشاره کرده و تنها موجب تغییر ظاهر آن تگ شود. برای نوشتن CSS داخلی از تگ <style> استفاده می کنیم. این تگ را می توان داخل تگ <head> سند HTML قرار داد.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

خروجی به صورت زیر است :

This is red

This is thick

This is green

This is thick and green

آشنایی با Inline style sheet :

تغییر ظاهر به روش inline تنها برای مواردی باید استفاده شود که بخواهید یک تگ HTML خاص را به صورت مستقل و بدون وابستگی به سایر تگ ها تغییر شکل و ظاهر دهید.

برای تغییر ظاهر به روش inline از ویژگی style درون تگ استفاده می شود.

مثال :

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

خروجی :

This is red

This is thick

This is green

This is thick and green

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

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

استایل دهی inline و external و internal - بررسی تفاوت ها

آشنایی با External Style Sheet :

آشنایی با Internal Style Sheet :

آشنایی با Inline style sheet :

آیا نیاز به مدرک هم دارید؟