CSS - programming studio AR

هل أنا جاهز لتعلم لغة CSS؟

قبل البدء بهذه الدورة يجب أن تكون متقن للغة HTML لأن هذه اللغة تستخدم معها بشكل أساسي.

إن لم يسبق لك أن تعلمت لغة HTML فلا تقلق أبداً لأننا أعددنا مرجع شامل لها.

ما هي لغة CSS

في البداية كلمة CSS هي اختصار لجملة Cascading Style Sheet و هي لغة تستخدم في تصميم صفحات الويب فمن خلالها يمكنك تغيير ألوان العناصر، تحديد مواقعها و أحجامها، إضافة مؤثرات لها، جعل صفحات الويب متجاوبة مع مختلف أحجام الشاشات لكي تظهر بشكل ملائم للمستخدم سواء كان يفتح الصفحة بواسطة هاتف، تابلت أو حاسوب، بالإضافة إلى الكثير من الأمور الرائعة التي ستتعلمها خطوة خطوة في هذه الدورة.

مثال

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

الصفحة بدون CSS

الصفحة نفسها مع CSS

معلومة تقنية

بشكل عام، CSS تعتبر لغة تصميم ( Style Language ) و ليس لغة برمجة ( Programming Language ) فهي تستخدم في تصميم صفحات الويب التي يتم بناؤها بواسطة HTML أو الصفحات التي يتم بناؤها بواسطة XML.

إصدارات لغة CSS

لغة CSS يتم تطويرها باستمرارا بدءاً من ظهورها أول مرة عام 1996 و حتى يومنا هذا. المجموعة المسؤولة عن تطوير هذه اللغة تدعى World Wide Web Consortium و في العادة تختصر بكلمة W3C.

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

الإصدار الأول

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

الإصدار الثاني

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

الإصدار الثالث

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

أي إصدار يجب أن تتعلم؟

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

فوائد لغة CSS

سنذكر فوائدها تباعاً مع إيضاح معنى كل نقطة.

1- توفير الوقت

يمكنك وضع كود التصميم الخاص بك في ملف CSS و تضمينه نفسه في أي صفحة HTML تريد استخدامه فيها.

2- سرعة التحميل

حين تضع كود التصميم في ملف CSS و تضمّنه في صفحات الموقع فإن المتصفح في العادة يقوم بتحميل هذا الملف مرة واحدة فقط و يخزّن عنده. بعدها إن تم الدخول لأي صفحة مربوطة بهذا الملف فإن المتصفح يستخدم النسخة التي قام بتخزينها سابقاً بدل تحميل الملف في كل مرة.

3- سهولة التعديل

بمجرد التعديل على كود التصميم الموضوع في ملف CSS فإن كل الصفحات المربوطة به سيتم تعديل تصميمها.

4- خصائص متقدمة

بعض الوسوم في لغة HTML تحتوي على خصائص يمكن من خلالها التعديل على تصميمها و لكن هذه الخصائص تعتبر لا شيء مقارنة بالخصائص التي توفرها CSS و التي يمكن تطبيقها على جميع العناصر.

5- بناء صفحات متجاوبة

بواسطة لغة CSS يمكنك جعل تصميم الشاشة متجاوب ( Responsive ) مع مختلف أحجام الشاشات التي يتم من خلالها مشاهدة الصفحات لتظهر بشكل مناسب نسبةً لحجم الصفحة المفتوحة عليها.

6- تخصيص الطباعة على ورق

لغة CSS توفر خصائص سهلة الإستخدام يمكنك من خلالها تحديد الشكل الذي ستظهر فيه الصفحة في حال أراد المستخدم طباعتها على ورقة.

7- معايير الويب العالمية

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

لمن تم إعداد هذا المرجع؟

تم إعداد هذا المرجع ليتلاءم مع جميع الأشخاص الذين يريدون التعلم.

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

في الدرس التالي سنرشدك لتحميل البرامج التي يمكنك استخدامها لكتابة الكود و التي بإمكانك إستعمالها نفسها في مشاريعك الخاصة في المستقبل.

الشكل العام لكود CSS

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

الآن إذا كانت الصفحة تحتوي على وسم

<h1> يمكنك إضافة خصائص CSS له كالتالي.

h1 {
color: blue;
text-align: center;
}

h1 : هو إسم الوسم الذي سيتم إضافة خصائص CSS له و يسمى Selector.

color : يسمى Property و هو الخاصية المراد تعديلها للشيء.

blue : هو قيمة الخاصيّة و يسمى Value.

color: blue; : الخاصيّة و قيمتها مع بعض يقال لهما Declaration.

ملاحظة

يجب وضع فاصلة منقوطة

; بعد كل خاصيّة يتم تعريفها.
آخر خاصيّة يمكنك عدم وضع فاصلة منقوطة لها و لكننا ننصحك بأن تضعها دائماً لأن هذا المتعارف عليه.

أين تكتب كود CSS

يوجد ثلاث أساليب يمكنك إتباعها حتى تضيف كود CSS في صفحات الويب سنذكرها لك تباعاً.

1- أسلوب Inline CSS

أي وسم تضيفه في الصفحة يمكنك إضافة الخاصيّة

style له و تمرير كود الـ CSS لها كقيمة بشكل مباشر.

مثال

<h1 style="color:blue; text-align:center;">Hello World!</h1> جرب الكود

2- أسلوب Internal CSS

يمكنك إضافة الوسم

مثال

3- أسلوب External CSS

يمكنك وضع كود الـCSS بداخل ملف إمتداده

.css و من ثم تضمينه في الصفحة من بواسطة الوسم <link> و الذي يجب وضعه في الوسم <head>.

مثال

style.css h1 { color: blue; text-align: center;} index.html <!DOCTYPE html><html> <head>  <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello World!</h1> </body></html> جرب الكود

أفضل طريقة لكتابة كود CSS

بشكل عام، أي موقع تبنيه عليك تخصيص ملف إمتداده

.css لتضع فيه كل خصائص CSS التي ستستخدمها في صفحات الموقع و من ثم تضمن هذا الملف بها بواسطة الوسم <link>.

إضافة كود CSS بشكل مباشر لوسوم HTML من خلال الخاصيّة

style أمر يمكنك فعله إن كنت بحاجة للتعديل على تصميم وسم محدد استخدمته بشكل خاص في أحد الصفحات.

إضافة كود CSS في الصفحة بواسطة الوسم

مفهوم تحديد العناصر

تحديد العناصر ( Select Elements ) يقصد بها الطرق التي يمكنك من خلالها تحديد الوسوم التي سيتم إضافة خصائص CSS لها.

في هذا الدرس ستتعرف على الطرق الأساسية و البسيطة التي يمكنك من خلالها تحديد العناصر التي سيتم التعديل على تصميمها.

معلومة

جميع الطرق التي ستمر معك في هذا الدرس تسمى محدِّدات بسيطة ( Simple Selectors ).

تحديد العنصر من خلال إسمه

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

في المثال التالي كل وسم

<p> موجود في الصفحة سيتم عرضه بلون أحمر و في الوسط.

مثال

p { color: red; text-align: center;} جرب الكود

تحديد العنصر بواسطة الخاصيّة class

جميع وسوم HTML يمكن إضافة الخاصيّة

class لها. هذه الخاصيّة ليس لها أي فائدة بالنسبة للغة HTML و لكن بالنسبة للغة CSS فهي مهمة جداً لأنه يمكنك بواسطة الوصول للوسوم من خلال أسماء الكلاسات التي تمررها لها كقيمة.

لتعريف كلاس في CSS ببساطة أكتب نقطة و يليها مباشرةً إسم الكلاس.
بعدها يمكنك تمرير إسم هذا الكلاس لأي وسم موجود في الصفحة من خلال وضع إسمه فقط (بدون النقطة) كقيمة للخاصيّة

class.

في المثال التالي تم إضافة الخصائص التي وضعناها في الكلاس

center لجميع الوسوم التي تملك نفس إسم الكلاس.
إذاً كل وسم يستخدم class="center" سيتم عرضه بلون أحمر و في الوسط.

مثال

.center { color: red; text-align: center;} جرب الكود

قواعد إختيار إسم class

يفضّل أن تكون جميع أحرفه صغيرة.
إذا كان إسمه يتألف من أكثر من كلمة يفضّل أن تضع شرطة
-
بين الكلمات.
ممنوع أن يبدأ الإسم برقم و لكن لا مانع إن وضعت رقم في وسطه أو في آخره.
أمثلة لأسماء مقبولة:
btn
-
btn-primary

تحديد العنصر بواسطة الخاصيّة id

جميع وسوم HTML يمكن إضافة الخاصيّة

id لها. عند إضافة هذه الخاصيّة في الوسم يجب إعطاءها قيمة موحّدة. أي قيمة لم يتم إعطاءها لأي وسم آخر موجود في الصفحة لأنه لا يجب وجود أكثر من وسم في الصفحة عندهم id بنفس الإسم.

لتعريف

id في CSS ببساطة أكتب مربع # و يليه مباشرةً الإسم الذي تريد إعطاؤه له. بعدها يمكنك تمرير إسمه لأي وسم موجود في الصفحة من خلال وضع الإسم فقط (بدون المربع) كقيمة للخاصيّة id.

في المثال التالي تم إضافة الخصائص التي وضعناها في

#demo للوسم الذي يملك id قيمته demo و بالتالي سيتم عرضه بلون أزرق و في الوسط.

مثال

#demo { color: blue; text-align: center;} جرب الكود

قواعد إختيار إسم id

يفضّل أن تكون جميع أحرفه صغيرة.
إذا كان إسمه يتألف من أكثر من كلمة يفضّل أن تكتب أول حرف من كل كلمة بشكل كبير.
ممنوع أن يبدأ إسمه برقم و لكن لا مانع إن وضعت رقم في وسطه أو في آخره.
أمثلة لأسماء مقبولة:
topMenu
-
menu

تحديد جميع عناصر الصفحة بواسطة *

في CSS يمكنك استخدام رمز النجمة

* لتحديد جميع عناصر الصفحة.
إذاً خصائص CSS التي تضيفها في هذا الرمز يتم تطبيقها على جميع الوسوم الموضوعة في الصفحة.

في المثال التالي تم إضافة الخصائص التي وضعناها لكل الوسوم الموجودة في الصفحة.

مثال

* { color: blue; text-align: center;} جرب الكود

تجميع الخصائص المشتركة

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

في المثال التالي قمنا بتحديد جميع وسوم

<span> و <b> الموجودة في الصفحة.

مثال

span, b { color: red;} جرب الكود

تحديد الوسم نفسه أكثر من مرة

في HTML يمكنك تمرير أكثر من كلاس لنفس الوسم و عندها سيتم تنفيذ جميع الخصائص الموجودة في هذه الكلاسات عليه.

في المثال التالي قمنا بإعطاء العنصر إثنين كلاس، الكلاس الأول إسمه

red و هو يجعل لون الخط أحمر و الثاني إسمه center و هو يجعل النص الموضوع فيه يظهر في الوسط.

مثال

.red { color: red;} .center { text-algin: center;} جرب الكود

تضارب أسماء الخصائص المستخدمة

ترتيب الخصائص في CSS يترتب عليه بشكل تلقائي تحديد أولوية التنفيذ. فإذا قمت بإعطاء خاصيّة للعنصر و من ثم قمت بإعطائه قيمة جديدة لنفس الخاصيّة فإنه سيتم إعطاؤه القيمة الجديدة.

في المثال التالي قمنا بإعطاء العنصر إثنين كلاس، الكلاس الأول إسمه

red و هو يجعل لون الخط أحمر و الثاني إسمه blue و هو يجعل لون الخط اللون أزرق.
لاحظ أنه سيتم تلوين الخط بالأزرق لأننا قمنا بتعريف الكلاس blue بعد الكلاس red.

مثال

.red { color: red;} .blue { color: blue;} جرب الكود

مفهوم التعليقات

التعليق ( Comment ) عبارة عن نص يوضع في الكود كملاحظة تساعدك في الشرح أو لتذكر سبب كتابة الكود في حال أردت مستقبلاً مراجعته و التعديل عليه.

إذاً التعليق لا يظهر في الصفحة أمام المستخدم بل يظهر فقط أمام من يطلع على الكود.

إضافة تعليق في CSS

التعليق في CSS يوضع بداخل

/* ... */ و يمكنك كتابته على سطر واحد أو على عدة أسطر.

في المثال التالي قمنا بوضع تعليق على كود CSS يـتألف من سطر واحد.

المثال الأول

/* أي فقرة موضوعة في الصفحة ستظهر بلون أحمر */p { color: red;} جرب الكود

في المثال التالي قمنا أيضاً بوضع تعليق على كود CSS يـتألف من سطر واحد.

المثال الثاني

p { color: red; /* هذه الخاصية تجعل لون النص أحمر */} جرب الكود

في المثال التالي قمنا أيضاً بوضع تعليق على كود CSS يـتألف من عدة أسطر.

المثال الثالث

/* أي فقرة موضوعة فيالصفحة ستظهر بلون أحمر */p { color: red;} جرب الكود

ملاحظة

إذا كان كود الـ CSS موضوع في ملف
.css
فيمكنك كتابة التعليقات فيه في أي مكان تريده.
إذا كان كود الـ CSS موضوع في صفحة HTML بداخل الوسم
<style>
فهنا يجب أن تكتب التعليق ضمن هذا الوسم و إلا سيتم عرض التعليق كنص عادي في الصفحة.

الفرق بين تعليقات HTML و تعليقات CSS

بدايةً فكرة التعليقات في كلا اللغتين هي نفسها و في الحالتين التعليقات تظهر أمام من يطلع على كود الصفحة و ليس أمام الشخص العادي.

الإختلاف بينهما هو فقط بالمكان الذي يمكنك فيه استخدام كل نوع.

تعليقات HTML نضعها بداخل الرمز

في أي مكان في الصفحة و لكن يجب عدم وضعها بداخل الوسم <style> لأن هذا الوسم مخصص لأن نضع فيه كود بلغة CSS و بالتالي فإنك إن وضعت فيه كود بلغة أخرى فإن المتصفح لن يفهم ما هي الأوامر الموضوعة بعده و بالتالي فإن كود التصميم لن يعمل.

في المثال التالي قمنا بوضع تعليق بلغة HTML و تعليق بلغة CSS في ذات الصفحة.

مثال

<style>p { color: red; /* css هنا يمكنك وضع التعليقات بأسلوب */}</style>

جرب الكود

طرق تحديد الألوان

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

أنت لست مضطر أبداً إلى حفظ أسماء الألوان أو درجاتها و هذا أساساً أمر مستحيل، فعلياً عند الحاجة لاختيار أي لون فإنك بالعادة تستخدم أدوات جاهزة تعطيك كود اللون الذي تريده.

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

أداة اختيار الألوان

مكونات الألوان

بشكل عام هناك ثلاث ألوان رئيسية هي الأحمر ( Red ) و الأخضر ( Green ) و الأزرق ( Blue ).
من هنا جاء إسم RGB الذي يعني أن اللون عبارة عن خليط من هذه الألوان.

الآن هناك 6 طرق يمكنك اتباعها لتحديد الألوان في CSS هي التالية:

كتابة إسم اللون ( Color Name ).
تحديد درجة اللون بأسلوب HEX.
تحديد درجة اللون بأسلوب RGB.
تحديد درجة اللون و شفافيته بأسلوب RGBA.
تحديد درجة اللون و التشبّع و الإضاءة بأسلوب HSL.
تحديد درجة اللون و التشبّع و الإضاءة و الشفافية بأسلوب HSLA .

الأشياء القابلة للتلوين

كل ما يظهر في صفحة الويب يمكن تلوينه حيث يمكنك تلوين النصوص، خلفية أي عنصر، بالإضافة إلى أنه يمكنك وضع حدود ملونة حول العنصر.

تلوين نص العنصر

فيما يلي قمنا بتلوين خطوط النصوص بألوان مختلفة.

نص لونه أزرق

نص لونه أحمر

نص لونه أخضر

تلوين خلفية العنصر

فيما يلي قمنا بتلوين خلفيات النصوص بألوان مختلفة.

نص لونه أبيض و خلفيته زرقاء

نص لونه أبيض و خلفيته حمراء

