خصائص CSS المخطط
مخطط هو الخط الذي رسمته حول عنصر - خارج الحدود. هذا ويمكن استخدامها لجعل عنصر "stand out" .
المغلق outline خصائص تحدد النمط واللون، وعرض مخطط تفصيلي.
هذا العنصر لديه حدود سوداء رقيقة ومخطط المزدوج الذي هو 10px اسعة وخضراء.
CSS Outline
و outline هو خط التي يتم رسمها حول العناصر (خارج الحدود) لجعل عنصر "stand out" .
ومع ذلك، فإن outline العقار مختلفة من الممتلكات الحدود - و outline ليست جزءا من أبعاد عنصر؛ و لا يتأثر العرض الكلي للعنصر والارتفاع من عرض المخطط التفصيلي.
Outline نمط
و outline-style تحدد الخاصية نمط المخطط.
و outline-style الملكية يمكن أن يكون واحد من القيم التالية:
-
dotted- تعريف مخطط منقط -
dashed- تعريف مخطط متقطع -
solid- تعريف مخطط الصلبة -
double- تعريف مخطط مزدوج -
groove- يحدد الخطوط العريضة مخدد 3D. تأثير يعتمد على قيمة مخطط لون -
ridge- يحدد الخطوط العريضة مخدد 3D. تأثير يعتمد على قيمة مخطط لون -
inset- تعريف مخطط 3D أقحم. تأثير يعتمد على قيمة مخطط لون -
outset- يحدد الخطوط العريضة البداية 3D. تأثير يعتمد على قيمة مخطط لون -
none- يحدد أي مخطط -
hidden- تعريف مخطط خفي
المثال التالي أولا يحدد حدود سوداء رقيقة حول كل <p> العنصر، ثم أنه يظهر مختلفة outline-style القيم:
مثال
p {
border: 1px solid black;
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;}نتيجة:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
انها محاولة لنفسك »  | ملاحظة: لا شيء من خصائص مخطط CSS أخرى هو موضح أدناه يكون له أي تأثير إلا إذا كان outline-style يتم تعيين الخاصية! |
|---|
مخطط اللون
في outline-color يستخدم خاصية لتعيين لون المخطط.
اللون يمكن تعيينها من قبل:
- اسم - تحديد اسم اللون، مثل "red"
- RGB - تحديد قيمة RGB، مثل "rgb(255,0,0)"
- عرافة - تحديد قيمة عرافة، مثل "#ff0000"
- قلب - ينفذ انعكاس اللون (والذي يضمن أن مخطط مرئيا، بغض النظر عن لون الخلفية)
مثال
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}نتيجة:
A colored outline.
عرض المخطط
و outline-width تحدد الخاصية في عرض المخطط التفصيلي.
عرض يمكن ان يحدد حجم معين (في px, pt, cm, em ، الخ) أو باستخدام واحدة من القيم المحددة مسبقا ثلاثة: رقيقة، متوسطة، أو سميكة.
مثال
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
نتيجة:
A thick outline.
A thinner outline.
Outline - الملكية إختزال
لتقصير رمز، فمن الممكن أيضا لتحديد كافة الخصائص مخطط الفردية في خاصية واحدة.
في outline الخاصية هي الخاصية المختصرة للخصائص مخطط الفردية التالية:
-
outline-width -
outline-style(مطلوب) -
outline-color
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 »
جميع خصائص CSS المخطط
| الملكية | وصف |
|---|---|
| outline | يحدد كل خصائص الخطوط العريضة في إعلان واحد |
| outline-color | يحدد لون مخطط |
| outline-offset | يحدد المسافة بين الخطوط العريضة، وعلى حافة الحدود أو عنصر |
| outline-style | يحدد نمط مخطط |
| outline-width | يحدد عرض الخطوط العريضة |