جدول الدروس

دروس CSS المتقدمة

• كتاب CSS الإضافي
• مقدمة إلى CSS
• قواعد أساسية لـ CSS
• قواعد متقدمة لـ CSS
• مصفوفات النسخة لـ CSS
• محددات id لـ CSS
• محددات الفئات لـ CSS
• إنشاء CSS
• خلفيات CSS
• نصوص CSS
• خطوط CSS
• قوائم CSS

نموذج الصندوق CSS

• مقدمة إلى نموذج الصندوق لـ CSS
• السماح الزرافات الداخلية لـ CSS
• الحدود لـ CSS
• السماح الزرافات الخارجية لـ CSS
• انضمام السماح الزرافات الخارجية لـ CSS

توضيح CSS

• مقدمة إلى التوضيح لـ CSS
• التوضيح النسبي لـ CSS
• التوضيح المطلق لـ CSS
• الغرق لـ CSS

مصفوفات CSS

• المحددات العناصرية لـ CSS
• مجموعات المحددات لـ CSS
• تفصيل المحددات الفئوية لـ CSS
• تفصيل المحددات id لـ CSS
• تفصيل المحددات الخاصية لـ CSS
• المحددات الذرية لـ CSS
• المحددات للعناصر الفعلية لـ CSS
• المحددات للإخوة المتقاربين لـ CSS

المقررات الاختيارية

التوصية بالدراسة:

• صندوق CodeW3C.com

يمكن لتخصائص النص في CSS تعريف مظهر النص.

من خلال خصائص النص، يمكنك تغيير لون النص، فاصلة بين الأحرف، تنسيق النص، تزيين النص، تقديم النص، وما إلى ذلك.

تقديم النص

تقديم السطر الأول للفقرة على صفحة الويب، وهو تأثير ترميز النص الأكثر استخدماً.

يقدم CSS خاصية text-indent، يمكن لهذه الخاصية تحقيق تقديم النص بسهولة.

باستخدام خاصية text-indent، يمكن سحب جميع السطور الأولى من العناصر بمقدار معين، حتى إذا كان هذا المقدار سالباً.

يُستخدم هذا الصفة عادةً لضييق سطر أول في الفقرات، والقواعد التالية ستجعل كل سطر أول في الفقرات يضيّق 5 em:

p {text-indent: 5em;}

ملاحظة:بشكل عام، يمكن تطبيق text-indent على جميع العناصر المدمجة، ولكن لا يمكن تطبيق هذه الصفة على العناصر الداخلية، مثل الصور وغيرها من العناصر التي تحل محل العناصر، ومع ذلك، إذا كان لديك عنصر مدمج (مثل سطر) يحتوي على صورة في الخط الأول، فإنه سيتحرك مع بقية النص في هذا الخط.

نصيحة:إذا كنت ترغب في تضييق الخط الأول لعدد من العناصر الداخلية، يمكنك إنشاء هذا التأثير باستخدام الحواشي الداخلية أو الحواشي الخارجية.

استخدام القيم السلبية

يمكن تعيين text-indent أيضًا إلى قيم سلبية. باستخدام هذه التقنية، يمكن تحقيق العديد من التأثيرات المثيرة، مثل التضييق المعلق، حيث يعلق الخط الأول في الجزء المتبقي من العنصر على اليسار:

p {text-indent: -5em;}

على الرغم من ذلك، يجب توخي الحذر عند تعيين قيم سلبية لتلك الصفات، لأنه إذا تم تعيين قيمة سلبية لسطر معين، قد يخرج بعض النصوص الأولية من نطاق نافذة المتصفح. لتجنب مثل هذه المشاكل في العرض، يُنصح بتعيين حاشية خارجية أو بعض الحواشي الداخلية للصفات السلبية من text-indent:

p {text-indent: -5em; padding-left: 5em;}

استخدام النسبة المئوية

يمكن استخدام جميع وحدات الطول في text-indent، بما في ذلك النسب المئوية.

يجب أن تكون النسبة المئوية مقارنة بعرض عنصر التضييق الأب. بمعنى آخر، إذا تم تعيين قيمة التضييق إلى 20٪، فإن الخط الأول من العنصر المتأثر سيضيّق 20٪ من عرض العنصر الأب.

في المثال التالي، قيمة التضييق هي 20٪ من عنصر الأب، أي 100 بكسل:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

الوراثة

