تقديم مجموعة من الشروحات والمواضيع التي تهم بالحاسوب والانترنت من حيث الاستخدام والانشاء والتصميم والحماية، مع الاهتمام بمدونات بلوجر ومواقع التواصل الاجتماعي خصوصا فيسبوك وتويتر

النشرة البريدية @

خصائص التحكم في النصوص text

دروس، شرح، طريقة، بلوجر

تحتوي هذه المقالة على ما يلي

خصائص النصوص text
أهلا و سهلا بكم من جديد، 
سنتعلم اليوم طريقة تنسيق وإضافة طراز إلى النصوص من خلال مجموعة من الخصائص، سنتعرف على طريقة التحكم في النص من خلال خاصية وضع مسافة فراغ قبل أول سطر من الفقرة text-indent، وخاصية زخرفة النص text-decoration، و خاصية المسافة بين الحروف letter-spacing، وخاصية تحويل النص text-transform.

خاصية وضع مسافة فراغ قبل أول سطر من الفقرة text-indent

text-indent: 30px;

خاصية محاذاة النص text-align

خاصية text-align تشبه في HTML خاصية "align" التي كانت تستخدم في الماضي، النص يمكن محاذاته نحو اليسار "left" أو اليمين "right" أو في المنتصف "centred" وبالإضافة إلى ذلك القيمة justify ستقوم بمحاذاة النص من الجانبين.
text-align: right;
text-align: left;
text-align: center;
text-align: justify;

خاصية زخرفة النص text-decoration

الخاصية text-decoration تمكنك من إضافة زخارف أو تأثيرات على النص.

سطر أسفل النص

text-decoration: underline;

سطر فوق النص

text-decoration: overline;

سطر على النص

text-decoration: line-through;

استثناء عنصر بإزالة السطر

text-decoration: none;

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

المسافة بين حروف النص يمكن تحديدها من خلال خاصية letter-spacing، والقيمة المحددة لهذه الخاصية هي عرض المسافة التي تريدها بين كل حرف وآخر
letter-spacing: 6px;

خاصية تحويل النص text-transform

خاصية text-transform تتحكم بحجم الخط في اللغات الغربية، يمكنك أن تختار بين القيم capitalize أوuppercase  أو lowercase، وبغض النظر عن كيفية ظهور النص الأصلي.
هناك أربع قيم يمكنك استخدامها مع الخاصية text-transform

تكبير الحرف الأول من كل كلمة مثال: "john doe" ستصبح "John Doe"

text-transform: capitalize;

جعل كل الحروف كبيرة، مثال: "john doe" ستصبح "JOHN DOE"

text-transform: uppercase;

جعل كل الحروف صغيرة، مثال: "JOHN DOE" ستصبح "john doe"

text-transform: lowercase;

النص سيظهر كما كتب في ملف HTML

text-transform: none;

ليست هناك تعليقات :

أضف تعليق

free tracking