كيف ربط css مع html

سوف نقوم برطها عن طريق ملف خارجي

هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS، خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة.

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

مثلاً، لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم

كيف ربط css مع html Figure002

المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML:

الكود:: <link rel="stylesheet" type="text/css" href="style/style.css" />

لاحظ كيف أن مسار الملف حددناه باستخدام خاصية href.

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

الكود:: <html>
   <head>
   <title>My document</title>
   <link rel="stylesheet" type="text/css" href="style/style.css" />
   </head>
   <body>
   ...

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

كيف ربط css مع html Figure003.ar

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

لنتدرب على ما تعلمناه حتى الآن.
جرب بنفسك

قم بتشغيل برنامج المفكرة (Notepad) أو أي محرر نصي، وقم بإنشاء ملفين، أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات:
default.htm

الكود:: <html>
   <head>
   <title>My document</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
   <h1>My first stylesheet</h1>
   </body>
</html>

style.css

الكود:: body {
background-color: #FF0000;
}

الآن قم بوضع الملفين في نفس المجلد، تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة لكل ملف.

قم بفتح ملف default.htm في متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول!

» html لها رأس و جسم
» كود وضع فلاش في صفحة html
» كود HTML لتقسيم الصفحة
» كود html لتقسيم الصفحات table
» كود HTML وضع رابط MP3 +مواقع رفع mp3 برآبط مبآش