منتدى الابداع العربي

للإبداع لمسات ! ... ولمسـات الإبــداع إختصاصـنا !
 
الرئيسيةالرئيسية  المنشوراتالمنشورات  البوابةالبوابة  التسجيلالتسجيل  دخولدخول  


الأساليب العجيبة التي تقدمها CSS لتنسيق النص
 

 الأساليب العجيبة التي تقدمها CSS لتنسيق النص

اذهب الى الأسفل 
كاتب الموضوعرسالة
JoryAbdallah
سوبر الإبداع 

JoryAbdallah

انثى
السمك
عدد المساهمات : 126400
نقاط النشاط : 142117
السٌّمعَة : 3006
بلد العضو : الأساليب العجيبة التي تقدمها CSS لتنسيق النص Saudi-10
العمر : 35

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالإثنين نوفمبر 28, 2016 11:28 pm

تنسيق وإضافة طراز إلى النصوص هي مسئلة أساسية لمصممي المواقع، في هذا الدرس ستأخذ مقدمة حول الأساليب العجيبة التي تقدمها CSS لتنسيق النص، سنتحدث عن هذه الخصائص في هذا الدرس:
•text-indent
•text-align
•text-decoration
•letter-spacing
•text-transform

وضع فارغ قبل أول سطر "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;
   }
   



ملخص

في الدروس الثلاثة الأخيرة تعلمنا الكثير من خصائص CSS، لكن هناك الكثير في هذه التقنية،
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://taqnyiat.ahlamontada.com/
Mr Robot
سوبر الإبداع 

Mr Robot

ذكر
القوس
عدد المساهمات : 35481
نقاط النشاط : 37581
السٌّمعَة : 108
بلد العضو : الأساليب العجيبة التي تقدمها CSS لتنسيق النص Lebano10
العمر : 35

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: رد: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالثلاثاء مارس 21, 2017 2:00 am

بارك الله بيك
واصل
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Princess Abir
عضو ذهبي 

Princess Abir

انثى
الثور
عدد المساهمات : 2130
نقاط النشاط : 2168
السٌّمعَة : 9
بلد العضو : الأساليب العجيبة التي تقدمها CSS لتنسيق النص Algeri10
العمر : 20

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: رد: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالثلاثاء مارس 21, 2017 2:03 am

طرح مميز يعطيك العافية


الأساليب العجيبة التي تقدمها CSS لتنسيق النص 21484110
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.ibda3araby.com
abuahmad
عضو محترف 

abuahmad

ذكر
السرطان
عدد المساهمات : 1485
نقاط النشاط : 1637
السٌّمعَة : 4
العمر : 54

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: رد: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالأربعاء مايو 10, 2017 9:09 am

موضوع رائع



وطرح مميز



شكرا

الرجوع الى أعلى الصفحة اذهب الى الأسفل
JoryAbdallah
سوبر الإبداع 

JoryAbdallah

انثى
السمك
عدد المساهمات : 126400
نقاط النشاط : 142117
السٌّمعَة : 3006
بلد العضو : الأساليب العجيبة التي تقدمها CSS لتنسيق النص Saudi-10
العمر : 35

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: رد: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالإثنين ديسمبر 11, 2017 12:03 pm

منورين الموضوع


الأساليب العجيبة التي تقدمها CSS لتنسيق النص Img_2010
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://taqnyiat.ahlamontada.com/
منصورة
سوبر الإبداع 

منصورة

انثى
الدلو
عدد المساهمات : 13970
نقاط النشاط : 16963
السٌّمعَة : 51
بلد العضو : الأساليب العجيبة التي تقدمها CSS لتنسيق النص Algeri10
العمر : 58

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: رد: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالإثنين ديسمبر 11, 2017 5:49 pm

الف شكر على الطرح المميز
ومزيدا من التالق
مع كل الاحترام والتقدير


كل القلوب إلى الحبيب تميل
ومعي بهذا شاهد ودليل
اما الدليل إذا ذكرت محمداً
صارت دموع العارفين تسيل
هذا رسول الله نبراس الهدى
هذا لكل العالمين نبيا
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.manssora.com/
nour aliman
عضو ذهبي 

nour aliman

انثى
عدد المساهمات : 2256
نقاط النشاط : 3040
السٌّمعَة : 2
بلد العضو : الأساليب العجيبة التي تقدمها CSS لتنسيق النص Egypt10

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: رد: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالأربعاء ديسمبر 13, 2017 4:36 pm

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


الأساليب العجيبة التي تقدمها CSS لتنسيق النص 13854217533
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://wahetaleslam.yoo7.com/
JoryAbdallah
سوبر الإبداع 

JoryAbdallah

انثى
السمك
عدد المساهمات : 126400
نقاط النشاط : 142117
السٌّمعَة : 3006
بلد العضو : الأساليب العجيبة التي تقدمها CSS لتنسيق النص Saudi-10
العمر : 35

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: رد: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالجمعة ديسمبر 15, 2017 1:26 am

حياك الله


الأساليب العجيبة التي تقدمها CSS لتنسيق النص Img_2010
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://taqnyiat.ahlamontada.com/
حميد العامري
عضو فعال 

حميد العامري

ذكر
السرطان
عدد المساهمات : 281
نقاط النشاط : 344
السٌّمعَة : 0
بلد العضو : الأساليب العجيبة التي تقدمها CSS لتنسيق النص 45544510
العمر : 68

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: رد: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالثلاثاء ديسمبر 19, 2017 7:37 pm

طرح مميز
شكراً لجهودك
بانتظار جديدك
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://hameed.montadarabi.com/forum
JoryAbdallah
سوبر الإبداع 

JoryAbdallah

انثى
السمك
عدد المساهمات : 126400
نقاط النشاط : 142117
السٌّمعَة : 3006
بلد العضو : الأساليب العجيبة التي تقدمها CSS لتنسيق النص Saudi-10
العمر : 35

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: رد: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالأربعاء ديسمبر 20, 2017 1:35 am

هلابش اخي العزيز
نورت


الأساليب العجيبة التي تقدمها CSS لتنسيق النص Img_2010
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://taqnyiat.ahlamontada.com/
Picasso-Des
سوبر الإبداع 

Picasso-Des

ذكر
الجدي
عدد المساهمات : 10775
نقاط النشاط : 11119
السٌّمعَة : 136
بلد العضو : الأساليب العجيبة التي تقدمها CSS لتنسيق النص Ioao10
العمر : 37

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: رد: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالسبت يونيو 16, 2018 11:14 pm

يعطيكم العافية على الطرح الأساليب العجيبة التي تقدمها CSS لتنسيق النص 837876428
كل الاحترام الأساليب العجيبة التي تقدمها CSS لتنسيق النص 433646733
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://medialive.pro
Mohamed Sobhi
عضو ذهبي 

Mohamed Sobhi

ذكر
الاسد
عدد المساهمات : 3330
نقاط النشاط : 3996
السٌّمعَة : 57
بلد العضو : الأساليب العجيبة التي تقدمها CSS لتنسيق النص Egypt10
العمر : 24

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: رد: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالسبت يوليو 21, 2018 11:47 am

درس اكثر من رائع شكرا لك على الطرح
لا تحرمنا من جديدك وردة حمراء


الأساليب العجيبة التي تقدمها CSS لتنسيق النص P_947wjtlk1
الرجوع الى أعلى الصفحة اذهب الى الأسفل
مصطفى ستيتان
عضو محترف 

مصطفى ستيتان

ذكر
عدد المساهمات : 1130
نقاط النشاط : 1203
السٌّمعَة : 11
بلد العضو : الأساليب العجيبة التي تقدمها CSS لتنسيق النص Ioao10

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: رد: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالإثنين يوليو 23, 2018 9:11 am

جزاكم الله خيراً 


سبحان الله والحمدلله ولا إله إلا الله 
 
الأساليب العجيبة التي تقدمها CSS لتنسيق النص Do
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.elmanal.com
D.YouSSef
سوبر الإبداع 

D.YouSSef

ذكر
الدلو
عدد المساهمات : 6124
نقاط النشاط : 7079
السٌّمعَة : 34
بلد العضو : الأساليب العجيبة التي تقدمها CSS لتنسيق النص Morocc10
العمر : 52

الأساليب العجيبة التي تقدمها CSS لتنسيق النص Empty
مُساهمةموضوع: رد: الأساليب العجيبة التي تقدمها CSS لتنسيق النص   الأساليب العجيبة التي تقدمها CSS لتنسيق النص Emptyالخميس أغسطس 30, 2018 3:25 am

موضوع مهم جدا جوري تعلمت أشياء جديدة خاصة ب   css شكرالكي
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
الأساليب العجيبة التي تقدمها CSS لتنسيق النص
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى الابداع العربي ::  تقنيات احلى منتدى ::  تقنيات أحلى منتدى :: دروس تعلم لغات البرمجة-
انتقل الى:  
جميع الحقوق محفوظة لمنتدى الإبداع العربي 2020