link css - Nouvil

كيفية اضافة تنسيق css

يمكن إضافة CSS إلى صفحة HTML بعدة طرق، وهي كالتالي:

1- استخدام عنصر style داخل العنصر head في الصفحة Internalcss:

يتم وضع كود CSS داخل عنصر style في عنصر head في صفحة HTML. يتم كتابة الكود بين علامتي style و /style، والتي تكون داخل عنصر head. على سبيل المثال:

<!DOCTYPE html>
<html>
<head>
  <title>Nouvil</title>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

في هذا المثال، تم إضافة CSS لتغيير لون عنصر h1 إلى اللون الأزرق.

2- استخدام خاصية style داخل العنصرالمطلوب تنسيقه inline css :

يمكن أيضًا وضع عنصر style داخل عنصر body. يتم كتابة الكود بين علامتي style و /style، والتي تكون داخل عنصر body. على سبيل المثال:

<!DOCTYPE html>
<html>
<head>
  <title>Nouvil</title>
</head>
<body>
  <h1 style="color: blue;">Hello World!</h1>
</body>
</html>

في هذا المثال، تم إضافة CSS باستخدام عنصر style داخل عنصر h1.

3- استخدام ملف css خارجي External CSS :

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

في الصفحة HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Nouvil</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

في ملف CSS الخارجي (style.css):

h1 {
  color: blue;
}

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

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

الملخص

External CSS: يتم تعريف الأنماط في ملف CSS مستقل ويتم ربطه بصفحة HTML باستخدام عنصر link. هذا يسمح بإعادة استخدام الأنماط عبر صفحات HTML متعددة.
Internal CSS: يتم تعريف الأنماط داخل العنصر head في صفحة HTML باستخدام عنصر style. هذا يسمح بتعريف الأنماط الخاصة بصفحة HTML معينة.
Inline CSS: يتم تعريف الأنماط داخل العنصر HTML المراد تنسيقه باستخدام الخاصية style. هذا يسمح بتعريف الأنماط الخاصة بعنصر HTML محدد، ولكنه يعتبر الأقل فعالية من حيث إعادة الاستخدام وصيانة الصفحة.

عند استخدام External CSS، يتم كتابة التعريفات في ملف CSS مستقل، وهذا يجعل الأنماط متاحة لجميع الصفحات التي تستخدم نفس الملف CSS. وفي Internal CSS، يتم تعريف التعريفات داخل الصفحة HTML نفسها، وهذا يجعل الأنماط متاحة فقط لصفحة HTML المعينة. وفي Inline CSS، يتم تعريف التعريفات داخل العنصر HTML المراد تنسيقه، وهذا يجعل الأنماط متاحة فقط لذلك العنصر HTML المحدد.

يجب الانتباه إلى أن External CSS هو الأكثر فعالية من حيث إدارة التصميم وصيانته، ولكنه يمكن أن يؤخذ وقتاً أطول للتحميل، خاصة إذا كان الملف CSS كبيراً. أما Inline CSS فهو الأقل فعالية، ولكنه يمكن استخدامه لتنسيق عناصر HTML فريدة من نوعها في صفحة HTML، وذلك لأنه يمكن تحديد الأنماط الخاصة بها بدقة.LikeDislike

السابق التالي