- Site
- 4:34 ص
- دروس في لغة css
- لاتوجد تعليقات
تنسيق وإضافة طراز إلى النصوص هي مسئلة أساسية لمصممي المواقع، في هذا الدرس ستأخذ مقدمة حول الأساليب العجيبة التي تقدمها CSS لتنسيق النص، سنتحدث عن هذه الخصائص في هذا الدرس:
وضع فارغ قبل أول سطر "text-indent"
الخاصيةtext-indent تسمح لك بإضافة لمسة أنيقة إلى الفقرات بوضع مسافة فارغة قبل أول سطر من الفقرة، في المثال أدناه وضعنا القيمة 30px لكل الفقرات التي تستخدم العنصر <p>: p { text-indent: 30px; } |
محاذاة النص "text-align"
خاصيةtext-align تشبه في HTML خاصية "align" التي كانت تستخدم في الماضي، النص يمكن محاذاته نحو اليسار "left" أو اليمين "right" أو في المنتصف "centred" وبالإضافة إلى ذلك القيمة justify ستقوم بمحاذاة النص من الجانبين كما تفعل بعض الصحف والمجلات.في المثال أدناه النص في رأس الجدول
<th> قمنا بمحاذاته نحو اليمين، بينما البيانات في الجدول <td> حاذيناها نحو المنتصف أما النص في الفقرات فقمنا بمحاذاته من الجانبين:| th { text-align: right; } td { text-align: center; } p { text-align: justify; } |
زخرفة النص "text-decoration"
الخاصيةtext-decoration تمكنك من إضافة زخارف أو تأثيرات على النص، فمثلاً يمكنك أن تضيف سطراً أسفل النص، أو فوقه أو عليه، في المثال الآتي كل عناصر <h1> وضعنا أسفلها خطاً أما <h2> فهي العناوين التي فوقها خط و<h3> قمنا بوضع الخط عليها.| 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 propertyletter-spacing، القيمة المحددة لهذه الخاصية هي ببساطة عرض المسافة التي تريدها بين كل حرف وآخر، فمثلاً إذا أردت مسافة 3px بين الحروف في الفقرات <p> و6px بين الحروف في العناوين <h1> فعليك أن تكتب الخصائص بهذا الشكل:| 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.
<li> (list-item)، ولنقل أننا نريد الأسماء أن يظهر حرفها الأول كبيراً أما العناوين فنريد كل حروفها كبيرة.جرب وألقي نظرة على HTML لهذا المثال وسترى أن النص الأصلي كتب بحروف صغيرة.
| h1 { text-transform: uppercase; } li { text-transform: capitalize; } |
شكرا على حسن متابعتكم نتمنى ان يلقى الدرس اعجابكم نحن في انتظار ردودكم وتعليقاتكم
عن الكاتب :
وصف مختصر عن الكاتب
المشاركات
ليست هناك تعليقات:
إرسال تعليق