يمكن للصفات text-indent أن تورث، يرجى النظر في العلامات التالية:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>this is a paragragh.</p>
</div>
</div>

السطور الموجودة في هذا العلامة ستتضييق 50 بكسل، لأن هذا السطر ورث قيمة التضييق من العنصر div الذي له id inner.

تنسيق أفقي

text-align هي خاصية أساسية، وتؤثر علىسطر النصطريقة التوجيه بينها. القيم الثلاثة الأولى واضحة جدًا، لكن القيم الرابعة والخامسة معقدتان بعض الشيء.

القيم left، right و center تجعل النص في العنصر يتساوى على التوالي يسارًا، يمينًا ومركزًا.

تقرأ اللغات الغربية من اليسار إلى اليمين، لذا القيمة الافتراضية لـ text-align هي left. يتم تنسيق النص عند الحد اليسرى، ويكون الحد الأيمن على شكل أسنان (يُدعى نصًا من اليسار إلى اليمين). بالنسبة للغات مثل العبرية وألمانية، القيمة الافتراضية لـ text-align هي right، لأن هذه اللغات تقرأ من اليمين إلى اليسار. لم يكن من غير المتوقع أن يجعل center كل سطر نصي في العنصر متوسطًا.

نصيحة:للحصول على مركز العناصر البلاكي أو الجدولية، يجب تعيين الهوامش الخارجية اليسرى واليمنى بشكل مناسب على هذه العناصر.

text-align:center و <CENTER>

قد تعتقد أن text-align:center يشبه تأثير عنصر <CENTER>، لكنهما مختلفان تمامًا.

<CENTER> يؤثر ليس فقط على النص، بل على العنصر بأكمله. لا يتحكم خاصية text-align في تنسيق العنصر، بل يؤثر فقط على محتواه. لن ينتقل العنصر نفسه من نهاية إلى أخرى، بل فقط النص في الداخل.

justify

أحدث خاصية تنسيق أفقي هي justify.

في النص المركزي، يتم وضع الأطراف اليمنى واليسرى للسطر النصي داخل الحدود الداخلية للعنصر الأب. ثم يتم تعديل مسافة الكلمات والحروف بينها، بحيث تكون طول كل سطر متساويًا. قد لاحظت بالفعل أن النص المركزي شائع جدًا في مجال الطباعة.

على الرغم من ذلك، يجب على وكيل المستخدم ( وليس CSS) تحديد كيفية تمدد النص المركزي لملء مساحة الحدود اليسرى واليمنى للعنصر الأب. للحصول على مزيد من التفاصيل، يرجى الرجوع إلى صفحة مرجع خاصية CSS text-align.

مسافة الكلمة

خصية word-spacingيمكن تغيير مسافة الكلمات (الكلمات) بينها. القيمة الافتراضية normal تساوي قيمة الـ 0 المحددة.

يستقبل خاصية word-spacing قيمة طولية إيجابية أو سلبية. إذا تم تقديم قيمة طولية إيجابية، فإن مسافات الكلمات ستزيد. إذا تم تعيين قيمة سلبية لـ word-spacing، فإنها ستقاربها:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
هذا فقرة. المسافات بين الكلمات ستزيد.
</p>
<p class="tight">
هذا هو جملة. سيقلل من مسافة الفواصل بين الكلمات.
</p>

مثال TIY: زيادة أو تقليل مسافة الكلمات (مسافة الكلمة)

ملاحظة:للإطلاع على تعريف CSS للـ 'كلمة' بشكل أعمق، يرجى زيارة صفحة مرجع خاصية word-spacing في CSS.

مسافة الحروف

خاصية letter-spacingالفرق بينها وبين word-spacing هو أن تحديد مسافة الحروف يعدل المسافة بين الأحرف أو الأشكال.

مثل خاصية word-spacing، يمكن أن تأخذ خاصية letter-spacing قيمًا طولية. الكلمة الافتراضية هي normal (وهي نفسها كـ letter-spacing:0). سيزيد أو يقلل قيمة الطول المدخلة من مسافة بين الأحرف:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

مثال TIY: تحديد مسافة بين الأحرف (مسافة الحروف)

تحويل الأحرف

خاصية text-transformمعالجة تكرار النص. لهذه الخاصية 4 قيم:

• none
• uppercase
• lowercase
• capitalize

القيمة الافتراضية none لا تقوم بأي تغيير للنص، حيث سيتم استخدام الحروف الأصلية من المستند المصدر. وفقًا للإسم، uppercase و lowercase تحول النص إلى أحرف كبيرة وصغيرة على التوالي. وأخيرًا، capitalize يقوم بتكبير الحروف الأولى من كل كلمة.

على الرغم من أن الخاصية text-transform قد لا تكون مهمة كثيرًا، إلا إذا قررت فجأة تحويل جميع عناصر h1 إلى الحروف الكبيرة، فإن هذه الخاصية ستكون مفيدة. لا تحتاج إلى تعديل محتوى جميع عناصر h1 بشكل فردي، بل يمكنك استخدام text-transform لإنجاز هذا التعديل:

h1 {text-transform: uppercase}

استخدام text-transform لهما فائدة. أولاً، يكفي كتابة قاعدة بسيطة للقيام بهذه التغييرات دون الحاجة إلى تعديل عنصر h1 نفسه. ثانياً، إذا قررت في المستقبل تغيير جميع الحروف إلى الحروف الأصلية، فإن التعديل سيكون أسهل.

مثال TIY: تحكم في تكرار الأحرف في النص

زينة النص

لنناقش خصائص التحديد، هذا هو خاصية مثيرة للاهتمام، التي توفر العديد من السلوكيات المثيرة للاهتمام.

خصائص text-decoration تحتوي على 5 قيم:

• none
• underline
• overline
• line-through
• blink

التحتاج إلى underline لتضيف خط أسفل على العنصر، تمامًا مثل العنصر U في HTML. يعمل overline بعكس ذلك، ويضيف خط أعلى في أعلى النص. يعمل قيمة line-through في منتصف النص ويشبه العناصر S و strike في HTML. blink يجعل النص يتوهج، مثل العنصر blink الذي يدعمه Netscape.

قيمة none ستغلق جميع الزخرفات التي تطبق على العنصر. عادةً، النص بدون زخرفة هو الشكل الافتراضي، ولكن ليس دائمًا. على سبيل المثال، يحتوي الروابط بشكل افتراضي على خط أسفل. إذا كنت ترغب في إزالة خط أسفل الروابط، يمكنك استخدام CSS التالية لتحقيق ذلك:

a {text-decoration: none;}

ملاحظة:إذا تم إزالة خط أسفل الروابط باستخدام هذه القاعدة، فإن الفارق الوحيد بين العنكبوت والأخبار العادية من الناحية البصرية سيكون اللون (على الأقل، هذا هو الحال الافتراضي، ولكن لا يمكن التأكد من أن اللون سيختلف بالضرورة).

يمكن دمج أنواع متعددة من الزخرفة في نفس القاعدة. إذا كنت ترغب في أن تكون جميع الروابط تحتوي على خط أسفل و خط أعلى، فإن القاعدة ستكون كالتالي:

a:link a:visited {text-decoration: underline overline;}

على الرغم من ذلك، يجب الانتباه إلى أن إذا كانت قاعدة زخرفية مختلفة تتطابق مع نفس العنصر، فإن قيمة الفوز ستستبدل القيمة الأخرى تمامًا. لنفكر في القاعدة التالية:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

بالنسبة للقاعدة المحددة، جميع عناصر h2 التي تحتوي على class stricken تحتوي على تزيين خط واحد فقط عبر الخطوط، وليس خط أسفل أو خط أعلى، لأن قيمة text-decoration ستستبدل بدلاً من التراكم.

معالجة الفراغات

خصائص white-spaceسيؤثر على كيفية معالجة وسيط المستخدم للفراغات، التعطيلات و حروف tab في الوثيقة المصدر.

باستخدام هذا الخصائص، يمكنك التأثير على الطريقة التي يعالجها المتصفح الفراغات بين الأحرف و بين سطور النص. إلى حد ما، معالجة XHTML الافتراضية قد اكتملت معالجة الفراغات: حيث يتم دمج جميع الفراغات في مسافة واحدة. لذا، عند عرض العلامة التالية في متصفح الويب، فإن الأحرف بينها سيظهر فقط مسافة واحدة، وسيتم تجاهل التعطيلات في العنصر:

<p>This     paragraph has    many
    spaces           in it.</p>

يمكن تعيين هذا السلوك الافتراضي بشكل واضح باستخدام التعبير التالي:

p {white-space: normal;}

