سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه گذشته کار با ویژگی outline-offset را فراگرافتیم؛ ویژگی outline-offset فضایی را میان یک outline و لبه یا مرز یک عنصر ایجاد می کند. این فضای ایجاد شده transparent یا شفاف است.
در این جلسه قرار است به سراغ آموزش کار با ویژگی outline-style در CSS برویم.
آموزش کار با ویژگی outline-style در CSS
به مثال زیر توجه نمایید؛ در این مثال یک استایل را برای outline تنظیم کرده ایم.
مثال :
| div {outline-style: dotted;} |
تعریف و کاربرد
همان طور که در جلسه گذشته نیز اشاره شد؛ outline خطی است در اطراف عناصر که در خارج از مرزها ترسیم می شود تا عنصر “stand out” شود و متمایز به نظر بیاید. با توجه به این تعریف می توان گفت که ویژگی outline-style استایل یک outline را مشخص می کند.
| مقدار پیش فرض | none |
| به ارث بردن | خیر |
| متحرک بودن | خیر |
| نسخه | CSS2 |
| سینتکس JavaScript | “object.style.outlineStyle=”dashed |
نکات و توصیه ها
نکته ۱
outline یک خط است که دور تا دور یک عنصر ترسیم می شود. این خط به دور حاشیه عنصر مورد نظر نمایش داده می شود و نباید آن را با ویژگی border اشتباه گرفت.
نکته ۲
یادتان باشد که outline بخشی از ابعاد عنصر نیست بنابراین ویژگی عرض و ارتفاع عنصر شامل عرض outline نمی شود.
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی outline-style در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
| نام ویژگی |  |  |  |  |  |
| outline-style | ۱٫۰ | ۱٫۵ | ۷٫۰ | ۱٫۲ | ۸٫۰ |
سینتکس CSS
مثال :
| outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; |
مقدار ویژگی
| مقدار | توضیحات |
| none | پیش فرض است – هیچ outline وجود ندارد. |
| hidden | یک outline مخفی را مشخص می کند. |
| dotted | یک outline نقطه دار را به عنوان استایل مشخص می کند. |
| dashed | یک outline را به صورت خط چین به عنوان استایل مشخص می کند. |
| solid | outline به صورت خط پیوسته است. |
| double | outline به صورت دو خطی است. |
| groove | استایل به صورت سه خطی است. این اثر به مقدار رنگ outline بستگی دارد. |
| ridge | استایل به صورت سه خطی است. این اثر به مقدار رنگ outline بستگی دارد. |
| inset | یک استایل مابین سه بعدی در داخل مرز مشخص می کند. این اثر به مقدار رنگ outline بستگی دارد. |
| outset | یک استایل مابین سه بعدی در خارج مرز مشخص می کند. این اثر به مقدار رنگ outline بستگی دارد. |
| initial | ویژگی را به مقدار پیش فرض خود تنظیم می کند. |
| inherit | این ویژگی را از عنصر parent خود به ارث می برد. |
مثال های بیشتر
مثال یک
ایجاد یک outline که مبتنی بر dashed است :
مثال :
| div {outline-style: dashed;} |
مثال دو
ایجاد یک outline که مبتنی بر solid است :
مثال :
| div {outline-style: solid;} |
مثال سه
ایجاد یک outline که مبتنی بر double است :
مثال :
| div {outline-style: double;} |
مثال چهار
ایجاد یک outline که مبتنی بر groove است :
مثال :
| div { outline-style: groove; outline-color: coral; outline-width: 7px; } |
مثال پنج
ایجاد یک outline که مبتنی بر ridge است :
مثال :
| div { outline-style: ridge; outline-color: coral; outline-width: 7px; } |
مثال شش
ایجاد یک outline که مبتنی بر inset است :
مثال :
| div { outline-style: inset; outline-color: coral; outline-width: 7px; } |
مثال هفت
ایجاد یک outline که مبتنی بر outset است :
مثال :
| div { outline-style: outset; outline-color: coral; outline-width: 7px; } |
مثال هشت
تنظیم استایل outline با استفاده از همه مقادیر بالا در یک مثال :
مثال :
| p.a {outline-style: dotted;} p.b {outline-style: dashed;} p.c {outline-style: solid;} p.d {outline-style: double;} p.e {outline-style: groove;} p.f {outline-style: ridge;} p.g {outline-style: inset;} p.h {outline-style: outset;} |
کلام آخر
در این جلسه به آموزش کار با ویژگی outline-style در CSS پرداختیم و آموختیم که این ویژگی استایل یک outline را مشخص می کند.
در جلسه آینده شما را با ویژگی outline-width و نحوه کار با آن آشنا می شویم.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
