القائمة الرئيسية

الصفحات

تعديل المشاركة

أنماط HTML - CSS

منوعاتي
(0)

 

CSS تعني أوراق الأنماط المتتالية.


يوفر CSS الكثير من العمل. يمكنه التحكم في تخطيط العديد من صفحات الويب دفعة واحدة.

ما هو CSS؟


تستخدم أوراق الأنماط المتتالية (CSS) لتنسيق تخطيط صفحة الويب.


باستخدام CSS ، يمكنك التحكم في اللون ، والخط ، وحجم النص ، والتباعد بين العناصر ، وكيفية وضع العناصر وتخطيطها ، وما هي صور الخلفية أو ألوان الخلفية التي سيتم استخدامها ، وشاشات العرض المختلفة لأجهزة مختلفة

باستخدام CSS


يمكن إضافة CSS إلى مستندات HTML بثلاث طرق:


مضمنة - باستخدام سمة النمط داخل عناصر HTML


داخلي - باستخدام عنصر <style> في قسم <head>


خارجي - باستخدام عنصر <link> للارتباط بملف CSS خارجي


الطريقة الأكثر شيوعًا لإضافة CSS هي الاحتفاظ بالأنماط في ملفات CSS الخارجية. ومع ذلك ، في هذا البرنامج التعليمي سوف نستخدم الأنماط المضمنة والداخلية ، لأن هذا أسهل في التوضيح ، ويسهل عليك تجربته بنفسك.


مضمنة CSS


يتم استخدام CSS المضمن لتطبيق نمط فريد على عنصر HTML واحد.


يستخدم CSS المضمن سمة النمط لعنصر HTML.


يضبط المثال التالي لون نص العنصر <h1> على اللون الأزرق ، ولون نص العنصر <p> إلى اللون الأحمر:


مثال

CSS داخلي


يتم استخدام CSS داخلي لتحديد نمط لصفحة HTML واحدة.


يتم تعريف CSS داخلي في قسم <head> لصفحة HTML ، داخل عنصر <style>.


يقوم المثال التالي بتعيين لون النص لجميع عناصر <h1> (في تلك الصفحة) إلى اللون الأزرق ، ولون النص لجميع عناصر <p> إلى اللون الأحمر. بالإضافة إلى ذلك ، سيتم عرض الصفحة بلون خلفية "مسحوق أزرق":


مثال

CSS خارجي


يتم استخدام ورقة أنماط خارجية لتحديد النمط للعديد من صفحات HTML.


لاستخدام ورقة أنماط خارجية ، أضف ارتباطًا إليها في قسم <head> لكل صفحة HTML

يمكن كتابة ورقة الأنماط الخارجية في أي محرر نصوص. يجب ألا يحتوي الملف على أي كود HTML ، ويجب حفظه بامتداد .css.


إليك ما يبدو عليه ملف "styles.css":


"styles.css":

ألوان وخطوط وأحجام CSS


هنا ، سوف نوضح بعض خصائص CSS شائعة الاستخدام. سوف تتعلم المزيد عنها لاحقًا.


تحدد خاصية لون CSS لون النص الذي سيتم استخدامه.


تحدد خاصية عائلة الخطوط في CSS الخط الذي سيتم استخدامه.


تحدد خاصية حجم الخط في CSS حجم النص الذي سيتم استخدامه.


مثال


استخدام خصائص CSS color و font-family و font-size:

حدود CSS


تحدد خاصية CSS border حدًا حول عنصر HTML.


نصيحة: يمكنك تحديد حد لجميع عناصر HTML تقريبًا.


مثال


استخدام خاصية CSS border:

حشوة CSS تحدد خاصية حشوة CSS مساحة (مسافة) بين النص والحد. مثال لاستخدام حدود CSS وخصائص المساحة المتروكة:الحشوه.هيpadding
هامش CSS


تحدد خاصية هامش CSS هامشًا (مسافة) خارج الحدود.


مثال


استخدام خصائص الحدود والهامش في CSS:

ارتباط بـ CSS خارجي


يمكن الرجوع إلى أوراق الأنماط الخارجية بعنوان URL كامل أو بمسار متعلق بصفحة الويب الحالية.


مثال


يستخدم هذا المثال عنوان URL كاملًا للارتباط بورقة أنما


ط:

هل اعجبك الموضوع :

أخر المواضيع من قسم : تطوير الويب

تعليقات

إرسال تعليق