الفرق بين المراجعتين ل"CSS/text-transform"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| (مراجعة متوسطة واحدة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 2: | سطر 2: | ||
الخاصية <code>text-transform</code> في CSS تُحدِّد ما هي حالة الأحرف التي سيُعرَض فيها العنصر؛ إذ يمكن استخدام هذه الخاصية لجعل الأحرف كلها بالحالة الكبيرة (uppercase)، أو بالحالة الصغيرة (lowercase)، أو جعل أوّل حرف من كل كلمة كبيرًا. | الخاصية <code>text-transform</code> في CSS تُحدِّد ما هي حالة الأحرف التي سيُعرَض فيها العنصر؛ إذ يمكن استخدام هذه الخاصية لجعل الأحرف كلها بالحالة الكبيرة (uppercase)، أو بالحالة الصغيرة (lowercase)، أو جعل أوّل حرف من كل كلمة كبيرًا. | ||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 31: | سطر 20: | ||
|كما حُدِّدت. | |كما حُدِّدت. | ||
|} | |} | ||
| + | |||
| + | يجدر بالذكر أنَّ هذه الخاصية ليس لها أثر على النصوص العربية.<nowiki/><nowiki/><syntaxhighlight lang="css"> | ||
| + | /* الكلمات المحجوزة */ | ||
| + | text-transform: capitalize; | ||
| + | text-transform: uppercase; | ||
| + | text-transform: lowercase; | ||
| + | text-transform: none; | ||
| + | |||
| + | /* القيم العامة */ | ||
| + | text-transform: inherit; | ||
| + | text-transform: initial; | ||
| + | text-transform: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
مثال عن استخدام مختلف قيم الخاصية <code>text-transform</code>:<syntaxhighlight lang="html"> | مثال عن استخدام مختلف قيم الخاصية <code>text-transform</code>:<syntaxhighlight lang="html"> | ||
<p class="text-transform-none"> | <p class="text-transform-none"> | ||
| − | <strong> | + | <strong>مرحباً بالعالم</strong> |
<br> | <br> | ||
<code>text-transform: none;</code> | <code>text-transform: none;</code> | ||
<br> | <br> | ||
| − | + | حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية. | |
| + | |||
</p> | </p> | ||
<hr> | <hr> | ||
<p class="text-transform-capitalize"> | <p class="text-transform-capitalize"> | ||
| − | <strong> | + | <strong>مرحباً بالعالم</strong> |
<br> | <br> | ||
<code>text-transform: capitalize;</code> | <code>text-transform: capitalize;</code> | ||
<br> | <br> | ||
| − | + | حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية. | |
| + | |||
</p> | </p> | ||
<hr> | <hr> | ||
<p class="text-transform-uppercase"> | <p class="text-transform-uppercase"> | ||
| − | <strong> | + | <strong>مرحباً بالعالم</strong> |
<br> | <br> | ||
<code>text-transform: uppercase;</code> | <code>text-transform: uppercase;</code> | ||
<br> | <br> | ||
| − | + | حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية. | |
</p> | </p> | ||
<hr> | <hr> | ||
<p class="text-transform-lowercase"> | <p class="text-transform-lowercase"> | ||
| − | <strong> | + | <strong>مرحباً بالعالم</strong> |
<br> | <br> | ||
<code>text-transform: lowercase;</code> | <code>text-transform: lowercase;</code> | ||
<br> | <br> | ||
| − | + | حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية. | |
| + | |||
</p> | </p> | ||
| سطر 98: | سطر 103: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>text-transform</code> إحدى الكلمات المحجوزة التالية. | تقبل الخاصية <code>text-transform</code> إحدى الكلمات المحجوزة التالية. | ||
| − | === | + | === <code>none</code> === |
ترك حالة الأحرف كما هي. | ترك حالة الأحرف كما هي. | ||
| − | === | + | === <code>capitalize</code> === |
تحويل أوّل حرف من كل كلمة إلى الحالة الكبيرة، لكن لن تتأثر الأحرف البقية وستبقى كما هي (سواءً كانت بالحالة الكبيرة أو الصغيرة). | تحويل أوّل حرف من كل كلمة إلى الحالة الكبيرة، لكن لن تتأثر الأحرف البقية وستبقى كما هي (سواءً كانت بالحالة الكبيرة أو الصغيرة). | ||
| − | === | + | === <code>uppercase</code> === |
جعل جميع الأحرف بالحالة الكبيرة. | جعل جميع الأحرف بالحالة الكبيرة. | ||
| − | === | + | === <code>lowercase</code> === |
جعل جميع الأحرف بالحالة الصغيرة. | جعل جميع الأحرف بالحالة الصغيرة. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
| سطر 111: | سطر 116: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | * صفحة الخاصية <code>[[CSS/color|color]]</code> التي تضبط القيمة اللونية للأمامية للمحتوى النصي للعنصر وللزخرفة النصية. | ||
| + | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-text-4/#text-transform CSS Text Level 4]. | * مسودة [https://drafts.csswg.org/css-text-4/#text-transform CSS Text Level 4]. | ||
المراجعة الحالية بتاريخ 14:08، 4 أغسطس 2018
الخاصية text-transform في CSS تُحدِّد ما هي حالة الأحرف التي سيُعرَض فيها العنصر؛ إذ يمكن استخدام هذه الخاصية لجعل الأحرف كلها بالحالة الكبيرة (uppercase)، أو بالحالة الصغيرة (lowercase)، أو جعل أوّل حرف من كل كلمة كبيرًا.
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | نعم |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدت. |
يجدر بالذكر أنَّ هذه الخاصية ليس لها أثر على النصوص العربية.
/* الكلمات المحجوزة */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
/* القيم العامة */
text-transform: inherit;
text-transform: initial;
text-transform: unset;
أمثلة
مثال عن استخدام مختلف قيم الخاصية text-transform:
<p class="text-transform-none">
<strong>مرحباً بالعالم</strong>
<br>
<code>text-transform: none;</code>
<br>
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>
<hr>
<p class="text-transform-capitalize">
<strong>مرحباً بالعالم</strong>
<br>
<code>text-transform: capitalize;</code>
<br>
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>
<hr>
<p class="text-transform-uppercase">
<strong>مرحباً بالعالم</strong>
<br>
<code>text-transform: uppercase;</code>
<br>
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>
<hr>
<p class="text-transform-lowercase">
<strong>مرحباً بالعالم</strong>
<br>
<code>text-transform: lowercase;</code>
<br>
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>
شيفرة CSS:
p {
background-color: #f8f9fa;
border: 1px solid #eaecf0;
padding: 1em;
margin: 1em;
}
.text-transform-none { text-transform: none; }
.text-transform-capitalize { text-transform: capitalize; }
.text-transform-uppercase { text-transform: uppercase; }
.text-transform-lowercase { text-transform: lowercase; }
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 4.0 | 7.0 | 1.0 |
البنية العامة
تقبل الخاصية text-transform إحدى الكلمات المحجوزة التالية.
none
ترك حالة الأحرف كما هي.
capitalize
تحويل أوّل حرف من كل كلمة إلى الحالة الكبيرة، لكن لن تتأثر الأحرف البقية وستبقى كما هي (سواءً كانت بالحالة الكبيرة أو الصغيرة).
uppercase
جعل جميع الأحرف بالحالة الكبيرة.
lowercase
جعل جميع الأحرف بالحالة الصغيرة.
البنية الرسمية
text-transform: none | capitalize | uppercase | lowercase;
انظر أيضًا
- صفحة الخاصية
colorالتي تضبط القيمة اللونية للأمامية للمحتوى النصي للعنصر وللزخرفة النصية.
مصادر ومواصفات
- مسودة CSS Text Level 4.
- مسودة CSS Text Module Level 3.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.