بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اليوم نكمل الجزأ الثالث من سلسلة أساسيات لغة الHTML
واتمنى ان يكون الشرح سهلاً وان تستفيدوا منه ..
نبدأ على بركة الله..
بدايةً سنتعرف ما معنى css ؟
تعد اختصار Cascading Style Sheets اي اوراق الانماط المتتالية..
الآن نبدأ بالتعرف على كيفية دمج أكواد ال css مع اكواد الhtml بحيث سنعدّل على الخطوط و الألوان وغيرها ...
هذه الاكواد تقسم إلى ثلاث انواع :
1.Inline : يتم من خلال ادخال سمة style داخل عناصر النصوص او الكلمات او العبارات او غيرها كما تعلمنا مسبقاً ..
2.Internal : يتم من خلال استخدام عنصر <style> داخل وسم <head>
3External. : تتم من خلال إدخال ملف css خارجي.
----------
نبدا بالقسم الأول وقد سبق ذكره من الشروحات السابقة
----------
ننتقل إلى القسم الثاني وذلك من خلال ادخال style لداخل head
وتحديد كل عنصر على حدى ..
للتوضيح بشكل اكثر سنطبق مثال ..
فلنلاحظ الصورة التالية :
نرى انه قمنا بوضع style وهو زوجي داخل ال head ثم داخل style قمنا بتحديد ما نريد التعديل عليه ..
ثم في body قمنا بكتابة ما نريد ...
لنلاحظ المثال التاني:
نلاحظ ان النص الثالث لم يتم التعديل عليه لأننا لم نقم بكتابته وتحديد لونه من داخل style
----------
بالنسبة للخارجي فلن يتم ذكره حالياً ..
نتجه نحو خطوط ال css
سنستخدم internal style لتحديد الخط ولون خلفية النص ولون النص ..
فلنحدد مثلاً البسلملة باللون الأخضر مع خلفية سوداء ونوع خط اريال..
مع حجم 100 ..
----------
لإضافة حدود الى النص نقوم بنفس الخطوات السابقة ولكن بادخال border وهو لتحديد حدود النص
----------
لزيادة المسافة بين النص والحدود نضيف فقط padding وهو المسؤول عن ذلك
للتحكم بموضع النصوص اي بمسافتها بين الجوانب نضيف margine وهو المسؤول عن ذلك
----------
لاضافة id الى النص او العبارة وهي التي تقوم بتسهيل تحديد نص او مجموعة نصوص..
----------
ماذا إذا أضفنا الآي دي لاكثر من نص ؟؟
ببساطة سيتم تغيير خواص كل نص او عبارة تحمل اسم الآي دي المطلوب ..
----------
في حال ان هناك كمثال اكثر من نص داخل p وتريد التعديل على مجموعة منهم فقط يمكن الاستعانة بclass وهو نفس مبدأ عمل الآي دي .
وهنا نصل إلى نهاية الجزأ الثالث من سلسلة لغة html اتمنى ان تكونوا قد استفدتم ..
تحياتي المبرمج المحترف
السلام عليكم ورحمة الله وبركاته
اليوم نكمل الجزأ الثالث من سلسلة أساسيات لغة الHTML
واتمنى ان يكون الشرح سهلاً وان تستفيدوا منه ..
نبدأ على بركة الله..
بدايةً سنتعرف ما معنى css ؟
تعد اختصار Cascading Style Sheets اي اوراق الانماط المتتالية..
الآن نبدأ بالتعرف على كيفية دمج أكواد ال css مع اكواد الhtml بحيث سنعدّل على الخطوط و الألوان وغيرها ...
هذه الاكواد تقسم إلى ثلاث انواع :
1.Inline : يتم من خلال ادخال سمة style داخل عناصر النصوص او الكلمات او العبارات او غيرها كما تعلمنا مسبقاً ..
2.Internal : يتم من خلال استخدام عنصر <style> داخل وسم <head>
3External. : تتم من خلال إدخال ملف css خارجي.
----------
نبدا بالقسم الأول وقد سبق ذكره من الشروحات السابقة
----------
ننتقل إلى القسم الثاني وذلك من خلال ادخال style لداخل head
وتحديد كل عنصر على حدى ..
للتوضيح بشكل اكثر سنطبق مثال ..
فلنلاحظ الصورة التالية :
ثم في body قمنا بكتابة ما نريد ...
لنلاحظ المثال التاني:
نلاحظ ان النص الثالث لم يتم التعديل عليه لأننا لم نقم بكتابته وتحديد لونه من داخل style
----------
بالنسبة للخارجي فلن يتم ذكره حالياً ..
نتجه نحو خطوط ال css
سنستخدم internal style لتحديد الخط ولون خلفية النص ولون النص ..
فلنحدد مثلاً البسلملة باللون الأخضر مع خلفية سوداء ونوع خط اريال..
مع حجم 100 ..
لإضافة حدود الى النص نقوم بنفس الخطوات السابقة ولكن بادخال border وهو لتحديد حدود النص
لزيادة المسافة بين النص والحدود نضيف فقط padding وهو المسؤول عن ذلك
لاضافة id الى النص او العبارة وهي التي تقوم بتسهيل تحديد نص او مجموعة نصوص..
----------
ماذا إذا أضفنا الآي دي لاكثر من نص ؟؟
ببساطة سيتم تغيير خواص كل نص او عبارة تحمل اسم الآي دي المطلوب ..
في حال ان هناك كمثال اكثر من نص داخل p وتريد التعديل على مجموعة منهم فقط يمكن الاستعانة بclass وهو نفس مبدأ عمل الآي دي .
تحياتي المبرمج المحترف
ليست هناك تعليقات:
إرسال تعليق