خانه / آموزش CSS / بخش یازدهم- آموزش CSS Outline

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

مهندس فاطمه درخشان

تاریخ بروزرسانی: ۲۱ بهمن ۱۳۹۷ تعداد بازدید : 11 بازدید بدون دیدگاه

بخش یازدهم- آموزش CSS Outline

قدم قبلی >

< قدم بعدی

CSS Outline (طرح کلی CSS)

یکoutline یا طرح کلی، خطی است که در اطراف عناصر بیرون از حاشیه ها (borders) ایجاد می شود تا عنصر “برجسته” شود.

CSS دارای ویژگی های زیر است:

outline-style
outline-color
outline-width
outline-offset
outline

نکته: طرح کلی با حاشیه ها متفاوت است! بر خلاف حاشیه ، طرح کلی خارج از حاشیه عنصر کشیده شده و ممکن است با سایر محتوا همپوشانی داشته باشد. همچنین، طرح کلی بخشی از ابعاد عنصر نیست؛ عرض و ارتفاع کلی عنصر توسط عرض طرح کلی تاثیر نمی پذیرد.

سبک outline

خصوصیت سبک outline، سبک طرح کلی را مشخص می کند و می تواند یکی از مقادیر زیر را داشته باشد:

dotted(نقطه نقطه) – یک طرح نقطه نقطه را تعریف می کند
dashed(نقاشی شده) – یک خط نقاشی را تعریف می کند
solid(جامد) – یک طرح جامع را تعریف می کند
double(دوتایی) – یک طرح دو بعدی را تعریف می کند
groove(شیار) – یک طرح سه بعدی را تعریف می کند
ridge ()– یک خط سه بعدی ریاضی را تعریف می کند
inset ()– یک طرح سه بعدی را تعریف می کند
outset(ابتدای) – یک طرح اولیه ۳D را تعریف می کند
none(هیچ کدام) – هیچ نظری را تعریف نمی کند
hidden(پنهان) – یک طرح پنهان را تعریف می کند
مثال زیر نشان می دهد مقادیر سبک های مختلف:

مثال:

<html>
<head>
<style>
p {outline-color:red;}

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;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>
</html>

<html>

<head>

<style>

p {outline-color:red;}

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;}

</style>

</head>

<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>

<p class="dashed">A dashed outline</p>

<p class="solid">A solid outline</p>

<p class="double">A double outline</p>

<p class="groove">A groove outline. The effect depends on the outline-color value.</p>

<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>

<p class="inset">An inset outline. The effect depends on the outline-color value.</p>

<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>

</html>

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

همین حالا ببینید: بخش دوازدهم- آموزش CSS Text یا آموزش متن در CSS

نکته: هیچ کدام از خواص طرح کلی هیچ اثری نخواهند داشت، مگر اینکه مشخصه سبک طراحی شده باشد!

رنگ outline

برای تنظیم رنگ طرح، از ویژگی outline-color استفاده می شود.

رنگ را می توان توسط عناصر زیر تعیین کرد:

name – یک نام برای رنگ مشخص کنید، مانند “red”
RGB – مقدار RGB را مشخص کنید، مانند“rgb(255,0,0)”
Hex – شماره عدد رنگ را در مبنای شانزده مشخص کنید، مانند “# ff0000”
invert – بکار بردن یک لایه رنگ معکوس (که تضمین می کند که طرح کلی قابل مشاهده است، صرف نظر از پس زمینه رنگی)
مثال زیر چند طرح کلی با رنگ های مختلف را نشان می دهد. همچنین توجه داشته باشید که این عناصر دارای حاشیه نازک سیاه و سفید درون طرح هستند:

مثال:

<html>
<head>
<style>
p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 1px solid black;
  outline-style: double;
  outline-color: green;
}

