المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : الدرس مفصل 5 : [ النصوص ] دورة html المستوى الثاني متقدم تقنية الـ CSS


walid
11-01-2013, بتوقيت غرينيتش 04:31 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط§ظ„ط¯ط±ط³ 5 : [ ط§ظ„ظ†طµظˆطµ ] ط¯ظˆط±ط© html ط§ظ„ظ…ط³طھظˆظ‰ ط§ظ„ط«ط§ظ†ظٹ ظ…طھظ‚ط¯ظ… طھظ‚ظ†ظٹط© ط§ظ„ظ€ CSS (http://www.dzbatna.com/t2182410/)


الدرس مفصل 5 : [ النصوص ] دورة html المستوى الثاني متقدم تقنية الـ CSS (http://www.losha.net/%d8%a7%d9%84%d8%af%d8%b1%d8%b3-5-%d8%a7%d9%84%d9%86%d8%b5%d9%88%d8%b5-%d8%af%d9%88%d8%b1%d8%a9-html-%d8%a7%d9%84%d9%85%d8%b3%d8%aa%d9%88%d9%89-%d8%a7%d9%84%d8%ab%d8%a7%d9%86%d9%8a-%d9%85%d8%aa/)


http://www.alshrera.com/losha/1-losha.gif (http://www.losha.net/)
بكل الحبhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gif نلتقى من جديد
http://img141.imageshack.us/img141/1228/1z1y74h.gif
http://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gifhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gifhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gif (http://www.losha.net/)http://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gif (http://www.losha.net/)http://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gif

http://www.alshrera.com/losha/9-losha.gif (http://www.losha.net/)




http://www.dzbatna.com/images/icons/iconrote.gif (http://sa.ae/4239505/)http://www.arabw-pearl.com/vb/images/icons/tanbeh.gif (http://sa.ae/4239505/)http://www.dzbatna.com/images/icons/iconrote.gif (http://sa.ae/4239505/) الرجاء قرائة الموضوع كاملاً وعدم الق (http://www.losha.net/)فز بين السطور لتوضيح ما قد يغيب عنك والإستفادة من إستخدام الشرح طريقة لأقصى درجة .

http://www.losha.net/wp-content/uploads/html-css-5.jpg




http://upload.dzbatna.net/upfiles/2N436803.gif-الدرس مفصل 5: النصوص
http://upload.dzbatna.net/upfiles/uRY02504.png

تنسيق وإضافة طراز إلى النصوص هي مسئلة أساسية لمصممي المواقع ،
في هذا الدرس مفصل ستأخذ مقدمة حول الأساليب العجيبة التي تقدمها CSS
لتنسيق النص،
سنتحدث عن هذه الخصائص في هذا الدرس مفصل:
http://upload.dzbatna.net/upfiles/5fW74184.gif• text-indent
http://upload.dzbatna.net/upfiles/5fW74184.gif http://upload.dzbatna.net/upfiles/5fW74184.gif• text-align
http://upload.dzbatna.net/upfiles/5fW74184.gif • text-decoration
http://upload.dzbatna.net/upfiles/5fW74184.gif http://upload.dzbatna.net/upfiles/5fW74184.gif• letter-spacing
http://upload.dzbatna.net/upfiles/5fW74184.gif • text-transform
http://upload.dzbatna.net/upfiles/Owl01370.gif وضع فارغ قبل أول سطر "text-indent"
http://upload.dzbatna.net/upfiles/uRY02504.png

الخاصية text-indent تسمح لك بإضافة لمسة أنيقة إلى الفقرات بوضع مسافة فارغة قبل أول سطر من الفقرة،

في المثال أدناه وضعنا القيمة 30px لكل الفقرات التي تستخدم العنصر <p> :

رمز Code:
p { text-indent: 30px; }


http://upload.dzbatna.net/upfiles/Owl01370.gif محاذاة النص &quot;text-align&quot;
http://upload.dzbatna.net/upfiles/uRY02504.png




خاصية text-align تشبه في HTML خاصية &quot;align&quot; التي كانت تستخدم في الماضي،

النص يمكن محاذاته نحو اليسار &quot;left&quot; أو اليمين &quot;right&quot; أو في المنتصف &quot;centred&quot; وبالإضافة إلى ذلك القيمة justify ستقوم بمحاذاة النص من الجانبين كما تفعل بعض الصحف والمجلات.
في المثال أدناه النص في رأس الجدول <th> قمنا بمحاذاته نحو اليمين،

بينما البيانات في الجدول <td> حاذيناها نحو المنتصف أما النص في الفقرات فقمنا بمحاذاته من الجانبين:
رمز Code:
th { text-align: right; } td { text-align: center; } p { text-align: justify; }
http://upload.dzbatna.net/upfiles/Owl01370.gif زخرفة النص &quot;text-decoration&quot;
http://upload.dzbatna.net/upfiles/uRY02504.png

الخاصية text-decoration تمكنك من إضافة زخارف أو تأثيرات على النص ،
فمثلاً يمكنك أن تضيف سطراً أسفل النص،
أو فوقه أو عليه ،

في المثال الآتي كل عناصر <h1> وضعنا أسفلها خطاً أما <h2> فهي العناوين التي فوقها خط و <h3> قمنا بوضع الخط عليها.
رمز Code:
h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }
http://upload.dzbatna.net/upfiles/Owl01370.gif المسافة بين الحروف &quot;letter-spacing&quot;
http://upload.dzbatna.net/upfiles/uRY02504.png
the spacing between text characters can be specified using the property letter-spacing،

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

فمثلاً إذا أردت مسافة 3px بين الحروف في الفقرات <p> و 6px بين الحروف في العناوين <h1> فعليك أن تكتب الخصائص بهذا الشكل :

رمز Code:
h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }

