تنسيق النصوص

السلام عليكم ورحمة الله

تنسيق النصوص

📚 أهلاً وسهلاً ومرحباً بكم في محطة أخرى من دروس CSS3 !

✍️ تنسيق النصوص بلغة CSS

بعدما تطرقنا في الدرس السابق إلـى تنسيق صفحات الويب ، سيكون درسنا اليوم عن كيفية تنسيق النصوص التي نكتبها على صفحات HTML ، وذلك باستخدام لغة  CSS. ولن نُعَـرِّجَ على كل الخطوات التي ذكرناها في الدرس السابق، بل سنشتغل داخل الملف المستقل أو الخارجي كما يحلو لكم تسميته.

في هاته الحصة سنتعلم بعض خواص CSS و تأثيرها على النص !

مثلما تعلمنا تغيير لون الكتابة ، فإننا اليوم سنسلط الضوء على :

 

لا تقرأ الخلاصة حتى تطلع على ما في الروابط  المجودة فوق ⬆️⬆️

خلاصـة عناصر الدرس:

نقوم بتغيير حجم النص في CSS  باستخدام خاصية    font-size. حيث يمكننا تحديد الحجم بالبكسل (14px) أو    « em » مثلاً  (1.20em)   أو بالنسبة المئوية (130٪) ، إلخ.

نقوم بتغيير خط النص باستعمال  font-family

الكثير من خصائص تنسيق النص تحتاج إلى:

  • font-style  بالنسبة للخط المائل
  • font-weight و بالنسبة للخط العريض 
  • text-decoration بالنسبة لتسطير الكتابة.
  • لتنسيق النص نستعمل text-align،  يمين،يسار،وسط
  • و لتعو يم الصورة نستعمل  float.

 


 

معلومة يجب معرفتها:
عندما تحاول أن تطبق خاصية محاذاة النص مع بعض العلامات المضمّنة مثلاً:(<span> ،<a> ،<em> ،<strong>…). فإنك لن تنجح ! فلا تحاول إذن، لأن تنسيق النصوص  في التصفيف يتم  تطبيقها فقط على العلامات مثل : (<p>،<div>،<h1> ، <h2>…)  و بالتالي  إياك أن تفكر في محاذاة جملة ما داخل فقرة فإنك لن تُوَفَّقْ ، إختر الفقرة كاملة أو لا تفعل.

و إلى اللقاء في درس مقبل إن شاء الله 

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 467 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

791 عدد المشاهدات لهذا المحتوى
Scroll to Top