الأنماط Styles

تنسيق العناصر Styling Elements

لغة HTML محدودة للغاية عندما يتعلق الأمر بتنسيق وجمالية صفحة الويب . فقد تم تصميمها في الأصل كوسيلة بسيطة لعرض المعلومات.
CSS (Cascading Style Sheets)او ما تعرف ب (أوراق الأنماط المتتالية) تم اطلاقها في ديسمبر 1996 من قبل اتحاد شبكة الويب العالمية (W3C) وذلك لعزل تنسيق عناصر HTML عن النص المكتوب.
مع 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>

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

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

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

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

مثال
تشغيل
  1. <head>
  2. <link rel="stylesheet" href="css/style.css">
  3. </head>

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

تعد قاعدة @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 في حدوث مشكلات في الأداء ، يجب عليك عمومًا تجنب استيراد أوراق الأنماط.

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