منتديات مدينة الاحلام

فيس بوك مدينة الاحلام twitter RSS 

 
 

 

 

معجبو مدينة الاحلام علي الفيس بوك

  #1  
قديم 05 - 02 - 2011, 12:05
php pro غير متصل
..:: من سكان المدينة ::..
 


php pro is on a distinguished road
افتراضي شرح عرض النصوص في css










النصوص

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

The spacing between text characters can be specified using the property 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 لهذا المثال وسترى أن النص الأصلي كتب بحروف صغيرة.




ملخص

في الدروس الثلاثة الأخيرة تعلمنا الكثير من خصائص CSS، لكن هناك الكثير في هذه التقنية،


avp uvq hgkw,w td css

 
 
 
 
 





رد مع اقتباس
قديم 05 - 02 - 2011, 13:09   رقم المشاركة : [2]
نائب المشرف العام
 

السامي تم تعطيل التقييم
افتراضي رد: شرح عرض النصوص في css

اشكرك اخي الكريم

لقد كان هناك خطا بسيط في الاكواد اخي ولقد قمت بتعديله وبعد التعديل اتضح انك لم تضع الكود الخاص بـ تحويل النص لذا ارجو منك اعادة ادراجه


السامي غير متصل   رد مع اقتباس
قديم 17 - 02 - 2011, 14:48   رقم المشاركة : [3]
موقوف
 

triblehhhh is on a distinguished road
افتراضي رد: شرح عرض النصوص في css

thnxxxxxxxxxxxxxxxxxx


triblehhhh غير متصل   رد مع اقتباس
قديم 29 - 06 - 2011, 16:30   رقم المشاركة : [4]
موقوف
 

خفقات قلب is on a distinguished road
افتراضي رد: شرح عرض النصوص في css

جهد رائع ومميز

الى الامام دوما

دمت بود وخير


خفقات قلب غير متصل   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
النصوص, css, شرح, عرض

أدوات الموضوع

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

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


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
برنامج Balabolka 2.1.0.491 لتحويل النصوص الى صوت shady02 قسم البرامج , برامج مجانية 0 24 - 01 - 2011 12:33
تدوير النصوص مع تكرارها قاهر الاعداء قسم التصاميم و الابداع 0 23 - 01 - 2011 02:51
╝◄حصريا:قاموس مترجم النصوص والكلمات بيترجم من كله لكله,سهل ولذيذ اوى بتاريخ 3رمضان ►╚ tarektop قسم البرامج , برامج مجانية 7 03 - 10 - 2010 20:35
برنامج خفيف لحماية النصوص برقم سريText Encripter1.5 لمسات الحنين قسم الكمبيوتر والانترنت 0 26 - 01 - 2010 09:46
الاصدار الجديد من ترجمة النصوص DreamsCity قسم تطوير المواقع و المنتديات 9 10 - 01 - 2009 18:32


الساعة الآن 07:30.

    Powered by vBulletin Version 3.8.7
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd
ترقية وتطوير: مجموعة الدعم العربى
  

SEO by vBSEO