تخبر هذه القواعد المتصفح بمعالجة النص بشكل عادي: رمز الفواصل الزائدة سيتم التخلص منه. إذا تم تقديم هذه القيمة، فإن رمز النسخة (الرمز الناتج عن النسخ) سيتم تحويله إلى مسافة، وسلسلة من المسافات في السطر الواحد ستتم تحويلها إلى مسافة واحدة.

مثال TIY: white-space: normal

القيمة pre

لكن، إذا تم تعيين white-space إلى pre، فإن معالجة الرموز البيضاء في العنصر المتأثر بهذه الصفة ستختلف، وسيتصرف مثل عنصر pre في XHTML؛ لا يتم تجاهل الرموز البيضاء.

إذا كان قيمة white-space للصفة هي pre، فإن المتصفح سيكون منتبهاً إلى المسافات الإضافية، حتى الرموز الناتجة عن النسخة. في هذا الصدد فقط، يمكن لأي عنصر أن يكون مثل عنصر pre.

مثال TIY: white-space: pre

ملاحظة:تم اختبارًا بأن متصفحات IE 7 والإصدارات الأقدم لا تدعم هذه القيمة، لذا يرجى استخدام متصفحات غير IE لعرض الأمثلة أعلاه.

القيمة nowrap

القيمة المضادة هي nowrap، والتي تمنع النص في العنصر من التحول إلى الخطوة العادية، ما لم يتم استخدام عنصر br. يشبه استخدام nowrap في CSS بشكل كبير استخدام <td nowrap> في HTML 4 لتحديد أن خلية الجدول لا يمكنها التحول إلى الخطوة العادية، ولكن يمكن تطبيق قيمة white-space على أي عنصر.

مثال TIY: white-space: nowrap

القيم pre-wrap و pre-line

أدخل CSS2.1 القيم pre-wrap و pre-line، التي لم تكن موجودة في إصدارات CSS السابقة. يهدف هذان القيمتان إلى السماح للمؤلفين بتحكم أفضل في معالجة الرموز البيضاء.

إذا تم تعيين white-space للعنصر إلى pre-wrap، فإن النص في العنصر سيحافظ على سلسلة الرموز البيضاء، ولكن سينتج النص عن طريق الخطوة العادية. إذا تم تعيين هذه القيمة، فإن مسافات الفواصل في النص الأصلي وأي فواصل مولدة أيضًا سيتم الحفاظ عليها. pre-line هو عكس pre-wrap، سيتم دمج سلسلة الرموز البيضاء مثل النص العادي، ولكن سيتم الحفاظ على فواصل الخط.

مثال TIY: white-space: pre-wrap

مثال TIY: white-space: pre-line

ملاحظة:تم اختبار هذين المثالين في متصفحات IE7 و FireFox2.0، ولكن النتيجة كانت أن القيمتين pre-wrap و pre-line لم يتم دعمها بشكل جيد.

النتيجة

الجدول التالي يلخص سلوك خاصية white-space:

اتجاه النص

إذا كنت تقر بكتل كتابة إنجليزية، فإنك ستقرأها من اليسار إلى اليمين، ومن الأعلى إلى الأسفل، هذا هو اتجاه التدفق للإنجليزية. ولكن ليس كل اللغات كذلك. نعلم أن اللغة الصينية القديمة تقرأ من اليمين إلى اليسار، بما في ذلك اللغة العبرية واللغة العربية وما إلى ذلك. قدم CSS2 خاصية لوصف الاتجاهية.

خاصية الاتجاهتؤثر على اتجاه النص في العناصر المدمجة، إعداد تنسيق الأعمدة في الجداول، اتجاه الملء الأفقي في حاوية العنصر، وكذلك موقع السطر الأخير في العناصر المزورة.

ملاحظة:للمكونات الداخلية، فقط عند خاصية unicode-bidiيتم تطبيق خاصية الاتجاه فقط عند إعدادها إلى embed أو bidi-override.

يحتوي خاصية الاتجاه على قيمتين: ltr و rtl. في معظم الحالات، القيمة الافتراضية هي ltr، حيث يتم عرض النص من اليسار إلى اليمين. إذا كان عرض النص من اليمين إلى اليسار، يجب استخدام القيمة rtl.

خصائص النص CSS

أداة الصندوق

دليل مرجعي لـ CSS

أمثلة CSS

اختبارات CSS

دروس CSS

روابط الممولين