• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

قمنا بوضع الخط عليها. وضعنا أسفلها خطاً أما


h1 {
text-decoration: underline;
}

h2 {
text-decoration: overline;
}

h3 {
text-decoration: line-through;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

المسافة بين الحروف "letter-spacing"


The spacing between text characters can be specified using the property letter-spacing، القيمة المحددة لهذه الخاصية هي ببساطة عرض المسافة التي تريدها بين كل حرف وآخر، فمثلاً إذا أردت مسافة 3px بين الحروف في الفقرات

و6px بين الحروف في العناوين

فعليك أن تكتب الخصائص بهذا الشكل:


h1 {
letter-spacing: 6px;
}

p {
letter-spacing: 3px;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

تحويل النص "text-transform"


خاصية text-transform تتحكم بحجم الخط في اللغات الغربية، يمكنك أن تختار بين القيم capitalize أو uppercase أو lowercase، وبغض النظر عن كيفية ظهور النص الأصلي.
فمثلاً كلمة "headline" يمكن أن تظهر للمستخدم بهذا الشكل "HEADLINE"
أو بهذا الشكل "Headline"، هناك أربع قيم يمكنك استخدامها مع القيم
text-transform:

capitalizeتقوم بتكبير الحرف الأول من كل كلمة مثال: "john doe" ستصبح "John Doe".uppercaseتجعل كل الحروف كبيرة، مثال: "john doe" ستصبح "JOHN DOE".lowercaseستجعل كل الحروف صغيرة، مثال: "JOHN DOE" ستصبح "john doe".noneلن تقوم بعمل أي تأثير، النص سيظهر كما كتب في ملف HTML.

كمثال، سنقوم باستخدام قائمة أسماء، الأسماء كلها تستخدم العنصر

(list-item)، ولنقل أننا نريد الأسماء أن يظهر حرفها الأول كبيراً أما العناوين فنريد كل حروفها كبيرة.
جرب وألقي نظرة على HTML لهذا المثال وسترى أن النص الأصلي كتب بحروف صغيرة.


h1 {
text-transform: uppercase;
}

li {
text-transform: capitalize;
}

ترقبو الدرس القادم