ننتظر تسجيلك هـنـا


 

{ ( إعْلَاَنَاتُ مُنْتَدياَت حَسَْاس اليوُميَة ) ~
     
     
 


فَعَالِيَاتْ حَسَْاس اليوُميَة
                       



الإهداءات



إضافة رد
#1  
قديم 02-08-2019, 08:46 PM
تعآليت بك♕ غير متواجد حالياً
Saudi Arabia     Female
لوني المفضل Maroon
 رقم العضوية : 1069
 تاريخ التسجيل : Mar 2018
 فترة الأقامة : 408 يوم
 أخر زيارة : 04-06-2019 (06:34 PM)
 المشاركات : 21,293 [ + ]
 التقييم : 13330
 معدل التقييم : تعآليت بك♕ has a reputation beyond reputeتعآليت بك♕ has a reputation beyond reputeتعآليت بك♕ has a reputation beyond reputeتعآليت بك♕ has a reputation beyond reputeتعآليت بك♕ has a reputation beyond reputeتعآليت بك♕ has a reputation beyond reputeتعآليت بك♕ has a reputation beyond reputeتعآليت بك♕ has a reputation beyond reputeتعآليت بك♕ has a reputation beyond reputeتعآليت بك♕ has a reputation beyond reputeتعآليت بك♕ has a reputation beyond repute
بيانات اضافيه [ + ]

اوسمتي

Ah11 الأساليب التي تقدمها 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"

المسافة بين حروف النص يمكن تحديدها من خلال خاصية letter-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; }




رد مع اقتباس
قديم 02-10-2019, 10:42 AM   #2


الصورة الرمزية صقر الجزيره
صقر الجزيره متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 23
 تاريخ التسجيل :  Apr 2010
 أخر زيارة : يوم أمس (01:36 PM)
 المشاركات : 11,812 [ + ]
 التقييم :  4149
 الدولهـ
Saudi Arabia
 الجنس ~
Male
 MMS ~
MMS ~
لوني المفضل : Cadetblue

اوسمتي

افتراضي



نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


 
 توقيع : صقر الجزيره

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
شكرا لكي اختي قمر الشرقيه على التوقيع الجميل
لاعدمنا الروعهً منك
نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


رد مع اقتباس
قديم 03-09-2019, 10:21 AM   #3


الصورة الرمزية أجمل حدث
أجمل حدث متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 1272
 تاريخ التسجيل :  Mar 2019
 أخر زيارة : 03-19-2019 (02:26 PM)
 المشاركات : 1,263 [ + ]
 التقييم :  1252
لوني المفضل : Cadetblue

اوسمتي

افتراضي



دَام عَطَائِكْ.. يَآطُهرْ..
وَلَا حَرَّمْنَا أَنْتَقَائِكْ الْمُمَيِّز وَالْمُخْتَلِف دَائِمَا
حَفِظَك الْلَّه مِن كُل مَكْرُوْه ..
تَحِيّه مُعَطَّرَه بِالْمِسْك ,


 

رد مع اقتباس
قديم 03-22-2019, 08:11 PM   #4


الصورة الرمزية 7ssass
7ssass متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 2
 تاريخ التسجيل :  Apr 2010
 أخر زيارة : 03-22-2019 (08:19 PM)
 المشاركات : 53,799 [ + ]
 التقييم :  37617
 الدولهـ
Saudi Arabia
 الجنس ~
Male
 MMS ~
MMS ~
 SMS ~
أنا حرفاً جزم نفسه
ومثلي يصعب إعرآبه
لوني المفضل : Burlywood

اوسمتي

افتراضي



يعطيكِ العافيه أختي الكريمه ع الجلب المفيد
تقديرنا


 
 توقيع : 7ssass

http://www2.0zz0.com/2018/12/05/21/184338524.gif

تسلم الأنامل والريشه أريج الورد
https://a.top4top.net/p_792mmyxx1.gif


رد مع اقتباس
إضافة رد
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع




 »:: تطويرالكثيري نت :: إستضافة :: تصميم :: دعم فني ::»

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
new notificatio by 9adq_ala7sas
HêĽм √ 3.2 OPS BY: ! ωαнαм ! © 2011-2012
vEhdaa 1.1 by NLP ©2009