الفرق بين المراجعتين ل"CSS/border-left"
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
(إضافة قسمين) |
||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>border-left</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>border-left</code>}}</noinclude> | ||
− | الخاصية <code>border-left</code> في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات <code>[[CSS/border-left-color|border-left-color]]</code> و <code>[[CSS/border-left-style|border-left-style]]</code> و <code>[[CSS/border-left-width|border-left-width]]</code>، هذه الخاصيات تصف كيفية عرض الإطار <code>[[CSS/border|border]]</code> الأيسر للعنصر. | + | الخاصية <code>border-left</code> في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات <code>[[CSS/border-left-color|border-left-color]]</code> و <code>[[CSS/border-left-style|border-left-style]]</code> و <code>[[CSS/border-left-width|border-left-width]]</code>، هذه الخاصيات تصف كيفية عرض الإطار <code>[[CSS/border|border]]</code> الأيسر للعنصر. |
− | + | ||
− | + | == بطاقة الخاصية == | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
سطر 34: | سطر 26: | ||
* <code>[[CSS/border-left-color|border-left-color]]</code>: اللون المحسوب. | * <code>[[CSS/border-left-color|border-left-color]]</code>: اللون المحسوب. | ||
|} | |} | ||
+ | <syntaxhighlight lang="css"> | ||
+ | border-left: 1px; | ||
+ | border-left: 2px dotted; | ||
+ | border-left: medium dashed blue; | ||
+ | </syntaxhighlight>وكما في جميع الخاصيات المختصرة، تضبط الخاصية <code>border-left</code> قيم جميع الخاصيات التي تستطيع ضبطها، حتى لو لم نُحدِّد قيمةً لتلك الخاصيات، لأنها ستضبطها إلى قيمها الابتدائية، وهذا يعني أنَّ الشيفرة:<syntaxhighlight lang="css"> | ||
+ | border-left-style: dotted; | ||
+ | border-left: thick green; | ||
+ | </syntaxhighlight>ستصبح في النهاية كما يلي:<syntaxhighlight lang="css"> | ||
+ | border-left-style: dotted; | ||
+ | border-left: none thick green; | ||
+ | </syntaxhighlight>لاحظ أنَّ قيمة الخاصية <code>[[CSS/border-left-style|border-left-style]]</code> المُحدَّدة قبل الخاصية <code>border-left</code> سيتم تجاهلها؛ ولأنَّ [[CSS/initial value|القيمة الابتدائية]] للخاصية <code>[[CSS/border-left-style|border-left-style]]</code> هي <code>none</code>، فالقواعد السابقة لن تؤدي إلى إظهار إطار أيسر. | ||
+ | == أمثلة == | ||
+ | سنضبط في المثال الآتي إطارًا على الجانب الأيسر لعناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> لونه (<code>[[CSS/border-left-color|border-left-color]]</code>) أخضر، وعرضه (<code>[[CSS/border-left-width|border-left-width]]</code>) يساوي <code>4px</code> وشكله (<code>[[CSS/border-left-style|border-left-style]]</code>) منقط. شيفرة HTML:<syntaxhighlight lang="html"> | ||
+ | <div>لهذا العنصر إطارٌ على حافته اليسارية</div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
div { | div { | ||
− | border-left: 4px dotted | + | border-left: 4px dotted green; |
padding: 0.5em; | padding: 0.5em; | ||
} | } | ||
سطر 65: | سطر 66: | ||
== البنية العامة == | == البنية العامة == | ||
هذه الخاصية تختصر ثلاثة خاصيات، التي يمكن تحديد قيمها بأي ترتيب، ويمكن حذف قيمة أو قيمتين من تلك القيم. | هذه الخاصية تختصر ثلاثة خاصيات، التي يمكن تحديد قيمها بأي ترتيب، ويمكن حذف قيمة أو قيمتين من تلك القيم. | ||
− | === | + | === <code><br-width></code> === |
راجع صفحة الخاصية <code>[[CSS/border-left-width|border-left-width]]</code>. | راجع صفحة الخاصية <code>[[CSS/border-left-width|border-left-width]]</code>. | ||
− | === | + | === <code><br-style></code> === |
راجع صفحة الخاصية <code>[[CSS/border-left-style|border-left-style]]</code>. | راجع صفحة الخاصية <code>[[CSS/border-left-style|border-left-style]]</code>. | ||
− | === | + | === <code>[[CSS/color value|<color>]]</code> === |
راجع صفحة الخاصية <code>[[CSS/border-left-color|border-left-color]]</code>. | راجع صفحة الخاصية <code>[[CSS/border-left-color|border-left-color]]</code>. | ||
سطر 85: | سطر 86: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
+ | == انظر أيضًا == | ||
+ | *صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>border-left</code> وهي: <code>[[CSS/border-left-width|border-left-width]]</code>، و <code>[[CSS/border-bottom-style|border-]][[CSS/border-left-width|left]][[CSS/border-bottom-style|-style]]</code>، و <code>[[CSS/border-bottom-color|border-]][[CSS/border-left-width|left]][[CSS/border-bottom-color|-color]]</code>. | ||
+ | *صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border|border]]</code> وهي: <code>[[CSS/border-width|border-width]]</code>، و <code>[[CSS/border-style|border-style]]</code>، و <code>[[CSS/border-color|border-color]]</code>. | ||
+ | *ضبط صورة للإطار باستخدام الخاصية <code>[[CSS/border-image|border-image]]</code>. | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-left CSS Backgrounds and Borders Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-left CSS Backgrounds and Borders Module Level 3]. |
المراجعة الحالية بتاريخ 04:33، 19 مارس 2018
الخاصية border-left
في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-left-color
و border-left-style
و border-left-width
، هذه الخاصيات تصف كيفية عرض الإطار border
الأيسر للعنصر.
بطاقة الخاصية
القيمة الابتدائية | لكل قيمة مختصرة:
|
---|---|
تُطبَّق على | جميع العناصر. |
قابلة للوراثة | لا |
قابلة للتحريك | نعم |
القيمة المحسوبة | لكل قيمة مختصرة:
|
border-left: 1px;
border-left: 2px dotted;
border-left: medium dashed blue;
وكما في جميع الخاصيات المختصرة، تضبط الخاصية border-left
قيم جميع الخاصيات التي تستطيع ضبطها، حتى لو لم نُحدِّد قيمةً لتلك الخاصيات، لأنها ستضبطها إلى قيمها الابتدائية، وهذا يعني أنَّ الشيفرة:
border-left-style: dotted;
border-left: thick green;
ستصبح في النهاية كما يلي:
border-left-style: dotted;
border-left: none thick green;
لاحظ أنَّ قيمة الخاصية border-left-style
المُحدَّدة قبل الخاصية border-left
سيتم تجاهلها؛ ولأنَّ القيمة الابتدائية للخاصية border-left-style
هي none
، فالقواعد السابقة لن تؤدي إلى إظهار إطار أيسر.
أمثلة
سنضبط في المثال الآتي إطارًا على الجانب الأيسر لعناصر <div>
لونه (border-left-color
) أخضر، وعرضه (border-left-width
) يساوي 4px
وشكله (border-left-style
) منقط. شيفرة HTML:
<div>لهذا العنصر إطارٌ على حافته اليسارية</div>
شيفرة CSS:
div {
border-left: 4px dotted green;
padding: 0.5em;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 1.0 | 1.0 | 4 | 3.5 | 1.0 |
البنية العامة
هذه الخاصية تختصر ثلاثة خاصيات، التي يمكن تحديد قيمها بأي ترتيب، ويمكن حذف قيمة أو قيمتين من تلك القيم.
<br-width>
راجع صفحة الخاصية border-left-width
.
<br-style>
راجع صفحة الخاصية border-left-style
.
<color>
راجع صفحة الخاصية border-left-color
.
البنية الرسمية
border-left: <br-width> || <br-style> || <color>;
يمكن وضع القيم بأي ترتيبٍ تشاء.
<br-width> = <length> | thin | medium | thick
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
انظر أيضًا
- صفحة الخاصيات التي تضبطها الخاصية المختصرة
border-left
وهي:border-left-width
، وborder-left-style
، وborder-left-color
. - صفحة الخاصيات التي تضبطها الخاصية المختصرة
border
وهي:border-width
، وborder-style
، وborder-color
. - ضبط صورة للإطار باستخدام الخاصية
border-image
.
مصادر ومواصفات
- مواصفة CSS Backgrounds and Borders Module Level 3.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.