HTML CSS

باستخدام HTML4.0، يمكن نقل جميع كود التشكيل خارج ملف HTML، ثم نقلها إلى جدول صياغة مستقل.

مثال

النمط في HTML
هذا المثال يوضح كيفية استخدام معلومات النمط المضافة إلى جزء <head> لتشكيل تنسيق HTML.
الرابط بدون خط أسفل
هذا المثال يوضح كيفية استخدام خاصية النمط لإنشاء رابط بدون خط أسفل.
ربط جدول الصور الخارجي
هذا المثال يوضح كيفية ربط علامة <link> بجدول الصور الخارجي.

كيفية استخدام النمط

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

جدول الصور الخارجي

عندما يكون من الضروري تطبيق النمط على العديد من الصفحات، فإن جدول الصور الخارجي سيكون الخيار المثالي. باستخدام جدول الصور الخارجي، يمكنك تغيير مظهر الموقع الكامل من خلال تعديل ملف واحد.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

جدول النمط الداخلي

عندما يحتاج ملف واحد إلى نمط خاص، يمكن استخدام جدول النمط الداخلي. يمكنك تعريف جدول النمط الداخلي من خلال استخدام علامة <style> في جزء الرأس.

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

النمط المدمج

عندما يحتاج العنصر الخاص إلى نمط خاص، يمكن استخدام النمط المدمج. يمكن استخدام نمط المدمج عن طريق استخدام خصائص النمط في العلامة ذات الصلة. يمكن أن تحتوي خصائص النمط على أي خصائص CSS. يوضح المثال التالي كيفية تغيير لون الفقرة وال边际 اليسرى.

<p style="color: red; margin-left: 20px">
هذا فقرة
</p>

زيارة دروس CSS، لتعلم المزيد عن النمط.

العلامة الوصف
<style> تحديد التعريف للنمط.
<link> تحديد إشارة مرجعية للموارد.
<div> تحديد فقرة أو منطقة داخلية في المستند (حجمي).
<span> تحديد قطعة صغيرة أو منطقة داخلية في المستند.
<font> تحديد الخط وال حجم الخط وال لون الخط. غير مستحب استخدامه. استخدم النمط.
<basefont> تحديد الخط الأساسي. غير مستحب استخدامه. استخدم النمط.
<center> توضيح النص أفقيًا. غير مستحب استخدامه. استخدم النمط.