این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با ویژگی Outline در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با ویژگی Outline در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با ویژگی Outline در CSS
اگه یادتون باشه در جلسات قبلی ما با ویژگی Border آشنا شدیم و یاد گرفتیم که با استفاده از این ویژگی میتونیم به دور یک تگ یک خط بکشیم ( خط دور لبه )
حال ویژگی Outline هم دقیقا شبیه همون Border می باشد، فقط ویژگی Outline خط رو به دور لبه ی خارجی تگ میکشه ( یعنی Border خط رو به دور لبه داخلی و Outline به دور لبه خارجی )
ویژگی Outline چندین حالت دارد که این حالت ها به شرح زیر می باشد :
- outline-style : استایل خط دور لبه خارجی
- outline-color : رنگ خط دور لبه خارجی
- outline-width : اندازه خط دور لبه خارجی
- outline-offset : فاصله بین لبه داخلی و لبه خارجی
Free-Learn
ویژگی Outline-Style
با استفاده از این ویژگی میتوان استایل یا بطور کلی شکل شمایل خط دور لبه ی بیرونی را مشخص کرد.
این ویژگی دارای مقادیر مختلفی می باشد که این مقادیر به شرح زیر می باشند :
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
مثال شماره ۱ : در مثال زیر از تمامی مقادیر بالا استفاده شده است
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> p.dotted {outline-style: dotted;} p.dashed {outline-style: dashed;} p.solid {outline-style: solid;} p.double {outline-style: double;} p.groove {outline-style: groove;} p.ridge {outline-style: ridge;} p.inset {outline-style: inset;} p.outset {outline-style: outset;} p.none {outline-style: none;} p.hidden {outline-style: hidden;} </style> |
Free-Learn
ویژگی Outline-Color
با استفاده از این ویژگی نیز میتوان رنگ خط دور لبه ی بیرونی را مشخص کرد. ( میتونیم از هریک از روش های رنگدهی مثه نام رنگ ، کد hex ، کد rgb و.. استفاده کنیم )
مثال شماره ۱ : مشخص کردن رنگ Outline
|
1 2 3 |
.myText{ outline-color:red; } |
Free-Learn
ویژگی Outline-Width
با استفاده از این ویژگی میتوان اندازه خط دور لبه ی بیرونی یک عنصر را مشخص کرد.
مثال شماره ۱ : مشخص کردن اندازه Outline
|
1 2 3 |
.myText1{ outline-width:1px; } |
Free-Learn
ویژگی Outline-Offset
با استفاده از این ویژگی میتوان یک فاصله ( فضای خالی ) بین خط دور لبه داخلی و بیرونی عنصر ایجاد کرد.
مثال شماره ۱ : استفاده از ویژگی outline-offset
|
1 2 3 |
.myText{ outline-offset:3px; } |
Free-Learn
خلاصه نویسی ویژگی Outline
شکل کلی خلاصه نویسی ویژگی Outline بصورت زیر می باشد :
- outline-style ضروری است و حتما باید نوشته شود
|
1 |
outline:outline-width outline-style outline-color; |
مثال : خلاصه نویسی ویژگی Outline در CSS
|
1 2 3 |
.myText{ outline:3px solid blue; } |
