ویژگی outline چیست؟ چگونه از کادر outline در Css استفاده کنیم؟
دومین نوع از کادرهای قابل مشاهده که در آموزش css به آنها می‌پردازیم، outline ها هستن.
outline ها شباهت های بسیار زیادی به border ها دارن. نقششون کاملا شبیه به دیوار دور عنصره، ضخامت دارن، رنگ دارن و نوع هم دارن.
اما تفاوت های بسیار بسیار اساسی و مهمی هم دارن که در مقاله تفاوت کادر های مختلف CSS، اون ها رو به صورت کامل بررسی کردیم.
outline ها، پشت سر border ها قرار می‌گیرن. به شکل زیر توجه کنین:
پس تا الان با نحوه کار با outline در css آشنا شدیم.
سرفصل‌های پست
خاصیت های outline در CSS
برای تعریف کردن outline دور یک عنصر، کافیه از خاصیت های outline استفاده کنیم.
نحوه تعریف کردن outline، کاملا شبیه به نحوه تعریف کردن border هست.
این خاصیت ها عبارتند از:
- outline-style: نوع حاشیه رو مشخص می‌کنه.
- outline-color: رنگ حاشیه رو مشخص می‌کنه.
- outline-width: ضخامت حاشیه رو مشخص می‌کنه.
- outline: خاصیت کوتاه شده یا shorthand property. تمام کار ها رو در یک خاصیت انجام می‌ده.
نوع حاشیه (outline-style) در ویژگی outline
- None: هیچ حاشیه ای تعریف نمیشه. ( فرقی با فرانخوندن outline-style نداره )
- Dotted: حاشیه به شکل نقطه چین تعریف می‌کنه.
- Dashed: حاشیه به شکل خط چین تعریف می‌کنه.
- Solid: حاشیه به شکل خط ممتد تعریف می‌کنه.
- Double: حاشیه به شکل دو خط موازی و روی هم تعریف می‌کنه.
- Groove: یک خط حاشیه ی سه بعدی نمایش می‌ده که در اونن خطوط بالایی و سمت چپ پررنگ تر از خطوط دیگه هستن.
- Ridge: در این حالت خطوط حاشیه به صورت سه بعدی و با طیف رنگی نمایش داده می شن.
- Inset: این مقدار یک حاشیه ی داخلی سه بعدی تعریف می‌کنه که در اون معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگه هستن.
- Outset: حاشیه ی سه بعدی خارجی تعریف می‌کنه که در اون خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگه هستن.
نکته: همونطور که در مقاله border گفته شد، شرط برقراری دستور border، اینه که خاصیت border-style فراخونی شه. در ویژگی outline هم این شرط رو داریم و بدون فراخونی خاصیت outline-style، دستور outline برقرار نمیشه.
ضخامت حاشیه (outline-width)
در این خاصیت، می‌تونیم ضخامت حاشیه ایجاد شده توسط صفت outline رو تعریف کنیم. مانند border ها، این خاصیت می‌تونه یا برحسب پیکسل و واحدهای دیگه باشه، یا برحسب سه مقدار thin، medium و thick.
p.one {
outline-style: solid;
outline-width: 5px;
}
p.two {
outline-style: solid;
outline-width: medium;
}
در اینجا قطعه کد دوم میگه:
در عناصر p، عنصری با کلاس two پیدا کن، به آن حاشیه ای ( از نژاد outline! ) از نوع solid (خط ممتد) و با ضخامت متوسط اضافه کن.
قطعه کد اول رو به خودتون می‌سپارم.
رنگ خط حاشیه (outline-color)
توسط این خاصیت می‌تونیم رنگ outline خودمون رو تعیین کنیم. مقادیر مورد قبول این خاصیت، از مقادیری تشکیل میشن که در مقاله های رنگ های CSS خوندیم، که عموما شامل سه مقدار زیر هستن:
نام پیش فرض – اسم رنگ دلخواه رو مشخص می‌کنه، مثل ” red”
()rgb – یک مقدار red blue green) rgb ) تعریف می‌کنه.
Hex – یک مقدار شانزده شانزدهی(hex) مثل “#ff0000” مشخص می‌کنه.
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
خاصیت outline یا outline shorthand property
توسط این خاصیت، می‌تونیم بدون تعریف کردن outline-style ،outline-width و outline-color، تنها با خاصیت outline، یک حاشیه کامل برای عنصرمون تعریف کنیم.
به مثال زیر برای درک کاربرد این خاصیت توجه کنید:
p {
outline: 5px solid red;
}
تو کد بالا، برای عناصر p، حاشیه ای رو تعریف میکنیم که دارای ضخامت ۵ پیکسل، رنگ قرمز و از نوع ممتد هست.
مثال های ویژگی outline
تو این بخش، دو مثال کلی از دستور outline در css رو بررسی میکنیم.
مثال ۱:
در این مثال، برای عنصر p، یک حاشیه با استفاده از تمامی خاصیت های outline تعریف میکنیم.
دستورات outline به کار رفته در مثال بالا، عبارتند از:
p{
outline-style: solid;
outline-color:#23282d;
outline-width: 3px;
}
در کد بالا، نوع outline رو ممتد، ضخامت اون رو ۳ پیکسل، و رنگ اون رو توسط کد رنگ 23282d# تعیین کردیم.
مثال ۲:
تو این مثال، از خاصیت کوتاه شده outline (اوت لاین – اوتلاین) استفاده کردیم تا بتونیم حاشیه مناسبی برای عنصرمون تعریف کنیم.
p{
outline: thick double rgb(83,104,114);
}
تو کد فوق، ضخامت رو با مقدار thick، رنگ رو با یک مقدار ()rgb و نوع حاشیه رو double تعیین کردیم.
اگه ابهامی تو مثال ها براتون پیش اومد، حتما تو قسمت نظرات پایگاه دانش میزفا ذکر کنین. پاسخگو خواهم بود.
پایان ترم
[box type=”info” class=”question-from-users” width=””]سوال:
دور یک عنصر، توسط outline حاشیه ای رو بسازید که ضلع بالای اون dotted، و اضلاع دیگه اون solid باشن.
نکته: این سوال، بیشتر جنبه آموزشی داره تا تست، پس انتظار هر پاسخی رو داشته باشین 🙂
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
تو این مقاله، با مفهوم outline آشنا شدیم و فهمیدیم که چطور می‌تونیم برای عناصرمون، یک حاشیه از نوع outline تعریف کنیم و به طور کلی آموزش کار با ویژگی Outline در CSS را بررسی کردیم.
یاد گرفتیم که تعریف outline، به دو روش، یکی توسط چند خاصیت و دیگری توسط یک خاصیت shorthand انجام میشه.
امیدوارم که تمامی مطالب براتون روشن و واضح بوده باشه و مطالب مفید و جدیدی رو به دونسته هاتون در مورد CSS اضافه کرده باشین.
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌ها ارسال کنین.
مدیر محتوا: علی اسمعیلی
18 پاسخ
ویژگی های style , color ,width برای outline مثل border شکسته نمی شن و نمیشه ویژگی ها رو به راست و چپ و بالا و پایین تقسیم کرد
کاملا درسته، ممنون از شما 🙂
میشه به outline ها radius داد؟
نه نمیشه
مگر به کمک یک سری ترفندها در box-shadow
سلام
برای outline نمیشه جداگانه این حالت ها رو در نظر گرفت چون مثل border که مثلا border-top-style داشت، outline-top-style نداریم یعنی نمیشه اینا رو تفکیک کرد
ولی میشه برای همشون یه حالت در نظر گرفت
سلام حسين. كاملا درسته پاسخت. ممنون ازت ?
ممنون بابت مقاله های خوبتون
یه سوال هم داشتم، جایزه این پاسخ ها به همین ایمیل داخل اکادمی ارسال میشه؟ چون تا حالا چیزی اضافه نشده به پنلم خواستم بدونم هنوزم پاسخ ها هنوز جایزه داره یا وقتشون تموم شده؟
خواهش میکنیم حسین عزیز. اره به پنلت اضافه میشن. و وقت پاسخگوییشون هم بی نهایته?
چون حجم پاسخ ها بالاست یکم اضافه کردنشون به پنل طول میکشه اما تا الان باید جایزه هات اضافه شده باشن، یه بررسی بکن
ممنون بابت تایمی که برای کوییزات میزاری?
سلام، خسته نباشید.
ممنون از مطالب مفید و جامعتون.
سوالی که ازتون داشتم اینه که چطور میشه به outline زاویه داد؟ مثل border که گوشه‌هاش رو زاویه‌دار میکنیم که منحنی‌تر بشه.
سلام غزل. outline مثل border نمیتونه انحنا قبول کنه، اصلا برای همینه که خاصیتی به نام outline-radius نداریم 🙂
اما راه های میانبر زیاده، مثلا میتونی از box-shadow استفاده کنی
سلام. من یه منو در بالای صفحه وبسایتم دارم اون منو به بالای صفحه وب نچسبیده و فاصله داره چجوری میتونم اون فاصله رو از بین ببرم و به حاشیه بالا بچسبونمش؟
سلام محمد. براي اين موضوع بايد كدي كه نوشتي بررسي بشه، اما حدس ميزنم مشكل از مارجين و پدينگ پيش فرض صفحه باشه.
از كد زير استفاده كن:
*{ margin:0px; padding: 0px; }كد بالا مارجين ها و پدينگ هاي پيش فرض رو از بين ميبره و همه رو از صفر استارت ميزنه.
اگر مشكل حل شد كه عاليه، اما اگر حل نشد احتمالا تو كدي كه نوشتي يه جايي ايراد هست كه بايد بررسي شه.
You can’t set an outline on just one (or two, or three) sides of an elements. All sides only. There is no such thing as outline-top, outline-right, outline-bottom, or outline-left like there is with border.
فکر کنم منظور این که نمیشه سه طرف یک شئی مثلا خط کامل باشه و یک طرف نقطه چین باشه
دقیقا همینطوره مهدی. ما نمیتونیم مثل border، برای outline هم ویژگی های متفاوتی برای هر طرف در نظر بگیریم.
پس جواب همینه؟ نمیشه
دقیقا مهران. این نکته مهمی توی outlineهاست که اکثر هنرجو ها اول کار اشتباه میکنن دربارش. ما سعی کردیم که پیدا کردن این نکته رو به خودتون بسپاریم.
سلام وقت بخیر من چند راه رو امتحان کردم ولی جواب نداد میشه جواب پرسش آخر ترم رو بگید
p{
outline-style :dotted solid solid solid
}
سلام پریسا.
تو سوال گفتیم: انتظار هر پاسخی رو داشته باشین 🙂
این سوال یه نکته آموزشی داره، که در آینده دربارش صحبت میکنیم. اما فعلا سعی کن خودت نکتش رو از لینک زیر دربیاری:
نکتش رو که پیدا کردی برات به عنوان پاسخ صحیح در نظر میگیریم