CSS Tutorial

شرح الخاصية Outline فى CSS

سجين القدر
اخر تحديث :

الخاصية Outline فى CSS

CSS Outline – سيتم شرح الخاصية Outline فى CSS فى هذا الفصل، مع بعض الأمثلة التوضيحية.

CSS Outline

Outline هو خط يتم رسمه حول العناصر، خارج الحدود ، لجعل العنصر بارزًا.

مثال للتوضيح

Outline Example
<!DOCTYPE html>
			<html>
			<head>
			<title>CSS Outline</title>
			<meta charset="UTF-8" />

			<style>
            div {
			outline: solid;
            }
			</style>
			</head>
			<body>

			<div>Outline Example</div>

			</body>
			</html>
Outline Example

الخاصية outline و border متشابهين جدًا. ومع ذلك ، تختلف الـ outline عن الـ border، حبث لا تشغل outline مساحة أبدًا ، حيث يتم رسمها خارج محتوى العنصر.

نمط الخط الخارجى – Outline style

تحدد خاصية outline-style نمط الخط الخارجى، كالتالى:

<style>
    div {
	outline-style: dotted;
    }
	</style>

	<div>Dotted Outline Example.</div>
Dotted Outline Example.

هناك قيم كثيرة مسموح بها لهذه الخاصية:

القيمةالوصف
noneلا يعرض أي خطوط.
hiddenيحدد خط مخفي.
dottedيعرض سلسلة من النقاط المستديرة.
dashedيعرض سلسلة من الشرطات القصيرة المربعة أو مقاطع الخط.
solidيعرض خطًا منفردًا ومستقيمًا.
doubleيعرض خطين مستقيمين.
grooveيعرض خطوط بمظهر منحوت (عكس ridge).
ridgeيعرض خطوط بمظهر مقذوف (عكس groove).
insetيعرض خطوط يجعل العنصر يبدو مدمجًا (عكس outset)
outsetيعرض خطوط يجعل العنصر يبدو مزخرفًا (عكس inset).

مثال للتوضيح:

<style>
    .none { outline-style: none;  }

    .hidden { outline-style: hidden; }

    .dotted { outline-style: dotted; }

    .dashed { outline-style: dashed; }

    .solid { outline-style: solid; }

    .double { outline-style: double; }

    .groove { outline-style: groove; }

    .ridge { outline-style: ridge; }

    .inset { outline-style: inset; }

    .outset { outline-style: outset; }
	</style>

	<div class="hidden">Hidden outline Example.</div>
	<div class="dotted">Dotted outline Example.</div>
	<div class="dashed">Dashed outline Example.</div>
	<div class="solid">Solid outline Example.</div>
	<div class="double">Double outline Example.</div>
	<div class="groove">Groove outline Example.</div>
	<div class="ridge">Ridge outline Example.</div>
	<div class="inset">Inset outline Example.</div>
	<div class="outset">Outset outline Example.</div>

Dotted outline Example.

Dashed outline Example.

Solid outline Example.

Double outline Example.

Groove outline Example.

Ridge outline Example.

Inset outline Example.

Outset outline Example.

سيكون الـ outline غير مرئي للعديد من العناصر إذا لم يتم تعريف نمطه style. هذا لأن النمط الافتراضي none. الاستثناء الملحوظ هو عناصر الإدخال input ، والتي يتم منحها نمطًا افتراضيًا بواسطة المتصفحات.

عرض الخط الخارجى – Outline Width

 

تحدد خاصية outline-width عرض الخط الخارجى، ويمكن أن تحتوي على إحدى القيم التالية:

  • length: حجم محدد بالـ (px ، pt ، cm ، … إلخ)
  • thick يكافئ عادةً 5px بكسل في متصفحات سطح المكتب.
  • thin : يكافئ عادةً 1px بكسل في متصفحات سطح المكتب.
  • medium : يكافئ عادةً 3px بكسل في متصفحات سطح المكتب.

مثال للتوضيح:

.px  {
	outline-style: dotted;
	outline-width: 6px;
	}

	.thick {
	outline-style: ridge;
	outline-width: thick;
	}

	.medium {
	outline-style: solid;
	outline-width: medium;
	}

	.thin {
	outline-style: solid;
	outline-width: thin;
	}
Pixel Example

Thick Example.

Medium Example.

Thin Example.
Advertisements

لون الخط الخارجى – Outline Color

يتم استخدام خاصية outline-color لتعيين لون الخط الخارجى.

يمكن تعيين اللون عن طريق:

  • إسم اللون مباشرًا، مثل “black”.
  • HEX، مثل “000#”.
  • RGB، مثل “(rgb (0,0,0”.
  • HSL، مثل “(hsl(0, 0%, 0%“.
  •  invert، إجراء عكس اللون (مما يضمن أن يكون الخط الخارجى مرئيًا ، بغض النظر عن خلفية اللون).

مثال للتوضيح:

/* color by [name] */
	.color_name { 
	outline-color: black;
	outline-style: solid;
	}

	/* color by [hex] */
	.hex { 
	outline-color: #000;
	outline-style: solid;
	}

	/* color by [rgb] */
	.rgb { 
	outline-color: rgb(0, 0, 0);
	outline-style: solid;
	}

	/* color by [hsl] */
	.hsl { 
	outline-color: hsl(0, 0%, 0%);
	outline-style: solid;
	}

	/* color by [invert] */
	.invert { 
	outline-color: invert;
	outline-style: solid;
	}
Color name Example

Hex Example

RGB Example

HSL Example

Invert Example

خاصية الخطوط الخارجية المختصرة – Outline Shorthand

 

خاصية outline هي خاصية مختصرة لتعيين خصائص الـ outline التاليه:

  • outline-color.
  • outline-width.
  • outline-style (مطلوبة).

مثال للتوضيح:

.first_example {
	outline: ridge;
	}

	.second_example {
	outline: dotted red;
	}

	.third_example {
	outline: 5px solid green;
	}

	.fourth_example {
	outline: thin dashed blue;
	}
First Example

Second Example

Third Example

Fourth Example

إزاحة الخط الخارجى – Outline Offset

تضيف خاصية outline-offset مسافة بين الخط الخارجى وحد العنصر. المسافة بين العنصر والخط الخارجى شفافة (transparent). كالتالى:

div {
	margin: 20px;
	border: 2px solid black;
	outline: 2px solid blue;
	outline-offset: 10px;
	}
Outline Offset
تعديل المقال
الأقسام

مقالات قد تهمك