كيفية إضافة CSS

عندما يقرأ المتصفح جدول التشكيل، سيقوم بتنسيق مستند HTML بناءً على معلومات الجدول:

طرق استخدام CSS الثلاثة

هناك ثلاث طرق لاستخدام جدول التشكيل:

  • CSS خارجي
  • نمط CSS داخلي
  • نمط CSS داخلي

CSS خارجي

من خلال استخدام جدول التشكيل الخارجي، يمكنك تغيير مظهر الموقع بأكمله عن طريق تعديل ملف واحد فقط!

كل صفحة HTML يجب أن تحتوي على إشارة إلى ملف جدول التشكيل الخارجي داخل عنصر <link> في جزء <head>:

مثال

النمط الخارجي يتم تعريفه في عنصر <link> في جزء <head> من صفحة HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>هذا عنوان.</h1>
<p>هذه فقرة.</p>
</body>
</html>

تجربة شخصية

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

يجب ألا يحتوي ملف .css الخارجي على أي علامات HTML.

"mystyle.css" هو كالتالي:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

ملاحظة:لا تقم بإضافة مسافات بين قيمة الخاصية والوحدة (مثل margin-left: 20 px;) الكتابة الصحيحة هي:margin-left: 20px;

نمط CSS داخلي

إذا كان لدي صفحة HTML نمطها الفريد، يمكن استخدام جدول الأنماط الداخلي.

يتم تعريف النمط الداخلي في عنصر <style> الموجود في جزء <head>:

مثال

يتم تعريف النمط الداخلي في عنصر <style> الموجود في جزء <head> من صفحة HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>هذا عنوان.</h1>
<p>هذه فقرة.</p>
</body>
</html>

تجربة شخصية

نمط CSS داخلي

يمكن استخدام النمط المدمج (أي النمط المدمج) لتطبيق نمط فريد على عنصر واحد.

لإضافة النمط المدمج، قم بإضافة خاصية "style" إلى العنصر المحدد. يمكن أن تحتوي خاصية "style" على أي خاصية CSS.

مثال

يتم تعريف النمط المدمج في خاصية "style" المرتبطة بالعنصر المحدد:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">هذا عنوان.</h1>
<p style="color:red;">هذا فقرة.</p>
</body>
</html>

تجربة شخصية

نصيحة:النمط المدمج فقد العديد من مزايا جدول الأنماط (من خلال دمج المحتوى مع الشكل). استخدم هذا الأسلوب بحذر.

جدول أنماط متعددة

إذا تم تعريف بعض الخاصيات في أنماط مختلفة للنوع نفسه (العنصر)، فإن القيمة المستخدمة ستكون القيمة من آخر جدول أنماط تم قراءته.

لنفترض أن هناكجدول الأنماط الخارجيتم تعيين النمط التالي لـ <h1>:

h1 {
  color: navy;
}

ثم، لنفترض أن هناكجدول الأنماط الداخليتم أيضًا تعيين النمط التالي لـ <h1>:

h1 {
  color: orange;    
}

مثال

إذا كان النمط الداخلي يرتبط بجدول الأنماط الخارجيالحقإذا تم تعريفه، فإن عنصر <h1> سيكون برتقاليًا:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

تجربة شخصية

مثال

لكن، إذا كان هناك رابط إلى جدول الأنماط الخارجيالسابقإذا تم تعريف النمط الداخلي، فإن عنصر <h1> سيكون أزرق داكن:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

تجربة شخصية

ترتيب التدرج

عند تخصيص عدة نماذج لـ HTML element، أي نمط سيتم استخدامه؟

ستتطبق جميع النماذج في الصفحة وفقًا للقواعد التالية لتكون جدول نمط افتراضي جديد، حيث يكون الأولوية الأعلى في الجدول الأول:

  1. النمط المدمج (في عنصر HTML)
  2. نماذج خارجية وداخلية (في جزء head)
  3. النمط الافتراضي للمتصفح

لذلك، تكون النمطات المدمجة لها أولوية عالية وتغطي النمطات الخارجية والداخلية والنمط الافتراضي للمتصفح.

تجربة شخصية