|
مدخل لتعلم لغة التنسيق css
السلام عليكم ورحمة الله وبركاته
قائمة المطلحات الجديدةالوارد ذكرها هنا : id : مُعرف class : فئة block : مجموعة لغة التنسيق CSS من اسمها فهي لغة لتنسيق ملفات الـ HTML يمكن تضمين أكواد الـ css من خلال الوسم style ضمن كود HTML وهذا الوسم يأخذ خاصية وهي النوع type بالشكل التالي : <style type="text/css"> </style> وما سنتناوله الآن هو كيفية تحديد الوسوم التي نريد تطبيق التنسيق عليها ما عليك إلا كتابة اسم الوسم الذي تريد تطبيق التنسيق عليه ومن ثَم تقوم بفتح أقواس مجموعة لكتابة خصائص هذا الوسم بداخل الأقواس سنستخدم الوسم div أحد وسوم HTML وسنعطي لون الخط أحمر لمحتويات هذا الوسم الآن نريد تجربة ما سبق على كود HTML <!doctype html> <html dir="rtl"> <head> <meta charset="utf-8"> <title> تجربة التنسيق </title> <style type="text/css"> div { color:#F00; } </style> </head> <body> <div> بسم الله الرحمن الرحيم </div> <div> الحمد لله رب العالمين </div> <div> الرحمن الرحيم </div> <p> مالك يوم الدين <p> </body> </html> ملاحظة: أي لون مكون من الألوان الثلاث الأحمر والأخضر والأزرق اللون الواحد يتبع النظام السادس عشر في الكتابة ويأخذ التمثيل RGB وهي إختصال لأول حرف من كل لون وإذا أردت أن أطبق التنسيق على أكثر من وسم أستخدم بينهم الفاصلة , ويصبح كود التنسيق كالتالي : <style type ="text/css"> div,p { color:#F00; } </style> وبعد تجربة هذه الطريقة نجد أن جيع النصوص داخل الوسم div و p لونها أحمر فلتحديد الوسوم التي نريد تطبيق التنسيق عليها ظهرت الحاجة للمعرفات والفئات الـ id والـ class فلهذا سنميز كل وسم من النوع div بمعرف مختلف كالتالي : <div id="text1"> بسم الله الرحمن الرحيم </div> <div id="text2"> الحمد لله رب العالمين </div> <div class="text3"> الرحمن الرحيم </div> <p class="text3"> مالك يوم الدين <p> <div> إياك نعبد وإياك نستعين </div> <div class="text3"> إهدنا الصراط المستقيم </div> <div id="text4"> صراط الذين أنعمت عليهم </div> <div class="text5"> غير المغضوب عليهم ولا الضالين </div> من ملاحظتنا للكود السابق نجد أن بعض الوسوم أخذت نفس اسم الفئة ولهذا سيطبق عليها نفس التنسيق الخاص بهذه الفئة |
| الساعة الآن 09:49 AM |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO ©2010, Crawlability, Inc. TranZ By
Almuhajir