http://upload.dzbatna.net/upfiles/Owl01370.gif تحويل النص &quot;text-transform&quot;
http://upload.dzbatna.net/upfiles/uRY02504.png
خاصيةtext-transform
تتحكم بحجم الخط في اللغات الغربية،



يمكنك أن تختار بين القيم capitalize أو uppercase أو lowercase ،

وبغض النظر عن كيفية ظهور النص الأصلي .
فمثلاً كلمة &quot;headline&quot; يمكن أن تظهر للمستخدم بهذا الشكل &quot;HEADLINE&quot; أو بهذا الشكل &quot;Headline&quot;،

هناك أربع قيم يمكنك استخدامها مع القيم text-transform:
capitalize
تقوم بتكبير الحرف الأول من كل كلمة مثال: &quot;john doe&quot; ستصبح &quot;John Doe&quot;.
uppercase
تجعل كل الحروف كبيرة،

http://upload.dzbatna.net/upfiles/5fW74184.gifمثال: &quot;john doe&quot; ستصبح &quot;JOHN DOE&quot;.
lowercase
ستجعل كل الحروف صغيرة،

http://upload.dzbatna.net/upfiles/5fW74184.gifمثال: &quot;JOHN DOE&quot; ستصبح &quot;john doe&quot;.
none
لن تقوم بعمل أي تأثير ،

النص سيظهر كما كتب في ملف HTML .
http://upload.dzbatna.net/upfiles/5fW74184.gifكمثال ،

سنقوم باستخدام قائمة أسماء ،

الأسماء كلها تستخدم العنصر ،

رمز Code:
<li> (list-item)
ولنقل أننا نريد الأسماء أن يظهر حرفها الأول كبيراً أما العناوين فنريد كل حروفها كبيرة.
جرب وألقي نظرة على HTML لهذا المثال وسترى أن النص الأصلي كتب بحروف صغيرة.

رمز Code:
h1 { text-transform: uppercase; } li { text-transform: capitalize; }

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

لكن هناك الكثير في هذه التقنية





http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/IrK49652.gif تهانينا !
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifلقد إنتهى الدرس مفصلhttp://www.losha.net/vb/images/smilies/vip/sm258.gif !

http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifيتبع


http://upload.dzbatna.net/upfiles/rnI37149.gif- يستقبل الاستفسارات
الاخ الفاضل / ثامر الصعيدي (http://www.dzbatna.com/u57988/)
كل يوم من الساعة 7.30 مساء حتى الساعة 10 .
http://upload.dzbatna.net/upfiles/uRY02504.png http://upload.dzbatna.net/upfiles/5fW74184.gif

ولله الحمد تم الدرس مفصل الثالث
فإن كان به خطأ فإنه منى وأنسانى إياه الشيطان الرجيم
وإن أصبت فإنه من فضل الله عز وجل علينا
http://www.losha.net/mypictures/fasl02.gif
وفي ختام هذا الشرح طريقة أدعوا الله لي ولكم ولوالدينا ولمن أحببناه في الدنيا
بالهداية والصلاح في الدنيا وأن يجمعنا جميعاً في الفردوس الأعلى ….
http://i151.photobucket.com/albums/s133/moooon_light30/icons/1.gif (http://www.losha.net/)
سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
أخوكم فى الله
Ali Losha
http://www.alshrera.com/losha/4-losha.gif
http://upload.dzbatna.net/upfiles/1zR85007.png



مصدر الدرس مفصل : الدرس مفصل 5: [ النصوص ] دورة html المستوى الثاني متقدم تقنية الـ CSS (http://www.losha.net/%d8%a7%d9%84%d8%af%d8%b1%d8%b3-5-%d8%a7%d9%84%d9%86%d8%b5%d9%88%d8%b5-%d8%af%d9%88%d8%b1%d8%a9-html-%d8%a7%d9%84%d9%85%d8%b3%d8%aa%d9%88%d9%89-%d8%a7%d9%84%d8%ab%d8%a7%d9%86%d9%8a-%d9%85%d8%aa/)
http://www.losha.net/wp-content/themes/sahifa/images/logo.png (http://www.losha.net/)


http://upload.dzbatna.net/upfiles/Qar31212.jpg









ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى