الفرق بين المراجعتين ل"CSS/text-indent"
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>text-indent</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>text-indent</code>}}</noinclude> | ||
− | الخاصية <code>text-indent</code> في CSS تُحدِّد مقدار المسافة البادئة التي توضع قبل أسطر النص الموجودة في عنصر كتلي؛ وهذه الخاصية تتحكم بالمسافة البادئة لأوّل سطر افتراضيًا، لكن يمكن استخدام الكلمتين المحجوزتين <code>hanging</code> و <code>each-line</code> لتغيير هذا السلوك (انظر «<nowiki/>[[#دعم المتصفحات|دعم المتصفحات]]»). | + | الخاصية <code>text-indent</code> في CSS تُحدِّد مقدار المسافة البادئة التي توضع قبل أسطر النص الموجودة في عنصر كتلي؛ وهذه الخاصية تتحكم بالمسافة البادئة لأوّل سطر افتراضيًا، لكن يمكن استخدام الكلمتين المحجوزتين <code>hanging</code> و <code>each-line</code> لتغيير هذا السلوك (انظر «<nowiki/>[[#دعم المتصفحات|دعم المتصفحات]]»). |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | == بطاقة الخاصية == | |
− | |||
− | |||
− | |||
− | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
سطر 30: | سطر 20: | ||
|كما حُدِّدت. | |كما حُدِّدت. | ||
|} | |} | ||
+ | |||
+ | <syntaxhighlight lang="css"> | ||
+ | /* <length> أطوال */ | ||
+ | text-indent: 3mm; | ||
+ | text-indent: 40px; | ||
+ | |||
+ | /* <percentage> نسبة مئوية*/ | ||
+ | text-indent: 15%; | ||
+ | |||
+ | /* قيم عامة */ | ||
+ | text-indent: inherit; | ||
+ | text-indent: initial; | ||
+ | text-indent: unset; | ||
+ | </syntaxhighlight>تبدأ هذه المسافة من الحافة اليسرى لصندوق المحتوى (content box) للعنصر الكتلي الحاوي على العنصر الحالي، وذلك إذا كان اتجاه العنصر من اليسار إلى اليمين. أما إذا كانت من اليمين إلى اليسار فستكون هذه المسافة من الحافة اليمنى. | ||
== أمثلة == | == أمثلة == | ||
سطر 71: | سطر 75: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>text-indent</code> إحدى القيم التالية. | تقبل الخاصية <code>text-indent</code> إحدى القيم التالية. | ||
− | === | + | === <code>[[CSS/length|<length>]]</code> === |
تُحدَّد المسافة البادئة كطول مطلق <code>[[CSS/length|<length>]]</code>، ويُسمَح باستخدام القيم السالبة. | تُحدَّد المسافة البادئة كطول مطلق <code>[[CSS/length|<length>]]</code>، ويُسمَح باستخدام القيم السالبة. | ||
− | === | + | === <code>[[CSS/percentage|<percentage>]]</code> === |
تُحدَّد المسافة البادئة كنسبة مئوية من عرض العنصر الكتلي الحاوي على العنصر الحالي. | تُحدَّد المسافة البادئة كنسبة مئوية من عرض العنصر الكتلي الحاوي على العنصر الحالي. | ||
=== البنية الرسمية === | === البنية الرسمية === |
مراجعة 10:36، 27 يوليو 2018
الخاصية text-indent
في CSS تُحدِّد مقدار المسافة البادئة التي توضع قبل أسطر النص الموجودة في عنصر كتلي؛ وهذه الخاصية تتحكم بالمسافة البادئة لأوّل سطر افتراضيًا، لكن يمكن استخدام الكلمتين المحجوزتين hanging
و each-line
لتغيير هذا السلوك (انظر «دعم المتصفحات»).
بطاقة الخاصية
القيمة الابتدائية | 0
|
---|---|
تُطبَّق على | العناصر الكتلية. |
قابلة للوراثة | نعم |
قابلة للتحريك | نعم |
القيمة المحسوبة | كما حُدِّدت. |
/* <length> أطوال */
text-indent: 3mm;
text-indent: 40px;
/* <percentage> نسبة مئوية*/
text-indent: 15%;
/* قيم عامة */
text-indent: inherit;
text-indent: initial;
text-indent: unset;
تبدأ هذه المسافة من الحافة اليسرى لصندوق المحتوى (content box) للعنصر الكتلي الحاوي على العنصر الحالي، وذلك إذا كان اتجاه العنصر من اليسار إلى اليمين. أما إذا كانت من اليمين إلى اليسار فستكون هذه المسافة من الحافة اليمنى.
أمثلة
مثال عن استخدام طول مطلق <length>
ونسبة مئوية <percentage>
مع الخاصية text-indent
لإضافة مسافة بادئة قبل أوّل سطر في الفقرة <p>
:
<p class="length">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="percent">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
شيفرة CSS:
p {
border: 1px solid #eaecf0;
background-color: #f8f9fa;
padding: 1em;
}
.length { text-indent: 2em; }
.percent { text-indent: 5%; }
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 1.0 | 1.0 | 3.0 | 3.5 | 1.0 |
hanging و each-line | غير مدعومة | غير مدعومة | غير مدعومة | غير مدعومة | غير مدعومة |
البنية العامة
تقبل الخاصية text-indent
إحدى القيم التالية.
<length>
تُحدَّد المسافة البادئة كطول مطلق <length>
، ويُسمَح باستخدام القيم السالبة.
<percentage>
تُحدَّد المسافة البادئة كنسبة مئوية من عرض العنصر الكتلي الحاوي على العنصر الحالي.
البنية الرسمية
text-indent: <length> | <percentage>;
مصادر ومواصفات
- مسودة CSS Text Module Level 3، أضافت هذه المواصفة الكلمتين المحجوزتين
hanging
وeach-line
، لكنها ليستا مدعومتين في أيّ متصفح حتى الآن. - مسودة CSS Transitions.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.