:: سعر الابرة الاسفنجيه الالمانية (آخر رد :غوايش)       :: ‏تعرف علي أسرار البيع والشراء للاسهم (آخر رد :سمير رامي)       :: دردشة حبيش الحلاوي (آخر رد :سمير رامي)       :: أكاديمية تيمز بحوث، مشاريع، تكاليف وواجبات (آخر رد :غوايش)       :: دورة مهارات الاتصال الإداري الفعال (آخر رد :سمير رامي)       :: أحدث تصاميم طاولات تلفزيون مريحة وأنيقة (آخر رد :ضياء روحي)       :: تكلفة عملية تجميل الانف في تركيا (آخر رد :ضياء روحي)       :: .ZEUUS Inc تعيّن عضوين جديدين في مجلس الإدارة (آخر رد :غوايش)       :: اكلات الشوارع افضل بريسكت في جدة عند العم خليل لايفوتك 2021 (آخر رد :ضياء روحي)       :: وجبة الجشيد من الوجبات الشهيرة (آخر رد :سمير رامي)      
اختر لونك:
وَقُلِ اعْمَلُوا فَسَيَرَى اللَّهُ عَمَلَكُمْ وَرَسُولُهُ وَالْمُؤْمِنُونَ ۖ وَسَتُرَدُّونَ إِلَىٰ عَالِمِ الْغَيْبِ وَالشَّهَادَةِ فَيُنَبِّئُكُم بِمَا كُنتُمْ تَعْمَلُونَ [ التوبة : ( 105 )] كلمة الإدارة

يرجى إختيار القسم المناسب قبل النشر وسيعاقب المخالف بإنذار أول مرة وسيتم حظره إذا تكرر ذلك كلمة الإدارة

يُمنع كتابة مواضيع السحر والشعوذة والروحانيات والابراج بكافة الأشكال والمخالف سيعاقب بحظر مؤقت وإذا تكرر سيكون حظر دائم تنبيه هام جداً



أضف رد جديد

قديم 09-04-2019, 10:25 AM   #1
تاريخ التسجيل: Feb 2019
المشاركات: 1,010
التقييم: 10
تاريخ التسجيل: Feb 2019
المشاركات: 1,010
التقييم: 10
افتراضي مدخل لتعلم لغة التنسيق 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>
من ملاحظتنا للكود السابق نجد أن بعض الوسوم أخذت نفس اسم الفئة ولهذا سيطبق عليها نفس التنسيق الخاص بهذه الفئة

الفارس غير متواجد حالياً   اقتباس
أضف رد جديد

الكلمات الدلالية (Tags)
منتديات رحيل, رحيل, شبكة رحيل, r7il, r7il.com


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

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

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


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
الدليل السريع إلى لغة التنسيق css القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 1 28-07-2019 07:50 PM
مدخل إلى برمجة إضافات ووردبريس مهرة النجدية قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 1 28-07-2019 11:13 AM
مدخل إلى ووردبريس مُتعدّد المواقع مهرة النجدية قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 1 22-07-2019 06:58 PM
مدخل إلى أوراق الأنماط المتتالية (css) القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 27-02-2019 05:33 PM
مدخل إلى شبكات CSS العصرية (CSS Grids) القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 27-02-2019 05:25 PM


الساعة الآن 07:50 AM

 


Content Relevant URLs by vBSEO ©2010, Crawlability, Inc.