header
header

Inline CSS چیست؟ به همراه مثال

Inline CSS چیست؟ به همراه مثال

سی اس اس اینلاین چیست

تعریف استایل برای آیتم های html از سه طریق امکان پذیر است:
CSS داخلی (Internal CSS)
CSS خارجی (External CSS)
CSS درون خطی (Inline CSS)


CSS داخلی : درون فایل html و در قسمت head مقادیر Stylesheet تعریف می شود که با تگ style شروع و به پایان می رسد. مثال:

<head>
<style type="text/css">
h1 {color:blue;}
h2 {color:red;}
p {color:green;}
</style>
</head>

CSS خارجی : همانند CSS داخلی است، با این تفاوت که همان محتوای CSS داخلی (بدون تگ Style) در یک فایل مستقل که معمولاً با پسوند .css می باشد، ذخیره شده تا ویرایش استایل در آینده ساده تر باشد. مثال:
محتویات فایل style.css:

h1 {color:blue;}
h2 {color:red;}
p {color:green;}

فایل style.css بایستی با کد زیر در صفحه html و ترجیحاً در قسمت head فراخوانی شود:

<head>
<link rel="stylesheet" type="text/css" href="http://youresite.com/themes/style.css" />
</head>

CSS درون خطی یا (Inline CSS) : برای اکثر تگ های html می توان یک استایل درون همان تگ تعریف کرد. Inline CSS مستقیماً به همان تگ اعمال شده و تاثیری بر تگ های خارج از محدوده خود ندارد. مثال:

<p style="color:red; font-size:18px">This is a paragraph!</p>

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

سعی کنید تا جای ممکن از css اینلاین استفاده نکنید، به این دلیل که باعث تکرار غیرضروری دستورهای استایل می شود.

این مطلب را به اشتراک بگذارید :

a b