دستور outline در css

هدایت عباسی آموزش CSS

آموزش ویدیویی دستور outline در css

در این فیلم و آموزش ویدئویی با دستور outline در css آشنا خواهید شد.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش css از تاپ سایت 98 به سراغ دستور outline در css می رویم. در این آموزش با دستورات outline-style و outline-width و style-color و style-offset با ذکر مثال آشنا خواهیم شد. پس با ما باشید.

کاربرد دستور outline

کاربرد دستور outline ، انداختن کادر بیرونی دور عنصر انتخاب شده می باشد.

تفاوت border و outline در css

برای فهم بهتر تفاوت border و outline در css بهتر است مثال زیر را اجرا نمایید.

یک فایل html ایجاد نمایید کد زیر را در آن قرار دهید و آن را اجرا نمایید مشاهده می کنید border برای انداختن کادر دور عنصر انتخاب می باشد اما outline برای انداختن کادر با فاصله مشخص از border می باشد یعنی کادر بیرونی است.

مثال دستور outline

در این مثال با دستورات outline-style و outline-width و style-color و style-offset آشنا می شوید.

دستور outline-width ضخامت خط را مشخص می کند.

دستور outline-color رنگ خط را مشخص می کند.

دستور outline-style نوع خط را مشخص می کند. خط می تواند ساده ، نفطه چین و غیره باشد.

دستور outline-offset فاصله خط با border را مشخص می کند.

در این مثال یک کادر دور div قرار داده ایم. برای اینکه تفاوت border و outline را متوجه شوید از دستور border نیز استفاده کرده ایم.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TopSite98.com</title>
<style>
#d1{
border: 1px solid red;
outline-style:dotted;
outline-color: blue;
outline-width: 3px;
outline-offset: 4px;
}
</style>
</head>
<body>
<div id="d1">
<h1>TopSite98.com</h1>
<a href="https://topsite98.com/">تاپ سایت 98</a>
</div>
</body>
</html>