ربط ملفات css

في مشاريع الويب الكبيرة ، قد نحتاج إلى استخدام الكثير من أكواد CSS التي تؤدي وظيفة تصميم لصفحة واحدة أو مجموعة صفحات.

من خلال الوصول المباشر من أي صفحة إلى عنوان المعرف الفريد أو اسم الفئة في HTML ، كانت الحلول جيدة في ربط ملفات css منفصلة قادرة على الوصول إلى جميع عناصر وعلامات html.

 

تعريف

<head>
    <link rel='stylesheet' href='file.css' />
</head>

حيث يتم تضمين ملف CSS في رأس صفحة HTML ليتم قراءتها من ملف آخر ويجب أن يكون ملف css في نفس المجلد مثل ملف HTML.

 

فوائد ربط ملفات css

لدينا العديد من الفوائد التي سنكتسبها عند وضع CSS في ملف خاص وهي:

  • تنظيم وتقليل الكود من صفحتنا الرئيسية.
  • الوصول بسهولة إلى ملفات CSS في المشاريع الكبيرة.

 

مثال

من فضلك ، لفهم ملف الارتباط css جيدًا ، انسخ الأكواد التالية في الملف النصي ولا تنس تغيير امتداده إلى .css وتسميته بالملف حتى نتمكن من ربطه لاحقًا.

div
{
    width:200px;
    height:200px;
    background-color:#DDD;

    margin:20px auto;	/*This instruction for center margins*/



    /*I will use webkit tools to support	other than browser*/

    border-radius:50px;
}

من فضلك ، لفهم ملف ارتباط css جيدًا ، انسخ الأكواد التالية في ملف نصي جديد ولا تنس تغيير امتداده إلى .html ثم تشغيله في متصفحك.

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Link CSS File Source</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            This is normal Div
        </div>
    </body>

</html>

 

 

 

 

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *