خاصية <link> في لغة HTML تُستخدم لربط ملفات خارجية بصفحة الويب، وأكثر استخداماتها شيوعًا هو ربط ملفات CSS
 (Cascading Style Sheets) لتطبيق التنسيقات على عناصر HTML.

إليك شرح مُفصّل عن خاصية <link> وكيفية استخدامها لربط ملفات CSS:

وظيفة الوسم <link>:

الوسم <link> لا يُظهر أي محتوى مرئي على صفحة الويب نفسها، بل يُستخدم لتحديد علاقات بين المستند الحالي ومورد خارجي. في سياق CSS، يُستخدم لربط ملف CSS خارجي بصفحة HTML، مما يسمح بفصل هيكل الصفحة (HTML) عن تصميمها (CSS)، وهذا يُحقق فوائد عديدة مثل:

  • سهولة الصيانة: يُمكن تعديل تصميم الموقع بأكمله بتعديل ملف CSS واحد فقط.
  • إعادة الاستخدام: يُمكن استخدام نفس ملف CSS لتنسيق عدة صفحات ويب.
  • تحسين الأداء: يُمكن للمتصفح تحميل ملف CSS بشكل مُنفصل وتخزينه مؤقتًا، مما يُسرّع تحميل الصفحات اللاحقة.

مكان وضع الوسم <link>:

يجب وضع الوسم <link> داخل القسم <head> في ملف HTML.

شكل الوسم <link>:

HTML
<link rel="stylesheet" href="style.css">

شرح خصائص الوسم <link> المستخدمة مع CSS:

  • rel (Relationship): هذه الخاصية ضرورية، وتُحدد العلاقة بين الملف الخارجي والمستند الحالي. عند ربط ملف CSS، يجب أن تكون قيمة هذه الخاصية هي "stylesheet".
  • href (Hypertext Reference): تُحدد مسار ملف CSS الخارجي. يُمكن أن يكون المسار:
    • مطلقًا (Absolute): عنوان URL كامل، مثل https://www.example.com/style.css.
    • نسبيًا (Relative): مسار بالنسبة لملف HTML الحالي، مثل style.css (إذا كان الملف في نفس المجلد) أو css/style.css (إذا كان الملف في مجلد فرعي اسمه css).
  • type (Media Type) (اختياري): يُحدد نوع المورد المرتبط. مع CSS، القيمة الصحيحة هي "text/css". ومع ذلك، في HTML5، لم تعد هذه الخاصية مطلوبة، لأن المتصفحات تفترض أنها CSS إذا كانت rel="stylesheet".
  • media (Media) (اختياري): يُحدد الوسائط التي سيتم تطبيق ورقة الأنماط عليها. على سبيل المثال، media="print" لتطبيق الأنماط فقط عند طباعة الصفحة، أو media="screen" لتطبيقها على الشاشات (وهو الافتراضي).

مثال كامل:

لنفترض أن لديك ملف HTML باسم index.html وملف CSS باسم style.css في نفس المجلد. محتوى الملف style.css كالتالي:

CSS
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  text-align: center;
}

يجب أن يكون محتوى الملف index.html كالتالي لربط ملف CSS:

HTML
<!DOCTYPE html>
<html>
<head>
  <title>مثال على ربط CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>هذا مثال على ربط ملف CSS</h1>
  <p>هذا النص سيظهر بتنسيقات من ملف CSS.</p>
</body>
</html>

بهذا الشكل، سيتم تطبيق التنسيقات الموجودة في ملف style.css على عناصر HTML في ملف index.html.

باختصار، الوسم <link> مع الخاصية rel="stylesheet" هو الطريقة الأساسية لربط ملفات CSS خارجية بصفحات HTML، مما يُساهم في تنظيم الكود وتحسين أداء الموقع.