كلمـــة الإدارة لمنتدى الحاسب والجوال العربي

الأعضاء و الزوار الكرام

يا ‏‏" ‏زائر " اهلاً وسهلاً بك في اسرة منتدانا منتدى الحاسب والجوال العربي سعيدون بزيارتكم لنا *كما نرحب بلعضو الجديد ‏‏" ‏fhd10 "

♨لا تنسى تسجيل اعجابك♨
احصائيات
هذا المنتدى يتوفر على 2225 عُضو.
آخر عُضو مُسجل هو fhd10 فمرحباً به.

أعضاؤنا قدموا 2073 مساهمة في هذا المنتدى في 1157 موضوع

أهلا وسهلا بك زائرنا الكريم, أنت لم تقم بتسجيل الدخول بعد! يشرفنا أن تقوم بالدخول أو التسجيل إذا رغبت بالمشاركة في المنتدى

منتدى الحاسب والجوال العربي » المنتدى التعليمي » مكتبة الدروس » دروس تعلم لغة Css » الدرس 5 في لغة CSS تنسيق النصوص

hozaifa01

الدرس 5 في لغة CSS تنسيق النصوص

إرسال موضوع جديد  إرسال مساهمة في موضوع

avatar

مجنون الغرام

المدير العام
المدير العام
البلد البلد :
الجنس : ذكر
عدد المساهمات : 1466
نقاط : 4269
مخالفات مخالفات : ليس لديه مخالفات
الدرس 5 في لغة CSS تنسيق النصوص

الدرس 5: النصوص
تنسيق وإضافة طراز إلى النصوص هي مسئلة أساسية لمصممي المواقع، في هذا الدرس ستأخذ مقدمة حول الأساليب العجيبة التي تقدمها 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;
   }
   


#1 - كتب في 2016-01-11, 07:49

________________
معاينة صفحة البيانات الشخصي للعضو https://plus.google.com/+hozaifa01 https://www.facebook.com/hozaifa01 https://twitter.com/hozaifa01

صلاحيات هذا المنتدى:
تستطيع الرد على المواضيع في هذا المنتدى

IP