p.ex3 {
  border: 1px solid black;
  outline-style: outset;
  outline-color: yellow;
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A double green outline.</p>
<p class="ex3">An outset yellow outline.</p>

</body>
</html>

<html>

<head>

<style>

p.ex1 {

border: 1px solid black;

outline-style: solid;

outline-color: red;

}

p.ex2 {

border: 1px solid black;

outline-style: double;

outline-color: green;

}

p.ex3 {

border: 1px solid black;

outline-style: outset;

outline-color: yellow;

}

</style>

</head>

<body>

<h2>The outline-color Property</h2>

<p class="ex1">A solid red outline.</p>

<p class="ex2">A double green outline.</p>

<p class="ex3">An outset yellow outline.</p>

</body>

</html>

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

همین حالا ببینید: بخش ششم- آموزش حاشیه ها (Borders)در CSS

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

مثال:

<html>
<head>
<style>
p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}
</style>
</head>
<body>

<h2>Using outline-color:invert</h2>

<p class="ex1">A solid invert outline.</p>

</body>
</html>

<html>

<head>

<style>

p.ex1 {

border: 1px solid yellow;

outline-style: solid;

outline-color: invert;

}

</style>

</head>

<body>

<h2>Using outline-color:invert</h2>

<p class="ex1">A solid invert outline.</p>

</body>

</html>

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

عرض outline

خصوصیت outline-width عرض طرح را می دهد مشخص می کند و می تواند یکی از مقادیر زیر را داشته باشد:

thin (نازک، معمولا ۱px)
medium (متوسط، معمولا ۳ پیکسل)
thick (ضخیم، به طور معمول ۵px)
A specific size (یک اندازه مشخص، در px، pt، cm، em، و غیره)
مثال زیر نشان می دهد برخی از خطوط با عرض های مختلف:

مثال:

<html>
<head>
<style>
p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}</style>
</head>
<body>

<h2>The outline-width Property</h2>

<p class="ex1">A thin outline.</p>
<p class="ex2">A medium outline.</p>
<p class="ex3">A thick outline.</p>
<p class="ex4">A 4px thick outline.</p>

</body>
</html>

<html>

<head>

<style>

p.ex1 {

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: thin;

}

p.ex2 {

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: medium;

}

p.ex3 {

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: thick;

}

p.ex4 {

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: 4px;

}</style>

</head>

<body>

<h2>The outline-width Property</h2>

<p class="ex1">A thin outline.</p>

<p class="ex2">A medium outline.</p>

<p class="ex3">A thick outline.</p>

<p class="ex4">A 4px thick outline.</p>

</body>

</html>

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

همین حالا ببینید: بخش سیزدهم- آموزش فونت CSS یا آموزش CSS Fonts

outline- ویژگی مختصر نویسی

خصوصیت طرح کلی یک خصوصیت قابل مختصر نویسی هست یک شرط کوتاه برای تنظیم ویژگی های زیر است:

outline-width
outline-style (required)
outline-color

خصوصیت طرح به عنوان یک، دو یا سه مقدار از لیست بالا مشخص شده است.

مثال زیر برخی از خطوط مشخص شده با ویژگی مختصات خلاصه را نشان می دهد:

مثال:

<html>
<head>
<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>

<h2>The outline Property</h2>

<p class="ex1">A dashed outline.</p>
<p class="ex2">A dotted red outline.</p>
<p class="ex3">A 5px solid yellow outline.</p>
<p class="ex4">A thick ridge pink outline.</p>

</body>
</html>

<html>

<head>

<style>

p.ex1 {outline: dashed;}

p.ex2 {outline: dotted red;}

p.ex3 {outline: 5px solid yellow;}

p.ex4 {outline: thick ridge pink;}

</style>

</head>

<body>

<h2>The outline Property</h2>

<p class="ex1">A dashed outline.</p>

<p class="ex2">A dotted red outline.</p>

<p class="ex3">A 5px solid yellow outline.</p>

<p class="ex4">A thick ridge pink outline.</p>

</body>

</html>

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

Outline Offset

ویژگی های طرح کلی-Offset فضای بین یک طرح و لبه / حاشیه یک عنصر را اضافه می کند. فضای بین عنصر و طرح آن شفاف و غیر قابل دیدن است.

مثال زیر یک خط ۱۵px را خارج از لبه حاشیه مشخص می کند:

مثال زیر نشان می دهد که فضای بین یک عنصر و طرح آن شفاف است:

مثال:

<html>
<head>
<style>
p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>

<h2>The outline-offset Property</h2>

<p>This paragraph has an outline 15px outside the border edge.</p>

</body>
</html>