شرح إستخدام HTML مع CSS

تعتبر CSS (Cascading Style Sheets) و HTML (HyperText Markup Language) من أهم لغات الويب وتستخدمان معًا لتصميم صفحات الويب. يتم استخدام HTML لإنشاء تنسيقات وهيكل الصفحة، بينما يتم استخدام CSS لإضافة تنسيقات إضافية وتحسين الشكل العام للصفحة. يمكن استخدام CSS بعد إنشاء عناصر HTML على الصفحة وتحديد مظهرها. يمكن استخدام CSS لتعيين الخصائص الأساسية مثل اللون والحجم والخط والخلفية والهوامش، بالإضافة إلى تحديد مواضع العناصر على الصفحة.

يمكن استخدام CSS بأكثر من طريقة، ولكن الطريقة الأكثر شيوعًا هي تضمين CSS في صفحة HTML باستخدام عنصر style. يمكنك استخدام العنصر style داخل عنصر head في صفحة HTML لتعريف مظهر الصفحة. يمكن تحديد أي عنصر HTML وتعيين الخصائص المختلفة له باستخدام القواعد. على سبيل المثال، يمكنك تعيين خلفية الصفحة الرئيسية بلون أحمر بالطريقة التالية:

HTML


<head>
    <style>
        body {
            background-color: red;
        }
    </style>
</head>

يمكن تعيين أي خاصية CSS في النطاق نفسه، يمكنك تعيين اللون والحجم والهامش وغيرها من الخصائص باستخدام هذه الطريقة.

بالإضافة إلى ذلك، يمكن استخدام CSS بطريقة خارجية، حيث يتم إنشاء ملف CSS منفصل ويتم ربطه بصفحة HTML باستخدام العنصر link. يتم تضمين العنصر link في عنصر head في صفحة HTML ويحتوي على مسار إلى ملف CSS الذي تريد استخدامه. على سبيل المثال، يمكن ربط صفحة HTML بملف CSS خارجي بهذه الطريقة:

HTML


<head>
    <link rel="stylesheet" href="style.css">
</head>

في هذا المثال، يوجد عنصر link الذي يحتوي على معرف "stylesheet" ومسار الملف "style.css". يمكنك إنشاء ملف CSS خارجي يحتوي على القواعد الخاصة بتصميم صفحتك، مثل الألوان والخطوط والتخطيط والهوامش والحجم والخلفية وغيرها.

بالإضافة إلى الطريقتين السابقتين، يمكن استخدام CSS داخل العناصر HTML مباشرة باستخدام الخاصية style. يمكن تحديد الخصائص المختلفة للعناصر على الصفحة مباشرة داخل عناصر HTML. على سبيل المثال، يمكن تعيين لون النص داخل عنصر p باستخدام الخاصية style:

HTML


<p style="color: red;">تغيير لون هذا النص إلى الأحمر</p>

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

وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة.