English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
ملف CSS هو ملف نصي بسيط يتم حفظه بامتداد .css.
في هذا الدرس، ستتعلم كيفية إضافة أنواع النمط وخصائص التشكيل إلى صفحات الويب بسهولة باستخدام CSS. ولكن قبل ذلك، تأكد من أن لديك بعض المعرفة حول استخدام HTML.
إذا كنت قد بدأت للتو في مجال تطوير الويب، يرجىمن هنا بدء التعلم»
لا تفوت، دعونا نبدأ باستخدام جدول النمط المتسلسل (CSS).
طرق إدراج CSS في مستند HTML
النمط المدمج -باستخدامstyleفي العلامة المبدئية لـ HTML.
النمط المدمج -باستخدام<style>عنصر رأس المستند.
جدول الصور الخارجي -باستخدام<link>العنصر، يشير إلى ملف CSS الخارجي.
في هذا الدرس، سنقوم بشرح طريقة إدراج CSS الثلاثةة طرقًا واحدة تلو الأخرى.
ملاحظة:لديه أولوية النمط المدمج أعلى، بينما لديه أولوية النمط الخارجي أقل. هذا يعني، إذا كان فيالمدمجالنمطجدول الصور الخارجيفيها يتم تحديد النمط للعنصرالمدمجستغطي القواعد النمطية في النمط المدمج قواعد النمط الخارجي.
استخدامًاً للنمط المدمج لتطبيق قاعدة النمط الفريدة على العنصر عن طريق وضع قواعد CSS مباشرة في العلامة المبدئية. يمكن استخدامstyleالخصائص تضيفها إلى العنصر.
هذاstyleالخصائص تشمل مجموعة من خصائص CSS وقيمها. كل"property: value"باستخدامًاً للفصل بينهما;باستخدامًاً للفصل، مثل كتابة النمط المدمج أو النمط الخارجي. ولكن يجب أن يكون في سطر واحد فقط، دون وجود مسافة بعد النقطة المثلثة؛ كما يلي:
<h1 style="color:red; font-size:30px;">This is a heading</h1> <p style="color:green; font-size:22px;">هذا فقرة.</p> <div style="color:blue; font-size:14px;">هذا نص محتوى.</div>اختبار ل‹/›
استخدام النمط المدمج يعتبر غير جيد. لأن القواعد النمطية يتم إدراجها مباشرة داخل العلامات HTML، مما يجعل العرض مختلطًا مع محتوى الوثيقة. مما يجعل الكود صعب الصيانة ويقوض استخدام CSS.
ملاحظة:لإعداد النمط بشكل مباشرالعناصر المزيفةوالصفات المزيفةقد أصبح من المستحيل استخدام النمط. لذا، يجب تجنب استخدام خصائص النمط في الكود. استخدمجدول الصور الخارجيهو الطريقة المفضلة لإضافة النمط إلى ملف HTML.
النمط المدمج يؤثر فقط على الملف الذي تم دمجه فيه.
النمط المدمج<head>استخدام جدول الصور المدمج في<style>تعريف العناصر. يمكنك<style>تعريف عدد غير محدود من العناصر في ملف HTML، ولكن يجب أن تكون موجودة في<head>و</head>بين علامات. دعونا نرى مثالًا:
<!DOCTYPE html><html lang="en"><head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style></head><body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p></body></html>اختبار ل‹/›نصيحة:والعلاماتtypeيحدد لغة الجدول (أي) هذا العنصر هو مجرد تقديم معلومات. لأن CSS هو لغة جدول الصور القياسية في HTML5 ولغة جدول الصور الافتراضية، يمكنك تجاهل هذا الإعداد.<style><link>type="text/css"
عند تطبيق النمط على العديد من صفحات الموقع، يعتبر جدول الصور الخارجي الخيار المثالي.
جدول الصور الخارجي يحفظ جميع قواعد النمط في مستند منفصل، يمكنك ربطه من أي ملف HTML على الموقع. جدول الصور الخارجي هو أكثر مرونة، لأن بوجود جدول الصور الخارجي، يمكنك تغيير مظهر الموقع بأكمله عن طريق تعديل ملف واحد فقط.
يمكنك إضافة جدول الصور الخارجي بطرقين- ربطواستيراد。
قبل ربط الروابط، يجب أن نصنع جدولاً للصور الخارجية. دعونا نفتح محرر الكود المفضل لديك ونخلق ملفًا جديدًا. الآن، في هذا الملف، اكتب الكود CSS التالي وأحفظه باسم "style.css".
body {
background: lightyellow;
font: 18px Arial, sans-serif;}h1 {
color: orange;}يمكنك استخدام<link>العلامة تربط جدول الصور الخارجي بملف HTML. هذا<link>العلامة<head>جزء، يمكنك رؤيته في المثال التالي:
<!DOCTYPE html><html lang="en"><head> <title>My HTML Document</title> <link rel="stylesheet" href="css/style.css"></head><body> <h1>This is a heading</h1> <p>This is a paragraph of text.</p></body></html>اختبار ل‹/›
نصيحة:في هذه الطرق الثلاث، يُعتبر استخدام جدول الأنماط الخارجي أفضل طريقة لتحديد الأنماط وتطبيقها على وثيقة HTML. من جدول الأنماط الخارجي، يمكنك رؤية أن ملفات HTML المتأثرة تتطلب أقل تغييرات في العلامات.
هذا@importقاعدة@importهذا التعليمات يُشير إلى أن المتصفح يحمّل جدول الأنماط الخارجي ويستخدم أنماطه.
يمكنك استخدامها بطرقين. الأسهل هو في عنوان الوثيقة. ملاحظة، قد تحتوي قواعد CSS الأخرى على<style>في العنصر. هذا مثال:
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>اختبار ل‹/›بالنفس الطريقة، يمكنك استخدام@importاستيراد جدول الأنماط في جدول أنماط آخر.
@import url("css/layout.css");
@import url("css/color.css");body {
color: blue;
font-size: 14px;}اختبار ل‹/›ملاحظة:كل@importيجب أن تظهر جميع القواعد في بداية جدول الأنماط. ستغطي أي قواعد نمط تعريفها جدول الأنماط المُستورد نفسها. ولكن، بسبب مشاكل الأداء، لا يُنصح باستيراد جدول الأنماط في جدول أنماط آخر.