البداية مع CSS

إضافة أنماط (Styles) إلى عناصر HTML

يمكن إرفاق معلومات النمط كمستند منفصل أو مضمنة في صفحة HTML نفسها. هنالك ثلاث طرق لتطبيق الأنماط (styles) على صفحة HTML.

  • أنماط مضمنة داخل العنصر (Inline styles) - باستخدام السمة style في وسم البدء (الفتح).
  • أوراق الأنماط المضمنة داخل صفحة الويب (Embedded style sheets) - باستخدام العنصر <style> في قسم <head> من صفحة الويب.
  • أوراق الأنماط الخارجية (External style sheets) - باستخدام العنصر <link> لربط صفحة الويب بملفات CSSخارجية.
ملاحظة:

الأنماط المضمنة داخل العنصر (Inline styles) لها أعلى أولوية ، وأوراق الأنماط الخارجية (External style sheet) لها أدنى أولوية. هذا يعني أنك إذا حددت أنماطًا للفقرات الخاصة بك في كل من الأنماط المضمنة و الأوراق الخارجية ، فإن قواعد النمط المتضاربة في ورقة الأنماط المضمنة ستلغي ورقة الأنماط الخارجية.

أنماط مضمنة داخل العنصر (Inline styles)

تُستخدم الأنماط المضمنة داخل العنصر لتطبيق قواعد أنماط فريدة على عنصر معين ، من خلال وضع قواعد CSS مباشرةً في وسم البداية. يتم اضافة النمط إلى العنصر باستخدام سمة style.
تتضمن سمة style سلسلة من خصائص CSS (property) والقيمة (value) على شكل ازواج. كل زوج property: value مفصول بفاصلة منقوطة (;) ، تمامًا كما تكتب في الأنماط المضمنة أو الورقة الخارجية. ولكن يجب أن يكون كل شيء في سطر واحد ، أي لا يوجد فاصل أسطر بعد الفاصلة المنقوطة.
.
يوضح المثال التالي كيفية تحديد لون النص وحجم الخط:

مثال
تشغيل
  1. <h1 style="color:red; font-size:30px;" >This is a heading.</h1>
  2. <p style="color:green; font-size:18px;" >This is a paragraph.</p>
  3. <div style="color:green; font-size:18px;" >This is some text.</div>

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

أوراق الأنماط المضمنة داخل صفحة الويب(Embedded style sheets)

تؤثر أوراق الأنماط المضمنة (Embedded) أو الداخلية (internal) فقط على صفحة الويب التي يتم تضمينها فيها.
يتم تعريف أوراق الأنماط المضمنة في قسم <head> من صفحة HTML باستخدام الوسم <style>. يمكنك تحديد أي عدد من عناصر <style> داخل قسم <head>.
يوضح المثال التالي كيف يتم تضمين قواعد الأنماط داخل صفحة الويب.

مثال
تشغيل
  1. <head>
  2. <style>
  3. body { background-color: YellowGreen; }
  4. h1 { color: blue; }
  5. p { color: red; }
  6. </style>
  7. </head>
نصيحة:

تحدد السمة type الخاصة بعلامة <style> و <link> على سبيل المثال type="text/css" لغة ورقة الأنماط. هذه السمة ببساطة سمة إعلانية لإخبار المتصفح نوع العنصر <style> . يمكنك حذف هذه السمة لأن CSS هي لغة ورقة الأنماط القياسية والافتراضية في HTML5.

أوراق الأنماط الخارجية (External style sheets)

تُعد ورقة الأنماط الخارجية (external style sheet) مثالية عند تطبيق النمط على العديد من الصفحات. تحتوي ورقة الأنماط الخارجية على جميع قواعد الأنماط في مستند منفصل يمكنك ربطه من أي صفحة HTML على موقعك. أوراق الأنماط الخارجية هي الأكثر مرونة لأنه مع ورقة الأنماط الخارجية ، يمكنك تغيير مظهر موقع ويب بأكمله عن طريق تحديث ملف واحد فقط.
يمكنك إرفاق أوراق أنماط خارجية بطريقتين - الربط (linking) والاستيراد (importing)

ربط أوراق الأنماط الخارجية

قبل الربط ، نحتاج إلى إنشاء ورقة أنماط أولاً. دعونا نفتح محرر النصوص وننشأ ملف جديد.
الآن اكتب كود CSS التالي داخل هذا الملف واحفظه كـ "style.css".

مثال
  1. body {
  2. background-color: lightyellow;
  3. font: 18px Arial, sans-serif;
  4. }
  5. h1 {
  6. color: orange;
  7. }

يمكن ربط ورقة أنماط خارجية بصفحة HTML باستخدام الوسم <link>.
يتم وضع الوسم <link> داخل قسم <head> ، كما هو موضح هنا:

مثال
تشغيل
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>My HTML Document</title>
  5. <link rel="stylesheet" href="css/style.css">
  6. </head>
  7. <body>
  8. <h1>This is a heading</h1>
  9. <p>This is a paragraph of text.</p>
  10. </body>
  11. </html>
نصيحة:

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

استيراد أوراق الأنماط الخارجية

تعد قاعدة @import طريقة أخرى لتحميل ورقة أنماط خارجية. يوجه تعبير @import المتصفح إلى تحميل ورقة أنماط خارجية واستخدام أنماطها.
إن أبسط طريقة لاستخدامه هي داخل عنصر <style> في قسم <head>.
لاحظ في المثال التالي قد تم تضمين قواعد CSS أخرى في عنصر <style>.

مثال
تشغيل
  1. <style>
  2. @import url("css/style.css");
  3. p {
  4. color:blue;
  5. font-size:16px;
  6. }
  7. </style>

ايضا، يمكننا استخدام تعبير @import اكثر من مرة لاستيراد اكثر من ورقة أنماط لصفحة HTML واحدة. لاحظ المثال التالي:

مثال
تشغيل
  1. <style>
  2. @import url("css/style.css");
  3. @import url("css/color.css");
  4. body {
  5. color:blue;
  6. font-size:14px;
  7. }
  8. </style>
ملاحظة:

يجب أن توضع جميع قواعد @import في بداية صفحة الأنماط (style sheet).
أي قاعدة نمط معرفة في ورقة الأنماط نفسها تلغي القاعدة المتعارضة في أوراق الأنماط المستوردة.
قد تتسبب قاعدة @import في حدوث مشكلات في الأداء ، يجب عليك عمومًا تجنب استيراد أوراق الأنماط.

« التالي السابق »