نص لونه أسود و خلفيته ذهبية

تلوين حدود العنصر

فيما يلي قمنا بتلوين حدود النصوص بألوان مختلفة.

نص حدوده زرقاء

نص حدوده حمراء

نص حدوده رمادية

ملاحظة

طرق تلوين الخلفيات و الحدود فيها خيارات كثيرة سنشرحها لك بالتفصيل في دروس لاحقة.
في هذا الدرس سنركّز بشكل خاص على طرق التلوين المتاحة في CSS و التي يمكنك اتباعها لتلوين أي شيء.

التلوين بأسلوب Color Names

هذا الأسلوب يكون بكتابة إسم اللون فقط مع العلم أن CSS فيها 140 لون جاهز يمكنك استخدامهم بواسطة أسمائهم.

فيما يلي بعض أسماء الألوان:

Red - Blue - Green - Yellow - Orange - Brown - Purple - Cyan - Crimson - Cadetblue - OrangeRed - Tomato - DodgerBlue - MediumSeaGreen - SlateBlue - Pink - Violet - Black

في المثال التالي قمنا بتلوين نصوص الفقرات بألوان مختلفة.

مثال

<p style="color:Tomato;">Tomato color</p><p style="color:DodgerBlue;">DodgerBlue color</p><p style="color:MediumSeaGreen;">MediumSeaGreen color</p>

سنحصل على النتيجة التالية عند التشغيل.

Tomato color DodgerBlue color MediumSeaGreen color جرب الكود

ملاحظة

أسماء الألوان يمكنك كتابتها بأحرف صغيرة أو أحرف كبيرة بدون أي مشكلة.
إذاً سواء كتبت

red أو Red أو RED فإنه لا يوجد أي مشكلة.

التلوين بأسلوب HEX

هذا الأسلوب يكون بوضع رمز المربع

# و يليه 3 أو 6 أرقام و أحرف تمثّل اللون الذي سيتم عرضه.

هنا الرقم الذي تمرره مسموح أن يكون بين

0-9 و الحرف الذي تمرره مسموح أن يكون بين A-F.

معلومة تقنية

إذا قمت بتمرير 3 أحرف، فهنا الحرف الأول يمثل درجة الأحمر و الحرف الثاني درجة الأخضر و الثالث درجة الأزرق.
إذا قمت بتمرير 6 أحرف، فهنا أول حرفين يمثلان درجة الأحمر و ثاني حرفين يمثلان درجة الأخضر و ثالث حرفين يمثلان درجة الأزرق.

بشكل عام إستخدام 6 أحرف يعطيك المزيد من درجات الألوان التي يمكنك الحصول عليها.

فيما يلي بعض أكواد الألوان المعروفة بأسلوب HEX.

HEX Code 3	HEX Code 6	Color
#000	#000000
#F00	#FF0000
#0F0	#00FF00
#00F	#0000FF
#FF0	#FFFF00
#0FF	#00FFFF
#F0F	#FF00FF
#CCC	#CFCFCF
#FFF	#FFFFFF

في المثال التالي قمنا بتلوين نصوص الفقرات بألوان مختلفة بأسلوب HEX.

مثال

<p style="color:#FF6347;">First paragraph</p><p style="color:#1E90FF;">Second paragraph</p><p style="color:#3CB371;">Third paragraph</p>

سنحصل على النتيجة التالية عند التشغيل.

First paragraph Second paragraph Third paragraph جرب الكود

التلوين بأسلوب RGB

هذا الأسلوب يكون بتمرير ثلاث أعداد بين

0-255 للدالة rgb() مع وضع فاصلة بين كل عددين.

العدد الأول الذي يتم تمريره لها يمثل درجة الأحمر و الثاني درجة الأخضر و الثالث درجة الأزرق كالتالي.

rgb(Red, Green, Blue)

فيما يلي بعض أكواد الألوان المعروفة بأسلوب RGB.

RGB Code	Color
rgb(0, 0, 0)
rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)
rgb(255, 255, 0)
rgb(0, 255, 255)
rgb(255, 0, 255)
rgb(204, 204, 204);
rgb(255, 255, 255)

في المثال التالي قمنا بتلوين نصوص الفقرات بألوان مختلفة بأسلوب RGB.

مثال

<p style="color:rgb(255, 99, 71)">First paragraph</p><p style="color:rgb(30, 144, 255);">Second paragraph</p><p style="color:rgb(60, 179, 113);">Third paragraph</p>

سنحصل على النتيجة التالية عند التشغيل.

First paragraph Second paragraph Third paragraph جرب الكود

التلوين بأسلوب RGBA

هذا الأسلوب يكون باستخدام الدالة

rgba() حيث نقوم بتمرير ثلاث أعداد لها بين 0-255 يمثلون درجة اللون بالإضافة إلى عدد بين 0-1 يمثل درجة الشفافية مع وضع فاصلة بين كل عددين.

العدد الأول الذي يتم تمريره لها يمثل درجة الأحمر و الثاني درجة الأخضر و الثالث درجة الأزرق و العدد الرابع يمثل درجة الشفافية كالتالي.

rgb(Red, Green, Blue, Alpha)

إذاً الدالة

rgba() هي نفسها الدالة rgb() و لكنها تملك خاصية إضافية هي الشفافية.

معلومة تقنية

درجة الشفافية حين تكون

1 فهذا يعني أن العنصر سيظهر بدون أي شفافية و كلما قللناها سيصبح لونه شفّاف (باهت) أكثر.

درجة الشفافية إذا وضعتها

0 فهذا يعني أن اللون سيصبح شفاف بالكامل، أي غير مرئي.

فيما يلي قمنا بوضع كود اللون الأزرق مع تقليل درجة شفافيته تدريجياً بأسلوب RGBA.

RGBA Code	Color
rgba(0, 0, 255, 1)
rgba(0, 0, 255, 0.8)
rgba(0, 0, 255, 0.6)
rgba(0, 0, 255, 0.4)
rgba(0, 0, 255, 0.2)
rgba(0, 0, 255, 0.0)

في المثال التالي قمنا بتلوين نصوص الفقرات بألون واحد و لكن بدرجة شفافية مختلفة بأسلوب RGBA.

مثال

<p style="color:rgba(255, 0, 0, 1)">Transparency 1</p><p style="color:rgba(255, 0, 0, 0.8)">Transparency 0.8</p><p style="color:rgba(255, 0, 0, 0.6)">Transparency 0.8</p><p style="color:rgba(255, 0, 0, 0.4)">Transparency 0.8</p><p style="color:rgba(255, 0, 0, 0.2)">Transparency 0.8</p>

سنحصل على النتيجة التالية عند التشغيل.

Transparency 1 Transparency 0.8 Transparency 0.8 Transparency 0.8 Transparency 0.8 جرب الكود

التلوين بأسلوب HSL

هذا الأسلوب يكون بتمرير ثلاث أعداد على النحو التالي.

hsl(Hue, Saturation, Lightness)

مفهوم القيمة Hue

Hue تعني اللون الأساسي و هنا يجب أن تضع عدد بين

0-360 يمثل اللون الذي تريده كالتالي:

عند العدد
0
يبدأ اللون الأحمر.
عند العدد
120
يبدأ اللون الأخضر.
عند العدد
240
يبدأ اللون الأزرق.

مفهوم القيمة Saturation

Saturation تعني نسبة التشبّع و هنا يجب أن تضع عدد بين

0-100% يمثل درجة الرمادية في اللون. كلما قلّت هذه النسبة كلما مال اللون إلى الرمادي.

مفهوم القيمة Lightness

Lightness تعني نسبة الإضاءة و هنا يجب أن تضع عدد بين

0-100% يمثل درجة الإضاءة في اللون كالتالي.

0
تعني أن اللون ليس عليه أي ضوء و بالتالي سيظهر كأسود.
50%
تعني أن اللون متوازن بين العتمة و الضوء، هنا لا يحدث أي تأثير على اللون.
100%
تعني أن اللون مضيء لأقصى حد و بالتالي فإنه سيظهر كأبيض.

فيما يلي بعض أكواد الألوان بأسلوب HSL.

HSL Code	Color
hsl(0, 0%, 0%)
hsl(0, 100%, 50%)
hsl(120, 100%, 50%)
hsl(240, 100%, 50%)
hsl(360, 0%, 100%)
hsl(0, 0%, 100%)

في المثال التالي قمنا بتلوين نصوص الفقرات بألوان مختلفة بأسلوب HSL.

مثال

<p style="color:hsl(248, 53%, 58%);">First paragraph</p><p style="color:hsl(147, 50%, 47%);">Second paragraph</p><p style="color:hsl(39, 100%, 50%);">Third paragraph</p>

سنحصل على النتيجة التالية عند التشغيل.

First paragraph Second paragraph Third paragraph جرب الكود

التلوين بأسلوب HSLA

هذا الأسلوب هو نفسه أسلوب HSL مضافاً إليه خاصيّة الشفافية.

hsl(Hue, Saturation, Lightness, Alpha)

قيمة الشفافية يمكن أن تكون بين

0-1.

فيما يلي قمنا بوضع كود اللون الأزرق مع تقليل درجة شفافيته تدريجياً بأسلوب HSLA.

HSLA Code	Color
hsla(240, 100%, 50%, 1)
hsla(240, 100%, 50%, 0.8)
hsla(240, 100%, 50%, 0.6)
hsla(240, 100%, 50%, 0.4)
hsla(240, 100%, 50%, 0.2)
hsla(240, 100%, 50%, 0)

في المثال التالي قمنا بتلوين نصوص الفقرات بألون واحد و لكن بدرجة شفافية مختلفة بأسلوب HSLA.

مثال

<p style="color:hsla(240, 100%, 50%, 1)">Transparency 1</p><p style="color:hsla(240, 100%, 50%, 0.8)">Transparency 0.8</p><p style="color:hsla(240, 100%, 50%, 0.6)">Transparency 0.6</p><p style="color:hsla(240, 100%, 50%, 0.4)">Transparency 0.4</p><p style="color:hsla(240, 100%, 50%, 0.2)">Transparency 0.2</p>

سنحصل على النتيجة التالية عند التشغيل.

Transparency 1 Transparency 0.8 Transparency 0.6 Transparency 0.4 Transparency 0.2

جرب الكود

خصائص الخلفيات

أي عنصر تضعه في الصفحة يمكنك تحديد لون خلفيته، وضع صورة كخلفية له، تحديد حجم و مكان الصورة التي تم وضعها كخلفية له، جعل صورة الخلفية تتكرر أو تتمدد بالشكل المناسب.

في هذا الدرس ستتعرف على الخصائص التالية التي تستخدم في تصميم خلفية العناصر:

background-color
background-image
background-repeat
background-position
background-attachment
background

فيما يلي أسماء الصور التي سنستخدمها في الأمثلة و بأحجامها الفعلية.

paper.png

gradient.png

pyramids.png

moon.png

تحديد لون خلفية العنصر

لتلوين خلفية العنصر نستخدم الخاصية

background-color و اللون نضعه لها كقيمة من خلال إسمه ( Color Name ) أو بتحديد درجته بأسلوب HEX أو RGB أو RGBA أو HSL أو HSLA كما تعلمنا في درس الألوان.

فيما يلي قمنا بتلوين خلفية الصفحة و خلفية العناصر الموجودة فيها.

مثال

body { background-color: lightblue;} h1 { background-color: burlywood;} p { background-color: darkgray;} جرب الكود

تحديد شفافية الخلفية

إذا أردت التلاعب بشفافية ( Transparency أو Opacity ) العنصر فهنا عندك خيارين:

إستخدام الخاصية
opacity
و عندها سيتم جعل العنصر بأكمله شفاف، أي الشفافية ستطبّق على الكلام و الخلفية معاً.
تحديد درجة اللون و شفافية الخلفية معاً بأسلوب RGBA أو HSLA و هكذا ستطبّق الشفافية على الخلفية فقط.

فيما يلي الشفافية مطبقة على العنصر بأكمله.

Opacity 1 Opacity 0.7 Opacity 0.4

فيما يلي الشفافية مطبقة على خلفية العنصر فقط.

Alpha 1 Alpha 0.7 Alpha 0.4

تطبيق الشفافية على العنصر بأكمله

في المثال التالي قمنا بتلوين جميع عناصر

<h1> الموجود في الصفحة بالأزرق.

بعدها قمنا بإعطاء بإعطاء شفافية للعناصر على الشكل التالي:

أي عنصر
<h1>
يستخدم الكلاس
first
سيتم إعطاؤه شفافية بنسبة 0.8.
أي عنصر
<h1>
يستخدم الكلاس
second
سيتم إعطاؤه شفافية بنسبة 0.5.
أي عنصر
<h1>
يستخدم الكلاس
third
سيتم إعطاؤه شفافية بنسبة 0.2.

مثال

h1 { background-color: blue;}h1.first { opacity: 0.8;} h1.second { opacity: 0.5;} h1.third { opacity: 0.2;} جرب الكود

تطبيق الشفافية على خلفية العنصر فقط

في المثال التالي قمنا بتلوين خلفية جميع عناصر

<h1> الموجود في الصفحة بالأزرق مع تحديد نسبة شفافيتها بأسلوب RGBA على الشكل التالي:

أي عنصر
<h1>
ستكون خلفيته زرقاء و شفافة بنسبة 1، بمعنى أنه لا يملك أي شفافية.
أي عنصر
<h1>
يستخدم الكلاس
first
ستكون خلفيته زرقاء و شفافة بنسبة 0.8.
أي عنصر
<h1>
يستخدم الكلاس
second
ستكون خلفيته زرقاء و شفافة بنسبة 0.5.
أي عنصر
<h1>
يستخدم الكلاس
third
ستكون خلفيته زرقاء و شفافة بنسبة 0.2.

مثال

h1 { background-color: rgba(0, 0, 255, 1);}h1.first { background-color: rgba(0, 0, 255, 0.8);} h1.second { background-color: rgba(0, 0, 255, 0.5);} h1.third { background-color: rgba(0, 0, 255, 0.2);} جرب الكود

إضافة صورة كخلفية

لإضافة صورة كخلفية للعنصر نستخدم الخاصية

background-image و من ثم نمرر لها مسار الصورة عن طريق الدالة url('') التي نضعها لها كقيمة.

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

في المثال التالي وضعنا الصورة

paper.png كخلفية للصفحة، أي سنضعها كخلفية للوسم <body>.
لاحظ كيف أنها ستظل تكرر نفسها حتى تملئ كل الشاشة.

مثال

body { background-image: url('paper.png');} جرب الكود

ملاحظة

إذا قمت بوضع صورة و لم تظهر، فهذا يعني أن طريقة وضعك للرابط غير صحيحة.

تحديد إتجاه تكرار صورة الخلفية

لتحديد كيف ستكرر صورة الخلفية نفسها أو لمنعها من تكرار نستخدم الخاصية

background-repeat و من ثم نمرر لها إحدى القيم التالية:

no-repeat
إذا أردنا جعلها لا تكرر نفسها.
repeat-x
إذا أردنا جعلها تكرر أفقياً فقط.
repeat-y
إذا أردنا جعلها تكرر عمودياً فقط.

في المثال التالي وضعنا الصورة

gradient.png كخلفية للعنصر <header> مع جعلها تتكرر أفقياً.

مثال

header { background-image: url('gradient.png'); background-repeat: repeat-x;} جرب الكود

ملاحظة

في المثال السابق يوجد مشكلة و هي أنه في حال كان حجم الوسم بالطول أكبر من خلفيته فإنها لن تتمدد معه و سبب ذلك أننا لم نجعل الخلفية مطابقة لحجم العنصر الموجودة فيه.

تحديد حجم صورة الخلفية

لتحديد حجم صورة الخلفية بالنسبة للعنصر الموضوعة فيه نستخدم الخاصية

background-size و من ثم نمرر لها إحدى القيم التالية:

