مدخل لتعلم لغة التنسيق css

الفارس · 09-04-2019, 10:25 AM

السلام عليكم ورحمة الله وبركاته

قائمة المطلحات الجديدةالوارد ذكرها هنا :

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

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
الدليل السريع إلى لغة التنسيق 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

اسم العضو		حفظ البيانات؟
كلمة المرور

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