ماهي طريقة إستدعاء CSS؟

هناك ثلاث طرق لاستدعاء CSS في صفحات الويب:
Inline CSS :
يتم وضع هذا النوع من CSS داخل عناصر HTML عن طريق استخدام الخاصية style. هذا النوع يمكن استخدامه لتحديد نمط وتنسيق لعنصر HTML محدد داخل صفحة الويب. مثال:

HTML


<p style="color: red; font-size: 16px;">this is paragraph</p>

كما ترون هنا سيثم تغيير لون النص إلى الأحمر و سيثم تغير حجم الخط بناء على التنسيقات التي قمنا بإدراجها في الخاصية style.

Internal CSS:
يتم وضع هذا النوع من CSS داخل تكوين الصفحة HTML داخل عنصر style في قسم head من الصفحة. يمكن استخدامه لتحديد نمط وتنسيق لعدة عناصر HTML داخل صفحة الويب.

HTML


<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>This is p</p>
</body>
</html>

كما ترون ستكون نفس النيجة ولكن كتبنا أكواد لغة CSS في ترويسة ال head داخل الوسم style وقمنا بإستدعاء الفقرة النصية بإستخدام إسم الوسم وهو p وفتحنا أقواس معقوفة وبداخلها جميع أكواد CSS التي ستحدد للعنصر الفقرة النصية وهي تغيير لون النص إلى الأحمر وتكبير الخط.

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

HTML


index.html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>This is p</p>
</body>
</html>

هنا سننشيء ملف يمكنك تسميته بما تريد نحن قمنا بتسمية الملف style.css بصيغة css ونكتب فيه أكواد اللغة لتنسيق الفقرة النصية و في وسم link داخل سمة href نحدد مسار الملف بالشكل الصحيح.
بالنسبة لهذه الطريق حيث نقوم بإنشاء ملف خارجي هي الطريقة المحببة أكثر بحيث نفصل التصميم عن الهيكل ويكون مشروعنا منطم بالنسبة لطريقة Inline غير محببة أكثر لهذا دائما شغل التنسيق أتركه في ملف منفصل لوحده وإستدعه في ملف الهيكل html.

CSS


style.css
p {
    color: red;
    font-size: 16px;
}

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