auto
هي القيمة الإفتراضية و التي تجعل الصورة تظهر بحجمها الحقيقي.
contain
تجعل الصورة تظهر بالكامل بدون قطع أي جزء منها و تحاول مطابقة حجمها مع حجم العنصر.
strech
تجعل الصورة تتمدد لكي تطابق حجم العنصر و هنا قد يتم قطع جزء من أطرافها.
w% h%
هنا نقصد تمرير رقم مئوي يمثل كم نريد أن يكون عرض الصورة بالنسبة للعنصر و طولها سيتم تحديده بشكل تلقائي. و يمكنك تمرير رقمين مئويين لها إن أردت، الأول يمثل عرض الصورة و الثاني طولها.
w-unit h-unit
هنا نقصد تمرير رقم بوحدة قياس محددة مثل px يمثل كم نريد أن يكون عرض الصورة بالنسبة للعنصر و طولها سيتم تحديده بشكل تلقائي. و يمكنك تمرير رقمين لها إن أردت، الأول يمثل عرض الصورة و الثاني طولها.

في المثال التالي وضعنا الصورة

gradient.png كخلفية للعنصر <header> مع جعلها تتكرر أفقياً و تتمدد حتى تملئ كل خلفية العنصر مهما كان طوله.

مثال

header { background-image: url('gradient.png'); background-repeat: repeat-x; background-size: 100% 100%;} جرب الكود

تحديد مكان صورة الخلفية

إذا لم تقم بتحديد مكان ظهور صورة الخلفية فإنها إفتراضياً تظهر في الأعلى ناحية اليسار.

لتحديد مكان ظهور صورة الخلفية بالنسبة للعنصر الموضوعة فيه نستخدم الخاصية

background-position و من ثم نمرر لها قيمة واحدة أو قيمتين.
في حال تمرير قيمة واحدة فإنه سيتم إظهارها عمودياً في الوسط. و في حال تمرير قيمتين لها فالأولى تمثل مكانها أفقياً و الثانية عمودياً.

فيما يلي القيم التي يمكنك تمريرها لتحديد مكان ظهور الخلفية:

left top
لإظهار الصورة ناحية اليسار و في الأعلى.
left center
لإظهار الصورة ناحية اليسار و في الوسط عمودياً.
left bottom
لإظهار الصورة ناحية اليسار و في الأسفل.
right top
لإظهار الصورة ناحية اليمين و في الأعلى.
right center
لإظهار الصورة ناحية اليمين و في الوسط عمودياً.
right bottom
لإظهار الصورة ناحية اليمين و في الأسفل.
center top
لإظهار الصورة في الوسط أفقياً و في الأعلى.
center center
لإظهار الصورة في الوسط أفقياً و عمودياً.
center bottom
لإظهار الصورة في الوسط أفقياً و في الأسفل.
x% y%
هنا نقصد تمرير رقم مئوي مكان
x
يمثل كم نريد أن تكون الصورة بعيدة جهة يسار العنصر و تمرير رقم مئوي مكان
y
يمثل كم نريد أن تكون الصورة بعيدة جهة أعلى العنصر.
x-unit y-unit
هنا نقصد تمرير رقم بوحدة قياس محددة مثل px ييمثل كم نريد أن تكون الصورة بعيدة جهة يسار العنصر و تمرير رقم بوحدة قياس محددة مكان
y
يمثل كم نريد أن تكون الصورة بعيدة جهة أعلى العنصر.

في المثال التالي وضعنا الصورة

pyramids.png كخلفية للعنصر الذي يملك كلاس egypt مع جعلها لا تتكرر و تظهر فيه في الأعلى ناحية اليمين.

مثال

.egypt { background-image: url('pyramids.png'); background-repeat: no-repeat; background-position: right top;} جرب الكود

تثبيت صورة الخلفية أثناء النزول في الصفحة

لتحديد ما إن كانت الصورة الموضوعة كخلفية ستظل ثابتة (ظاهرة) خلف العنصر في حال النزول في الصفحة أم أنها ستبقى مكانها نستخدم الخاصية

background-attachment و من ثم نمرر لها إحدى القيم التالية:

scroll
لجعل الصورة تبقى مكانها في حال النزول في الصفحة و هذه قيمتها الإفتراضية.
fixed
لجعل الصورة تظل ظاهرة في الصفحة عند النزول فيها إذا كان محتواها أكبر منها.
local
لجعل الصورة تظل ظاهرة عند النزول بداخل العنصر إذا كان محتواه أكبر منه.

ملاحظة

fixed يفترض أن تستخدمها مع الوسم <body> فقط لأنها تستخدم لتثبيت الخلفية بالنسبة للصفحة بأكملها.

local يفترض أن تستخدمها مع أي وسم موضوع بداخل الوسم <body> لأنها تستخدم لتثبيت الخلفية بالنسبة لعنصر محدد في الصفحة.

في المثال التالي قمنا بتلوين خلفية الصفحة و كذلك وضعنا الصورة

moon.png كخلفية ثابتة فيها مع جعلها لا تتكرر و تظهر في الأعلى ناحية اليمين.

إذاً عند النزول في الصفحة ستلاحظ أنها ستظل ظاهرة.

مثال

body { background-image: url('moon.png'); background-color: cornflowerblue; background-repeat: no-repeat; background-position: right top; background-attachment: fixed;} جرب الكود

تعريف كل خصائص الخلفية بسطر واحد

يمكنك تعريف كل خصائص الخلفية بشكل مختصر ( Shorthand Property ) حتى لا تضطر إلى كتابة الكثير من كود CSS.

عند اتباع هذا الأسلوب أكتب

background و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

مثال

body { background: cornflowerblue url('moon.png') no-repeat fixed right top;}

جرب الكود

مفهوم الحدود

أي عنصر تضيفه في الصفحة، يمكنك إظهار حدود بالشكل الذي تراه مناسباً حيث يمكنك إظهار حدوده من كل الجهات أو من جهات محددة، تحديد سمك و شكل و لون الحدود، بالإضافة إلى تحديد ما إن كانت زوايا الحدود ستظهر بشكل حاد أو دائري.

بشكل عام، حتى تُظهر حدود العنصر عليك تحديد نوع حدوده و من ثم التلاعب بالألوان و الزوايا كما تريد.

Border on all sides Rounded borders Dashed Borders Colored background with border on the left Border on the bottom

تحديد شكل حدود العنصر

لتحديد شكل الحدود نضيف الخاصية

border-style و من ثم نمرر لها إحدى القيم التالية:

dotted
لإظهار الحدود كنقط.
dashed
لإظهار الحدود كخط متقطع.
solid
لإظهار الحدود كخط.
double
لإظهار الحدود كخط مزدوج.
groove
لإظهار الحدود بشكل ثلاثي الأبعاد و كأنها أخدود.
ridge
لإظهار الحدود بشكل ثلاثي الأبعاد و كأنها قمة.
inset
لإظهار الحدود بشكل ثلاثي الأبعاد و كأن عليها ضوء من الجهة السفلية ناحية اليمين.
outset
لإظهار الحدود بشكل ثلاثي الأبعاد و كأن عليها ضوء من الجهة العلوية ناحية اليسار.
none
لإزالة الحدود.
hidden
لإخفاء الحدود.

ملاحظة

الإختلاف بين

none و hidden تلاحظه فقط في حال كنت تتعامل مع عناصر ملتصقة تتشارك نفس الحدود مثل حدود العناصر <td> و <th> في الجداول.

هنا إذا كانت كل خلايا الجدول مدموجة بواسطة الخاصية

border-collapse:collapse; فإنا القيمة hidden تقوم بإخفاء الحدود بينما القيمة none لا تلغيها.

في المثال التالي قمنا بتعريف كلاسات CSS عند إضافتها للعناصر فإنها تظهر حدود لها شكل محدد حولها.
لتبسيط الشرح جعلنا أسماء الكلاسات مثل أسماء أشكال الحدود التي تظهرها.

مثال

.dotted { border-style: dotted;}.dashed { border-style: dashed;}.solid { border-style: solid;}.double { border-style: double;}.groove { border-style: groove}.ridge { border-style: ridge;}.inset { border-style: inset;}.outset { border-style: outset;}.none { border-style: none;}.hidden { border-style: hidden;} جرب الكود

إذا قمت بتمرير قيمتين للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل شكل الحدود في الأعلى و الأسفل.
القيمة الثانية ستمثل شكل الحدود في جهة اليمين و اليسار.

مثال

.mix { border-style: solid double;} جرب الكود

إذا قمت بتمرير ثلاث قيم للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل شكل الحدود في الأعلى.
القيمة الثانية ستمثل شكل الحدود في جهة اليمين و اليسار.
القيمة الثالثة ستمثل شكل الحدود في الأسفل.

مثال

.mix { border-style: solid double dotted;} جرب الكود

إذا قمت بتمرير أربع قيم للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل شكل الحدود في الأعلى.
القيمة الثانية ستمثل شكل الحدود في جهة اليمين.
القيمة الثالثة ستمثل شكل الحدود في الأسفل.
القيمة الرابعة ستمثل شكل الحدود في جهة اليسار.

مثال

.mix { border-style: solid double dotted none;} جرب الكود

تحديد سمك الحدود

لتحديد سمك الحدود نضيف الخاصية

border-width و من ثم نمرر لها إحدى القيم التالية:

thin
لجعل الحدود رفيعة السمك.
medium
لجعل الحدود متوسط السمك.
thick
لجعل الحدود عريضة السمك.
رقم بالبكسل
px
أو بوحدة قياس أخرى ليمثل سمك الحدود.

في المثال التالي قمنا بتعريف كلاسات CSS عند إضافتها للعناصر فإنها تظهر حدود أحجامها مختلفة.

مثال

.one { border-style: double; border-width: 5px;}.two { border-style: solid; border-width: medium;}.three { border-style: dotted; border-width: thick;} جرب الكود

إذا قمت بتمرير قيمتين للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل سمك الحدود في الأعلى و الأسفل.
القيمة الثانية ستمثل سمك الحدود في جهة اليمين و اليسار.

مثال

.mix { border-style: solid; border-width: 5px 2px;} جرب الكود

إذا قمت بتمرير ثلاث قيم للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل سمك الحدود في الأعلى.
القيمة الثانية ستمثل سمك الحدود في جهة اليمين و اليسار.
القيمة الثالثة ستمثل سمك الحدود في الأسفل.

مثال

.mix { border-style: solid; border-width: 3px 2px 1px;} جرب الكود

إذا قمت بتمرير أربع قيم للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل سمك الحدود في الأعلى.
القيمة الثانية ستمثل سمك الحدود في جهة اليمين.
القيمة الثالثة ستمثل سمك الحدود في الأسفل.
القيمة الرابعة ستمثل سمك الحدود في جهة اليسار.

مثال

.mix { border-style: solid; border-width: 1px 1px 1px 5px;} جرب الكود

تحديد لون الحدود

لتلوين حدود العنصر نستخدم الخاصية

border-color و اللون نضعه لها كقيمة من خلال إسمه ( Color Name ) أو بتحديد درجته بأسلوب HEX أو RGB أو RGBA أو HSL أو HSLA كما تعلمنا في درس الألوان.

ملاحظة

إن لم يكن شكل الحدود

border-style محدداً فإن لون الحدود border-color لن يظهر لأنه منطقياً لا يمكنك تلوين الحدود و هي بالأساس غير موجودة.

فيما يلي قمنا بتلوين خلفية الصفحة و خلفية العناصر الموجودة فيها.

مثال

.one { border-style: solid; border-color: red;}.two { border-style: solid; border-color: green;}.three { border-style: solid; border-color: blue;} جرب الكود

إذا قمت بتمرير قيمتين للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل لون الحدود في الأعلى و الأسفل.
القيمة الثانية ستمثل لون الحدود في جهة اليمين و اليسار.

مثال

.mix { border-style: solid; border-color: blue red;} جرب الكود

إذا قمت بتمرير ثلاث قيم للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل لون الحدود في الأعلى.
القيمة الثانية ستمثل لون الحدود في جهة اليمين و اليسار.
القيمة الثالثة ستمثل لون الحدود في الأسفل.

مثال

.mix { border-style: solid; border-color: red green blue;} جرب الكود

إذا قمت بتمرير أربع قيم للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل لون الحدود في الأعلى.
القيمة الثانية ستمثل لون الحدود في جهة اليمين.
القيمة الثالثة ستمثل لون الحدود في الأسفل.
القيمة الرابعة ستمثل لون الحدود في جهة اليسار.

مثال

.mix { border-style: solid; border-color: red green blue orange;} جرب الكود

تحديد شكل و سمك و لون كل جهة من الحدود

يمكنك تحديد شكل و سمك و لون الحدود العلوية للعنصر بواسطة الخصائص التالية:

border-top-style
لتحديد شكل الحدود العلوية.
border-top-width
لتحديد سمك الحدود العلوية.
border-top-color
لتحديد لون الحدود العلوية.

يمكنك تحديد شكل و سمك و لون الحدود العلوية للعنصر بواسطة الخصائص التالية:

border-bottom-style
لتحديد شكل الحدود السفلية.
border-bottom-width
لتحديد سمك الحدود السفلية.
border-bottom-color
لتحديد لون الحدود السفلية.

يمكنك تحديد شكل و سمك و لون الحدود جهة يمين العنصر بواسطة الخصائص التالية:

border-right-style
لتحديد شكل الحدود جهة اليمين.
border-right-width
لتحديد سمك الحدود جهة اليمين.
border-right-color
لتحديد لون الحدود جهة اليمين.

يمكنك تحديد شكل و سمك و لون الحدود جهة يسار العنصر بواسطة الخصائص التالية:

border-left-style
لتحديد شكل الحدود جهة اليسار.
border-left-width
لتحديد سمك الحدود جهة اليسار.
border-left-color
لتحديد لون الحدود جهة اليسار.

في المثال التالي قمنا بتحديد خصائص حدود كل جهة على حدا.

مثال

.demo { /* خصائص الحدود العلوية */ border-top-style: solid; border-top-width: 10px; border-top-color: blue; /* خصائص الحدود السفلية */ border-bottom-style: solid; border-bottom-width: 10px; border-bottom-color: blue; /* خصائص الحدود جهة اليمين */ border-right-style: double; border-right-width: 10px; border-right-color: orange; /* خصائص الحدود جهة اليسار */ border-left-style: double; border-left-width: 10px; border-left-color: orange;} جرب الكود

تعريف كل خصائص الحدود بسطر واحد

يمكنك تعريف كل خصائص الحدود بشكل مختصر ( Shorthand Property ) حتى لا تضطر إلى كتابة الكثير من كود CSS.

تحديد خصائص الحدود من كل الجهات

لتحديد سمك، شكل و لون حدود العنصر من كل الجهات أكتب

border و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

border: [border-width] [border-style] [border-color];

تحديد خصائص الحدود من الجهة العلوية

لتحديد سمك، شكل و لون حدود العنصر من الجهة العلوية أكتب

border-top و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

border-top: [border-width] [border-style] [border-color];

تحديد خصائص الحدود من الجهة السفلية

لتحديد سمك، شكل و لون حدود العنصر من الجهة السفلية أكتب

border-bottom و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

border-bottom: [border-width] [border-style] [border-color];

تحديد خصائص الحدود من الجهة اليمنى

لتحديد سمك، شكل و لون حدود العنصر من الجهة اليمنى أكتب

border-right و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

border-right: [border-width] [border-style] [border-color];

تحديد خصائص الحدود من الجهة اليسرى

لتحديد سمك، شكل و لون حدود العنصر من الجهة اليسرى أكتب

border-left و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

border-left: [border-width] [border-style] [border-color];

في المثال التالي قمنا بإظهار حدود سمكها 5 بكسل، شكلها خط و لونها أحمر.

مثال

.demo { border: 5px solid red;} جرب الكود

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

مثال

.demo { border-top: 5px solid red;} جرب الكود

في المثال التالي قمنا بإظهار حدود في أسفل العنصر سمكها 5 بكسل، شكلها خط و لونها أحمر.

مثال

.demo { border-bottom: 5px solid red;} جرب الكود

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

مثال

.demo { border-right: 5px solid red;} جرب الكود

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

مثال

.demo { border-left: 5px solid red;} جرب الكود

تحديد شكل زواية الحدود

يمكنك تحديد جعل زوايا الحدود منحنية بالدرجة التي تريدها، و يمكنك تحديد درجة إنحاء الزوايا الأربعة للعنصر دفعة واحدة و يمكنك تحديد درجة إنحناء كل زاوية منهم على حدا بالشكل الذي تريده.

