خرید بک لینک قوی - سفارش بک لینک - خرید بک لینک ارزان
کانال تلگرام

با عضویت در کنال تلگرام تاپ وردپرس جدید ترین مطالب سایت را در گوشی خود مشاهده کنید

برده یک ارباب دارد اما جاه‌طلب به تعداد افرادی که به او کمک می‌کنند. (بردیر فرانسوی)

وبفا پورتال جامع فارسی

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

دسته بندی :آموزش , اینترنت , برنامه نویسی , کد نویسی , وب
تاریخ : 6 ژانویه 2019
نویسنده admin
2,084 بازدید
0 نظر

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 اینلاین استفاده نکنید، به این دلیل که باعث تکرار غیرضروری دستورهای استایل می شود.

برچسب ها:

, , , , ,

مطالب مشابه

نظرات کاربران

دیدگاهتان را بنویسید

نکات مهم قبل از ارسال نظر

  • نشانی ایمیل شما منتشر نخواهد شد
  • نظرات شما پس از بررسی و تایید نمایش داده می شود
  • لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید