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

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>

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

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

آیا این مطلب برای شما مفید بود؟ / اشتراک‌گذاری

آیا این مطلب برای شما مفید بود؟ / اشتراک‌گذاری

نظر دهید

ایمیل شما نشر نخواهد شد
خانه های ضروری نشانه گذاری شده است. *

*


*

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>