تماس با ما

  • تلفن21-2260-2917
  • ایمیل پشتیبانی:info@holooweb.ir
  • بخش فروش:hoolooweb@gmail.com

بستن

پشتیبانی

CSSدرون خطی یا CSS Inline

CSSدرون خطی یا CSS Inline
  • 22
    دسامبر

CSSدرون خطی یا CSS Inline

روش کد نویسی درون خطی یا CSS Inline

اولویت فراخوانی کد CSS خطی نسبت به سایر روش CSS

در مقالات گذشته گفته بودیم که به سه روش مختلف میتوان از css برای استایل و سبک دادن به فایل html استفاده کرد، css درون خطی اولویت بیشتری نسبت به دو روش دیگر داخلی و خارجی دارد. یعنی اگر شما از بیش از یک روش برای style دادن به یک فایل html یکسان استفاده میکنید، css درون خطی ویژگی های بقیه متدها را لغو میکند و نظر نهایی را در استایل فایل اجرا خواهد کرد. css درون خطی فقط باید در استایل هایی استفاده شود که لازم نیست به همه ی عناصر در فایل یا وب سایت شما اعمال شوند.Style-sheet

تفاوت css درون خطی با سایر روش های سی اس اس

قواعد استفاده از css درون خطی کمی متفاوت تر از قواعد css داخلی و خارجی است.بدین صورت کهcssدرون خطی مستقیما به هر عنصر html اعمال میشود، به جای اینکه تنها با یک دستور به همه موارد یک عنصر اعمال شود.  در این روش نیازی به استفاده از “selector” نیست.

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

  • تغییر یک بخش خاص این روش فقط یکبار میتونه استفاده بشه چون مستقیما داخل موضوع مورد نظر قرار میگیره و نمیتونه روی بقیه موضوعات تاثیر بگذارد .
  • معمولا از این روش برای باز نویسی یا Override کردن یک یا چند ویژگی،خاصیت CSS که قبلا برای موضوعی تعریف شده است استفاده میگردد.
  • در این روش شما نمیتونید از Selector های CSS  استفاده کنید.

مثال :

 

 

 

<html>

<head>

<title> Test page </title>

<style type=”text/css”>

#box p{background:Red;color:black}

</style>

</head>

<body>

<div id=”box”>

<p>This is a pharagraph</p>

<p style=”background:blue;color:white”>This is a pharagraph</p>

<p>This is a pharagraph</p>

<p>This is a pharagraph</p>

</div>

</body>

</html>

نتیجه ی کد بالا :

دو روش کد Internal و Inline استفاده شد . در خط هفتم کد های بالا روش Internal تمام المان های<p> که در داخل Box هستند، پس زمینه قرمز و رنگ متن ها سفید می شوند .

با استفاده از روش Inline در سطر 14 رنگ پس زمینه و رنگ متن پاراگراف دوم با بقیه تفاوت داره. البته همین کار رو بدون اینکه از روش Inline استفاده کنیم هم میشه انجام داد.

 

 

 

 

Comments are closed.