لتحديد درجة إنحناء الزوايا الأربعة للعنصر نضيف الخاصية

border-radius و من ثم نمرر لها رقم بالبكسل أو بأي وحدة قياس أخرى يمثل درجة الإنحناء.

مثال

.demo { border: 3px solid red; border-radius: 20px;} جرب الكود

لتحديد درجة إنحناء الزاوية العلوية جهة يمين العنصر نضيف الخاصية

border-top-right-radius و من ثم نمرر لها رقم بالبكسل أو بأي وحدة قياس أخرى يمثل درجة الإنحناء.

مثال

.demo { border: 3px solid red; border-top-right-radius: 20px;} جرب الكود

لتحديد درجة إنحناء الزاوية العلوية جهة يسار العنصر نضيف الخاصية

border-top-left-radius و من ثم نمرر لها رقم بالبكسل أو بأي وحدة قياس أخرى يمثل درجة الإنحناء.

مثال

.demo { border: 3px solid red; border-top-left-radius: 20px;} جرب الكود

لتحديد درجة إنحناء الزاوية السفلية جهة يمين العنصر نضيف الخاصية

border-bottom-right-radius و من ثم نمرر لها رقم بالبكسل أو بأي وحدة قياس أخرى يمثل درجة الإنحناء.

مثال

.demo { border: 3px solid red; border-bottom-right-radius: 20px;} جرب الكود

لتحديد درجة إنحناء الزاوية السفلية جهة يسار العنصر نضيف الخاصية

border-bottom-left-radius و من ثم نمرر لها رقم بالبكسل أو بأي وحدة قياس أخرى يمثل درجة الإنحناء.

مثال

.demo { border: 3px solid red; border-bottom-left-radius: 20px;} جرب الكود

مفهوم الحدود

بشكل عام، حتى تُظهر حدود العنصر عليك تحديد نوع حدوده و من ثم التلاعب بالألوان و الزوايا كما تريد.

Border on all sides Rounded borders Dashed Borders Colored background with border on the left Border on the bottom

تحديد شكل حدود العنصر

لتحديد شكل الحدود نضيف الخاصية

border-style و من ثم نمرر لها إحدى القيم التالية:

dotted
لإظهار الحدود كنقط.
dashed
لإظهار الحدود كخط متقطع.
solid
لإظهار الحدود كخط.
double
لإظهار الحدود كخط مزدوج.
groove
لإظهار الحدود بشكل ثلاثي الأبعاد و كأنها أخدود.
ridge
لإظهار الحدود بشكل ثلاثي الأبعاد و كأنها قمة.
inset
لإظهار الحدود بشكل ثلاثي الأبعاد و كأن عليها ضوء من الجهة السفلية ناحية اليمين.
outset
لإظهار الحدود بشكل ثلاثي الأبعاد و كأن عليها ضوء من الجهة العلوية ناحية اليسار.
none
لإزالة الحدود.
hidden
لإخفاء الحدود.

ملاحظة

الإختلاف بين

none و hidden تلاحظه فقط في حال كنت تتعامل مع عناصر ملتصقة تتشارك نفس الحدود مثل حدود العناصر <td> و <th> في الجداول.

هنا إذا كانت كل خلايا الجدول مدموجة بواسطة الخاصية

border-collapse:collapse; فإنا القيمة hidden تقوم بإخفاء الحدود بينما القيمة none لا تلغيها.

مثال

إذا قمت بتمرير قيمتين للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل شكل الحدود في الأعلى و الأسفل.
القيمة الثانية ستمثل شكل الحدود في جهة اليمين و اليسار.

مثال

.mix { border-style: solid double;} جرب الكود

إذا قمت بتمرير ثلاث قيم للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل شكل الحدود في الأعلى.
القيمة الثانية ستمثل شكل الحدود في جهة اليمين و اليسار.
القيمة الثالثة ستمثل شكل الحدود في الأسفل.

مثال

.mix { border-style: solid double dotted;} جرب الكود

إذا قمت بتمرير أربع قيم للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل شكل الحدود في الأعلى.
القيمة الثانية ستمثل شكل الحدود في جهة اليمين.
القيمة الثالثة ستمثل شكل الحدود في الأسفل.
القيمة الرابعة ستمثل شكل الحدود في جهة اليسار.

مثال

.mix { border-style: solid double dotted none;} جرب الكود

تحديد سمك الحدود

لتحديد سمك الحدود نضيف الخاصية

border-width و من ثم نمرر لها إحدى القيم التالية:

thin
لجعل الحدود رفيعة السمك.
medium
لجعل الحدود متوسط السمك.
thick
لجعل الحدود عريضة السمك.
رقم بالبكسل
px
أو بوحدة قياس أخرى ليمثل سمك الحدود.

في المثال التالي قمنا بتعريف كلاسات CSS عند إضافتها للعناصر فإنها تظهر حدود أحجامها مختلفة.

مثال

.one { border-style: double; border-width: 5px;}.two { border-style: solid; border-width: medium;}.three { border-style: dotted; border-width: thick;} جرب الكود

إذا قمت بتمرير قيمتين للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل سمك الحدود في الأعلى و الأسفل.
القيمة الثانية ستمثل سمك الحدود في جهة اليمين و اليسار.

مثال

.mix { border-style: solid; border-width: 5px 2px;} جرب الكود

إذا قمت بتمرير ثلاث قيم للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل سمك الحدود في الأعلى.
القيمة الثانية ستمثل سمك الحدود في جهة اليمين و اليسار.
القيمة الثالثة ستمثل سمك الحدود في الأسفل.

مثال

.mix { border-style: solid; border-width: 3px 2px 1px;} جرب الكود

إذا قمت بتمرير أربع قيم للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل سمك الحدود في الأعلى.
القيمة الثانية ستمثل سمك الحدود في جهة اليمين.
القيمة الثالثة ستمثل سمك الحدود في الأسفل.
القيمة الرابعة ستمثل سمك الحدود في جهة اليسار.

مثال

.mix { border-style: solid; border-width: 1px 1px 1px 5px;} جرب الكود

تحديد لون الحدود

لتلوين حدود العنصر نستخدم الخاصية

ملاحظة

إن لم يكن شكل الحدود

border-style محدداً فإن لون الحدود border-color لن يظهر لأنه منطقياً لا يمكنك تلوين الحدود و هي بالأساس غير موجودة.

فيما يلي قمنا بتلوين خلفية الصفحة و خلفية العناصر الموجودة فيها.

مثال

.one { border-style: solid; border-color: red;}.two { border-style: solid; border-color: green;}.three { border-style: solid; border-color: blue;} جرب الكود

إذا قمت بتمرير قيمتين للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل لون الحدود في الأعلى و الأسفل.
القيمة الثانية ستمثل لون الحدود في جهة اليمين و اليسار.

مثال

.mix { border-style: solid; border-color: blue red;} جرب الكود

إذا قمت بتمرير ثلاث قيم للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل لون الحدود في الأعلى.
القيمة الثانية ستمثل لون الحدود في جهة اليمين و اليسار.
القيمة الثالثة ستمثل لون الحدود في الأسفل.

مثال

.mix { border-style: solid; border-color: red green blue;} جرب الكود

إذا قمت بتمرير أربع قيم للخاصية

border-style سيحدث التالي:

القيمة الأولى ستمثل لون الحدود في الأعلى.
القيمة الثانية ستمثل لون الحدود في جهة اليمين.
القيمة الثالثة ستمثل لون الحدود في الأسفل.
القيمة الرابعة ستمثل لون الحدود في جهة اليسار.

مثال

.mix { border-style: solid; border-color: red green blue orange;} جرب الكود

تحديد شكل و سمك و لون كل جهة من الحدود

يمكنك تحديد شكل و سمك و لون الحدود العلوية للعنصر بواسطة الخصائص التالية:

border-top-style
لتحديد شكل الحدود العلوية.
border-top-width
لتحديد سمك الحدود العلوية.
border-top-color
لتحديد لون الحدود العلوية.

يمكنك تحديد شكل و سمك و لون الحدود العلوية للعنصر بواسطة الخصائص التالية:

border-bottom-style
لتحديد شكل الحدود السفلية.
border-bottom-width
لتحديد سمك الحدود السفلية.
border-bottom-color
لتحديد لون الحدود السفلية.

يمكنك تحديد شكل و سمك و لون الحدود جهة يمين العنصر بواسطة الخصائص التالية:

border-right-style
لتحديد شكل الحدود جهة اليمين.
border-right-width
لتحديد سمك الحدود جهة اليمين.
border-right-color
لتحديد لون الحدود جهة اليمين.

يمكنك تحديد شكل و سمك و لون الحدود جهة يسار العنصر بواسطة الخصائص التالية:

border-left-style
لتحديد شكل الحدود جهة اليسار.
border-left-width
لتحديد سمك الحدود جهة اليسار.
border-left-color
لتحديد لون الحدود جهة اليسار.

في المثال التالي قمنا بتحديد خصائص حدود كل جهة على حدا.

مثال

تعريف كل خصائص الحدود بسطر واحد

يمكنك تعريف كل خصائص الحدود بشكل مختصر ( Shorthand Property ) حتى لا تضطر إلى كتابة الكثير من كود CSS.

تحديد خصائص الحدود من كل الجهات

لتحديد سمك، شكل و لون حدود العنصر من كل الجهات أكتب

border و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

border: [border-width] [border-style] [border-color];

تحديد خصائص الحدود من الجهة العلوية

لتحديد سمك، شكل و لون حدود العنصر من الجهة العلوية أكتب

border-top و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

border-top: [border-width] [border-style] [border-color];

تحديد خصائص الحدود من الجهة السفلية

لتحديد سمك، شكل و لون حدود العنصر من الجهة السفلية أكتب

border-bottom و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

border-bottom: [border-width] [border-style] [border-color];

تحديد خصائص الحدود من الجهة اليمنى

لتحديد سمك، شكل و لون حدود العنصر من الجهة اليمنى أكتب

border-right و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

border-right: [border-width] [border-style] [border-color];

تحديد خصائص الحدود من الجهة اليسرى

لتحديد سمك، شكل و لون حدود العنصر من الجهة اليسرى أكتب

border-left و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

border-left: [border-width] [border-style] [border-color];

في المثال التالي قمنا بإظهار حدود سمكها 5 بكسل، شكلها خط و لونها أحمر.

مثال

.demo { border: 5px solid red;} جرب الكود

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

مثال

.demo { border-top: 5px solid red;} جرب الكود

في المثال التالي قمنا بإظهار حدود في أسفل العنصر سمكها 5 بكسل، شكلها خط و لونها أحمر.

مثال

.demo { border-bottom: 5px solid red;} جرب الكود

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

مثال

.demo { border-right: 5px solid red;} جرب الكود

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

مثال

.demo { border-left: 5px solid red;} جرب الكود

تحديد شكل زواية الحدود

لتحديد درجة إنحناء الزوايا الأربعة للعنصر نضيف الخاصية

border-radius و من ثم نمرر لها رقم بالبكسل أو بأي وحدة قياس أخرى يمثل درجة الإنحناء.

مثال

.demo { border: 3px solid red; border-radius: 20px;} جرب الكود

لتحديد درجة إنحناء الزاوية العلوية جهة يمين العنصر نضيف الخاصية

border-top-right-radius و من ثم نمرر لها رقم بالبكسل أو بأي وحدة قياس أخرى يمثل درجة الإنحناء.

مثال

.demo { border: 3px solid red; border-top-right-radius: 20px;} جرب الكود

لتحديد درجة إنحناء الزاوية العلوية جهة يسار العنصر نضيف الخاصية

border-top-left-radius و من ثم نمرر لها رقم بالبكسل أو بأي وحدة قياس أخرى يمثل درجة الإنحناء.

مثال

.demo { border: 3px solid red; border-top-left-radius: 20px;} جرب الكود

لتحديد درجة إنحناء الزاوية السفلية جهة يمين العنصر نضيف الخاصية

border-bottom-right-radius و من ثم نمرر لها رقم بالبكسل أو بأي وحدة قياس أخرى يمثل درجة الإنحناء.

مثال

.demo { border: 3px solid red; border-bottom-right-radius: 20px;} جرب الكود

لتحديد درجة إنحناء الزاوية السفلية جهة يسار العنصر نضيف الخاصية

border-bottom-left-radius و من ثم نمرر لها رقم بالبكسل أو بأي وحدة قياس أخرى يمثل درجة الإنحناء.

مثال

.demo { border: 3px solid red; border-bottom-left-radius: 20px;} جرب الكود

مفهوم الهامش الخارجي

الهامش الخارجي ( Margin ) هو المسافة الفارغة التي يمكن وضعها حول العنصر من الخارج لتحديد بعده عن العناصر الأخرى الموضوعة في الصفحة.

حجم الهامش الخارجي للعنصر يمكنك تحديده من كل الجهات أو من جهات محددة.

You can use auto margin to center the element too

الفرق بين الهامش الداخلي و الهامش الخارجي

تذكر دائماً أن الهامش الداخلي يكون بين المحتوى و الحدود التي يمكن إضافتها للعنصر أما الهامشر الخارجي فيكون خارج حدود العنصر.

الصورة التالية توضّح مكان الهامش الداخلي ( Padding ) و الهامش الخارجي ( Margin ) و الحدود ( Border ) بالنسبة للعنصر.

إضافة هامش الخارجي من جهة محددة

الخصائص التالية تستخدم لتحديد حجم الهامش الخارجي من جهة محددة:

margin-top
لتحديد حجم الهامش الخارجي للعنصر من الأعلى.
margin-bottom
لتحديد حجم الهامش الخارجي للعنصر من الأسفل.
margin-right
لتحديد حجم الهامش الخارجي للعنصر من الجهة اليمنى.
margin-left
لتحديد حجم الهامش الخارجي للعنصر من الجهة اليسرى.

فيما يلي القيم التي يمكن وضعها كحجم للهامش الخارجي:

auto
لجعل المتصفح يحسب نسبة الهامش الخارجي من الجوانب بشكل تلقائي.
inherit
لجعل العنصر يرث نسبة الهامش الخارجي من العنصر الموجود فيه.
length
نقصد بها وضع رقم بوحدة قياس محددة مثل px، pt، cm،
%
ليمثل حجم الهامش.

ملاحظة

الخاصية

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

رؤية تأثير الهامش الخارجي

لملاحظة كم تبعد العناصر عن بعضها البعض يمكنك إظهار حدودها ( Border ).

في المثال التالي قمنا بإضافة حدود و هامش خارجي للعنصر الذي يملك الكلاس

demo.

مثال

.demo { margin-top: 60px; margin-left: 40px; margin-right: 10px; margin-bottom: 30px; border: 1px solid gray;} تجربة الكود

إضافة هامش بالسالب

قيمة الهامش الخارجي يمكن وضعها بالسالب مثل

-20px أو -50% و هذا الأمر يجعل الهامش يطبّق بشكل عكسي، حيث يصبح العنصر يقترب من العناصر الأخرى بعد الإبتعاد عنها.

في المثال التالي قمنا بإضافة هامش علوي بالسالب لجعل العنصر يتراجع للأعلى بنسبة 30 بكسل.

مثال

.demo { margin-top: -30px;} تجربة الكود

تحديد الهامش الخارجي من كل الجهات بسطر واحد

بواسطة الخاصة

margin يمكنك تحديد حجم الهامش الخارجي من كل الجوانب. و هنا نود الإشارة إلى أنه على حسب عدد القيم التي تمررها لهذه الخاصية فإنه سيتم تحديد أي جهة سيتم إضافة الهامش فيها و هذا الأمر ستراه بدقة في الأمثلة التالية.

في المثال التالي قمنا بإضافة هامش داخلي للعنصر بمقدار 30 بكسل من كل الجوانب.

مثال

div { margin: 30px;} تجربة الكود

إذا قمت بتمرير قيمتين للخاصية

margin سيحدث التالي:

القيمة الأولى ستمثل حجم الهامش الخارجي جهتي الأعلى و الأسفل.
القيمة الثانية ستمثل حجم الهامش الخارجي جهتي اليمين و اليسار.

مثال

div { margin: 20px 15px;} تجربة الكود

إذا قمت بتمرير ثلاث قيم للخاصية

الخارجي سيحدث التالي:

القيمة الأولى ستمثل حجم الهامش الخارجي في الأعلى.
القيمة الثانية ستمثل حجم الهامش الخارجي جهتي اليمين و اليسار.
القيمة الثالثة ستمثل حجم الهامش الخارجي في الأسفل.

مثال

div { margin: 20px 15px 10px;} تجربة الكود

إذا قمت بتمرير أربع قيم للخاصية

margin سيحدث التالي:

القيمة الأولى ستمثل حجم الهامش الخارجي في الأعلى.
القيمة الثانية ستمثل حجم الهامش الخارجي جهة اليمين.
القيمة الثالثة ستمثل حجم الهامش الخارجي في الأسفل.
القيمة الرابعة ستمثل حجم الهامش الخارجي جهة اليسار.

مثال

div { margin: 20px 15px 10px 5px;} تجربة الكود

إزالة الهامش الخارجي للعنصر

إذا أردت إزالة الهامش للعنصر من جهة محددة، يمكنك وضع قيمة الهامش الخاصة به تساوي

في المثال التالي قمنا بإزالة الهامش الخارجي الإفتراضي للعنصر

<p>من كل الجهات، و هذا يعني أنه في حال وضع إثنين وراء بعض سيظهران ملتصقان ببعضهما.

مثال

p { margin: 0;} تجربة الكود

في المثال التالي قمنا بإضافة هامش خارجي في أعلى و أسفل العنصر الذي يملك الكلاس

demo بمقدار 20 بيكسل و قمنا بإزالة أي هامش من الجانبين الأيمن و الأيسر.

مثال

.demo { margin: 20px 0;} تجربة الكود

ملاحظة

إذا جعلت قيمة الهامش الخارجي تساوي

0 أو 0% أو 0px إلخ.. فكلها تعني صفر و هنا يفهم المتصفح أنك لا تريد عرض أي هامش.

مفهوم دمج الهوامش الخارجية للعناصر

الهامش الخارجي للعنصر فكرته أن يكون العنصر بعيد عن العنصر الآخر بالمقدار الذي تم وضعه.

الهوامش الخارجية الموجودة بين العناصر من جهة الأعلى و الأسفل يقوم المتصفح بدمج بشكل تلقائي لكي يجعل طول الصفحة أقل و هذا الأمر يسمى Margin Collapse.

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

مثال

.one { margin-bottom: 30px;}.two { margin-top: 30px;} تجربة الكود

توسيط العناصر بواسطة الهامش الخارجي

توسيط العنصر سواء بالنسبة للصفحة أو بالنسبة للعنصر الخارجي الموضوع فيه ممكن في حال كان للعنصر طول و عرض محدد.

توسيط العنصر أفقياً

في المثال التالي قمنا بتحديد عرض العنصر بواسطة الخاصية

width و من بعدها أضفنا له الخاصية margin:auto; لكي يظهر في وسط الصفحة أفقياً.

مثال

div { width: 250px; margin: auto;} تجربة الكود

توسيط العنصر أفقياً و عمودياً

في المثال التالي قمنا بجعل العنصر

<body> يتمدد على كامل حجم الصفحة بواسطة أسلوب العرض Flex و من ثم أضفنا للوسم <div> الخاصية margin:auto; لكي يظهر في وسط الصفحة تماماً أفقياً و عمودياً.

مثال

body { display: flex; min-height: 100vh; align-items: center;}div { margin: auto;} تجربة الكود

ملاحظة

في المثال السابق كان بإمكانك كتابة

display: grid; بدل display: grid; و الحصول على ذات النتيجة.

عرض محتوى الصفحة بأسلوب Flex و Grid أمر مهم جداً و سنشرحه لك بالتفصيل في دروس لاحقة لذا لا تشغل بالك بالكود الذي كتبناه بآخر مثال، يكفي أن تعرف أنه يوجد حيل كثيرة في CSS تسمح لك بعرض المحتوى بالشكل الذي تريده.

مفهوم أساليب العرض

أي عنصر تضيفه في الصفحة تجده يظهر بأسلوب معين، فإما أنه يظهر على السطر بأكمله و لا يظهر شيء آخر بجانبه، و إما أنه يظهر بجانب عناصر أخرى في نفس السطر إذا كان هناك مساحة تسمح بظهوره بجانبها.

في هذا الدرس ستتعرف على أساليب العرض الرئيسية التي تملكها عناصر HTML و كيف يمكنك تغييرها بواسطة خصائص CSS لتلائم تصاميمك.

أساليب عرض العناصر

لتحديد أسلوب العرض نستخدم الخاصية

display و من بعدها نمرر لها قيمة تمثل أسلوب العرض الذي نريد أن يعتمده العنصر.

أساليب العرض الأساسية التي تعتمدها وسوم HTML و التي يمكن تمريرها كقيمة لها هي:

block
لجعل العنصر يظهر على كامل السطر (إن لم تتلاعب بحجمه) و لا يظهر أي شيء آخر بجانبه.
inline-block
لجعل العنصر يظهر كبلوك و لا مانع أن يظهر عنصر آخر بجانبه إن كان هناك متسع له.
inline
لجعل العنصر يظهر بنفس حجم محتواه و هذا الأسلوب في العرض يستخدم بشكل خاص عندما تحتاج إلى تعديل تصميم نص موجود في فقرة أو عنوان.

أساليب ظهور عناصر HTML

فيما يلي أساليب الظهور الإفتراضية لبعض العناصر:

الوسوم
<div>
-
<header>
-
<footer>
-
<aside>
تعتمد أسلوب
block
بشكل إفتراضي لهذا تراها تظهر على سطر منفرد.
الوسمين
<button>
و
<select>
يعتمدان أسلوب
inline-block
بشكل إفتراضي لهذا تجد أنه يمكن أن يظهر بجانب بعض.
الوسوم
<span>
-
<u>
-
<b>
-
<i>
تعتمد أسلوب
inline
بشكل إفتراضي فهي تستخدم لتعديل تصميم على النص الموجود في الفقرات أو العناوين.

معلومة تقنية

العنصر الذي يظهر كبلوك سواء

block أو inline-block يمكن إضافة padding و margin لهم من كل الجهات ( الأعلى، الأسفل، اليمين و اليسار ) و كذلك يمكن تحديد كم سيكون حجمه بالضبط في الصفحة بواسطة الخاصية width و الخاصية height.

العنصر الذي يظهر بأسلوب

inline لا يمكن تحديد حجمه سواء بالطول أو العرض. و في حال إضافة هامش داخلي أو خارجي له من الأعلى و الأسفل ستجد أن المتصفح لا يعطي لها قيمة بمعنى أنه قد يجعل باقي العناصر الموجودة في الصفحة تظهر بشكل متداخل فيها. و بالمناسبة هذا أمر منطقي لأن هذا الأسلوب يُستعمل بالأساس لتطبيق تصميم معين على كلام معين في نص كجعله يظهر بلون آخر، يظهر بشكل مائل إلخ..

في المثال التالي قمنا بجعل الوسم

<button> يعتمد أسلوب block حتى يظهر لوحده على السطر.

مثال

button { display: block;} جرب الكود

في المثال التالي قمنا بجعل الوسم

<div> يعتمد أسلوب inline-block حتى لا يظهر على سطر لوحده.

مثال

div { display: inline-block;} جرب الكود

الظهور الإفتراضي للعناصر الجديدة

أي عنصر جديد تقوم بتعريفه بنفسك يستخدم أسلوب

inline بشكل تلقائي ما لم تقم أنت بالتلاعب بطريقة ظهوره.

في المثال التالي قمنا بإضافة وسم جديد إسمه

<harmash> الذي يعتمد أسلوب inline للظهور في الصفحة.
جعلنا الوسم <harmash> يظهر بلون أحمر و أضفنا له margin و padding و border من كل الجهات.

أثناء تجربة المثال قم بتغيير قيمة الخاصية و

display إلى و inline-block و من ثم إلى و block حتى ترى الفرق.

مثال

harmash { display: inline; color: red; margin: 30px; padding: 30px; border: 1px solid red;} جرب الكود

أساليب إخفاء العناصر

يوجد أسولبين أساسيان لإخفاء العناصر هما:

display: none
هذا الأسلوب يزيل العنصر تماماً من الصفحة و كأنه لم يعد موجود فيها.
visibility: hidden
هذا الأسلوب يخفي العنصر من الصفحة و لكن مكانه يظل محجوز فيها.

في المثال التالي قمنا بإخفاء العنوان تماماً من الصفحة بواسطة الخاصية

display: none.

مثال

h1 { display: none;} جرب الكود

في المثال التالي قمنا بإخفاء العنوان من الصفحة مع حفظ مكانه فيها بواسطة الخاصية

visibility: hidden.

مثال

h1 { visibility: hidden;} جرب الكود

خصائص العرض و الطول

أي عنصر معروض كبلوك سواء

block أو inline-block يمكن تحديد كم هو عرضه و طوله بالضبط في الصفحة.
من فوائد تحديد حجم العنصر أيضاً أنه يجعلك قادر على توسيطه في الصفحة.

خصائص الطول

فيما يلي الخصائص التي تستخدم لتحديد الطول:

height
تستخدم لتحديد الطول الثابت للعنصر.
min-height
تستخدم لتحديد أقل طول للعنصر.
max-height
تستخدم لتحديد أقصى طول للعنصر.

خصائص العرض

فيما يلي الخصائص التي تستخدم لتحديد الطول:

width
تستخدم لتحديد العرض الثابت للعنصر.
min-width
تستخدم لتحديد أقل عرض للعنصر.
max-width
تستخدم لتحديد أقصى عرض للعنصر.

قيم العرض و الطول

فيما يلي القيم التي يمكن وضعها لخصائص الطول و العرض:

auto
لجعل المتصفح يحسب حجم العنصر بشكل تلقائي.
length
نقصد بها وضع رقم بوحدة قياس محددة مثل px، pt، cm،
%
ليمثل الحجم.
initial
لجعل العنصر يعود لحجمه الإفتراضي.
inherit
لجعل العنصر يرث حجمه من العنصر الموجود فيه.

تحديد العرض و الطول

في المثال التالي قمنا بجعل عرض العنصر 50% و طوله 100 بكسل.

مثال

div { height: 100px; width: 50%; background-color: lightblue;} تجربة الكود

في المثال التالي قمنا بجعل عرض العنصر 100% و أبعدناه عن العناصر الموجودة تحته بواسطة الخاصية

margin-bottom.

مثال

button { display: block; width: 100%; padding: 10px; margin-bottom: 10px;} تجربة الكود

في المثال التالي قمنا بجعل عرض الصورة الأقصى هو 500 بكسل و جعلنا عرضها الثابت 100%.
بهذا الأسلوب نحن نقصد أن حجم سيحاول الظهور بأكبر عرض ممكن و لكنه لن يزيد عن 500 بكسل و بالتالي في حال كان عرض الشاشة أقل من 500 بكسل فإنها ستظهر على كامل عرضها.

مثال

img { display: block; width: 100%; max-width: 500px;} تجربة الكود

الحجم و الحدود المائلة

عند تحديد حجم العناصر يمكنك ضمان ظهوره بشكل مربع، مستطيل أو دائرة.

في المثال التالي جعلنا الصورة تظهر بشكل دائري.

مثال

img { display: block; width: 200px; height: 200px; border: 3px solid gray; border-radius: 100%;} تجربة الكود

حساب الهامش و الحدود ضمن الحجم

إفتراضياً أي عنصر تضعه في الصفحة يعتمد أسلوب

content-box في تحديد حجمه و هذا الأسلوب معناه أن طول و عرض العنصر لا يبالي بتاتاً بأي هامش داخلي padding أو حدود border موضوعة حوله.

كمثال عملي، إن قمت بجعل عرض العنصر 200 بكسل و أضفت له هامش داخلي من الجوانب بمقدار 20 بيكسل و أضفت له حدود بمقادر 5 بكسل فإنه سيظهر كالتالي.

عرض العنصر الكلي سيتم حسابه كالتالي: 200 بكسل + 20 بكسل هامش داخلي جهة اليمين + 20 بكسل هامش داخلي جهة اليسار + 5 بكسل حدود جهة اليمين + 5 بكسل حدود اليسار ليصبح إجمالي عرض العنصر 250 بكسل.

ملاحظة

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

حساب الحجم نسبةً للهامش و الحدود

لجعل العنصر يحسب الهامش الداخلي و الحدود كجزء من الحجم الذي نحدده له أضف الخاصية و القيمة

box-sizing: border-box فقط.

بالعودة للمثال السابق لو جعلت العنصر يعتمد أسلوب

border-box لتم جعل إجمالي عرض العنصر 200 بكسل و حجم محتواه سيصبح 150 بكسل كالتالي.

إذاً الخاصية

box-sizing: border-box جعلت حجم العنصر بالضبط كما نريده و قامت بشكل تلقائي بتصغير المساحة المخصصة لمحتواه و المحافظة على مساحة الهامش و الحدود المحيطة به.

المثال التالي يوضح الفرق بين أسلوب

content-box و border-box حيث أن العنصر الذي يعتمد على border-box لتحديد حجمه سيظهر بحجم أصغر لأن مساحة الهامش الدخلي و الحدود الموضوعة له تم حسابها ضمن مساحة حجمه.

مثال

div { width: 200px; padding: 20px; border: 5px solid gray;} .border-box { box-sizing: border-box;} تجربة الكود

ضبط أحجام العناصر على جميع المتصفحات

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

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

border-box.

فيما يلي الكود الذي يتم استخدامه في بداية أي تصميم حتى يتم إزالة الهوامش الإفتراضية منه و حساب الهوامش الداخلية و الحدود مع حجمه.

* { margin: 0; padding: 0; box-sizing: border-box;}

margin: 0;
تزيل أي هامش خارجي يعطيه المتصفح للوسم بشكل إفتراضي.
padding: 0;
تزيل أي هامش داخلي يعطيه المتصفح للوسم بشكل إفتراضي.
box-sizing: border-box;
لجعل الهامش الداخلي و الحدود يتم حسابهما مع طول و عرض العنصر.

في المثال التالي قمنا بإزالة الهوامش الإفتراضية لجميع العناصر و جعلناها تحسب الحدود و الهوامش الداخلية ضمن حجمها.

بعدها قمنا بإضافة هامش للعناصر التي وضعناها في الصفحة بالمقدار الذي نريده.

مثال

* { margin: 0; padding: 0; box-sizing: border-box;} h2, p { padding: 10px 15px;} تجربة الكود

مفهوم الحدود الخارجية

الحدود الخارجية ( Outline ) هي خطوط يمكن إظهارها حول العناصر من كل الجهات مثل الحدود العادية ( Border ) و لكنها تستخدم لأهداف أخرى هي إظهار حدود مؤقتة حول العنصر الذي يقف عنده المستخدم مثل الزر الذي نقر عليه أو مربع النص الذي يكتب فيه و كذلك يمكن استخدامها لاكتشاف أخطاء القياسات الموضوعة للعناصر.

الحدود الخارجية تظهر حول الحدود التي يمكن إضافتها للعنصر.

Outline apear arround border

في حال كانت زواية حدود العنصر مائلة فإن الحدود الخارجية ستميل مثلها.

Rounded border with rounded outline

يمكن إضافة هامش بين حدود العنصر و حدوده الخارجية ستميل م.

Outline offset 5px

خصائص الحدود الداخلية و الخارجية

التعامل مع الحدود الخارجية يشبه كثيراً التعامل مع الحدود العادية و القيم التي يمكن وضعها لخصائصهما هي نفسها و لكن الفرق بينهما أن الحدود الخارجية فيها خيارات أقل.

على سبيل المثال، الحدود العادية يمكن تحديد حجم و لون و شكل كل جهة فيها على حدا و هذا غير ممكن في الحدود الخارجية حيث يمكن تحديد شكل الحدود و حجمها و لونها من كل الجهات بذات القدر.

ملاحظة

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

تحديد شكل الحدود الخارجية العنصر

لتحديد شكل الحدود الخارجية نضيف الخاصية

outline-style و من ثم نمرر لها إحدى القيم التالية:

dotted
لإظهار الحدود الخارجية كنقط.
dashed
لإظهار الحدود الخارجية كخط متقطع.
solid
لإظهار الحدود الخارجية كخط.
double
لإظهار الحدود الخارجية كخط مزدوج.
groove
لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأنها أخدود.
ridge
لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأنها قمة.
inset
لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأن عليها ضوء من الجهة السفلية ناحية اليمين.
outset
لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأن عليها ضوء من الجهة العلوية ناحية اليسار.
none
لإزالة الحدود الخارجية و هي نفسها outline-width: 0;.

في المثال التالي قمنا بتعريف كلاسات CSS عند إضافتها للعناصر فإنها تظهر حدود خارجية لها شكل محدد حولها.
لتبسيط الشرح جعلنا أسماء الكلاسات مثل أسماء أشكال الحدود الخارجية التي تظهرها.

مثال

.dotted { outline-style: dotted;}.dashed { outline-style: dashed;}.solid { outline-style: solid;}.double { outline-style: double;}.groove { outline-style: groove;}.ridge { outline-style: ridge;}.inset { outline-style: inset;}.outset { outline-style: outset;}.none { outline-style: none;} جرب الكود

تحديد سمك الحدود الخارجية

لتحديد سمك الحدود الخارجية نضيف الخاصية

outline-width و من ثم نمرر لها إحدى القيم التالية:

thin
لجعل الحدود الخارجية رفيعة السمك.
medium
لجعل الحدود الخارجية متوسطة السمك.
thick
لجعل الحدود الخارجية عريضة السمك.
رقم بالبكسل
px
أو بوحدة قياس أخرى ليمثل سمك الحدود الخارجية.

في المثال التالي قمنا بتعريف كلاسات CSS عند إضافتها للعناصر فإنها تظهر حدود خارجية أحجامها مختلفة.

مثال

.one { outline-style: solid; outline-width: 2px;}.two { outline-style: solid; outline-width: medium;}.three { outline-style: solid; outline-width: thick;} جرب الكود

تحديد لون الحدود الخارجية

لتلوين حدود العنصر الخارجية نستخدم الخاصية

outline-color و اللون نضعه لها كقيمة من خلال إسمه ( Color Name ) أو بتحديد درجته بأسلوب HEX أو RGB أو RGBA أو HSL أو HSLA كما تعلمنا في درس الألوان.

ملاحظة

إن لم يكن شكل الحدود الخارجية

outline-style محدداً فإن لون الحدود outline-color لن يظهر لأنه منطقياً لا يمكنك تلوين الحدود و هي بالأساس غير موجودة.

فيما يلي قمنا بتلوين الحدود الخارجية للعناصر بـألوان مختلفة.

مثال

.one { outline-style: solid; outline-color: red;}.two { outline-style: solid; outline-color: green;}.three { outline-style: solid; outline-color: blue;} جرب الكود

تعريف كل خصائص الحدود الخارجية بسطر واحد

لتحديد سمك، شكل و لون حدود العنصر الخارجية بشكل مختصر أكتب

outline و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

outline: [outline-width] [outline-style] [outline-color];

في المثال التالي قمنا بإظهار حدود خارجية سمكها 5 بكسل على شكل خط لونه أحمر.

مثال

.demo { outline: 5px solid red;} جرب الكود

إبعاد الحدود الخارجية عن الحدود الأصلية للعنصر

لإبعاد الحدود الخارجية للعنصر عن حدوده الأساسية نضيف الخاصية

outline-offset و من ثم نمرر لها رقم بالبكسل أو بوحدة قياس أخرى ليمثّل حجم الفراغ بينهما.

في المثال التالي قمنا بإبعاد حدود العنصر الأساسية عن حدوده الخارجية بمقدار 5 بكسل.

مثال

.demo { border: 2px solid black; outline: 2px solid cadetblue; outline-offset: 5px;} جرب الكود

في المثال التالي قمنا بإبعاد حدود العنصر الأساسية عن محتواه بمقدار 10 بكسل، و قمنا بإعداد حدوده الخارجية عن حدوده الأساسية بمقدار 5 بكسل.

مثال

.demo { border: 2px solid black; outline: 2px solid cadetblue; outline-offset: 5px; padding: 10px;} جرب الكود

طريقة معرفة العنصر الذي يسبب مشكلة في حجم الصفحة

حين يصبح محتوى الصفحة كبيراً أحياناً تبدأ بملاحظة أنه يظهر شريط تمرير ( Scrollbar ) لسبب غير معروف و هذا الأمر يجعل الصفحة تظهر بشكل سيئ أمام المستخدم.

حتى نعرف من هو العنصر الذي يسبب المشكلة نقوم بإظهار الحدود الخارجية لجميع العناصر و من ثم نراقب من هو العنصر الذي يتطلب مساحة زيادة.

* { outline: 1px solid red;}

كمثال عملي لاحظ أن الصفحة التالية يظهر فيها شريط تمرير في الأسفل مع أنه لا يوجد أي داعي لأن يظهر.

جرب الكود

لمعرفة سبب ظهور هذا الشريط نحتاج أن نعرف الحجم الفعلي للعناصر لكي نعرف من هو العنصر الذي يحتاج مساحة زيادة و الذي بسببه ظهر هذا الشريط. لذلك نقوم بإظهار حدود خارجية لجميع عناصر الصفحة كالتالي.

الآن نقوم بإزاحة شريط التمرير فيظهر لنا العنصر الذي يسبب هذه المشكلة بكل سهولة.

جرب الكود

خصائص النصوص

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

TEXT FORMATTING

This text is styled well to look in this way. Title is colored and aligned to the center. Paragraph is justified. Everyting is apear from left to right and use a font called arial. After finishing this tutorial you should learn javascript.

تحديد لون النص

لتلوين نص العنصر نستخدم الخاصية

color و اللون نضعه لها كقيمة من خلال إسمه ( Color Name ) أو بتحديد درجته بأسلوب HEX أو RGB أو RGBA أو HSL أو HSLA كما تعلمنا في درس الألوان.

في المثال التالي قمنا بجعل لون نص أي عنصر في الصفحة رمادي و جعلنا عنوانها يظهر بلون أزرق.

مثال

body { color: gray;} h1 { color: cadetblue;} جرب الكود

في المثال التالي قمنا بتحديد لون نص العنصر بواسطة الخاصية

color و لون خلفيته بواسطة الخاصية background-color.

مثال

