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

 

 

{ مُنتديآتَ حسآسَ ) ~
 
..{ ::: فعالِياتَ منتدياتَ حساسَ:::..}~
 
 
منتدياتَ حسَاس ترحبَ بكمَ وتسعدَ بـ إنضمامِِكمَ أهلاً وسهلاً بـ الجمِيع كلمة إدارة السوآر



۩۞۩ تطوير آلموآقع وآلمنتديآت وآلمدونآت ۩۞۩ كِل مآيخصَ آلمنتديآتْ وآلموإقع .. وَتطوّيرهاَ / عَرضْ الأستَايلآت / دروس تطويرية / هآكآت / أكوآد / معلومآت هآمة

 
 
أدوات الموضوع انواع عرض الموضوع
#1  
قديم 02-08-2019, 08:46 PM
تعآليت بك♕ غير متواجد حالياً
Saudi Arabia     Female
اوسمتي
وسام تاج الإداره اوفياء المنتدى وسام نجَم أسبوعَ عز وفخر 88 
لوني المفضل Maroon
 عضويتي » 1062
 جيت فيذا » Mar 2018
 آخر حضور » 06-08-2019 (03:12 AM)
آبدآعاتي » 21,292
الاعجابات المتلقاة » 2997
 حاليآ في » حيث اكون ..
دولتي الحبيبه » دولتي الحبيبه Algeria
جنسي  »  male
آلقسم آلمفضل  »
آلعمر  »
الحآلة آلآجتمآعية  »
 التقييم » تعآليت بك♕ 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
مــزاجي  »
مشروبك   water
قناتك
اشجع
بيانات اضافيه [ + ]
الأساليب التي تقدمها 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; }




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

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

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

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


الساعة الآن 03:59 AM

أقسام المنتدى

| روحَانيات إسَلآميَة ، @ قُطوْف دِينيَه ▪● @ كُلنآ فِدآك يارسُول الله ▪● @ ¬ | متِصّفحْ حّر ، @ مُوجز آلآنبآء ▪● @ رُكـنْ آلعَـام ▪● @ ¬ | رَوآئِعنـآ ، @ ¬ | أبجديّة حرَف ، @ ۞ω☆ { الشعر و الشعرآء } ۞ω☆ @ ۞ω☆ { عذب الكلآم } ۞ω☆ @ ۞ω☆ { القصص و الروآيآت } ۞ω☆ @ ¬ | حَيآتنّا ومُجتَمعنَـآ | @ آنوثـہَ طآغيـہَ ▪● @ مطبخڪَ ▪● @ جمآل منزلڪَ ▪● @ ¬ | تطوَير آلذاتْ وَآلتعّلِيم ، @ التَربيه وَ التعْليم ▪● @ قسم اللغات ( Special Language ) ▪● @ ¬ | الإدَآرْه| @ حـَلقـة الوّصل ▪● @ مُلتقَى الطَآقمْ الإدَاريْ ▪● @ المنَفى ▪● @ النقاشات الجـَاده ، والحوآر الصَريح ▪● @ حَيآتُنآ الأُسَريهْ ▪● @ آلـصُور ▪● @ آلسِياحَه وَ السَفر ▪● @ آلقرآنْ الڪَرِيمْ والتجويد وَالصوتيات الأسْلآمِيهَ @ تَرآثِيـاتْ ▪● @ ¬ | الأقسَام الترْفِيهيهْ @ جُنوْن ألعآبنَـا ▪● @ آلصرْقعـَه وَ الألغَآز ▪● @ توَصيٌآت وأمضاَء أقِلآمّ الإدَارهْ ▪● @ ¬ | عَآلمْ أدمَ | @ الڛيآرآتْ والدرآجآتْ النآريـہ ▪● @ آلطِبُ وَ الصحْه ▪● @ ¬ | تِڪَنولوجيآ ،/ @ حساس الجوال ووبرامجه ▪● @ اليوتيوب You Tube ▪● @ الگمبيوتر و الانْترنِت والالعآإب الالكترونيـہ ▪● @ ¬ | مجِتمّع حَساس ، @ تَفـآصِيلُنـاَ هُنآ آ ▪● @ يَومِيآتَ آعضَآئُنآ ▪● @ مَجلْـة حَسآسْ @ تَحقِيقَآتُنآ .. / كُرسِي الأعْترَآف @ نقِآءَ ألتميّيزَ ▪● @ آلخيَمه الرمضانيه @ آلحَجِ وَالحُجَـآجْ ....... @ ¬ | حصريات حَساس ، ღ♥ღ @ ▪● ريشه مخمليه @ ومضات وفلاشآت عدسات مضيئه ▪● @ تطوير الذآت ▪● @ أطْفـآلُنـَا ▪● @ ۩۞۩ تطوير آلموآقع وآلمنتديآت وآلمدونآت ۩۞۩ @ حقيبة وعالمَ المصممَ●▪● @ التوآصل الإجتماعي ▪● @ ملحقات الفوتشوب والدروس الحصريه ▪● @ تعآزي وموآساه ▪● @ مُسآبَقاتْ وَ فعْالِيَـاتْ ▪● @ ۞ω☆ { حساس الخوآطر والأشعار الحصريهـ } ۞ω☆ @ ۞ω☆ { حساس الموآضيع و المقآلآت الحصريهـ } ۞ω☆ @ ۞ω☆ { حساس القصص و الروآيآت الحصريهـ } ۞ω☆ @ ¬ | دَورآت حسـَآس ▪●، @ ¬ | عالم الأنــــمي @ الأفلام الوثائقيه ▪● @ ¬ | دورة تصميم الرمزيات والتواقيع المتحركة @ رضاب من محآبر النور ▪● @ مجلِس التَوظيِف والوَظآئِف ▪● @ قسم الحيوانات والنباتات والطيور والحياه البحريه ▪● @ فضفضه تحكي روآياتنا @ ¬ | بدآية مسك ووآحة تألق وإبدآع ،ღ♥ღ @ آلترحِيبْ بِ الأعضَاء ▪● @ ۩۞۩{ فواصل واكسسوارات لتزيين المواضيع }۩۞۩ @ ¬ | ال حساس هُنا نسقوا مواضيعكم @ طلبآتكم هٌنآإ ▪● @ حديث الشّغب بين ريشة ومحبرة ▪● @ قسم طلبآت اللوكآت المدفوعه لـ زوار @ ¬ | معرض مصممي حساس @ مجلة أعضآء حسآس ▪● @ مساحة خاصة للتنسيق ▪● @ عـآلم آلرجُل ▪● @ صدىَ آلملآعبَ ▪● @




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

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