logo
logo
تبلیغ کلیکی تاپ سایت 98

دستور outline در css

دستور 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>

کد خلاصه outline

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

کد زیر خلاصه شده دستورات outline-style و outline-width و style-color می باشد.

outline: 4px dotted blue;

امیدواریم این آموزش برای شما مفید باشد.

موفق باشید.

عزیزانی که تمایل دارند به تیم نویسندگی تاپ سایت 98 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98

منبع: تاپ سایت 98

تگ:

دوره های آموزشی دوره های آموزشی

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

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.