button { color: white; background-color: #0d6efd;} جرب الكود

تحديد إتجاه النص

لتحديد إتجاه النص أفقياً نستخدم الخاصية

text-align و نمرر لها إحدى القيم التالية.

القيمة	معناها
left	لجعل النص يظهر من الجهة اليسرى.
right	لجعل النص يظهر من الجهة اليمنى.
center	لجعل النص يظهر في الوسط.
justify	إذا كان النص يتألف من أكثر من سطر فإنها تباعد بين الكلمات بشكل تلقائي لجعل الأسطر تظهر كأنها بنفس الطول.

في المثال التالي قمنا ببناء كلاسات تستخدم لتحديد جهة ظهور النص.

مثال

.left { text-align: left;}.right { text-align: right;}.center { text-align: center;} جرب الكود

في المثال التالي قمنا بجعل كلمات النص تتباعد بشكل تلقائي حتى تظهر على الأسطر الموضوعة فيه بنفس الطول.

مثال

div { text-align: justify;} جرب الكود

تحديد إتجاه النص في السطر الأخير

لتحديد إتجاه النص في السطر الأخير نستخدم الخاصية

text-align-last و نمرر لها إحدى القيم السابقة left، right، center و justify و التي تعمل معها بذات الطريقة.

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

مثال

div { text-align: justify; text-align-last: justify;} جرب الكود

تحديد إتجاه الكتابة

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

لتحديد إتجاه الكتابة نستخدم الخاصية

text-direction و نمرر لها إحدى القيم التالية.

القيمة	معناها
ltr	لتحديد أن إتجاه الكتابة هو من اليسار إلى اليمين.
rtl	لتحديد أن إتجاه الكتابة هو من اليمين إلى اليسار.
initial	لجعل إتجاه الكتابة يعود لجهته الأساسية.
inherit	لجعل إتجاه الكتابة يرث إتجاه كتابة الوسم الموجود فيه.

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

مثال

.ar { direction: rtl; text-align: right;} جرب الكود

تحديد المسافات بين الأسطر و الكلمات

يمكنك تحديد المسافات بين أسطر النص، الكلمات الموجودة في كل سطر و المسافات بين الأحرف حتى تظهر بالشكل الذي تريده.

تحديد إرتفاع النص

لتحديد إرتفاع أسطر النص نستخدم الخاصية

line-height و نضع لها رقم بوحدة قياس معينة كقيمة مثل px، pt، cm ليمثل إرتفاع الأسطر. هنا كلما زادت القيمة كلما تباعدت اسطر النص عن بعضها.

في المثال التالي قمنا بجعل إرتفاع أسطر النص 30 بكسل.

مثال

p { line-height: 30px;} جرب الكود

توسيط النص عامودياً و أفقياً

في حال أردت عرض نص يـتألف من سطر واحد في الوسط تماماً أفقياً و عمودياً يمكنك استخدام الخاصية

text-align: center و من ثم تقوم بتحديد طول العنصر و تجعل إرتفاعه السطر مساوي لطوله.

في المثال التالي قمنا بتوسيط نص يـتألف من سطر واحد موضوع في صندوق له طول محدد.

مثال

.centered { height: 100px; line-height: 100px; text-align: center;} جرب الكود

وضع مسافة في بداية النص

لوضع مسافة بمقدار محدد في بداية السطر الأول في النص نستخدم الخاصية

text-indent و نضع لها رقم بوحدة قياس معينة كقيمة مثل px، pt، cm ليمثل حجم المسافة الفارغة التي سيبدأ بها النص قبل عرض الكلام الموجود فيه.

في المثال التالي قمنا بإضافة مسافة في بداية النص بمقدار 50 بكسل.

مثال

p { text-indent: 50px;} جرب الكود

تحديد المسافات بين الأحرف

لتحديد حجم المسافة بين أحرف النص نستخدم الخاصية

letter-spacing و نضع لها رقم بوحدة قياس معينة كقيمة مثل px، pt، cm ليمثل مقدار المسافات بين الأحرف.

في حال وضعت لها قيمة أكبر من صفر فإن الأحرف سيتم إبعادها بالنسبة التي حددتها. أما إن وضعت قيمة أصغر من صفر فإنه سيتم تقريب الأحرف من بعضها بالنسبة التي حددتها.

في المثال التالي قمنا بتعريف كلاس يبعد أحرف النص عن بعضها بنسبة 5 بكسل و كلاس يقرّب أحرف النص من بعضها بنسبة 2 بكسل.

مثال

.far-chars { letter-spacing: 5px;}.close-chars { letter-spacing: -2px;} جرب الكود

تحديد المسافات بين الكلمات

لتحديد حجم المسافات بين كلمات النص نستخدم الخاصية

word-spacing و نضع لها رقم بوحدة قياس معينة كقيمة مثل px، pt، cm ليمثل مقدار المسافات بين الكلمات.

في حال وضعت لها قيمة أكبر من صفر فإن الكلمات سيتم إبعادها بالنسبة التي حددتها. أما إن وضعت قيمة أصغر من صفر فإنه سيتم تقريب الكلمات من بعضها بالنسبة التي حددتها.

في المثال التالي قمنا بتعريف كلاس يبعد كلمات النص عن بعضها بنسبة 8 بكسل و كلاس يقرّب كلمات النص من بعضها بنسبة 2 بكسل.

مثال

.far-words { word-spacing: 8px;}.close-words { word-spacing: -2px;} جرب الكود

تحديد طريقة التعامل مع المسافات الفارغة

يمكنك تحديد طريقة عرض المسافات الفارغة الموجودة في النص باستخدام الخاصية

white-space و من ثم تمرير إحدى القيم التالية لها.

القيمة	معناها
normal	المسافات الفارغة الموضوعة وراء بعضها يتم دمجها كمسافة واحدة فقط، و هذه القيمة الإفتراضية.
nowrap	المسافات الفارغة الموضوعة وراء بعضها يتم دمجها كمسافة واحدة فقط، و تعرض المحتوى كله على سطر واحد و تنتقل لسطر آخر فقط في حال وجود الوسم <br>.
pre	المسافات الفارغة يتم إبقاءها كما هي موضوعة بالضبط في النص كما هو الحال تماماً في الوسم <pre>.
pre-line	المسافات الفارغة الموضوعة وراء بعضها يتم دمجها كمسافة واحدة فقط، و النص يتم وضعه على أكثر من سطر إن تطلّب ذلك أو في حال استخدام الوسم <br>.
pre-wrap	المسافات الفارغة يتم إبقاءها كما هي موضوعة بالضبط في النص، و النص يتم وضعه على أكثر من سطر إن تطلّب ذلك أو في حال استخدام الوسم <br>.
initial	تعيد النص كما كان بالأساس.
inherit	لجعل النص يرث طريقة ظهور الوسم الموضوع فيه.

المثال التالي يوضح لك كيف يتعامل النص مع المسافات الفارغة بحسب القيمة التي نمررها للخاصية

white-space.

مثال

.normal { white-space: normal;}.nowrap { white-space: nowrap;}.pre { white-space: pre;}.pre-line { white-space: pre-line;}.pre-wrap { white-space: pre-wrap;} جرب الكود

تحديد محاذاة العناصر عمودياً

في حال كان النص يتضمن جزئيات بحاجة للظهور بشكل أعلى أو منخفض فهنا يمكنك تحديد محاذاة هذه الجزئيات باستخدام الخاصية

vertical-align و من ثم تمرر لها إحدى القيم التالية.

القيمة	معناها
baseline	لجعل الوسم الموضوع في النص يظهر بمحاذاة أحرف السطر.
text-top	لجعل الوسم الموضوع في النص يظهر بمحاذاة أحرف السطر من الأعلى.
text-bottom	لجعل الوسم الموضوع في النص يظهر بمحاذاة أحرف السطر من الأسفل.
bottom	لجعل الوسم الموضوع في النص يظهر بمحاذاة أدنى شيء موضوع في السطر.
top	لجعل الوسم الموضوع في النص يظهر بمحاذاة أعلى شيء موضوع في السطر.
middle	لجعل الوسم الموضوع في النص يظهر عمودياً في منتصف السطر الموضوع فيه.
sub	لجعل الوسم الموضوع في النص يظهر بمحاذاة أدنى السطر الموضوع فيه.
sup	لجعل الوسم الموضوع في النص يظهر بمحاذاة أعلى السطر الموضوع فيه.
initial	لجعل الوسم الموضوع في النص يعود لمحاذاته الأساسية.
inherit	لجعل الوسم الموضوع في النص يرث محاذاة الوسم الموجود فيه.
length	نقصد بها وضع رقم بوحدة قياس محددة مثل px، pt، cm يمثل مقدار محاذاة الوسم الموضوع في النص عمودياً نسبةً لأحرف النص.
%	نقصد بها وضع رقم بالمئة يمثل مقدار محاذاة الوسم الموضوع في النص نسبةً لارتفاع النص الذي يتحدد بواسطة الخاصية line-height.

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

مثال

.baseline { vertical-align: baseline;}.text-top { vertical-align: text-top;}.text-bottom { vertical-align: text-bottom;}.bottom { vertical-align: bottom;}.top { vertical-align: top;}.middle { vertical-align: middle;}.sub { vertical-align: sub;}.sup { vertical-align: sup;}.length-positive { vertical-align: 5px;}.length-negative { vertical-align: -5px;}.percentage-positive { vertical-align: 10%;}.percentage-negative { vertical-align: -10%;} جرب الكود

تحويل أحرف النص

يمكنك تحويل أحرف النص الأجنبية لأحرف صغيرة، أحرف كبيرة، أو تحويل الأحرف الأولى من الكلمات فقط لأحرف كبيرة باستخدام الخاصية

text-transform و من ثم تمرر لها إحدى القيم التالية.

القيمة	معناها
uppercase	تحول أحرف النص لأحرف كبيرة ( Capital Letters ).
lowercase	تحول أحرف النص لأحرف صغيرة ( Small Letters ).
capitalize	تحول الأحرف الأولى في الكلمات فقط لأحرف كبيرة.
none	لا تفعل أي شيء للأحرف، و هذه القيمة الإفتراضية.

المثال التالي يوضح لك كيف تتحول أحرف النص بحسب القيمة التي نمررها للخاصية

text-transform.

مثال

.uppercase { text-transform: uppercase;}.lowercase { text-transform: lowercase;}.capitalize { text-transform: capitalize;} جرب الكود

زخرفة النص

زخرفة النص يقصد بها إظهار خط تحت الكلام، فوق الكلام، أو على الكلام ليبدو كأنه محذوف، إظهار خط تحت الروابط الموضوعة في النص و غيرها من الأمور التي يمكنك فعلها.

إظهار خط

يمكنك إظهار خط تحت، فوق أو على النص باستخدام الخاصية

text-decoration-line و من ثم تمرر لها إحدى القيم التالية.

القيمة	معناها
overline	تظهر خط فوق النص.
underline	تظهر خط تحت النص.
line-through	تظهر خط على النص.
none	لإزالة أي خط موضع للنص.

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

مثال

.overline { text-decoration-line: overline;}.underline { text-decoration-line: underline;}.line-through { text-decoration-line: line-through;}.over-and-under-line { text-decoration-line: overline underline;} جرب الكود

ملاحظة

يفضّل عدم إظهار خط تحت الكلام إن لم يكن الكلام عبارة عن رابط.

تلوين الخط الموضوع في الكلام

يمكنك تلوين الخط سواء كان موضوع فوق، تحت أو على النص باستخدام الخاصية

text-decoration-color و من ثم تمرر لها اللون.

في المثال التالي قمنا بتلوين جميع الخطوط التي أظهرناها في النص.

مثال

.overline { text-decoration-line: overline; text-decoration-color: pruple;}.underline { text-decoration-line: underline; text-decoration-color: red;}.line-through { text-decoration-line: line-through; text-decoration-color: blue;}.over-and-under-line { text-decoration-line: overline underline; text-decoration-color: gray;} جرب الكود

تحديد شكل الخط

الخط الذي يمكن إظهاره في النص يمكن تحديد شكله باستخدام الخاصية

text-decoration-style و من ثم تمرر لها إحدى القيم التالية.

القيمة	معناها
solid	تظهر خط مستقيم.
double	تظهر خط مزدوج.
dotted	تظهر خط منقّط.
dashed	تظهر خط متقطع.
wavy	تظهر خط يشبه الموج.
inital	تعيد شكل الخط لشكله الأساسي.
inherit	ترث شكل الخط من العنصر الموضوع فيه.

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

مثال

.solid { text-decoration-style: solid;}.double { text-decoration-style: double;}.dotted { text-decoration-style: dotted;}.dashed { text-decoration-style: dashed;}.wavy { text-decoration-style: wavy;} جرب الكود

تحديد سمك الخط الموضوع في الكلام

يمكنك تحديد سمك الخط سواء كان موضوع فوق، تحت أو على النص باستخدام الخاصية

text-decoration-thikness و من ثم تمرر لها رقم بوحدة قياس محددة يمثل السمك.

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

مثال

h3 { text-decoration-thickness: 5px;} جرب الكود

تحديد كل خصائص الخط بسطر واحد

لتحديد شكل، لون و سمك الخط الموضوع للنص بشكل مختصر أكتب

text-decoration و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

text-decoration: [text-decoration-line] [text-decoration-color] [text-decoration-style] [text-decoration-thickness];

في المثال التالي قمنا بعرض خط أسفل النص، لونه أحمر، نوعه متموّج، و سمكه 0.8 بكسل.

مثال

.wrong { text-decoration: underline red wavy 0.8px;} جرب الكود

مفهوم الخطوط

أي نص يتم عرضه في الصفحة سواء كان عنوان، فقرة، مربع نص، زر، رابط فإنه يجب تحديد نوع و حجم الخط ( Font ) الخاص به حتى يظهر بشكل واضح للمستخدم و مناسب لتصميم الصفحة بشكل عام.

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

Fonts are important Fonts are important Fonts are important

في هذا الدرس ستتعلم كيف تحدد نوع و حجم الخط، كيف تستخدم خطوط جوجل، كيف تضع خطوط إحتياطية ليستعملها المتصفح إن لم يجد الخطوط الأساسية الموضوعة.

تحديد نوع الخط

لتحديد نوع الخط نستخدم الخاصية

font-family و نضع إسم الخط كقيمة.

ملاحظة

إسم الخط الذي تضعه كقيمة قد لا يكون موجوداً في جهاز المستخدم أو حتى في جهازك أنت. و في هذه الحالة فإن المتصفح يستخدم أي خط إفتراضي متاح فيه.

في المثال التالي قمنا بجعل نص العنوان و الفقرة يظهران بالخط Tahoma.
تذكر: إن لم يكن هذا الخط متاح في جهازك فإن المتصفح سيستخدم الخط الإفتراضي.

مثال

h1, p { font-family: Tahoma;} جرب الكود

قواعد كتابة إسم الخط

يجب اتباع الأساليب التالية عندك كتابة أسماء الخطوط:

إذا كان يتألف من كلمة واحدة، يمكنك وضعه كما هو.
مثال:

font-family: Arial;

إذا كان يتألف من أكثر من كلمة و بينهما شرطة، يمكنك وضعه كما هو.
مثال:

font-family: sans-serif;

إذا كان يتألف من أكثر من كلمة و بينهما مسافة فارغة، يجب وضعه بين

' ' أو " ".
مثال: font-family: "Courier New";

إضافة خطوط إحتياطية

بما أننا لا نضمن أن يعمل نوع الخط على جميع أجهزة المستخدمين يجب أن نضع عدة خطوط أخرى مشابهة له ليتم استخدام أحدها في حال عدم وجود الخط الأساسي في جهاز المستخدم.

CSS تتيح لك وضع إسم أكثر من خط كقيمة للخاصية

font-family مع وضع فاصلة بينهم. و عندها يقوم المتصفح بمحاولة استخدام الخط الأول، إن لم يجده متوفراً في جهاز المستخدم سيستخدم الخط التالي الموضوع بعده و هكذا.

هذا الأسلوب في تحديد الخطوط يسمى وضع خطوط إحتياطية ( Fallback Fonts ).

في المثال التالي أول خط سيجرب المتصفح استخدامه هو Tahoma، إن لم يجده سيجرب الخط Verdana الموضوع بعده، إن لم يجده سيجرب الخط sans-serif الموضوع بعده. في حال فشل في استخدام جميع الخطوط فإنه سيستخدم الخط الإفتراضي في المتصفح.

مثال

h1, p { font-family: Tahoma, Verdana, sans-serif;} جرب الكود

خطوط متشابهة في الشكل

1- الخطوط التالية تنتدرج تحت مسمى serif:

font-family: "Times New Roman", Times, serif;font-family: Georgia, serif;font-family: Garamond, serif;

2- الخطوط التالية تنتدرج تحت مسمى sans-serif:

font-family: Arial, Helvetica, sans-seriffont-family: Tahoma, Verdana, sans-serif;font-family: "Trebuchet MS", Helvetica, sans-serif;font-family: Geneva, Verdana, sans-serif;

3- الخطوط التالية تنتدرج تحت مسمى monospace:

font-family: "Courier New", Courier, monospace;

4- الخطوط التالية تنتدرج تحت مسمى cursive:

font-family: "Brush Script MT", cursive;

5- الخطوط التالية تنتدرج تحت مسمى fantasy:

font-family: Copperplate, Papyrus, fantasy;

خصائص الخطوط

مهما كان نوع الخط المستخدم فإنك تستطيع تطبيق الخصائص التالية عليه.

إمالة الخط

لتحديد ما إن كان الخط سيظهر بشكل مائل أو عادي يمكنك إضافة الخاصية

font-style له و تمرير إحدى القيم التالية:

القيمة	معناها
italic	لجعل النص يظهر بشكل مائل.
normal	لجعل النص يظهر بشكل عادي.

في المثال التالي قمنا بجعل النص يظهر بشكل مائل.

مثال

.italic { font-style: italic;} جرب الكود

تعريض الخط

لتحديد ما إن كان الخط سيظهر بشكل عريض أو عادي يمكنك إضافة الخاصية

font-weight له و تمرير إحدى القيم التالية:

القيمة	معناها
bold	لجعل النص يظهر بشكل عريض.
normal	لجعل النص يظهر بشكل عادي.
<number>	و هنا نقصد وضع رقم يحدد درجة عرض الخط، فمثلاً حجم الخط normal يمكن كتاتبه 400 و حجم الخط bold يمكن كتابته 700. هذا الأمر سيمر معك حين نعلمك طريقة استخدام خطوط جوجل.

القيمة

معناها

bold

لجعل النص يظهر بشكل عريض.

normal

لجعل النص يظهر بشكل عادي.

و هنا نقصد وضع رقم يحدد درجة عرض الخط، فمثلاً حجم الخط

normal

يمكن كتاتبه

400

و حجم الخط

bold

يمكن كتابته 700.
هذا الأمر سيمر معك حين نعلمك طريقة استخدام خطوط جوجل.

في المثال التالي قمنا بجعل النص يظهر بشكل عريض.

مثال

.thick { font-weight: bold;} جرب الكود

تغيير حجم الأحرف الصغيرة

النص الذي يحتوي أحرف أجنبية مثل الأحرف الإنجليزية التي يمكن كتابتها بشكل كبير ( Capital Letters ) و بشكل صغير ( Small Letters ) يمكن جعل أحرفها الصغيرة تظهر بشكلها الكبير و لكن بحجم صغير متباين عن حجم الأحرف الكبيرة من خلال إضافة الخاصية

font-variant له و تمرير إحدى القيم التالية:

القيمة	معناها
small-caps	لجعل الأحرف الصغيرة تظهر كالأحرف الكبيرة و لكن بحجم أصغر.
normal	لجعل النص يظهر بشكل عادي.

في المثال التالي قمنا بجعل الأحرف الصغير تظهر كأحرف كبيرة و لكن بحجم أصغر.

مثال

p { font-variant: small-caps;} جرب الكود

تحديد حجم الخط

لتحديد حجم الخط نستخدم الخاصية

font-size و نضع رقم بوحدة قياس معينة ليحدد حجم الخط.

الجدول التالي يوضح الفرق بين وحدات القياس التي يمكنك استخدامها لتحديد أحجام الخطوط.

الوحدة	معناها
px	لجعل حجم الخط ثابت و لا يتأثر بإعدادات حجم الخط الموضوعة في المتصفح.
em	لجعل حجم الخط يتغير نسبةً لحجم الخط الموضوع في العنصر الأب.
rem	لجعل حجم الخط يتغير نسبةً لحجم الخط الموضوع في أعلى عنصر في الصفحة و الذي هو العنصر <html>.
%	لجعل حجم الخط يتحدد بشكل مئوي و بالتالي يتغير نسبةً لحجم العنصر الأب الموضوع فيه.
vw	إذا كان النص سيُعرض على كامل عرض الشاشة فيمكن استخدام هذه الوحدة لتحديد حجم الخط نسبةً لعرضها.
vh	إذا كان النص سيُعرض على كامل طول الشاشة فيمكن استخدام هذه الوحدة لتحديد حجم الخط نسبةً لطولها.

ملاحظة

حجم الخط الإفتراضي للنصوص العادية التي يتم وضعها في الفقرات هو

16px و هذا يساوي 1em أيضاً.

الفرق بين حجم الخط الثابت و المتغير

حجم الخط الثابت ( Absolute ) يقصد به أنه لا يتغيير إذا قام المستخدم بتغييره من إعدادات المتصفح أو قام باستخدام جهاز حجم شاشته مختلف.

حجم الخط المتغير ( Relative ) هو الذي يتغير نسبةً للحجم الذي حدده المستخدم في إعدادات المتصفح أو نسبةً لحجم العنصر الأب أو نسبةً لحجم الشاشة نفسها.

تحديد الحجم بالوحدة px

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة

px.

مثال

h1 { font-size: 36px;}h2 { font-size: 24px;}p { font-size: 14px;} جرب الكود

تحديد الحجم بالوحدة em

الوحدة

em تحول نسبتها إلى px نسبةً لحجم الخط الموضوع في المتصفح، إفتراضياً حجم الخط في المتصفح هو 16px و بالتالي 1em = 16px.

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة

em.

مثال

h1 { font-size: 2.5em; /* 2.5em x 16 = 40px */}h2 { font-size: 1.5em; /* 1.5em x 16 = 24px */}p { font-size: 0.875; /* 1.5em x 16 = 24px */} جرب الكود

تحديد الحجم بالوحدة rem

الوحدة

rem تحول نسبتها إلى px نسبةً لحجم الخط الموضوع في الوسم <html> و بالتالي إذا وضعت حجم خطه 16px فإن 1rem = 16px.

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة

rem.

مثال

html { font-size: 16px;}h1 { font-size: 2.5rem; /* 2.5rem x 16 = 40px */}h2 { font-size: 1.5rem; /* 1.5rem x 16 = 24px */}p { font-size: 0.875rem; /* 1.5rem x 16 = 24px */} جرب الكود

تحديد الحجم بالوحدة %

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة

مثال

body { font-size: 16px;} h1 { font-size: 250%; /* 250% / 16 = 40px */}h2 { font-size: 150%; /* 150% / 16 = 24px */}p { font-size: 87.5%; /* 87.5% / 16 = 14px */} جرب الكود

تحديد الحجم بالوحدة vw

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة

vw.

مثال

h1 { font-size: 10vw; /* أي 10% بالنسبة لعرض الشاشة */}h2 { font-size: 7vw; /* أي 7% بالنسبة لعرض الشاشة */}p { font-size: 3.5vw; /* أي 3.5% بالنسبة لعرض الشاشة */} جرب الكود

تحديد الحجم بالوحدة vh

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة

vh.

مثال

h1 { font-size: 10vw; /* أي 10% بالنسبة لطول الشاشة */}h2 { font-size: 7vw; /* أي 7% بالنسبة لطول الشاشة */}p { font-size: 3.5vw; /* أي 3.5% بالنسبة لطول الشاشة */} جرب الكود

تعريف كل خصائص الخط بسطر واحد

جميع خصائص الخط يمكنك تحديدها للعنصر دفعة واحدة من خلال وضع الخاصية

font و تمرير خصائص القيم التالية لها بالترتيب:

font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];

ملاحظة

عند تحديد خصائص الخط بشكل مختصر يمكنك عدم ذكرها كلها إن لم ترد تحديدها و لكنك مجبر على تحديد حجم الخط

font-size و نوعه font-family لأنها خصائص إجبارية و ليست إختيارية كباقي الخصائص.

في المثال التالي قمنا بإضافة كل خصائص الخط بشكل مختصر.

مثال

h1 { font: small-caps bold 40px/1 cursive;} p { font: italic small-caps bold 16px/2 cursive;} جرب الكود

استخدام خطوط جوجل

هناك أنواع خطوط عديدة تكون موجودة في أغلب أجهزة المستخدمين مثل

arial و serif و غيرهما تستطيع استخدامها إن أردت و لكن لا ينصح باستخدام هذه الخطوط لأنها ليست جميلة مقارنةً بأنواع الخطوط المجانية الرائعة التي يمكنك تحميلها جوجل.

معظم المواقع تستخدم خطوط جوجل سواء كانت مواقع أجنبية أو عربية و بالطبع في تصاميمك التي تبنيها في المستقبل ننصحك أيضاً باستخدامها.

تعلم استخدام خطوط جوجل

ما هو تأثير الظل

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

CSS Text Shadow Effect CSS Text Shadow Effect CSS Box Shadow Effect CSS Box Shadow Effect

معلومة تقنية

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

إضافة ظل للنص

لإضافة ظل حول النص نستخدم الخاصية

text-shadow و نمرر لها القيم الخاصة بالظل كإحداثيات ظهوره، لونه و حجم ضبابيته.

ملاحظة

إفتراضياً، لون الظل الذي يتم وضعه للنص هو لون النص نفسه و بالتالي فإن كان لون النص أسود و أضفت له ظل بدون أن تحدد لونه فإن الظل سيظهر بلون أسود أيضاً.

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

مثال

h1 { text-shadow: 2px 2px lightgray;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Text Shadow Effect جرب الكود

في المثال التالي، قمنا بإضافة ظل للنص و جعلناه يبتعد عنه بمقدار 2 بكسل من ناحية اليسار و 2 بكسل من ناحية الأعلى و جعلناه ضبابياً بنسبة 5 بكسل و جعلناه يظهر بلون أزرق.

مثال

h1 { text-shadow: 2px 2px 5px blue;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Text Shadow Effect جرب الكود

في المثال التالي قمنا بإضافة ظل للنص لونه أزرق سماوي إحداثياته صفر من ناحية اليسار و صفر من ناحية الأعلى لكي يكون ملاصق له، و جعلناه ضبابياً بنسبة 3 بكسل حتى يظهر و كأنه مضيئ.

معلومة: هذا الأسلوب في وضع الظل يسمى Neon Effect.

مثال

h1 { text-shadow: 0 0 3px cyan;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Text Shadow Effect جرب الكود

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

مثال

h1 { color: white; text-shadow: 0 0 5px black;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Text Shadow Effect جرب الكود

إضافة أكثر من ظل للنص

لوضع أكثر من ظل للنص، قم بوضع فاصلة بين كل ظلّين تقوم بوضعهما فقط.

ملاحظة

في حال وضع أكثر من ظل فإن الظل الذي تضعه في الأول يظهر فوق الظل الذي تضعه بعده و هذا يعني أنه سيظهر بشكل بارز أكثر.

في المثال التالي أضفنا ظل للنص لونه أزرق و تحته وضعنا ظل أحمر حجمه أصغر.
هنا الظل الأحمر سيظهر بشكل خفيف لأن طبقة الظل الأزرق موضوعة فوقه.

مثال

h1 { text-shadow: 0 0 15px blue, 0 0 5px red;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Multiple Text Shadow Effect جرب الكود

في المثال التالي أضفنا ظل للنص لونه أحمر و تحته وضعنا ظل أزرق حجمه أكبر.
هنا الظل الأحمر سيظهر بشكل قوي لأن طبقة الظل الأحمر موضوعة فوقة طبقة الظل الأزرق المحيطة به.

مثال

h1 { text-shadow: 0 0 5px red, 0 0 15px blue;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Multiple Text Shadow Effect جرب الكود

إضافة الظل كحدود للنص

يمكنك إضافة أربع ظلال للنص بنفس الحجم مع جعل كل ظل يظهر من جهة مختلفة و عندها سيظهر الظل كأنه حدود للنص.

مثال

h1 { color: orange; text-shadow: 0 1px black, -1px 0 black, 1px 0 black, 0 -1px black;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Multiple Text Shadow Effect جرب الكود

إضافة ظل للعنصر

لإضافة ظل حول العنصر نفسه نستخدم الخاصية

box-shadow و نمرر لها القيم الخاصة بالظل كإحداثيات ظهوره، لونه، حجم الظل نفسه و مقدار ضبابيته.

ملاحظة

إفتراضياً، لون الظل الذي يتم وضعه للعنصر هو لون نص العنصر نفسه و بالتالي فإن كان لون النص أسود و أضفت له ظل بدون أن تحدد لونه فإن الظل سيظهر بلون أسود أيضاً.

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

مثال

div { box-shadow: 5px 5px; background-color: #F1F1F1;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Box Shadow Effect جرب الكود

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

مثال

div { box-shadow: 5px 5px #cacaca; background-color: #F1F1F1;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Box Shadow Effect جرب الكود

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

مثال

div { box-shadow: 4px 4px 5px #cacaca; background-color: #F1F1F1;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Box Shadow Effect جرب الكود

في المثال التالي، قمنا بإضافة ظل للعنصر و جعلناه يبتعد عنه بمقدار 4 بكسل من ناحية اليسار و 4 بكسل من ناحية الأعلى و جعلناه ضبابياً بنسبة 5 بكسل و جعلناه يمتد بنسبة 10 بكسل زيادة عن حجم العنصر و جعلناه يظهر بلون أسود خفيف.

مثال

div { box-shadow: 4px 4px 5px 10px #cacaca; background-color: #F1F1F1;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Box Shadow Effect جرب الكود

في المثال التالي، قمنا بإضافة ظل للعنصر و جعلناه يبتعد عنه بمقدار 0 بكسل من ناحية اليسار و 0 بكسل من ناحية الأعلى حتى يكون ملاصق له و جعلناه ضبابياً بنسبة 5 بكسل و جعلناه يمتد بنسبة 10 بكسل زيادة عن حجم العنصر و جعلناه يظهر بلون أسود خفيف. من بعد هذا أضفنا له الخاصة

inset لجعل الظل يظهر بداخل العنصر.

مثال

div { box-shadow: inset 0 0 5px 10px #cacaca; background-color: #F1F1F1;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Box Shadow Effect جرب الكود

إضافة أكثر من ظل للعنصر

لوضع أكثر من ظل للعنصر، قم بوضع فاصلة بين كل ظلّين تقوم بوضعهما فقط.

ملاحظة

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

في المثال التالي أضفنا ظللّين حول العنصر.

مثال

div { box-shadow: 10px 10px #6d588e, 20px 20px #405378;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Multiple Box Shadow Effect جرب الكود

في المثال التالي جعلنا حدود العنصر مائلة مما أدى لجعل الظلال تظهر بشكل مائل أيضاً.

مثال

div { border-radius: 10px; box-shadow: 10px 10px #6d588e, 20px 20px #405378;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Multiple Box Shadow Effect جرب الكود

في المثال التالي أضفنا 5 ظلال للعنصر و نريدك أن تلاحظ أننا جعلناها تظهر داخل حدوده بواسطة القيمة

inset و أضفنا له هامش داخلي بمقدار أكثر من أكبر ظل موضوع فيه و ذلك لكي يظهر الكلام بعيد عن الظلال.

مثال

div { box-shadow: inset 0 0 0 10px #ee6352, inset 0 0 0 20px #d45379, inset 0 0 0 30px #a4558f, inset 0 0 0 40px #6d588e, inset 0 0 0 50px #405378;}

سنحصل على النتيجة التالية عند التشغيل.

CSS Multiple Box Shadow Effect جرب الكود

مفهوم الأيقونات

الأيقونة ( Icon ) في عالم الويب هي رسمة أو صورة تعبّر عن شيء ما و هي تعطي شكل رائع للتصميم.

في هذا الدرس ستتعرف على أنواع الأيقونات التي يمكنك استخدامها في صفحات الويب بالإضافة إلى استخدام أيقونات مجانية رائعة و تحديد أحجامها و ألوانها.

أنواع الأيقونات

الأيقونة يمكن أن تكون أحد الأنواع التالية:

صورة عادية كالصور التي نوعها PNG و التي يمكن أن تكون خلفيتها شفافة.
صورة نوعها SVG.
صورة مبنية بوسوم HTML و خصائص CSS.

إضافة صورة كأيقونة

في المثال التالي قمنا بإضافة صورة عادية كأيقونة بواسطة الوسم

<img>.

مثال

<img src="user.png"/> جرب الكود

في المثال التالي قمنا بإضافة صورة عادية كخلفية لوسم

<span> فارغ كأيقونة بواسطة الخاصية background-image.

مثال

<span class="user-icon"/></span> جرب الكود

إستخدام أيقونات جوجل

أيقونات جوجل رائعة بكل ما للكلمة من معنى فهي مجانية بشكل كامل و هي تتيح لك التلاعب بخصائص الأيقونات كلونها و حجمها و حتى تصميمها.

طريقة تضمين أيقونات جوجل

هناك طرق عديدة لتضمين أيقونات جوجل في صفحات الويب أسهلها وضع رابط ملف الـ CSS التالي الخاص بها في الوسم

<head>.

طريقة عرض أيقونات جوجل

أسهل طريقة لفعل ذلك هي عن طريق استخدام وسم

<i> يملك كلاسات تشير لإسم الأيقونة كالتالي.

مثال

<head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></head><body> <i class="material-icons">home</i> <i class="material-icons">person</i> <i class="material-icons">favorite</i> <i class="material-icons">menu</i> <i class="material-icons">search</i></body> جرب الكود

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

في المثال التالي قمنا بتحديد ألوان و أحجام الأيقونات بواسطة خصائص CSS.
فعلياً جعلنا حجمها جميعاً 30 بكسل.
ثم قمنا بتعريف كلاسات تمثّل ألوان و أضفنا كلاس منهم لكل أيقونة حتى يتم تلوينها.

مثال

.material-icons { font-size: 30px;}.blue {color: blue;}.brown {color: brown;}.red {color: red;}.purple {color: purple;} جرب الكود

ملاحظة

لمزيد من التفاصيل و الأيقونات التي يوفرها لك جوجل قم بزيارة الموقع الرسمي الخاص به.

موقعه الرسمي >

إستخدام أيقونات FontAwesome

FontAwesome يُعتبر أشهر موقع يمكن الحصول منه على أيقونات مجانية حيث أن أيقوناته مميزة جداً لأنه يمكن التعامل معها و كأنها نص عادي يمكن تحديد حجمه و لونه بواسطة الخاصيتين

color و font-size.

طريقة تضمين أيقوناته

هناك طرق عديدة لتضمين أيقونات FontAwesome في صفحات الويب أسهلها وضع رابط ملف الـ CSS الخاص بها من شبكة cloudflare العالمية.

فيما يلي رابط الإصدار 6.2.0 من ملف الأيقونات الذي يجب إضافته بداخل الوسم

<head>.

طريقة عرض أيقوناته

أسهل طريقة لفعل ذلك هي عن طريق استخدام وسم

<i> يملك كلاسات تشير لإسم الأيقونة كالتالي.

مثال

<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" /></head><body> <i class="fa-solid fa-user"></i> <i class="fa-solid fa-house"></i> <i class="fa-solid fa-heart"></i> <i class="fa-solid fa-bars"></i> <i class="fa-solid fa-magnifying-glass"></i></body> جرب الكود

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

في المثال التالي قمنا بتحديد ألوان و أحجام الأيقونات بواسطة خصائص CSS.

مثال

.fa-solid { font-size: 20px;}.fa-user {color: blue;}.fa-house {color: brown;}.fa-heart {color: red;}.fa-bars {color: purple;} جرب الكود

ملاحظة

لمزيد من التفاصيل و الأيقونات التي يوفرها لك Fontawesome قم بزيارة الموقع الرسمي الخاص به و حدد رقم إصدار الأيقونات التي تريد استخدامها ثم حدد أنك تريد الأيقونات المجانية.

موقعه الرسمي >

تصميم الروابط

الرابط قد يأتي بأشكال عديدة في الصفحة فقد يوضع كنص تحته خط، أيقونة صغيرة، صورة كبيرة أو زر.

Button Link Button Link Text Link Text Link

في هذا الدرس ستتعلم كيف تحسّن أشكال الروابط و ألوانها بالإضافة إلى تحسين تأثيرتها التي تظهر حين يتعامل مع المستخدم معها.

خصائص الروابط

بدايةً الرابط نضعه بواسطة الوسم

<a> و هذا الوسم إفتراضياً يظهر كنص لونه أزرق و تحته خط و هو يظهر على نفس مستوى الكلام الموجود في السطر لأنه يعتمد أسلوب الظهور display: inline.

الشكل الإفتراضي للرابط يمكنك تغييره كيفما شئت حيث يمكنك تغيير لونه، لون خلفيته، تحديد حجمه و ما إلى ذلك.

في المثال التالي جعلنا الروابط تظهر بلون أحمر و قمنا بإزالة الخط الإفتراضي الذي يظهر تحتها.

مثال

a { color: red; text-decoration: none;} جرب الكود

ملاحظة

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

حالات الروابط

الرابط يملك أربع حالات أساسية يمكنك من خلالها تحديد كيف سيظهر حين يتفاعل المستخدم معه.
الحالات التالية يجب وضعها بالترتيب حتى تعمل كما يجب:

a:link
لتحديد شكل الرابط الذي لم يتم فتحه بعد.
a:visited
لتحديد شكل الرابط الذي سبق و تم فتحه.
a:hover
لتحديد شكل الرابط حين يتم تمرير مؤشر الماوس فوقه.
a:active
لتحديد شكل الرابط في الوقت الذي يتم النقر فيه عليه.

في المثال التالي قمنا بتحديد الخصائص التي سيتم تطبيقها على الرابط على حسب حالته.

مثال

/* إذا لم يتم فتحه بعد */a:link { color: green;}/* إذا تم فتحه من قبل */a:visited { color: gray;}/* عند تم تمرير مؤشر الماوس فوقه */a:hover { color: purple;}/* في الوقت الذي يتم فيه النقر عليه */a:active { color: red;} جرب الكود

معلومة تقنية

الحالة

a:hover في شاشات اللمس ( Touch Screens ) لا ترصد متى يبتعد إصبع المستخدم عن الشاشة إلا في حال قام بالنقر على شيء آخر موجود في الصفحة.

تحديد خصائص بعض حالات الرابط

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

في المثال التالي قمنا بجعل الروابط تظهر دائماً بلون أخضر و بدون خط تحتها، و عند تمرير مؤشر الماوس فوقها يتم إظهار الخط.

مثال

a { color: green; text-decoration: none;}a:hover { text-decoration: underline;} جرب الكود

تجميع خصائص حالات الرابط

في المثال التالي قمنا بتحديد أن الروابط التي لم تُفتح بعد و الروابط التي فتحت ستظهر بلون أخضر و بدون خط تحتها، و عند تمرير مؤشر الماوس فوقها و عند النقر عليها يتم إظهار الخط.

ملاحظة: هذا الأسلوب يعطي نفس نتيجة الأسلوب الذي اعتمدناه في المثال السابق.

مثال

a:link, a:visited { color: green; text-decoration: none;}a:hover, a:active { text-decoration: underline;} جرب الكود

عرض الرابط بأشكال مختلفة

في المثال التالي قمنا بعرض الرابط كزر خلفيته زرقاء.

مثال

a { display: inline-block; color: white; background: #1e87f0; border: 2px solid #1e87f0; border-radius: 4px; padding: 10px 15px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 15px;}a:hover { background-color: #0b5ed7; border-color: #0a58ca;} جرب الكود

في المثال التالي قمنا بعرض الرابط كزر تظهر خلفيته عند تمرير مؤشر الماوس فوقه.

مثال

a { display: inline-block; color: black; background: none; border: 2px solid #1e87f0; border-radius: 4px; padding: 10px 15px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 15px;}a:hover { color: white; background-color: #0b5ed7; border-color: #0a58ca;} جرب الكود

في المثال التالي قمنا بعرض الرابط كزر فيه نص و بجانبه أيقونة.

مثال

a { display: inline-block; color: white; background-color: #0b5ed7; border: 2px solid #0b5ed7; border-radius: 4px; padding: 5px 15px; text-decoration: none; font-size: 16px; font-family: Arial, Helvetica, sans-serif;}a:hover { border-color: #0b51d7; background-color: #0b51d7;} a .material-icons { font-size: 24px; vertical-align: bottom;} جرب الكود

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

مثال

a { display: block; color: white; font-variant: small-caps; text-align: center; background: #1e87f0; border: 2px solid #1e87f0; border-radius: 4px; padding: 10px 15px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 15px; margin-bottom: 10px;}a:hover { background-color: #0b5ed7; border-color: #0a58ca;} جرب الكود

حل مشكلة تعليق التأثير في شاشات اللمس

كحل مقترح لمشكلة عدم رصد شاشات اللمس لإصبع المستخدم حين يزيله عن الرابط هو أن يتم وضعه الحالة

:hover الميديا التالي.

@media(hover: hover) and (pointer: fine) { /* يتم تعريفها هنا hover الخاصية */}

هنا قمنا بإعادة المثال السابق مع وضع تأثير تمرير مؤشر الماوس بداخل الميديا المساعد لرصد لمس شاشة.

مثال

a { display: block; color: white; font-variant: small-caps; text-align: center; background: #1e87f0; border: 2px solid #1e87f0; border-radius: 4px; padding: 10px 15px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 15px; margin-bottom: 10px;}@media(hover: hover) and (pointer: fine) { a:hover { background-color: #0b5ed7; border-color: #0a58ca; }} جرب الكود

المصدر:موقع هرمش التعليمي .

تم استخدام محرر ويب هرمش.