ستارتايم للربح عبر الأنترنت

تقنية Flexbox في CSS (الدرس 37)

noreply@blogger.com (Unknown) — Sun, 19 Apr 2020 22:38:00 +0000

السلام عليكم، سنرى في هذا الدرس تقنية Flexbox.

Flexbox هي تقنية جديدة CSS، تجعل العنصر المحتوي و المسمى في تقنية Flexbox بـ Flex container يضم العناصر المحتواة داخله مباشرة حيث تسمى هذه الأخيرة في تقنية Flexbox بـ Flex items، و بتغير أبعاد Flex-container تتغير أبعاد Flex-items تلقائياً مكونة نموذجاً متجاوباً، ليس هذا فقط، بل يمكن أن تغيّر محاذاتها، إتجاهها، ترتيبها، حجمها.. و بالتالي فهذه التقنية تجعل علبة العنصر Box Model الذي درسناه في درس تقنيتا Margin و Padding علبة مرنة، أي Flexible Box، و تختصَر في Flexbox، و قد سهلت هذه التقنية الكثير من الأمور على Web Designers و Web Developpers حيث بتواجدها في صفحات الويب تستبعَد العديد من الأكواد كـ 'FLOAT'، 'CLEAR'، 'POSITION'، 'MARGIN'، 'PADDING'، 'WIDTH'، 'HEIGHT'، 'OVERFLOW'، 'VERTICAL-ALIGN' و غيرها.. مما يجعل تحميل صفحات الويب أكثر سرعة، ناهيكم عن فاعلية Flexbox التي جعلت أكبر Frameworks تعتمد عليها كـ Bootstrap مثلاً.

لدى تقنية Flexbox عشر خواص Longhand و خاصيتين Shorthand منها التي تقحم في Flex-container و منها التي تقحم في Flex-item و هم :

• الخاصية FLEX-DIRECTION

• الخاصية FLEX-WRAP

• الخاصية FLEX-FLOW

• الخاصية JUSTIFY-CONTENT

• الخاصية ALIGN-ITEMS

• الخاصية ALIGN-CONTENT

• الخاصية ORDER

• الخاصية FLEX-GROW

• الخاصية FLEX-SHRINK

• الخاصية FLEX-BASIS

• الخاصية FLEX

• الخاصية ALIGN-SELF

إنشاء Flexbox

طريقة إنشاء Flexbox

تنشأ تقنية Flexbox عن طريق الخاصية 'DISPLAY' حيث تقحم في Flex container، و تحدِّد قيمتها نوع Flexbox، فإذا كانت قيمة بإسم 'FLEX' سيحدَّد Flexbox من نوع Block، أي أن Flex container سيأخذ كامل عرض العنصر المحتوي له، أما إذا كانت قيمة بإسم 'INLINE-FLEX' فسيحدَّد Flexbox من نوع Inline، أي أن Flex container سيتشارك عرض العنصر المحتوي له مع عناصر من نوع Inline.

يمكن إنشاء بنية هرمية بتقنية Flexbox، بمعنى أنه يمكن لأي Flex item أن يكون في حد ذاته Flex-container عبر الخاصية 'DISPLAY' و قيمة من قيمتيها 'FLEX' أو 'INLINE-FLEX'.

قواعد Flexbox

1 - إذا لم يكن لدى Flex item عرض أو ارتفاع مخصص في CSS، سيخصص له عرض أو ارتفاع تلقائي حسب محتواه.

2 - إذا كان عرض Flex container أصغر من مجموع عرض Flex items، سيلغي Flex container عرض كل Flex item و سيخصِّص لجميعها عرض متساوٍ يتجاوب مع عرضه، و نفس الشيء بالنسبة للإرتفاع.

الفيديو التوضيحي للدرس

الخاصية FLEX-DIRECTION

يعتمد Flex container على محورين في إنشاء تمركز للـ Flex items، و يسميان هذين المحورين بمحور التمركز الرئيسي و محور التمركز الثانوي، أحدهما يكون عمودياً و الآخر أفقياً، الخاصية 'FLEX-DIRECTION' هي المسؤولة عن تحديد أيُّ محور سيكون الرئيسي في التمركز، و تقحم في Flex container بحيث أن في التنسيق التلقائي يكون المحور الرئيسي هو المحور الأفقي و الإتجاه حسب اتجاه الكتابة، و يكون المحور الثانوي هو المحور العمودي و الإتجاه من الأعلى إلى الأسفل، لديها أربع قيم خاصة و هم :

* ROW : هي القيمة التلقائية للخاصية، و تُمركز Flex items في محور تمركزها الأفقي و مع اتجاه الكتابة (من اليمين إلى اليسار بالنسبة للغة العربية) أي أن محور التمركز الرئيسي هو المحور الأفقي و الإتجاه حسب اتجاه الكتابة، و محور التمركز الثانوي هو المحور العمودي و الإتجاه من الأعلى نحو الأسفل.

* ROW-REVERSE : تمركز هذه القيمة Flex items في محور تمركزها الأفقي و عكس اتجاه الكتابة (من اليمين إلى اليسار بالنسبة للغة العربية) أي أن محور التمركز الرئيسي هو المحور الأفقي و الإتجاه حسب اتجاه الكتابة، و محور التمركز الثانوي هو المحور العمودي و الإتجاه من الأعلى نحو الأسفل.

* COLUMN : تمركز هذه القيمة Flex items في محور تمركزها العمودي و الإتجاه من بداية Flex container إلى نهايته، أي أن محور التمركز الرئيسي هو المحور العمودي و الإتجاه من الأعلى نحو الأسفل، و محور التمركز الثانوي هو المحور الأفقي و الإتجاه حسب اتجاه الكتابة.

* COLUMN-REVERSE : تمركز هذه القيمة Flex items في محور تمركزها العمودي و الإتجاه من نهاية Flex container إلى بدايته، أي أن محور التمركز الرئيسي هو المحور العمودي و الإتجاه من الأسفل نحو الأعلى، و محور التمركز الثانوي هو المحور الأفقي و الإتجاه حسب اتجاه الكتابة.

تقبل الخاصية 'FLEX-DIRECTION' من القيم الشاملة قيمتين ألا و هما :

- INHERIT : تورث للـ Flex container تأثيرات قيم الخاصية من العناصر المحتوية.

- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية FLEX-WRAP

تلغي الخاصية 'FLEX-WRAP' تعامل Flex container مع Flex items حسب القاعدة الثانية لتقنية Flexbox، و ذلك بتطبيق القاعدة الأولى مع إبقاء Flex items داخل Flex container حيث تسمح بأخذ الـ Flex items المتعدية طول الـ Flex container سطر جديد في حالة كان محور تمركزها الرئيسي أفقياً، و أخذ عمود جديد في حالة كان محور تمركزها الرئيسي عمودياً، تقحم الخاصية في Flex container، و لديها ثلاث قيم خاصة و هم :

* NOWRAP : هي القيمة التلقائية للخاصية، و تسمح بتعامل Flex container مع Flex items حسب القاعدة الثانية لتقنية Flexbox.

* WRAP : تمنع هذه القيمة تعامل Flex container مع Flex items حسب القاعدة الثانية لتقنية Flexbox حيث تسمح بتمركز Flex items التي تتعدى Flex container بالرجوع إلى السطر أو العمود حسب محور تمركزها الرئيسي، و مع الإتجاه التلقائي للتمركز في محور التمركز الثانوي.

* WRAP-REVERSE : تمنع هذه القيمة تعامل Flex container مع Flex items حسب القاعدة الثانية لتقنية Flexbox حيث تسمح بتمركز Flex items التي تتعدى Flex container بالرجوع إلى السطر أو العمود حسب محور تمركزها الرئيسي، لكن عكس الإتجاه التلقائي للتمركز في محور التمركز الثانوي.

تقبل الخاصية 'FLEX-WRAP' من القيم الشاملة قيمتين ألا و هما :

- INHERIT : تورث للـ Flex container تأثيرات قيم الخاصية من العناصر المحتوية.

- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية FLEX-FLOW

تعتبر الخاصية 'FLEX-FLOW' هي Shorthand property للخاصيتين 'FLEX-DIRECTION' و 'FLEX-WRAP'، حيث أن قيمتها التلقائية هي القيمتين التلقائيتين للخاصيتين Longhand، علماً أن القيمة التي في اليسار هي قيمة الخاصية 'FLEX-DIRECTION' و القيمة التي في اليمين هي قيمة الخاصية 'FLEX-WRAP' مع الأخذ بعين الإعتبار فرق القيم بفراغ من نوع Space، و تقحم الخاصية في Flex-container.

تقبل الخاصية 'FLEX-FLOW' من القيم الشاملة قيمتين ألا و هما :

- INHERIT : تورث للـ Flex container تأثير الخاصية من العناصر المحتوية.

- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية JUSTIFY-CONTENT

تمكِّن الخاصية 'JUSTIFY-CONTENT' من محاذاة Flex items حسب محور تمركزها الرئيسي، تقحم الخاصية في Flex container، و لديها ست قيم خاصة و هم :

* FLEX-START : هي القيمة التلقائية للخاصية، و تمكِّن من محاذاة Flex items في بداية Flex container حسب محور تمركزها الرئيسي.

* FLEX-END : تمكِّن هذه القيمة من محاذاة Flex items في نهاية Flex container حسب محور تمركزها الرئيسي.

* CENTER : تمكِّن هذه القيمة من محاذاة Flex items في وسط Flex container حسب محور تمركزها الرئيسي.

* SPACE-BETWEEN : تمركز هذه القيمة Flex items بطريقة متناسقة حيث يكون Flex item الأول في بداية Flex container، و يكون Flex item الأخير في نهاية Flex container، و تتوزع المسافة بين كل Flex item و Flex item موالي له بشكل متساوٍ.

* SPACE-AROUND : تمركز هذه القيمة Flex items بطريقة متناسقة حيث تكون المسافة بين Flex item الأول و حافة Flex container تساوي نصف المسافة بين كل Flex item و Flex item موالي له، و أيضاً تكون المسافة بين Flex item الأخير و حافة Flex container تساوي نصف المسافة بين كل Flex item و Flex item موالي له.

* SPACE-EVENLY : تمركز هذه القيمة Flex items بطريقة متناسقة حيث تكون المسافة بين Flex item الأول و حافة Flex container تساوي المسافة بين كل Flex item و Flex item موالي له، و أيضاً تكون المسافة بين Flex item الأخير و حافة Flex container تساوي المسافة بين كل Flex item و Flex item موالي له.

تقبل الخاصية 'JUSTIFY-CONTENT' من القيم الشاملة قيمتين ألا و هما :

- INHERIT : تورث للـ Flex container تأثيرات قيم الخاصية من العناصر المحتوية.

- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية ALIGN-ITEMS

تمكِّن الخاصية 'ALIGN-ITEMS' من محاذاة محور تمركز Flex items الرئيسي في محور تمركز Flex items الثانوي مع احترام محتوى كل Flex item بإعطاء لهذا الأخير طول محور التمركز الثانوي حسب محتواه، تقحم الخاصية في Flex container، و لديها خمس قيم خاصة و هم :

* STRETCH : هي القيمة التلقائية للخاصية، و تجعل كل Flex item يأخذ طول محور تمركزه الثانوي.

* FLEX-START : تجعل هذه القيمة محور تمركز Flex items الرئيسي يتمركز في بداية Flex container نسبة إلى محور التمركز الثانوي، مع احترام محتوى كل Flex item.

* FLEX-END : تجعل هذه القيمة محور تمركز Flex items الرئيسي يتمركز في نهاية Flex container نسبة إلى محور التمركز الثانوي، مع احترام محتوى كل Flex item.

* CENTER : تجعل هذه القيمة محور تمركز Flex items الرئيسي يتمركز في وسط Flex container نسبة إلى محور التمركز الثانوي، مع احترام محتوى كل Flex item.

* BASELINE : تجعل هذه القيمة محور تمركز Flex items الرئيسي يتمركز حسب خط الأساس الوهمي المكوَّن من المحتوى النصي للـ Flex items في محور التمركز الثانوي، مع احترام محتوى كل Flex item.

تقبل الخاصية 'ALIGN-ITEMS' من القيم الشاملة قيمتين ألا و هما :

- INHERIT : تورث للـ Flex container تأثيرات قيم الخاصية من العناصر المحتوية.

- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية ALIGN-CONTENT

تعمل الخاصية 'ALIGN-CONTENT' محاذاة لأسطر أو أعمدة الـ Flex items في محور التمركز الثانوي، و بما أن هذه الأخيرة هي عبارة عن أسطر أو أعمدة، فهي تحت تأثير القيمة 'WRAP' او 'WRAP-REVERSE' للخاصية 'FLEX-WRAP'، بمعنى أن الخاصية 'ALIGN-CONTENT' لن تعمل إلى بتواجد تأثير إحدى القيمتين السالفتي الذكر حيث تكوّنان أسطر الـ Flex items في حالة ما إذا كان محور التمركز الرئيسي هو المحور الأفقي أو تكوّنان أعمدة الـ Flex items في حالة ما إذا كان محور التمركز الرئيسي هو المحور العمودي، تقحم الخاصية 'ALIGN-CONTENT' في Flex container، و لديها سبع قيم خاصة و هم :

* STRETCH : هي القيمة التلقائية للخاصية، و تجعل أسطر أو أعمدة الـ Flex items تأخذ أطوال متساوية غير تاركة مسافة بينها مغطية كامل Flex container في محور التمركز الثانوي.

* FLEX-START : تعمل هذه القيمة محاذاة لأسطر أو أعمدة الـ Flex items في بداية Flex container نسبة إلى محور التمركز الثانوي.

* FLEX-END : تعمل هذه القيمة محاذاة لأسطر أو أعمدة الـ Flex items في نهاية Flex container نسبة إلى محور التمركز الثانوي.

* CENTER : تعمل هذه القيمة محاذاة لأسطر أو أعمدة الـ Flex items في وسط Flex container نسبة إلى محور التمركز الثانوي.

* SPACE-BETWEEN : تمركز هذه القيمة أسطر أو أعمدة الـ Flex items بطريقة متناسقة حيث يكون سطر أو عمود الـ Flex items الأول في بداية Flex container، و يكون سطر أو عمود الـ Flex items الأخير في نهاية Flex container، و تتوزع المسافة بين كل سطر أو عمود الـ Flex items و سطر أو عمود الـ Flex items موالي له بشكل متساوٍ.

* SPACE-AROUND : تمركز هذه القيمة أسطر أو أعمدة الـ Flex items بطريقة متناسقة حيث تكون المسافة بين سطر أو عمود الـ Flex items الأول و حافة Flex container تساوي نصف المسافة بين كل سطر أو عمود الـ Flex items و سطر أو عمود الـ Flex items موالي له، و أيضاً تكون المسافة بين سطر أو عمود الـ Flex items الأخير و حافة الـ Flex container تساوي نصف المسافة بين كل سطر أو عمود الـ Flex items و سطر أو عمود الـ Flex items موالي له.

* SPACE-EVENLY : تمركز هذه القيمة أسطر أو أعمدة الـ Flex items بطريقة متناسقة حيث تكون المسافة بين سطر أو عمود الـ Flex items الأول و حافة Flex container تساوي المسافة بين كل سطر أو عمود الـ Flex items و سطر أو عمود Flex items موالي له، و أيضاً تكون المسافة بين سطر أو عمود الـ Flex items الأخير و حافة Flex container تساوي المسافة بين كل سطر أو عمود الـ Flex items و سطر أو عمود الـ Flex items موالي له.

تقبل الخاصية 'ALIGN-CONTENT' من القيم الشاملة قيمتين ألا و هما :

- INHERIT : تورث للـ Flex container تأثيرات قيم الخاصية من العناصر المحتوية.

- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية ORDER

تخول الخاصية 'ORDER' ترتيب Flex items، و تقحم في Flex item المزاد إعطاؤه ترتيب ظهور عبر قيمة تكون عبارة عن عدد موجب، علماً أن العدد الصغير يرتب Flex item أولاً، و العدد الأكبر يرتب تالياً، القيمة التلقائية للخاصية هي '0'، و إذا كانت مجموعة من Flex items لديها قيمة متساوية أو ليست لديها قيمة، سيتم ترتيبها قبل Flex items المرتبة بالخاصية 'Order' و حسب ترتيب إقحامها في ملف HTML.

تقبل الخاصية 'ORDER' من القيم الشاملة قيمتين ألا و هما :

- INHERIT : تورث للـ Flex item تأثير الخاصية من العناصر المحتوية.

- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية FLEX-GROW

تحدّد الخاصية 'FLEX-GROW' إمكانية تمدد Flex item في محور تمركزه الرئيسي نسبة إلى Flex items المتواجدة معه في نفس Flex container من أجل ملء الفراغ الزائد في هذا الأخير، و يقحم في قيمتها عدد موجب يحدد درجة التمدد علماً أن القيمة التلقائية للخاصية هي '0' حيث تمنع Flex item من التمدد، و Flex item الذي يحتوي على أكبر قيمة هو الذي يتمدد أكثر من الذي يحتوي على قيمة أصغر.

تقبل الخاصية 'FLEX-GROW' من القيم الشاملة قيمتين ألا و هما :

- INHERIT : تورث للـ Flex item تأثير الخاصية من العناصر المحتوية.

- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية FLEX-SHRINK

تحدّد الخاصية 'FLEX-SHRINK' إمكانية تقلص Flex item في محور تمركزه الرئيسي نسبة إلى Flex items المتواجدة معه في نفس Flex container، و يقحم في قيمتها عدد موجب يحدد درجة التقلص علماً أن القيمة التلقائية للخاصية هي '1'، و Flex item الذي يحتوي على أكبر قيمة هو الذي يتقلص أكثر من الذي يحتوي على قيمة أصغر.

تقبل الخاصية 'FLEX-SHRINK' من القيم الشاملة قيمتين ألا و هما :

- INHERIT : تورث للـ Flex item تأثير الخاصية من العناصر المحتوية.

- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية FLEX-BASIS

تحدّد الخاصية 'FLEX-BASIS' الطول الأساسي للـ Flex item قبل تمديده أو تقليصه ملغية القاعدة الأولى لتقنية Flexbox، و يكون هذا الطول في محور تمركز Flex item الرئيسي، تدعم الخاصية 'FLEX-BASIS' القيم النسبية الموجبة و القيم المطلقة الموجبة، و قيمتها التلقائية هي قيمة بإسم 'AUTO' حيث تفعّل القاعدة الأولى لتقنية Flexbox.

تقبل الخاصية 'FLEX-BASIS' من القيم الشاملة قيمتين ألا و هما :

- INHERIT : تورث للـ Flex item تأثير الخاصية من العناصر المحتوية.

- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية FLEX

تعتبر الخاصية 'FLEX' هي Shorthand property للخواص 'FLEX-SHRINK'، 'FLEX-GROW' و 'FLEX-BASIS'، حيث أن قيمتها التلقائية هي القيم التلقائية للخواص Longhand، علماً أن القيمة التي في اليسار هي قيمة الخاصية 'FLEX-GROW'، و القيمة الوسطى هي قيمة الخاصية 'FLEX-SHRINK'، و القيمة التي في اليمين هي قيمة الخاصية 'FLEX-BASIS' مع الأخذ بعين الإعتبار فرق القيم بفراغ من نوع Space، و تقحم الخاصية في Flex-item علماً أن CSS تعطي أولوية تطبيق الأكواد للخاصية 'FLEX' بدلاً من خواصها Longhand.

تقبل الخاصية 'FLEX' من القيم الشاملة قيمتين ألا و هما :

- INHERIT : تورث للـ Flex item تأثير الخاصية من العناصر المحتوية.

- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية ALIGN-SELF

تعمل الخاصية 'ALIGN-SELF' نفس ما تعمله الخاصية 'ALIGN-ITEMS'، إلا أنها تطبق تأثيرها سوى على Flex item المقحمة في كوده حيث تمكِّن من محاذاته في محور تمركزه الثانوي مع احترام محتواه بإعطاءه طول في بعد محور تمركزه الثانوي حسب محتواه، لدى الخاصية 'ALIGN-SELF' نفس القيم الخمس الخاصة للخاصية 'ALIGN-ITEMS' بنفس تأثيرها، زيادة على قيمة واحدة بإسم 'AUTO' حيث تعتبر قيمتها التلقائية و هم :

* AUTO : تجعل هذه القيمة Flex item يتمركز في نقطة تقاطع محور تمركزه الرئيسي مع محور تمركزه الثانوي.

* STRETCH : تجعل هذه القيمة Flex item يأخذ طول محور تمركزه الثانوي.

* FLEX-START : تجعل هذه القيمة Flex item يتمركز في بداية Flex container نسبة إلى محور تمركزه الثانوي، مع احترام محتواه.

* FLEX-END : تجعل هذه القيمة Flex item يتمركز في نهاية Flex container نسبة إلى محور تمركزه الثانوي، مع احترام محتواه.

* CENTER : تجعل هذه القيمة Flex item يتمركز في وسط Flex container نسبة إلى محور تمركزه الثانوي، مع احترام محتواه.

* BASELINE : تجعل هذه القيمة Flex item يتمركز حسب خط الأساس الوهمي المكوَّن من المحتواه النصي في محور تمركزه الثانوي، مع احترام محتواه.

تقبل الخاصية 'ALIGN-SELF من القيم الشاملة قيمتين ألا و هما :

- INHERIT : تورث للـ Flex container تأثيرات قيم الخاصية من العناصر المحتوية.

- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.

See the Pen
تقنية Flexbox by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

تقنية Responsive Design بـ Meta Viewport و Media Query و Grid System و Bootstrap | الدرس 36\37

noreply@blogger.com (Unknown) — Wed, 08 Apr 2020 00:25:00 +0000

السلام عليكم، سنرى في هذا الدرس Responsive Web Design.

منذ بداية العقد الماضي، أصبحت طلبات البحت في الإنترنت بالأجهزة غير الحاسوب تضاهي شأنها في الحاسوب، مما جعل محركات البحث و على رأسها جوجل Google تحت بضرورة تواجد نسخات من صفحات الويب متجاوبة مع الأجهزة الأخرى غير الحاسوب، حيث أضحى هذا الأمر ضروريا لـ SEO، و هذا ما يعرف بـ Responsive Web Design، أي أنها تقنية تُستعمل لجعل صفحات الويب متجاوبة مع جميع أحجام الشاشات سواء كانت شاشات حواسيب مكتبية أو شاشات حواسيب نقالة أو شاشات هواتف ذكية أو شاشات أجهزة الطابليط أو غيرها.. لذا لجأ المطورون إلى إنشاء إما تطبيقات لمواقعهم الإلكترونية، أو نسخ الهواتف و الطابليط لمواقعهم بشتى طرق كاستخدام Meta Viewport و Media Query استناداً بـ Grid System و Frameworks.

Meta Viewport

ما هو Meta Viewport ؟

Meta Viewport هو عبارة عن نوع من عنصر 'META'، و عناصر الميتا كما درسنا في الدروس السابقة هي عناصر تُستعمل لتحديد البيانات الوصفية لمستند HTML، و البيانات الوصفية هي معلومات لا تظهر في متصفحات الانترنت، لكن تساعدها في إظهار الصفحة، و تساعد الروبوتات أيضاً في فهم الصفحة، أذكر من بين أكثر السمات استعمالاً في عنصر الميتا :

* السمة 'CHARSET' : تساعد متصفحات الإنترنت في إظهار الصفحة بالترميز المناسب.

* السمة 'HTTP-EQUIV' : تعدل على سلوكيات متصفحات الإنترنت.

* السمة 'NAME' : تدلي بنوع البيانات الوصفية، و من بين قيمها هناك القيمة 'VIEWPORT' التي تهمنا في هذا الدرس.

* السمة 'CONTENT' : تدلي بمحتوى البيانات الوصفية، و تكون مرافقة للسمة 'NAME' عموماً، و و خصوصاً في Meta Viewport تعطي لمتصفحات الإنترنت الإرشادات اللازمة لظهور صفحات الويب.

قبل الشروع في فهم ما تفعله Meta Viewport، يجب معرفة أن Viewport هي مساحة صفحة الويب الظاهرة في شاشة المستخدم، و بما أن عرض صفحات الويب يختلف عن عرض شاشات الحواسيب و الهواتف و الطابليط.. فهذا يعتبر مشكل، و بالتالي فأغلب الأجهزة تستعمل Viewport أكبر من حجم شاشاتها بسلم معين من أجل عدم جعل المستخدم يعمل Zooming لصفحات الويب أثناء تصفحها، بمعنى تحسين ما يعرف في SEO بـ User Experience، و المشكل الأكبر هو أن ليس كل الأجهزة تستعمل نفس Viewport، و لهذا السبب تتواجد Meta Viewport حيث تمكّن من التعديل على Viewport بهدف جعل صفحة الويب تظهر بأبعاد مطابقة للشاشات.

كيفية إقحام Meta Viewport

تقحم جميع أكواد الميطا في عنصر 'HEAD' لملف HTML، و يستند Meta Viewport على قيمتين أساسيتين في السمة 'CONTENT' علماً أن قيم السمات تقحم في HTML مفروقة بعلامة Comma (,) و ما يفرّق القيم بـ Parameter لديها هي علامة التساوي (=) و هما :

• 'INITIAL-SCALE' : تمثل هذه القيمة التحجيم التلقائي الذي تظهر به صفحة الويب بعد إعادة تدوير المتصفح، و يقحم في Parameter لديها عدد من 0 إلى 10 علماً أن 1.0 يمثل الحجم التلقائي، 2.0 يمثل ضعف الحجم التلقائي، و هكذا...

• 'WIDTH' : تمثل هذه القيمة عرض Viewport، حيث يمكن إقحام في Parameter عدد يمثل العرض بالبكسل (px)، أو يمكن إقحام الكلمة المفتاحية 'DEVICE-WIDTH' حيث تعطي تطابق Viewport مح حجم الشاشة بـ Css Pixel في السلم 100%، و Css Pixel هو بكسل غير حقيقي يتوافق مع المساحة المستعملة للشاشة، و بالتالي فـ Css Pixel الواحد لا يساوي دائما البكسل العادي حيث هذا الأخير هو الذي يحدّد ما يعرف بدقة الشاشة (Resolution)، فمثلا في الشاشات العالية الجودة يكون البكسل الحقيقي أضعاف CSS Pixel بأربع أضعاف أو أكثر.

يمكن إقحام قيم ثانوية في السمة 'CONTENT' للـ Meta Viewport تحسّن من تجربة المستخدم أذكر منها :

• 'USER-SCALABLE' : تخوّل هذه السمة للمستخدم عمل Zooming، و هذا في حال تواجد 'YES' في Parameter لديها، أما 'NO' فتعطّل الميزة.

• 'MINIMUM-SCALE' و 'MAXIMUM-SCALE' : قيمتين تكونتا مرفوقتين بالقيمة 'USER-SCALABLE'، و تحدّدتا مستوى ZOOM-IN و ZOOM-OUT حيث يقحم في Parameter لديهما عدد من 0 إلى 10، 'MINIMUM-SCALE' مخصصة لـ ZOOM-OUT، و 'MAXIMUM-SCALE' لـ ZOOM-IN.

من بين أساسيات Responsive Web Design هو إقحام القيم النسبية عوض القيم المطلقة، لأن الأطوال النسبية تتغير بتغير الأطوال المحتوية، على عكس الأطوال المطلقة تبقى ثابتة، و توجد بين الوحدات النسبية وحدتين لهما علاقة بـ Viewport و هما :

- 'VW' : نسبة إلى Viewport Width أي عرض Viewport، حيث أن 1vw يساوي 1% من عرض Viewport.

- 'VH' : نسبة إلى Viewport Height أي ارتفاع Viewport، حيث أن 1vh يساوي 1% من ارتفاع Viewport.

~~$ads={1}~~

Media Query

ما هي Media Query ؟

تعتبر Media Query أقوى قواعد Responsive Web Design، حيث تخول إنشاء مظهر لصفحة الويب حسب عرض الشاشة التي تظهر بها، و ذلك حسب اختيار المطور، فيمكن لهذا الأخير إما أن يختار عروض الشاشات بنفسه حسب ما يحتاجه موقعه، أو يختار العروض الموحّدة عالمياً و التي هي :

- يطلق على الشاشات الأصغر عرضاً من 576px إسم Extra Small، و هي مخصصة للوضع العمودي (Portrait) للهواتف الذكية.

- يطلق على الشاشات التي تحتوي على عرض من 576px إلى 768px إسم Small، و هي مخصصة للوضع الأفقي (Landscape) للهواتف الذكية و للوضع العمودي (Portrait) لأجهزة الطابليط.

- يطلق على الشاشات التي تحتوي على عرض من 768px إلى 992px إسم Medium، و هي مخصصة للوضع الأفقي (Landscape) لأجهزة الطابليط.

- يطلق على الشاشات التي تحتوي على عرض من 992px إلى 1200px إسم Large، و هي مخصصة للشاشات العادية للحواسيب المكتبية و النقالة (17inch مثلاً).

- يطلق على الشاشات الأكبر عرضاً من 1200px إسم Extra Large، و هي مخصصة للشاشات العريضة للحواسيب المكتبية و النقالة (19inch مثلاً).

طريقة إقحام Media Query

أولاً يجب التوفر على دقة الملاحظة في كشف مناطق التجربة السيئة للمستخدم في الموقع، و ذلك عبر النقر على أيقونة Toggle Device Toolbal المتواجدة بآداة Inspect Element، ثم معاينة الموقع في جميع العروض التي توفرها الآداة، و بالتالي اختيار الأمكنة المراد تغيير فيها المظهر عن طريق Media Query، و يطلق على هذه الأمكنة بـ Break-points، أي نقاط الكسر.

تقحم Media Query في CSS، و طريقة إقحامها شبيهة إلى حد كبير بـ Keyframes التي رأيناها في درس Animation، حيث تكتب بهذا التنسيق '{} () media screen and@' و من أجل دعم المتصفحات القديمة تكتب بهذا التنسيق '{} () media only screen and@'؛ و ما بين القوسين يحدد طبيعة المجال العرضي هل هو مجال مفتوح أو مغلق، فالمجال المفتوح يعتمد على نقطة كسر واحدة تحدد إما أدنى عرض و ما فوق حيث يقتصر على الخاصية 'MIN-WIDTH' و في قيمتها أدنى عرض بالبكسل، و إما يحدد أقصى عرض و ما تحت حيث يقتصر على الخاصية 'MAX-WIDTH' و في قيمتها أقصى عرض بالبكسل؛ أما المجال المغلق فيعتمد على نقطتي كسر حيث ينحصر المجال بين أدنى عرض و أقصى عرض، أي بين 'MIN-WIDTH' و 'MAX-WIDTH'، و ليس بضرورة أن تكونا الخاصيتين 'MIN-WIDTH' و 'MAX-WIDTH' هما المسؤولتين في تحديد نقاط الكسر، فيمكن أن تكون الخاصيتين 'MIN-DEVICE-WIDTH' و 'MAX-DEVICE-WIDTH' اللتين تحددا نقاط الكسر حسب عروض الأجهزة و ليس عروض المتصفحات، أو تكون الخاصية 'ORIENTATION' و في قيمتها إما 'PORTRAIT' أو 'LANDSCAPE' حيث تحدد نقاط الكسر حسب أوضاع الأجهزة و ما إلى ذلك، لكن الخاصيتين 'MIN-WIDTH' و 'MAX-WIDTH' هما الأكثر تداولاً و انسيابيتهما تجعل منهما ذوات فاعلية احترافية؛ ثم تقحم داخل المعقوفتين ({}) جميع أكواد العناصر المراد تغيير مظهرها في المجال حيث تقحم سوى خواص التغيير.

و يجب عدم تجاهل قاعدة أولوية تطبيق أكواد CSS بحيث أن :

+ عند إقحام Media Querries ذوات المجال المفتوح الذي يعتمد على نقطة كسر واحدة تحدّد أدنى عرض و ما فوق، يتوجب الإقحام من أصغر عرض إلى الأكبر، و العكس صحيح عند إقحام Media Querries ذوات المجال المغلق.

+ عند إقحام Media Querries ذوات المجال المفتوح الذي يعتمد على نقطة كسر واحدة تحدّد أقصى عرض و ما تحت، يتوجب الإقحام من أكبر عرض إلى الأصغر، و العكس صحيح عند إقحام Media Querries ذوات المجال المغلق.

الفيديو التوضيحي للدرس

Grid System

ما هو Grid System ؟

Grid System هو نظام يخلق أعمدة عمودية أو أفقية أو معاً وهمية تستند عليها عناصر صفحات الويب في التمركز، و يجب على هذه الأعمدة أن تكون متساوية و بعدد قابل للقسمة كالعدد 12 أو 16، و كلما كان عدد الأعمدة كثيراً كلما كان أحسن، و يسمى منظور صفحة الويب المعتمدة عناصرها على نظام Grid System بـ Grid View.

طريقة إنشاء Grid View

يُنشأ Grid View في CSS عن طريق أكواد محدّداتها عبارة عن محددات Class و تحتوي على خواص حسب نوع الأعمدة :

* الأعمدة العمودية

- الخاصية 'WIDTH' لجعل جميع الأعمدة بعروض متساوية، و قيمتها عبارة عن نسبة مئوية يتم التحصل عليها عن طريق هذه القاعدة

( 100 \ عدد الأعمدة ) * ترتيب العمود

- الخاصية 'FLOAT' لجعل جميع الأعمدة تطفو في اتجاه معين، و قيمها إما 'RIGHT' لجعلالأعمدة تطفو في اتجاه اليمين، و إما 'LEFT' لجعل الأعمدة تطفو في اتجاه اليسار.

* الأعمدة الأفقية

- الخاصية 'HEIGHT' لجعل جميع الأعمدة بارتفاعات متساوية، و قيمتها عبارة عن نسبة مئوية يتم التحصل عليها عن طريق هذه القاعدة

( 100 \ عدد الأعمدة ) * ترتيب العمود

- الخاصية 'DISPLAY' و قيمتها 'BLOCK' لجعل كل عمود تحت الآخر.

و بالتالي يمكن استغلال محددات الكلاس للـ Grid System و تحويلها إلى قيم كلاسات مقحمة في عناصر HTML مراد جعلها متمركزة بالـ Grid System و ناتجة نموذجاً متجاوباً.

~~$ads={2}~~

إنشاء Grid View عن طريق Framework

ما هو Framework ؟

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

يوضح المجال الزمني [ من 01:10:15 إلى 01:28:47 ] للفيديو التوضيحي للدرس مثال حول كيفية الإستناد بـ Bootstrap Framwork في إنشاء نموذج متجاوب مع جميع أنواع الشاشات.

See the Pen
Responsive Design by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

العنصر form و العنصر input و جميع العناصر المتعلقة بالإستمارة في HTML | الدرس 35\37

noreply@blogger.com (Unknown) — Sun, 23 Feb 2020 09:34:00 +0000

السلام عليكم، سنشمل في هذا الدرس كل ما يتعلق بالإستمارات في HTML، حيث سنتعرف بالتفصيل على العناصر المساهمة في إنشاءها و هم :

* العنصر 'FORM'

* العنصر 'INPUT'

* العنصر 'TEXTAREA'

* العناصر 'SELECT' و 'OPTION' و 'OPTGROUP'

* العنصر 'OUTPUT'

* العنصر 'DATALIST'

* العنصر 'LABEL'

* العنصران 'FIELDSET' و 'LEGEND'

ما هي الإستمارات في HTML ؟

تتكون الإستمارة من حقول الإدخال و خيارات التفعيل و الأدوات و الأزرار، و تخول استقبال بيانات المستخدمين كاستمارة التسجيل في المواقع و التطبيقات أو استمارات الإتصال بالدعم أو ما شابه... حيث أن المستخدم يملأ الإستمارة بالبيانات، ثم بضغطه على زر الإرسال، تذهب هذه البيانات إلى صفحة بلغة معلوماتية كـ PHP و ASP و Python في المخدم (Server) للمعالجة، بعدها ترسَل إلى صفحة أخرى بنظام تسيير قاعدة البيانات (Database) كـ SQL و MySQL في المخدم أيضاً للحفظ.

دائما يجب الأخذ بعين الإعتبار أنه ليس كل البيانات المستقبَلة صحيحة، لذا يجب تأمين الإستمارات قبل فعل أي إجراء بهذه البيانات، و هذا من أجل تفادي أن تستقبل بيانات غير مرغوب فيها كأكواد برمجية قصد التخريب أو معرفة معلومات حساسة أو سرقة بيانات المستخدمين كما وقع لأشهر مواقع التواصل الإجتماعي أو شيء من هذه الأفعال المشينة.

العنصر FORM

هو عبارة عن عنصر من نوع Block و ثنائي الأوسمة حيث أنه هو العنصر المسؤول عن إنشاء الإستمارة، و يقحَم بين وسميه جميع العناصر المتعلقة بالإستمارة، لديه ثمان سمات (Attributes) خاصة و هم :

• ACTION

• METHOD

• NAME

• TARGET

• NOVALIDATE

• AUTOCOMPLETE

• ENCTYPE

• ACCEPT-CHARSET

السمة ACTION

هي السمة المسؤولة عن تحديد الصفحة في المخدم التي ترسَل إليها بيانات الإستمارة، و تسمى هذه الصفحة بـ Form-handler، و يقحم في قيمتها مسار الصفحة المرسَلة إليها البيانات استناداً بقاعدة المسارات التي رأيناها في درس الصور، و تعتبر أساسية حيث بغيابها في العنصر سترسل البيانات إلى الصفحة ذاتها.

السمة METHOD

هي سمة أساسية أيضاً في عنصر 'FORM'، و تخول تحديد طريقة إرسال البيانات إلى المخدم، لديها قيمتين خاصتين وهما :

- GET : هي القيمة التلقائية للسمة، و تبعت البيانات إلى المخدم عبر البروتوكول 'HTTP' حيث تظهر البيانات المرسَلة في الرابط، لذا يحبَّذ عدم إنشاء استمارات ترسل بيانات سرية ككلمات المرور و معلومات البطاقات المسبقة الدفع بطريقة هذه القيمة، حجم البيانات المرسلة بهذه الطريقة لا يتعدى 2048 character.

- POST : تبعث هذه القيمة البيانات إلى المخدم عن طريق Body، و بالتالي لن تظهر البيانات المرسلة في الرابط، أي ترسل البيانات سرّاً، أما حجم البيانات المرسلة بهذه الطريقة فهو غير محدود.

السمة NAME

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

السمة TARGET

تحدِّد هذه السمة طريقة فتح الصفحة الهدف بعد النقر على زر الإرسال من طرف المستخدم، و هذا فقط في حالة ما إذا كانت مبرمَجة من أجل توجيه الناقر إلى مكان آخر كالذي تفعله استمارات Sign Up و Log In و غيرها... لديها خمس قيم خاصة و هم :

- SELF_ : هي القيمة التلقائية للسمة حيث تفتح الصفحة الهدف في نفس علامة التبويب لمتصفح الإنترنت.

- BLANK_ : تفتح الصفحة الهدف في علامة التبويب جديدة على نفس متصفح الإنترنت.

- PARENT_ : تفتح الصفحة الهدف في الفريم المحتوي للفريم الذي توجد فيه الإستمارة.

- TOP_ : تفتح الصفحة الهدف في أكبر فريم محتوي للفريم الذي توجد فيه الإستمارة.

- Framename : تفتح الصفحة الهدف في الفريم المقحم إسمه في قيمة السمة 'TARGET'

السمة NOVALIDATE

هي عبارة عن سمة بولينية (Boolean Attribute) أو ما تعرف بسمة ذات قيمة منطقية، و السمة البولينية هي سمة ذات تأثير وحيد حيث عند تواجدها في العنصر يفعَّل تأثيرها، و عند غيابها يعطَّل تأثيرها، و يقحَم سوى اسمها أو يقحَم فراغ بين Cotations قيمتها أو يقحَم اسمها بين Cotations قيمتها؛ تخوِّل السمة 'NOVALIDATE' عدم التحقق من البيانات عند إرسالها.

السمة AUTOCOMPLETE

تأمر هذه السمة متصفح الإنترنت بإظهار اقتراحات أثناء تحرير المستخدم في حقول الإدخال، و تكون هذه الإقتراحات عبارة عن كلمات أو جمل سبق و حررها المستخدم في خانات شبيهة بالخانة التي يحرر داخلها، لذا سُمّيََت بـ Autocomplete أي الإكمال التلقائي، لها قيمتين خاصتين و هما :

- ON : هي القيمة التلقائية للسمة حيث تفعِّل الإكمال التلقائي في الإستمارة.

- OFF : تعطِّل الإكمال التلقائي في الإستمارة.

تحتوي بعض المتصفحات على خيار تفعيل أو تعطيل هذا التأثير في إعداداتها.

السمة ENCTYPE

تحدِّد هذه السمة نوع التشفير في بيانات الإستمارة المرسَلة إلى المخدم، و تستعمل سوى في الإرسال بطريقة Post، لديها ثلاث قيم خاصة و هم :

- APPLICATION/X-WWW-FORM-URLUNCODED : هي القيمة التلقائية للسمة حيث تشفِّر البيانات، و ذلك بتحويل الفراغات إلى علامة الزائد (+) و تحويل Special Characters إلى قيمها بالأساس الست عشري (Hexadecimal).

- MULTIPART/FORM-DATA : هي قيمة لا تشفر البيانات، و غالباً ما تُستعمل في حالة ما إذا كان هناك رفع الملفات إلى الإستمارة ثم إرسالها، مما يجعل عدم تشفير الملفات يحافظ على صيغتها من أجل المعالجة.

- TEXT/PLAIN : تحول الفراغات إلى علامة الزائد.

السمة ACCEPT-CHARSET

تحدِّد هذه السمة نوع الترميز المستعمل في إرسال البيانات من الإستمارة إلى المخدم، قيمتها التلقائية هي 'UNKNOWN' حيث تحدِّد نوع الترميز المستعمَل في العنصر المحتوي للإستمارة، و يقحَم في قيمتها نوع الترميز المراد استعماله في إرسال البيانات، لكن يجب الأخذ بعين الإعتبار دعم نوع الترميز من طرف متصفحات الإنترنت، و أيضاً يجب العلم بأن التشفير يتغير حسب نوع الترميز، و بالتالي فإذا كانت البيانات المراد إدخالها في الإستمارة تحتوي على ASCII Characters أو ما تُعرف تقنياً بـ American Standard Code for Information Interchange (هذا جدول لفهم Characters ASCII) المرجو استعمال أنواع الترميز Unicode، و أقواهم UTF-8، أما إذا كانت تحتوي على أحرف لاثينية Latin، فالمرجو استعمال أنواع الترميز ISO-8859، و أقواهم إما ISO-8859-1 أو ISO-8859-15، و يمكن الإستعانة بهذه الصفحة حيث تقدم مقارنة بين أقوى الترميزات في البرمجة.

العنصر INPUT

هو عبارة عن عنصر يتيم من نوع Inline يقحم داخل عنصر 'FORM'، و يخول إنشاء اثنين و عشرون نوعاً منها حقول إدخال النصوص، أزرار، صناديق الإختيار و أدوات كالرفع و غيرها... و ما يحدِّد النوع هم قيم سمة بإسم 'TYPE' بحيث أن هذه الأخيرة تعتبر أساسية في عنصر 'INPUT'، و أيضاً هناك سمة أساسية بإسم 'NAME' حيث بدونها لن يرسَل البيان إلى المخدم، زيادة على هاتين السمتين، يتوفر عنصر 'INPUT' على سبعة و عشرون سمة منها التي هي مخصصة لنوع واحد من Input، أو لأنواع محددة، أو لجميع الأنواع، و منها أيضاً التي لديها تأثيرات مختلفة حيث سيتم شرح تأثيرها مع نوع Input، و منها التي لديها تأثير وحيد حيث سيتم شرحها محايدة في شطر مخصص لها في هذا الدرس، يقبل أيضاً عنصر 'INPUT' الأحداث البرمجية و المعروفة بالـ Events.

أنواع Input

النوع Text

هذا النوع ممثَّل بقيمة 'TEXT' حيث هذه الأخيرة هي القيمة التلقائية للسمة 'TYPE'، أي أن في حالة عدم تواجد السمة 'TYPE' في عنصر 'INPUT' سيكون نوعه هو النوع Text، و هو عبارة عن حقل إدخال نصي مكوَّن من سطر واحد.

هناك سمة تعمل في جميع أنواع Input لكن تأثيرها يتغير حسب ماهية الحقل، ففي الحقول إدخال النصوص يكون ما كُتِب في قيمتها ظاهراً في الحقل، تسمى هذه السمة بـ 'VALUE'.

النوع Search

هذا النوع ممثَّل بقيمة 'SEARCH'، و هو عبارة عن حقل إدخال نصي مكوَّن من سطر واحد، و يُستخدم للإدلاء بكلمات مفتاحية قصد البحث عنها.

النوع Tel

هذا النوع ممثَّل بقيمة 'TEL'، و هو عبارة عن حقل إدخال نصي مكوَّن من سطر واحد، و يُستخدم للإدلاء برقم الهاتف، يظهِر هذا النوع لوحة المفاتيح الرقمية في أجهزة الهواتف و الطابليت.

النوع URL

هذا النوع ممثَّل بقيمة 'URL'، و هو عبارة عن حقل إدخال نصي مكوَّن من سطر واحد، و يُستخدم للإدلاء بعنوان URL لصفحة في الويب، و عند محاولة إرسال صيغة خاطئة لعنوان URL، يظهِر متصفح الإنترنت رسالة التحقق تحُث المستخدم بضرورة إقحام عنوان URL صحيح.

النوع Email

هذا النوع ممثَّل بقيمة 'EMAIL'، و هو عبارة عن حقل إدخال نصي مكوَّن من سطر واحد، و يُستخدم للإدلاء بعنوان البريد الإلكتروني، و عند محاولة إرسال عنوان بريد إلكتروني بدون علامة At (@)، يظهِر متصفح الإنترنت رسالة التحقق تحُت المستخدم بضرورة إقحام علامة At في البيان، و عند محاولة إرسال عنوان بريد إلكتروني بدون إسم نطاق، يظهِر متصفح الإنترنت رسالة التحقق تحُت المستخدم بضرورة إقحام إسم نطاق في البيان.

النوع Password

هذا النوع ممثَّل بقيمة 'PASSWORD'، و هو عبارة عن حقل إدخال نصي مكوَّن من سطر واحد، و يُستخدم للإدلاء بكلمة المرور، و يظهر كل حرف مقحم في هذا الحقل عبارة عن نقطة سوداء أو علامة Asterisk (*).

النوع Submit

هذا النوع ممثَّل بقيمة 'SUBMIT'، و هو عبارة عن زر مخصص لإرسال بيانات الإستمارة إلى Form-handler للمعالجة أو إلى مكان سكربت بلغة معلوماتية قصد برمجتها أو شيء من هذا القبيل.

يكتب في قيمة السمة 'VALUE' ما يظهر من نص في الأزرار.

النوع Reset

هذا النوع ممثَّل بقيمة 'RESET'، و هو عبارة عن زر إذا نُقر عليه يُرجع الإستمارة إلى وضعها الإفتراضي، و كأن لو أعيد تدوير الصفحة المتواجدة بها الإستمارة.

النوع Image

هذا النوع ممثَّل بقيمة 'IMAGE'، و هو عبارة عن زر جرافيكي مكوَّن بصورة إذا نقِر عليها سترسل إحداثيتا مكان النقرة في الصورة، حيث أن X هي إحداثية العرض، و تحسَب بالبكسل (px) من يسار الصورة إلى يمينها، أما Y فهي إحداثية الإرتفاع، و تحسَب بالبكسل (px) من أعلى الصورة إلى أسفلها، و لدى هذا النوع أيضاً أربع سمات رأيناها في درس الصور ألا و هن السمتين الإجباريتين 'SRC' و 'ALT'، و السمتين الإختيارين 'WIDTH' و 'HEIGHT'.

النوع Button

هذا النوع ممثَّل بقيمة 'BUTTON'، و هو عبارة عن زر في الوضع الإفتراضي له لا يعمل شيئاً، لذا يجب مرافقته بسكربتات لغات برمجية كـ Javascript لجعله فعال، غالباً ما يقحموا فيه المطورون الأحداث البرمجية.

النوع Number

هذا النوع ممثَّل بقيمة 'NUMBER'، و هو عبارة عن حقل إدخال الأعداد.

يقبل سمة بإسم 'STEP' حيث يقحَم في قيمتها عدد يمثل عدد خطوات الإنتقال عند التعديل على محتوى الحقل، و عند محاولة إرسال عدد غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال الأعداد المتاحة.

و يقبل سمة بإسم 'MIN' حيث يقحَم في قيمتها عدد يمثل أصغر عدد متاح، و عند محاولة إرسال عدد غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال الأعداد المتاحة.

و يقبل سمة بإسم 'MAX' حيث يقحَم في قيمتها عدد يمثل أكبر عدد متاح، و عند محاولة إرسال عدد غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال الأعداد المتاحة.

النوع Range

هذا النوع ممثَّل بقيمة 'RANGE'، و هو عبارة عن حقل إدخال عدد بواسطة سلم سعته التلقائية 100 و دقته التلقائية 1.

يقبل أيضاً السمة 'STEP' حيث تحدِّد دقة Range، أي بكم ينتقل من خطوة إلى الخطوة الموالية، و يقبل أيضاً السمة 'MIN' حيث تحدِّد أدنى عدد في Range، و يقبل أيضاً السمة 'MAX' حيث تحدِّد أقصى عدد في Range، أي سعته.

النوع Time

هذا النوع ممثَّل بقيمة 'TIME'، و هو عبارة عن حقل إدخال التوقيت، أي الساعة و الدقيقة، و دقته التلقائية هي دقيقة واحدة، بمعنى عند التعديل فيه يتحرك التوقيت بدقيقة واحدة.

يقبل السمة 'STEP' حيث تحدِّد دقة الحقل، و يقحَم في قيمتها عدد صحيح يحدِّد الثواني أو عدد عشري يحدد إما عشر الثانية (ds) أو جزء من المائة للثانية (cs) أو جزء من الألف للثانية (ms)، و عند محاولة إرسال توقيت غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال توقيت متاح.

و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى توقيت متاح بنظام 24 ساعة، و عند محاولة إرسال توقيت غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال توقيت متاح.

و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى توقيت متاح بنظام 24 ساعة أيضاً، و عند محاولة إرسال توقيت غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال توقيت متاح.

النوع Date

هذا النوع ممثَّل بقيمة 'DATE'، و هو عبارة عن حقل إدخال التاريخ اليومي، أي اليوم و الشهر و السنة، و دقته التلقائية هي يوم واحد.

يقبل السمة 'STEP' حيث تحدِّد دقة الحقل، و يقحَم في قيمتها عدد يحدِّد الأيام المتاحة، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى تاريخ متاح، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى تاريخ متاح، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

أما تنسيق قيمتي 'MIN' و 'MAX' فهو على النحو التالي : اليوم-الشهر-السنة

النوع Week

هذا النوع ممثَّل بقيمة 'WEEK'، و هو عبارة عن حقل إدخال التاريخ الأسبوعي، أي رقم الأسبوع في السنة كذا مثلاً، و دقته التلقائية هي أسبوع واحد.

يقبل السمة 'STEP' حيث تحدِّد دقة الحقل، و يقحَم في قيمتها عدد يحدِّد دقة الحقل، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى أسبوع متاح، و عند محاولة إرسال أسبوع غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال أسبوع متاح.

و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى أسبوع متاح، و عند محاولة إرسال أسبوع غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال أسبوع متاح.

أما تنسيق قيمتي 'MIN' و 'MAX' فهو على النحو التالي : الأسبوعW-السنة

النوع Month

هذا النوع ممثَّل بقيمة 'MONTH'، و هو عبارة عن حقل إدخال التاريخ الشهري، أي إسم الشهر في السنة كذا مثلاً، و دقته التلقائية هي شهر واحد.

و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى شهر متاح، و عند محاولة إرسال شهر غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال شهر متاح.

و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى شهر متاح، و عند محاولة إرسال شهر غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال شهر متاح.

أما تنسيق قيمتي 'MIN' و 'MAX' فهو على النحو التالي : الشهر-السنة

النوع Datetime-local

هذا النوع ممثَّل بقيمة 'DATETIME-LOCAL'، و هو عبارة عن حقل إدخال التاريخ الإجمالي، أي السنة و الشهر و اليوم و الساعة و الدقيقة و الثانية و العشر ثانية و الجزء من المائة للثانية و الجزء من الألف للثانية، علماً أن دقة الحقل التلقائية هي دقيقة واحدة.

يقبل السمة 'STEP' حيث تحدِّد دقة الحقل، و يقحَم في قيمتها عدد صحيح يحدِّد الثواني أو عدد عشري يحدد إما عشر الثانية (ds) أو جزء من المائة للثانية (cs) أو جزء من الألف للثانية (ms)، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى ما يمكن إدخاله من تاريخ في الحقل، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى ما يمكن إدخاله من تاريخ في الحقل، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

أما تنسيق قيمتي 'MIN' و 'MAX' فهو على النحو التالي :

dscsms.الثانية:الدقيقة:الساعةTاليوم-الشهر-السنة

النوع Checkbox

هذا النوع ممثَّل بقيمة 'CHECKBOX'، و هو عبارة عن صناديق الإختيار أو ما تعرف بخيارات التفعيل، حيث يمكِّن هذا النوع المستخدم من تفعيل خيار أو أكثر من الخيارات المتاحة في الإستمارة علماً أن كل خيار من هذه الخيارات يكون مقحم بعنصر 'INPUT' خاص به، و للربط بينهم يجب أن يتوفروا على نفس قيمة السمة 'NAME'، أما ما يكون متغير بينهم فهو قيم السمة 'VALUE' حيث تمكِّن المخدم من التعرف عليها عند الإرسال.

يقبل هذا النوع سمة بولينية بإسم 'CHECKED' حيث تجعل الخيار مفعَّلاً تلقائياً بعد إعادة تدوير الصفحة.

النوع Radio

هذا النوع ممثَّل بقيمة 'RADIO'، و هو عبارة عن صناديق الإختيار، حيث يمكِّن هذا النوع المستخدم من تفعيل خيار واحد من الخيارات المتاحة في الإستمارة علماً أن كل خيار من هذه الخيارات يكون مقحم بعنصر 'INPUT' خاص به، و للربط بينهم يجب أن يتوفروا على نفس قيمة السمة 'NAME'، أما ما يكون متغير بينهم فهو قيم السمة 'VALUE' حيث تمكِّن من التعرف عليها من طرف المخدم عند الإرسال.

يقبل هذا النوع سمة بولينية بإسم 'CHECKED' حيث تجعل الخيار مفعَّلاً تلقائياً بعد إعادة تدوير الصفحة.

النوع File

هذا النوع ممثَّل بقيمة 'FILE'، و هو عبارة عن آداة رفع الملفات يتم النقر عليها من طرف المستخدم لتنبثق نافذة الرفع تمكنه من تحديد الملف المراد رفعه، ثم بالنقر على "Ouvrir / Open" يتم رفع الملف إلى المتصفح من أجل الإرسال للمعالجة في المخدم.

يقبل هذا النوع سمة خاصة بإسم 'ACCEPT'، و هي سمة تحدّد أنواع ملفات الميديا المرخص لها أن ترفَع في الآداة، و في قيمتها إمتدادات ملفات الميديا و أنواع MIME لملفات الميديا (هذه صفحة في ويكيبيديا تشرح أنواع MIME لملفات الميديا) و في حالة التعدد، تُفرَق القيم بعلامة Comma (,).

للتذكير يجب إقحام السمة 'ENCTYPE' و في قيمتها القيمة 'MULTIPART/FORM-DATA' بهدف عدم تشفير الملفات عند إرسالها للمعالجة، و طبعاً طريقة الإرسال 'POST'.

النوع Color

هذا النوع ممثَّل بقيمة 'COLOR'، و هو عبارة عن آداة Color Picker يتم النقر عليها من طرف المستخدم لتنبثق نافذة الألوان تمكِّنه من تحديد اللون المراد إرساله، ثم بالنقر على "OK" يتم اختيار اللون من أجل الإرسال للمعالجة في المخدم، علما أن اللون يتم إرساله بصيغة Hexadecimal.

سمة 'VALUE' في هذا النوع تحدد اللون التلقائي الذي يظهر في الآداة، و يقحم في قيمتها إسم اللون بصيغة Hexadecimal.

النوع Hidden

هذا النوع ممثَّل بقيمة 'HIDDEN'، و هو عبارة عن آداة مختفية في الإستمارة، مخصصة لإرسال بيانات برمجية إلى المخدم مخصصة من طرف المطور، فمثلاً إذا كانت مقحمة في قيمة 'NAME' لديها قيمة '_CHARSET_' سيبعث نوع الترميز المستعمل في إرسال بيانات الإستمارة إلى المخدم، بحيث يمكن التعديل على نوع الترميز المستعمل عبر السمة 'ACCEPT-CHARSET'.

الفيديو التوضيحي للدرس

سمات العنصر INPUT

يتوفر عنصر 'INPUT' على ثلاثون سمة منها الأساسية كـ 'TYPE' و 'NAME' و 'VALUE'، و منها الثانوية حيث تنقسم إلى قسمين، قسم السمات المتعددة التأثير التي رأيناها أعلاه، و قسم السمات الأحادية التأثير التي سنراها الآن.

السمة AUTOFOCUS

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

السمة DISABLED

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

السمة READONLY

هي سمة بولينية تجعل حقل الإدخال غير قابل للتعديل، بمعنى قابل سوى للقراءة و التحديد و النسخ، و هذا لا يمنع إرساله إلى المخدم، و تعمل هذه السمة في جميع أنواع Input.

السمة REQUIRED

هي سمة بولينية تجعل ملء حقل الإدخال إجباري، ففي حالة الإرسال مع عدم ملء الحقل، يُظهر متصفح الإنترنت رسالة التحقق تحُث المستخدم بضرورة ملء حقل الإدخال، و تعمل هذه السمة في جميع أنواع Input.

السمة MULTIPLE

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

السمة FORM

هي سمة تجعل Input خارج عنصر 'FORM' معين ينتمي إليه، و ذلك بإقحام قيمة السمة 'ID' لعنصر 'FORM' في قيمة السمة 'FORM' في Input، و تعمل هذه السمة في جميع أنواع Input.

السمة DIRNAME

هي سمة تحدِّد إتجاه لغة البيان في Input، يقحَم في قيمتها قيمة السمة 'NAME' تم كلمة 'dir' مفروفتين إما بنقطة (.) أو علامة Dash (-)، و تعمل هذه السمة في Input من نوع Text و في Input من نوع Search.

السمة PATTERN

تجعل هذه السمة ضرورة ملء حقل الإدخال بصيغة معينة تقحم في قيمتها برموز Regular Expressions و المعروفة بـ RegEx، و إذا لم يتم ملء حقل الإدخال بالصيغة المخصصة بقيمة السمة 'PATTERN'، يظهِر متصفح الإنترنت رسالة التحقق تحُث المستخدم بضرورة ملء حقل الإدخال بالصيغة المخصصة، و تعمل هذه السمة في جميع حقول إدخال النصوص (Password , Email , URL , Tel , Search , Text) و ترافق هذه السمة السمة 'TITLE' حيث تمكِّن هذه الأخيرة من إضافة محتوى نصي إلى رسالة التحقق، و ذلك عبر إقحامه في قيمة السمة 'TITLE'، و للإشارة فتواجد السمة 'NOVALIDATE' في عنصر 'FORM' يعطل تأثير هذه السمة.

Regular Expressions

تعتبر RegEx مفتاح معرفة لغات معلوماتية قوية في التطوير و البرمجة، فهذا الموقع يشمل كل ما يتعلق بها من ناحية المعلومة، أما التدريب فالحيز الزمني [من 01:25:16 إلى 02:41:06] للفيديو التوضيحي للدرس يشرح شرحاً صائباً استناداً بآداة regex.101، لكن هذا لا يمنع الشرح الكتابي من سرد أساسياتها، أولاً يجب فهم بعض المصطلحات كـ Matching، و تعني استهداف، أي أن RegEx تستهدف ASCII Characters بترتيب معين و بكم معين، و كـ String، و هي مجموعة من RegEx تستهدف كم و ترتيب معينين، و كـ Quantifiers، و هي محددات كمية Characters المراد عمل لها Matching، يوضح الجدول أسفله تأثير RegEx الأكثر تداولاً من طرف المطورين :

RegEx	تأثير Matching
[abc]	أي Character داخل قوسي Brackets المثال : a و b و c صغار
[abc^]	جميع Characters ماعدا التي داخل قوسي Brackets المثال : جميع Chracters ماعدا a و b و c صغار
[a-z]	مجال استهداف [إلى-من] حسب ASCII Table المثال : من a إلى z
[*-!^]	مجال عدم استهداف [إلى-من] حسب ASCII Table المثال : جميع Chracters ماعدا من ! إلى *
[A-Za-c]	تعدد مجالات الإستهداف المثال : من a إلى z و من A إلى Z
.	جميع Characters
s\	جميع أنواع الفراغات : - الفراغ من نوع Space - الفراغ من نوع Tab - الرجوع إلى السطر
S\	جميع Characters ماعدا أنواع الفراغات
d\	جميع الأعداد
D\	جميع Characters ماعدا جميع الأعداد
w\	- جميع الأعداد - جميع الحروف الصغيرة - جميع الحروف الكبيرة - علامة Underscore (_)
W\	جميع Characters ماعدا : - جميع الأعداد - جميع الحروف الصغيرة - جميع الحروف الكبيرة - علامة Underscore (_)
(..)	ليس بـ Matching لكن القوسين يحددان مجموعة من RegEx
(a\|b)	(إما و إما) المثال : إما a و إما b
?a	Quantifier ? تعني 1 أو 0 المثال : يجب على a أن تكون مرة واحدة أو منعدمة
*a	Quantifier * تعني 0 أو أكثر المثال : يجب على a أن تكون منعدمة أو مرة أو أكثر من مرة
+a	Quantifier + تعني 1 أو أكثر المثال : يجب على a أن تكون مرة واحدة أو أكثر من مرة
{3}a	Quantifier {} و داخلها عدد تحدد عدد المرات على التوالي المثال : يجب على a أن تكون ثلاث مرات على التوالي
{,3}a	Quantifier {} و داخلها عدد ثم Comma تحدد عدد المرات على التوالي أو أكثر المثال : يجب على a أن تكون ثلاث مرات على التوالي أو أكثر
{3,7}a	Quantifier {} و داخلها عددين مفصولين بـ Comma تحدد مجال المرات على التوالي المثال : يجب على a أن تكون من ثلاث مرات على التوالي إلى سبع مرات على التوالي
^	تكون في بداية String
$	تكون في نهاية String
b\	أي Character موجود في بداية الكلمات
B\	أي Character موجود في نهاية الكلمات
(x=?)	الإجبار المثال : إلزام ضرورة تواجد x

السمة PLACEHOLDER

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

السمة SIZE

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

السمة MINLENGTH

يقحم في قيمتها عدد يحدد عدد Characters الأدنى المرجو إقحامها في حقل الإدخال، و عند محاولة إرسال عدد أحرف أقل من الذي هو مسموح به في الحقل، يُظهر متصفح الإنترنت رسالة التحقق تحث المستخدم بإدخال الحد الأدنى المسموح به من عدد Characters، تعمل هذه السمة في جميع حقول إدخال النصوص.

السمة MAXLENGTH

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

السمة FORMACTION

تعمل هذه السمة في Input من نوع Submit و في Input من نوع Image، و لديها نفس تأثير السمة 'ACTION' في عنصر 'FORM'، أي تحدد وجهة البيانات المرسلة هل إلى Form-handler أو إلى مكان سكربت بلغة معلوماتية أو شيء من هذا القبيل، و يقحم في قيمتها مسار الصفحة المرسَلة إليها البيانات استناداً بقاعدة المسارات، و هذا ما يجعل هذه السمة تخول إنشاء عدة أزرار من نفس النوع في نفس الإستمارة حيث كل زر يوجه البيانات إلى مكان ما.

السمة FORMMETHOD

تعمل هذه السمة في Input من نوع Submit و في Input من نوع Image، و لديها نفس تأثير السمة 'METHOD' في عنصر 'FORM'، أي تحدد طريقة الإرسال الذي ترسَل به البيانات هل Get أم Post، و لديها نفس قيمتا السمة 'METHOD' مما يجعلها تخول إنشاء زرين من نفس النوع في نفس الإستمارة حيث كل زر يرسل البيانات بطريقة معينة.

السمة FORMENCTYPE

تعمل هذه السمة في Input من نوع Submit و في Input من نوع Image، و لديها نفس تأثير السمة 'ENCTYPE' في عنصر 'FORM'، أي تحدد نوع تشفير البيانات المرسلة إلى المخدم، و لديها أيضاً القيم الثلاث لسمة 'ENCTYPE' مما يجعلها تخول إنشاء ثلاث أزرار من نفس النوع في نفس الإستمارة حيث كل زر يرسل البيانات بتشفير معين.

السمة FORMTARGET

تعمل هذه السمة في Input من نوع Submit و في Input من نوع Image، و لديها نفس تأثير السمة 'TARGET' في عنصر 'FORM'، أي تحدد طريقة فتح الصفحة الهدف بعد النقر، و لديها نفس القيم الخمس لسمة 'TARGET' مما يجعلها تخول إنشاء العديد من الأزرار من نفس النوع في نفس الإستمارة حيث كل زر يفتح الصفحة الهدف بطريقة معينة.

السمة FORMNOVALIDATE

هي سمة بولينية تعمل في Input من نوع Submit و في Input من نوع Image، و لديها نفس تأثير السمة 'NOVALIDATE' في عنصر 'FORM'، أي تخول إرسال البيانات بدون التحقق من الشروط اللازمة لإرسالها.

العنصر TEXTAREA

هو عبارة عن عنصر ثنائي الأوسمة من نوع Inline و يقحم داخل عنصر 'FORM'، و ينشئ حقل إدخال نصي مكون من أكثر من سطر واحد، لديه سمة 'NAME' المسؤولة عن إرسال البيان الخاص به إلى المخدم حيث تعتبر هذه السمة ضرورية.

و لديه سمة أخرى بإسم 'COLS' حيث تحدِّد عرض الحقل، و يقحم في قيمتها عدد يمثل عدد الأحرف المراد إدخالها في سطر واحد مع احتساب Scrollbar العمودية.

و لديه سمة أخرى بإسم 'ROWS' حيث تحدِّد ارتفاع الحقل، و يقحم في قيمتها عدد يمثل عدد الأسطر التي تكون ظاهرة في الحقل، و لديه سمة أخرى بإسم 'WRAP' حيث تحدِّد هل يتم قسم الكلمات التي هي أطول من عرض الحقل أثناء الإرسال أم لا، لدى هذه السمة قيمتين خاصتين و هما 'SOFT' و 'HARD'، الأولى لا تقسم الكلمة أثناء الإرسال حيث أنها القيمة التلقائية للسمة، أما الثانية فتقسم الكلمة أثناء الإرسال.

لدى عنصر 'TEXTAREA' من السمات السابقة الذكر 'READONLY' ، 'PLACEHOLDER' ، 'MAXLENGTH' ، 'MINLENGTH' ، 'FORM' ، 'DISABLED' ، 'DIRNAME' ، 'AUTOFOCUS' و 'REQUIRED'.

العناصر SELECT و OPTION و OPTGROUP

يمكِّن العنصر'SELECT' من إنشاء قائمة منسدلة مكونة من خيارات، و هو عنصر من نوع Inline و ثنائي الأوسمة و يقحم داخل عنصر 'FORM'، و لديه السمة 'NAME' حيث بدونها لن ترسل بيانات القائمة، و لديه أيضاً السمة 'SIZE' حيث تحدد ارتفاع القائمة، و ذلك بإقحام في قيمتها عدد يحدد عدد الأسطر التي تظهر في القائمة، و لديه كذلك السمة البولينية 'MULTIPLE' حيث تخول تحديد أكثر من خيار، و هو فقط ينشئ القائمة، أما خيارات هذه الأخيرة، فتنشأ عن طريق عنصر 'OPTION'، و هو عنصر ثنائي الأوسمة، و لديه سمتين أساسيتين ألا و هما 'VALUE' و 'LABEL' حيث يقحم في قيمة الأولى ما يذهب من بيان إلى المخدم، و يقحم في قيمة الثانية ما يظهر من خيار منسدل في القائمة، و لديه أيضاً سمة بولينية بإسم 'SELECTED' حيث تجعل الخيار مفعلاً تلقائياً بعد إعادة تدوير الصفحة، أما العنصر 'OPTGROUP' فهو عنصر تنائي الأوسمة، يصلح فقط لجمع مجموعة خيارات في تصنيف واحد حيث تقحم عناصر الخيارات المراد جمعها بين وسميه، و يقبل سمة 'LABEL' حيث يقحم في قيمتها ما يظهر كعنوان التصنيف في القائمة، و هو غير قابل للتحديد، يقبل العناصران 'OPTION' و 'OPTGROUP' السمة 'DISABLED'، فيما يقبل العنصر 'SELECT' السمات 'DISABLED' و 'AUTOFOCUS' و 'REQUIRED' و 'FORM'.

العنصر OUTPUT

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

العنصر DATALIST

هو عبارة عن عنصر ثنائي الأوسمة، و ينشئ قائمة منسدلة من حقل الإدخال المربوط به و المكوَّن بعنصر 'INPUT'، و أيضاً يعطي اقتراحات الإكمال التلقائي من مكوناته للمستخدمين أثناء تحريرهم في حقل الإدخال المربوط به، و يقحَم خارج عنصر 'FORM' المحتوي لحقل الإدخال المربوط به، أما مكوناته فتقحم بين وسميه عبر العنصر 'OPTION' الذي رأيناه سابقاً، لكن في عنصر 'DATALIST' يقحم سوى وسم فتح العنصر 'OPTION'، و هذا من أجل دعم المتصفحات القديمة لإقتراحات الإكمال التلقائي، يمكن إقحام ما يظهر من مكون في قيمة سمة 'VALUE' لعنصر 'OPTION'، كما يمكن إقحامه سوى بعد وسم فتح العنصر 'OPTION' مع الإستغناء على سمة 'VALUE'، أما من أجل ربط عنصر 'DATALIST' بحقل الإدخال، تقحم السمة 'ID' في عنصر 'DATALIST' بقيمة معينة، ثم تقحم سمة بإسم 'LIST' في العنصر 'INPUT' المسؤول عن إقحام حقل الإدخال المراد ربطه، و في قيمتها قيمة السمة 'ID' المقحمة في عنصر 'DATALIST'، يعمل هذا الأخير في أنواع Text Input و Search و Tel و URL و Email و Number و Range و Time و Date و Week و Month و Datetime-local و Color.

العنصر LABEL

هو عنصر من نوع Inline و ثنائي الأوسمة و يقحم داخل عنصر 'FORM'، و يمكِّن من إنشاء نص بجانب عناصر الإستمارة، و من أجل ربط عنصر 'LABEL' بعنصر الإستمارة، تقحم في هذا الأخير السمة 'ID' بقيمة معينة، تم يقحم في عنصر 'LABEL' سمة بإسم 'FOR' و في قيمتها قيمة السمة 'ID' المقحمة في عنصر الإستمارة، ثم يُكتب النص المراد وضعه بجانب عنصر الإستمارة داخل وسمي عنصر 'LABEL'.

هناك طريقة أخرى لربط عنصر 'LABEL' بعنصر الإستمارة ألا و هي إقحام النص ثم عنصر الإستمارة بين وسمي عنصر 'LABEL'.

العنصران FIELDSET و LEGEND

يكوِّن عنصر 'FIELDSET' إطار حول عناصر الإستمارة المقحمة بين وسميه، حيث أنه عنصر من نوع Block و ثنائي الأوسمة و يقحم داخل عنصر 'FORM'، و يقبل من السمات السابقة الذكر السمة 'DISABLED' و السمة 'FORM' و السمة 'NAME'، أما عنصر 'LEGEND' فهو مخصص لإنشاء عنوان للإطار، و هو عنصر ثنائي الأوسمة حيث يقحم بين وسميه ما يظهر من نص كعنوان للإطار المكوَّن من طرف العنصر 'FIELDSET'، و هو أول ما يقحَم بين وسمي عنصر 'FIELDSET'.

See the Pen
الإستمارات في HTML by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

الخاصية transform و خواص تقنية Transformation في CSS | الدرس 34\37

noreply@blogger.com (Unknown) — Tue, 21 Jan 2020 01:52:00 +0000

السلام عليكم، سنرى في هذا الدرس تقنية Transformation في CSS حيث سنتطرق إلى الخواص المتعلقة بهذه التقنية، و التي هي :

* الخاصية 'TRANSFORM'

* الخاصية 'PERSPECTIVE'

* الخاصية 'PERSPECTIVE-ORIGIN'

* الخاصية 'TRANSFORM-ORIGIN'

* الخاصية 'TRANSFORM-STYLE'

* الخاصية 'BACKFACE-VISIBILITY'

تقنية Transformation هي تقنية تجعل العناصر HTML تتحول سواء بالإزاحة أو الإستدارة أو التحجيم أو الإنحراف، و هذا التحويل يمكن أن يكون في حيز ثنائي الأبعاد (x , y)، أو في حيز ثلاثي الأبعاد (x , y , z).

الخاصية TRANSFORM

تعتبر الخاصية 'TRANSFORM' الخاصية الرئيسية في إنشاء تقنية Transformation حيث تحدد نوعية التحويل من التحويلات الأربعة، لديها واحد و عشرون قيمة خاصة، أحد عشر قيمة تعمل في الحيز الثنائي الأبعاد 2D، و هم :

• القيمة '()rotate'

• القيمة '()translate'

• القيمة '()translateX'

• القيمة '()translateY'

• القيمة '()scale'

• القيمة '()scaleX'

• القيمة '()scaleY'

• القيمة '()skew'

• القيمة '()skewX'

• القيمة '()skewY'

• القيمة '()matrix'

أما العشر قيم المتبقية، فتعمل في الحيز الثلاثي الأبعاد 3D، و هم :

• القيمة '()perspective'

• القيمة '()rotateX'

• القيمة '()rotateY'

• القيمة '()rotateZ'

• القيمة '()rotate3d'

• القيمة '()translateZ'

• القيمة '()translate3d'

• القيمة '()scaleZ'

• القيمة '()scale3d'

• القيمة '()matrix3d'

تقبل الخاصية 'transform' من القيم الشاملة قيمتين، أما قيمتها التلقائية فتسمى 'none' حيث تمنع إنشاء تقنية Transformation.

القيمة ()rotate

تخول هذه القيمة تحويل العنصر عن طريق الإستدارة، و يُقحَم بين قوسيها Parameter بوحدة قياس 'deg' يعبر عن عدد درجات الإستدارة علماً أن نقطة الإستدارة هي مركز العنصر، فإذا كان الـ Parameter موجباً ستتم استدارة العنصر مع اتجاه عقارب الساعة، أما إذا كان سالباً، فستتم استدارة العنصر عكس اتجاه عقارب الساعة.

القيمة ()translate

تخول هذه القيمة تحويل العنصر عن طريق الإزاحة، و تقحم إتنان Parameters مفصولين بعلامة Comma :

- الـ Parameter الذي في اليسار هو المسؤول على الإزاحة الأفقية، حيث أنه إذا كان موجباً سيزيح العنصر يميناً، و إذا كان سالباً سيزيح العنصر يساراً، أما إذا كان يساوي 0 فلن يزيح العنصر.

- الـ Parameter الذي في اليمين هو المسؤول على الإزاحة العمودية، حيث أنه إذا كان موجباً سيزيح العنصر إلى الأسفل، و إذا كان سالباً سيزيح العنصر إلى الأعلى، أما إذا كان يساوي 0 فلن يزيح العنصر.

القيمة ()translateX

تخول هذه القيمة تحويل العنصر عن طريق الإزاحة الأفقية، و يُقحَم بين قوسيها Parameter سواء بالقيم المطلقة أو القيم النسبية، فإذا كان الـ Parameter موجباً ستتم إزاحة العنصر يميناً، أما إذا كان سالباً، فستتم إزاحة العنصر يساراً.

القيمة ()translateY

تخول هذه القيمة تحويل العنصر عن طريق الإزاحة العمودية، و يُقحَم بين قوسيها Parameter سواء بالقيم المطلقة أو القيم النسبية، فإذا كان الـ Parameter موجباً ستتم إزاحة العنصر إلى الأسفل، أما إذا كان سالباً، فستتم إزاحة العنصر إلى الأعلى.

القيمة ()scale

تخول هذه القيمة تحويل العنصر عن طريق التحجيم، أي أنها تكبر أو تصغر عرض و ارتفاع العنصر، أو تعمل له تماثل محوري، أي تجعل يمينه يساره و يساره يمينه و أعلاه أسفله و أسفله أعلاه، و يقحم بين قوسيها إما Parameter واحد أو إثنان Parameters بحيث أن الـ Parameter لديها يكون عبارة عن عدد يُضرَب في عرض أو ارتفاع العنصر ليكبره أو يصغره أو يعمل له تماثل محوري علماً أن الـ Parameter التلقائي هو '1'، بمعنى أكبر من 1 يعمل تكبير، و بين 1 و 0 يعمل تصغير، و الـ Parameter السالب يعمل تماثل محوري.

في حالة إقحام Parameter واحد، يُضرب هذا الأخير في عرض و ارتفاع العنصر ليكبرهما أو يصغرهما أو يعمل لهما تماثل محوري، أما في حالة إقحام إثنان Parameters، فيُفصَل هذين الأخيرين بعلامة Comma، يُضرب الـ Parameter الذي في اليسار في عرض العنصر ليكبره أو يصغره أو يعمل له تماثل محوري، و يُضرب الـ Parameter الذي في اليمين في ارتفاع العنصر ليكبره أو يصغره أو يعمل له تماثل محوري.

القيمة ()scaleX

تخول هذه القيمة تحويل العنصر عن طريق التحجيم الأفقي، أي أنها تكبر أو تصغر عرض العنصر، أو تعمل له تماثل محوري، و يقحم بين قوسيها Parameter واحد يضرب في عرض العنصر ليكبره أو يصغره أو يعمل له تماثل محوري، علماً أن الـ Parameter التلقائي هو '1'، بمعنى أكبر من 1 يعمل تكبير، و بين 1 و 0 يعمل تصغير، و الـ Parameter السالب يعمل تماثل محوري.

القيمة ()scaleY

تخول هذه القيمة تحويل العنصر عن طريق التحجيم العمودي، أي أنها تكبر أو تصغر ارتفاع العنصر، أو تعمل له تماثل محوري، و يقحم بين قوسيها Parameter واحد يضرب في ارتفاع العنصر ليكبره أو يصغره أو يعمل له تماثل محوري، علماً أن الـ Parameter التلقائي هو '1'، بمعنى أكبر من 1 يعمل تكبير، و بين 1 و 0 يعمل تصغير، و الـ Parameter السالب يعمل تماثل محوري.

القيمة ()skew

تخول هذه القيمة تحويل العنصر عن طريق الإنحراف، و يقحم بين قوسيها إثنان Parameters بوحدة قياس 'deg' مفروقة بعلامة Comma :

- الـ Parameter الذي في اليسار هو المسؤول عن الإنحراف الأفقي للعنصر، بحيث أن الـ Parameter الموجب يعمل انحراف نحو اليسار، و الـ Parameter السالب يعمل انحراف نحو اليمين.

- الـ Parameter الذي في اليمين هو المسؤول عن الإنحراف العمودي للعنصر، بحيث أن الـ Parameter الموجب يعمل انحراف نحو الأعلى، و الـ Parameter السالب يعمل انحراف نحو الأسفل.

القيمة ()skewX

تخول هذه القيمة تحويل العنصر عن طريق الإنحراف الأفقي، أي أن الإنحراف يتم سوى إلى اليمين أو إلى اليسار، و يقحم بين قوسيها Parameter واحد بوحدة قياس 'deg' يعبر عن درجة الإنحراف الأفقي، بحيث أن الـ Parameter الموجب يعمل انحراف نحو اليسار، و الـ Parameter السالب يعمل انحراف نحو اليمين.

القيمة ()skewY

تخول هذه القيمة تحويل العنصر عن طريق الإنحراف العمودي، أي أن الإنحراف يتم سوى إلى الأعلى أو إلى الأسفل، و يقحم بين قوسيها Parameter واحد بوحدة قياس 'deg' يعبر عن درجة الإنحراف العمودي، بحيث أن الـ Parameter الموجب يعمل انحراف نحو الأعلى، و الـ Parameter السالب يعمل انحراف نحو الأسفل.

القيمة ()matrix

تخول هذه لقيمة إنشاء عدة تحويلات مختلفة من التحويلات الثنائية الأبعاد في نفس القيمة، و يقحم داخل قوسيها ستة Parameters بدون وحدات قياس و مفصولة بعلامة Comma :

- يقحم في الـ Parameter الأول نفس ما يقحم في Parameter قيمة '()scaleX'، حيث لديهما نفس التأثير في النتيجة.

- يقحم في الـ Parameter الثاني نفس ما يقحم في Parameter قيمة '()skewY'، حيث لديهما نفس التأثير في النتيجة.

- يقحم في الـ Parameter الثالث نفس ما يقحم في Parameter قيمة '()skewX'، حيث لديهما نفس التأثير في النتيجة.

- يقحم في الـ Parameter الرابع نفس ما يقحم في Parameter قيمة '()scaleY'، حيث لديهما نفس التأثير في النتيجة.

- يقحم في الـ Parameter الخامس نفس ما يقحم في الـ Parameter بالبكسل لقيمة '()translateX'، حيث لديهما نفس التأثير في النتيجة.

- يقحم في الـ Parameter السادس نفس ما يقحم في الـ Parameter بالبكسل لقيمة '()translateY'، حيث لديهما نفس التأثير في النتيجة.

و لعمل استدارة يجب على الـ Parameter الأول و الرابع أن يكونا متشابهين كشرط أول، و على الـ Parameter الثاني و الثالث أن يكونا متعاكسين، بمعنى يحتويان على نفس العدد لكن Parameter سالب و الآخر موجب.

القيمة ()perspective

كل عنصر HTML لديه عرض (X) و ارتفاع (Y)، حيث يتواجد في المستوى الذي يتشاركان فيه عرضه و ارتفاعه، و هذا المستوى يكون متطابق مع مستوى الشاشات، تجعل هذه القيمة العنصر يتواجد في حيز ثلاثي الأبعاد، و ذلك بخلق بُعد ثالث ينبثق محوره (Z) من مركز العنصر متعامداً مع مستوى عرض و ارتفاع العنصر، و يقحم بين قوسيها Parameter بقيمة مطلقة أو نسبية غير النسبة المئوية تمثل طول المحور Z بحيث يكون مستوى الشاشات متوازي مع مستوى العنصر، و المسافة التي بينهما هي طول المحور Z، و بالتالي فالحيز الذي بين مستوى الشاشات و مستوى العنصر و ما خلف مستوى العنصر هو الحيز الثلاثي الأبعاد الذي يمكن التعديل على العنصر داخله، و يجب دائماً الأخذ بعين الإعتبار أن إذا لمس العنصر مستوى الشاشات سيختفي.

نموذج يوضح تواجد العنصر في الحيز الثلاثي الأبعاد (Z,Y,X)

القيمة ()rotateX

تخول هذه القيمة تحويل العنصر عن طريق الإستدارة حول المحور X، و يُقحَم بين قوسيها Parameter بوحدة قياس 'deg' يعبر عن عدد درجات الإستدارة علماً أن الـ Parameter الموجب يعمل استدارة في اتجاه إغلاق جفن العين العلوي ↶، و الـ Parameter السالب يعمل استدارة في اتجاه فتح جفن العين العلوي ↷.

القيمة ()rotateY

تخول هذه القيمة تحويل العنصر عن طريق الإستدارة حول المحور Y، و يُقحَم بين قوسيها Parameter بوحدة قياس 'deg' يعبر عن عدد درجات الإستدارة علماً أن الـ Parameter الموجب يعمل استدارة عكس اتجاه عقارب ساعة على مستوى أفقي ↺، و الـ Parameter السالب يعمل استدارة في اتجاه عقارب ساعة على مستوى أفقي ↻.

القيمة ()rotateZ

تشبه هذه القيمة القيمة '()rotate' حيث تخول تحويل العنصر عن طريق الإستدارة حول المحور Z، و يُقحَم بين قوسيها Parameter بوحدة قياس 'deg' يعبر عن عدد درجات الإستدارة علماً أن الـ Parameter الموجب يعمل استدارة في اتجاه عقارب الساعة ↻، و الـ Parameter السالب يعمل استدارة عكس اتجاه عقارب الساعة ↺.

القيمة ()rotate3d

تخول هذه القيمة تحويل العنصر عن طريق الإستدارة حول المحاور الثلاث Y ، X و Z، و يقحم بين قوسيها أربع Parameters مفروقة بعلامة Comma :

- يكتب في الـ Parameter الأول عدد بدون وحدات قياس يمثل الدوران حول المحور X، علماً أن العدد الموجب يعمل استدارة في اتجاه إغلاق جفن العين العلوي، و العدد السالب يعمل استدارة في اتجاه فتح جفن العين العلوي.

- يكتب في الـ Parameter الثاني عدد بدون وحدات قياس يمثل الدوران حول المحور Y، علماً أن العدد الموجب يعمل استدارة عكس اتجاه عقارب ساعة على مستوى أفقي، و العدد السالب يعمل استدارة في اتجاه عقارب ساعة على مستوى أفقي.

- يكتب في الـ Parameter الثالث عدد بدون وحدات قياس يمثل الدوران حول المحور Z، علماً أن العدد الموجب يعمل استدارة عكس اتجاه عقارب الساعة، و العدد السالب يعمل استدارة في اتجاه عقارب الساعة.

- يكتب في الـ Parameter الرابع عدد بوحدة القياس 'deg' يمثل درجة الإستدارة.

أما في حالة احتواء الـ Parameters الثلاث على أعداد، فستتم الإستدارة حول المحور المسؤول عليه الـ Parameter الذي يحتوي على أصغر عدد.

القيمة ()translateZ

تخول هذه القيمة تحويل العنصر عن طريق الإزاحة في المحور Z، أي أنها تقرب و تبعد العنصر عن المستوى الشاشة، و يُقحَم بين قوسيها Parameter سواء بالقيم المطلقة أو القيم النسبية، الـ Parameter الموجب يقرب العنصر نحو مستوى الشاشة، أما السالب فيبعد العنصر من مستوى الشاشة.

القيمة ()translate3d

تخول هذه القيمة تحويل العنصر عن طريق الإزاحة في المحاور الثلاث Y ، X و Z، و يقحم بين قوسيها ثلاث Parameters مفصولة بعلامة Comma :

- يقحم في الـ Parameter الأول نفس ما يقحم في Parameter قيمة '()translateX'، حيث لديهما نفس التأثير في النتيجة.

- يقحم في الـ Parameter الثاني نفس ما يقحم في Parameter قيمة '()translateY'، حيث لديهما نفس التأثير في النتيجة.

- يقحم في الـ Parameter الثالث نفس ما يقحم في Parameter قيمة '()translateZ'، حيث لديهما نفس التأثير في النتيجة.

القيمة ()scaleZ

تخول هذه القيمة تحويل العنصر عن طريق التحجيم في البعد الثالث، أي أنها تكبر أو تصغر أو تعمل تماثل محوري لمسافة طول العنصر في البعد الثالث، لكن يشترط على هذا العنصر أن يكون محوَّلاً مسبقاً بقيمة أخرى للخاصية 'transform' غير القيمة '()perspective'؛ و يقحم بين قوسيها Parameter يضرب في مسافة طول العنصر في البعد الثالث ليكبرها أو يصغرها أو يعمل لها تماثل محوري، علماً أن الـ Parameter التلقائي هو '1'، بمعنى أكبر من 1 يعمل تكبير، و بين 1 و 0 يعمل تصغير، و الـ Parameter السالب يعمل تماثل محوري.

القيمة ()scale3d

تخول هذه القيمة تحويل العنصر عن طريق التحجيم في الأبعاد الثلاث Y ، X و Z، و يقحم بين قوسيها ثلاث Parameters مفصولة بعلامة Comma :

- يقحم في الـ Parameter الأول نفس ما يقحم في Parameter قيمة '()scaleX'، حيث لديهما نفس التأثير في النتيجة.

- يقحم في الـ Parameter الثاني نفس ما يقحم في Parameter قيمة '()scaleY'، حيث لديهما نفس التأثير في النتيجة.

- يقحم في الـ Parameter الثالث نفس ما يقحم في Parameter قيمة '()scaleZ'، حيث لديهما نفس التأثير في النتيجة.

القيمة ()matrix3d

تخول هذه القيمة إنشاء عدة تحويلات مختلفة من التحويلات الثلاثية الأبعاد بنفس القيمة، و يقحم داخل قوسيها ستة عشر Parameters بدون وحدات قياس و مفصولة بعلامة Comma، يمكن الإستعانة بآداة تمكّن من إيجاد القيمة المناسبة للتحويلات الثلاثية الأبعاد، و تسمى هذه الآداة بـ Matrix3D Generator، و توجد في هذه الصفحة. (يقدّم الحيز الزمني من 01:07:40 إلى 01:13:41 في الفيديو التوضيحي للدرس كيفية عمل هذه الآداة بالتفصيل)

القيم الشاملة

تقبل الخاصية 'transform' من القيم الشاملة قيمتين ألا و هما :

- 'inherit' : تورّث للعنصر التحويلات من العنصر المحتوي له.

- 'initial' : ترجع الخاصية إلى قيمتها التلقائية، و التي هي 'none'.

يمكن إقحام أكثر من قيمة في الخاصية 'transform'، و ذلك بإقحام جميع القيم المراد تحويل بها العنصر في قيمة الخاصية 'transform'، و لا يهم إن تم تفرقة القيم بفراغ من نوع Space أو عدم تفرقتها

الفيديو التوضيحي للدرس

الخاصية PERSPECTIVE

تشبه الخاصية 'perspective' القيمة '()perspective' من ناحية التأثير، حيث يقحم في قيمتها نفس ما يقحم بين قوسي قيمة '()perspective'، إلا أن ماهية هذه الأخيرة قيمة، و الأخرى خاصية، دائماً تقحم الخاصية 'perspective' في العنصر المحتوي للعنصر المراد تحويله بتقنية Transformation ناشئة عيناً افتراضية في محوره Z تنتمي إلى مستوى الشاشات، حيث ترى هذه العين الإفتراضية العنصر في الحيز الثلاثي الأبعاد، قيمتها التلقائية هي 'none' حيث تمنع هذه القيمة تفعيل 3D في العناصر المحتواة داخل العنصر المقحمة في كوده.

تقبل الخاصية 'perspective' من القيم الشاملة قيمتين ألا و هما :

- 'Inherit' : تورث للعنصر المحتوي للعناصر المراد تحويلها بتقنية Transformation طول البعد الثالث من العنصر المحتوي له.

- 'initial' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية PERSPECTIVE-ORIGIN

تُحدد الخصية 'perspective-origin' من أي نقطة في مستوى الشاشات ترى العين الإفتراضية العنصر المحوَّل بتقنية Transformation، أي أنها هي المسؤولة عن تحديد مكان العين الإفتراضية في مستوى الشاشات، و لا تعمل الخاصية إلا بتواجد الخاصية 'perspective' في نفس الكود المقحمة داخله، تقحم في قيمة الخاصية 'perspective-origin' قيمتين بالقيم المطلقة أو القيم النسبية أو الكلمات المفتاحية علماً أن قيمتها التلقائية هي %50 %50 :

• القيمة التي في اليسار هي المسؤولة عن الوضعية الأفقية للعين الإفتراضية، فإذا كانت أصغر من %50 أو سالبة في القيم المطلقة ستزاح العين الإفتراضية يساراً، و إذا كانت أكبر من %50 أو موجبة في القيم المطلقة ستزاح العين الإفتراضية يميناً، و لديها من الكلمات المفتاحية ثلاثاً و هم :

- 'center' : تضع العين الإفتراضية في المنتصف الأفقي.

- 'left' : تضع العين الإفتراضية في اليسار.

- 'right' : تضع العين الإفتراضية في اليمين.

• القيمة التي في اليمين هي المسؤولة عن الوضعية العمودية للعين الإفتراضية، فإذا كانت أصغر من %50 أو سالبة في القيم المطلقة ستزاح العين الإفتراضية إلى الأعلى، و إذا كانت أكبر من %50 أو موجبة في القيم المطلقة ستزاح العين الإفتراضية إلى الأسفل، و لديها من الكلمات المفتاحية ثلاثاً و هم :

- 'center' : تضع العين الإفتراضية في المنتصف العمودي.

- 'top' : تضع العين الإفتراضية في الأعلى.

- 'bottom' : تضع العين الإفتراضية في الأسفل.

تقبل الخاصية 'perspective-origin' من القيم الشاملة قيمتين ألا و هما :

- 'inherit' : تورّث للعنصر وضعية العين الإفتراضية من العنصر المحتوي له.

- 'initial' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية TRANSFORM-ORIGIN

تخول هذه الخاصية إمكانية تحديد مكان النقطة في الحيز الثلاثي الأبعاد التي منها يتم تحويل العنصر عبر التحويلات الأربع لتقنية Transformation، و لا تعمل الخاصية إلا بتواجد الخاصية 'transform' في نفس الكود المقحمة داخله، تقحم في قيمة الخاصية 'transform-origin' ثلاث قيم بالقيم المطلقة أو القيم النسبية أو الكلمات المفتاحية علماً أن قيمتها التلقائية هي 0 %50 %50 :

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

- 'center' : تضع نقطة التحويل في وسط المنتصف الأفقي للعنصر.

- 'left' : تضع نقطة التحويل في يسار المنتصف الأفقي للعنصر.

- 'right' : تضع نقطة التحويل في يمين المنتصف الأفقي للعنصر.

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

- 'center' : تضع نقطة التحويل في المنتصف العمودي للعنصر.

- 'top' : تضع نقطة التحويل في أعلى المنتصف العمودي للعنصر.

- 'bottom' : تضع نقطة التحويل في أسفل المنتصف العمودي للعنصر.

• القيمة الثالثة هي المسؤولة عن وضعية نقطة التحويل في البعد الثالث، علماً أن القيمة 0 تجعل نقطة التحويل في تقاطع منتصفات العنصر، و يُستغنى عن هذه القيمة في حالة تواجدها في كود عنصر محوَّل بتقنية Transformation الثنائية الأبعاد حيث تقحم سوى القيمتين أعلاه.

تقبل الخاصية 'transform-origin' من القيم الشاملة قيمتين ألا و هما :

- 'inherit' : تورّث للعنصر وضعية نقطة التحويل من العنصر المحتوي له.

- 'initial' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية TRANSFORM-STYLE

تعتبر الخاصية 'transform-style' الخاصية المسؤولة عن الحفاظ على بنية 3D للعناصر المحولة بتقنية Transformation الثلاثية الأبعاد، بمعنى في حالة تَشاركها الوضعية، تجعلها الخاصية 'transform-style' متداخلة ببعضها البعض في نفس الحيز عوضاً من أن يكون مطبَّق عليها تأثير الخاصية 'z-index' التلقائي، تقحم دائماً الخاصية 'transform-style' في العنصر المحتوي للعناصر الهدف، و لديها قيمتين خاصتين ألا و هما :

• القيمة 'flat' : هي قيمتها التلقائية حيث تلغي تأثير الحفاظ على بنية 3D للعناصر المحوَّلة بتقنية Transformation الثلاثية الأبعاد و المتشاركة الوضعية.

• القيمة 'preserve-3d' : تحافظ على بنية 3D للعناصر المحوَّلة بتقنية Transformation الثلاثية الأبعاد و المتشاركة الوضعية.

تقبل الخاصية 'transform-style' من القيم الشاملة قيمتين ألا و هما :

- 'inherit' : تورّث للعنصر الحفاظ على بنية 3D من العنصر المحتوي له.

- 'initial' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية BACKFACE-VISIBILITY

تخول هذه الخاصية إمكانية إظهار أو إخفاء الواجهة الخلفية للعنصر المحوَّل بتقنية Transformation الثلاثية الأبعاد، لديها قيمتين خاصتين ألا وهما :

• القيمة 'visible' : هي قيمتها التلقائية حيث تترك الواجهة الخلفية للعنصر المحوَّل بتقنية Transformation الثلاثية الأبعاد ظاهرة.

• القيمة 'hidden' : تقوم بإخفاء الواجهة الخلفية للعنصر المحوَّل بتقنية Transformation الثلاثية الأبعاد.

تقبل الخاصية 'backface-visibility' من القيم الشاملة قيمتين ألا و هما :

- 'inherit' : تورّث للعنصر المحوَّل بتقنية Transformation الثلاثية الأبعاد إخفاء واجهته الخلفية من العنصر المحتوي له.

- 'initial' : ترجع الخاصية إلى قيمتها التلقائية.

See the Pen
تقنية Transformation by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

الخاصية animation و خواص تقنية Animation في CSS | الدرس 33\37

noreply@blogger.com (Unknown) — Mon, 06 Jan 2020 20:49:00 +0000

السلام عليكم، سنرى في هذا الدرس تقنية Animation في CSS.

تغير تقنية Animation مظهر عناصر HTML تدريجياً حسب سيناريو معين في مدة زمنية معينة، و لدى هذه التقنية خاصية Shorthand بإسم 'ANIMATION' و ثمان خواص Longhand و هم :

* ANIMATION-NAME

* ANIMATION-DURATION

* ANIMATION-TIMING-FUNCTION

* ANIMATION-DELAY

* ANIMATION-ITERATION-COUNT

* ANIMATION-DIRECTION

* ANIMATION-FILL-MODE

* ANIMATION-PLAY-STATE

لا تطبَّق التقنية إلا بتواجد كود CSS بإسم Keyframes، حيث يعتبر سيناريو التقنية.

Keyframes

تعتبر Keyframes سيناريو تقنية Animation، حيث تحدد مجموعة تغيرات تطرأ على عناصر HTML في مواقيت معينة أثناء المدة الزمنية لتأثير Animation، و ذلك عبر أكواد تقحم داخل كود CSS يُكتب في محدده الخاص كلمة 'KEYFRAMES' ثم فراع من نوع Space ثم كلمة بدون فراغات تمثل إسم السيناريو، أما الأكواد التي بين قوسيه، أو ما يطلق على الكود الواحد منها إسم 'Keyframe'، فهي عبارة عن أكواد بتنسيق CSS تحتوي على محددات خاصة تنقسم إلى نوعين :

- النوع الأول هو عبارة عن كلمتين مفتاحيتين ألا و هما 'FROM' و 'TO'، حيث أن 'FROM' تحدد بداية المدة الزمنية لسيناريو التقنية، و 'TO' تحدد نهايتها.

- النوع الثاني هو عبارة عن نسب مئوية تحدد مواقيت المدة الزمنية لسيناريو التقنية.

يجب العلم بأن المظهر في تقنية Animation يتغير تدريجياً حسب سيناريو التقنية، فكلمة 'KEYFRAMES' في حد ذاتها هي كلمة مركبة من كلمتين :

- كلمة 'KEY'، و تعني مفتاح، مثلما في المجال الموسيقي يوجد مفتاح Sol و Alfa.. و هي مفاتيح لتحديد علامات موسيقية أو طبقات صوتية أو شيء من هذا القبيل.

- كلمة 'FRAMES'، و الفريم في مجال Audiovisual، و تحديداً في تقنية الفيديو هو عبارة عن صورة، بمعنى أن الفيديو هو عبارة عن مجموعة صور تظهر الواحدة تلو الأخرى بسرعة معينة في مدة زمنية محددة، أي عدد الفريمات في الثانية، و يعبَّر عنها بوحدة القياس 'FPS' يعني Frames Per Seconde.

و الغرض من هذا التوضيح هو أن Keyframe واحد في كود Keyframes يمثل بداية أو نهاية تغيير مظهر، و بين Keyframe و Keyframe موالي له يتم تغيير المظهر تدريجياً، أي بانسيابية.

الخاصية ANIMATION-NAME

مفهوم الخاصية ANIMATION-NAME

تعتبر الخاصية 'ANIMATION-NAME' خاصية إجبارية في تقنية Animation، حيث أنها هي الخاصية المسؤولة عن منع تطبيق التقنية أو التصريح بها عبر تحديد إسم السيناريو المراد تطبيقه في العناصر التي تتواجد في كودها CSS هذه الخاصية.

قيم الخاصية ANIMATION-NAME

لذى الخاصية 'ANIMATION-NAME' قيمة خاصة بإسم 'NONE'، و تقبل قيم رقمية و قيمتين من القيم الشاملة.

القيمة NONE

هي القيمة التلقائية للخاصية 'ANIMATION-NAME'، و تمنع تطبيق تقنية Animation.

القيمة الإسمية

هي عبارة عن إسم سيناريو التقنية المقحم في كود Keyframes، حيث يحدَّد السيناريو المراد تطبيقه عبر هذه القيمة.

القيم الشاملة

• 'INHERIT' : تورث للعنصر إسم السيناريو من العناصر المحتوية له.

• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية ANIMATION-DURATION

مفهوم الخاصية ANIMATION-DURATION

تعتبر الخاصية 'ANIMATION-DURATION' خاصية إجبارية أيضاً في تقنية Animation، حيث هي الخاصية المسؤولة عن المدة الزمنية التي تستغرقها التقنية في العناصر التي تحتوي على تقنية Animation، و سبب تصنيفها خاصية إجبارية في تقنية Animation هي قيمتها التلقائية التي تساوي 0s، حيث بانعدام الخاصية في كود CSS الذي يحتوي على التقنية، ستطبق قيمتها التلقائية، و بالتالي ستنعدم المدة الزمنية للتقنية حيث يتعذر حينها معاينتها رغم وجودها.

قيم الخاصية ANIMATION-DURATION

لذى الخاصية 'ANIMATION-DURATION' قيم رقمية، و تقبل قيمتين من القيم الشاملة.

القيم الرقمية

تقبل القيم بـ 'S' أي الثانية، و بـ 'MS' حيث أن 1s = 1000ms.

القيم الشاملة

• 'INHERIT' : تورث للعنصر المدة الزمنية من العناصر المحتوية له.

• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية ANIMATION-TIMING-FUNCTION

مفهوم الخاصية ANIMATION-TIMING-FUNCTION

تشْبه الخاصية 'ANIMATION-TIMING-FUNCTION' الخاصية 'TRANSITION-TIMING-FUNCTION' التي رأيناها في درس تقنية Transition في CSS، حيث أنها هي الخاصية المسؤولة عن التحكم في السرعة الحركية للإنسيابية، بمعنى تجعل إنسيابية تغيير المظهر تتم بسرعات مختلفة كسرعات متباطئة أو سرعات متسارعة أو سرعات ثابتة.

قيم الخاصية ANIMATION-TIMING-FUNCTION

القيم الخاصة

لذى الخاصية 'ANIMATION-TIMING-FUNCTION' نفس القيم الخاصة للخاصية 'TRANSITION-TIMING-FUNCTION'، و لقد تم شرح هذه القيم بالتفصيل في درس تقنية Transition و هم ثمانية :

- EASE

- LINEAR

- EASE-IN

- EASE-OUT

- EASE-IN-OUT

- STEP-START

- STEP-END

- CUBIC-BEZIER

و لذى القيم الخاصة للخاصيتين نفس التأثير، إلا أن هناك اختلاف بسيط يكمن في تطبيق التأثير، ففي الخاصية 'TRANSITION-TIMING-FUNCTION' يطبَّق التأثير أثناء المدة الزمنية الإجمالية لتقنية Transition، أما في الخاصية 'ANIMATION-TIMING-FUNCTION' فيطبق التأثير بين كل Keyframe و Keyframe موالي له في سيناريو تقنية Animation. ( درس تقنية Transition يشرح كيفية إنشاء سرعات حركية عبر آداة موقع Cubic Bezier، و الفيديو التوضيحي لهذا الدرس يظهر كيفية إنشاء سرعات حركية عبر آداة Inspect Element الموجودة في جميع متصفحات الإنترنت الكبرى )

القيم الشاملة

تقبل الخاصية 'ANIMATION-TIMING-FUNCTION' من القيم الشاملة قيمتين و هما :

• 'INHERIT' : تورث للعنصر السرعة الحركية من العناصر المحتوية له.

• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية، و التي هي القيمة 'EASE'.

الفيديو التوضيحي للدرس

الخاصية ANIMATION-DELAY

مفهوم الخاصية ANIMATION-DELAY

تعتبر الخاصية 'ANIMATION-DELAY' الخاصية المسؤولة عن المدة الزمنية قبل بدء سيناريو تقنية Animation.

قيم الخاصية ANIMATION-DELAY

تقبل الخاصية 'ANIMATION-DELAY' القيم بـ 'S' و بـ 'MS' منها الموجبة و السالبة حيث أن 1s = 1000ms، و قيمتين من القيم الشاملة.

القيمة الموجبة

بتواجد القيمة الموجبة في قيمة الخاصية 'ANIMATION-DELAY'، ستطبق كامل المدة الزمنية قبل بداية سيناريو تقنية Animation.

القيمة السالبة

بتواجد القيمة السالبة في قيمة الخاصية 'ANIMATION-DELAY'، ستخصم هذه المدة الزمنية من سيناريو تقنية Animation، و ستكون نقطة بدايته عند لحظة تواجده في حال كان مشغَّلاً مسبقاً بمدة إنتظار منعدمة.

القيم الشاملة

• 'INHERIT' : تورث للعنصر المدة الزمنية قبل بدء سيناريو تقنية Animation من العناصر المحتوية له.

• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية ANIMATION-ITERATION-COUNT

مفهوم الخاصية ANIMATION-ITERATION-COUNT

تعتبر الخاصية 'ANIMATION-ITERATION-COUNT' الخاصية المسؤولة عن عدد مرات تكرار سيناريو تقنية Animation في العنصر.

قيم الخاصية ANIMATION-ITERATION-COUNT

تقبل الخاصية 'ANIMATION-ITERATION-COUNT' القيم العددية و قيمة خاصة بإسم 'INFINITE'، و قيمتين من القيم الشاملة، أما قيمتها التلقائية فهي '1'.

القيمة العددية

يكتب في قيمة الخاصية 'ANIMATION-ITERATION-COUNT' عدد يحدد عدد مرات تكرار السيناريو في العنصر.

القيمة INFINITE

تعطي هذه القيمة تأثير التكرار اللانهائي للسيناريو في العنصر.

القيم الشاملة

• 'INHERIT' : تورث للعنصرتكرار سيناريو تقنية Animation من العناصر المحتوية له.

• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية ANIMATION-DIRECTION

مفهوم الخاصية ANIMATION-DIRECTION

تعتبر الخاصية 'ANIMATION-DIRECTION' الخاصية المسؤولة عن الإتجاه الذي يسلكه سيناريو تقنية Animation.

قيم الخاصية ANIMATION-DIRECTION

لذى الخاصية 'ANIMATION-DIRECTION' أربع قيم خاصة و هم 'ALTERNATE'، 'REVERSE'، 'NORMAL' و 'ALTERNATE-REVERSE'، و تقبل من القيم الشاملة قيمتين.

القيمة NORMAL

هي القيمة التلقائية للخاصية، و تجعل التقنية تطبَّق بشكل عادي، أي أن السيناريو يأخذ الإتجاه العادي الذي هو من بداية السيناريو إلى نهايته.

القيمة REVERSE

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

القيمة ALTERNATE

تجعل هذه القيمة التقنية تطبَّق بشكل متناوب، أي أن السيناريو يذهب في الإتجاه العادي تم يرجع في الإتجاه المعاكس، و يحبَّذ مرافقة هذه القيمة بقيمة 'INFINITE' للخاصية 'ANIMATION-ITERATION-COUNT'.

القيمة ALTERNATE-REVERSE

تجعل هذه القيمة التقنية تطبَّق بشكل متناوب لكن عكسي، أي أن السيناريو يبدأ بالإتجاه المعاكس، تم يذهب في الإتجاه العادي، و يحبَّذ مرافقة هذه القيمة أيضاً بقيمة 'INFINITE' للخاصية 'ANIMATION-ITERATION-COUNT'.

القيم الشاملة

• 'INHERIT' : تورث للعنصر اتجاه سيناريو تقنية Animation من العناصر المحتوية له.

• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية ANIMATION-FILL-MODE

مفهوم الخاصية ANIMATION-FILL-MODE

تعتبر الخاصية 'ANIMATION-FILL-MODE' الخاصية المسؤولة عن مظهر العنصر المتوفر على تقنية Animation قبل بدء سيناريو التقنية، أو بعد نهايته، أو قبل بدئه و بعد نهايته.

قيم الخاصية ANIMATION-FILL-MODE

لذى الخاصية 'ANIMATION-FILL-MODE' أربع قيم خاصة و هم 'BACKWARDS'، 'FORWARDS'، 'NONE' و 'BOTH'، و تقبل من القيم الشاملة قيمتين.

القيمة NONE

هي القيمة التلقائية للخاصية، و تمنع تطبيق أي مظهر قبل أو بعد سيناريو تقنية Animation.

القيمة FORWARDS

تعطي هذه القيمة تأثير تثبيت مظهر آخر Keyframe بعد انتهاء السيناريو، مع الأخذ بعين الإعتبار اتجاه السيناريو عبر الخاصية 'ANIMATION-DIRECTION'، فإذا كان الإتجاه عادي عبر القيمة 'NORMAL' أو 'ALTERNATE' سيطبَّق التأثير العادي لقيمة 'FORWARDS'، أما إذا كان الإتجاه معكوس عبر القيمة 'REVERSE' أو 'ALTERNATE-REVERSE' فستطبِّق القيمة 'FORWARDS' مظهر أول Keyframe، و أيضاً يجب الأخذ بعين الإعتبار تكرار السيناريو عبر الخاصية 'ANIMATION-ITERATION-COUNT' حيث في حالة التكرار المحدود للسيناريو ستطبِّق القيمة 'FORWARDS' تأثيرها بعد انتهاء التكرار، أما في حالة التكرار اللانهائي للسيناريو سيعطَّل تأثير القيمة 'FORWARDS'.

القيمة BACKWARDS

تعطي هذه القيمة تأثير تثبيت مظهر أول Keyframe أثناء مدة الإنتظار قبل بدء السيناريو، مع الأخذ بعين الإعتبار اتجاه السيناريو عبر الخاصية 'ANIMATION-DIRECTION'، فإذا كان الإتجاه عادي عبر القيمة 'NORMAL' أو 'ALTERNATE' سيطبَّق التأثير العادي لقيمة 'BACKWARDS'، أما إذا كان الإتجاه معكوس عبر القيمة 'REVERSE' أو 'ALTERNATE-REVERSE' فستطبِّق القيمة 'BACKWARDS' مظهر آخر Keyframe أثناء مدة الإنتظار.

القيمة BOTH

تعمل هذه القيمة نفس تأثير القيمة 'FORWARDS' و نفس تأثير القيمة 'BACKWARDS' معاً في نفس العنصر، أي أنها تطبِّق مظهر أول Keyframe في مدة الإنتظار قبل بدء السيناريو، و تثبِّت مظهر آخر Keyframe بعد انتهاء السيناريو، مع الأخذ بعين الإعتبار الإتجاه عبر الخاصية 'ANIMATION-DIRECTION' و التكرار عبر الخاصية 'ANIMATION-ITERATION-COUNT'.

القيم الشاملة

• 'INHERIT' : تورث للعنصر المظهر قبل أو بعد أو قبل و بعد سيناريو تقنية Animation من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية ANIMATION-PLAY-STATE

مفهوم الخاصية ANIMATION-PLAY-STATE

تعتبر الخاصية 'ANIMATION-PLAY-STATE' الخاصية المسؤولة عن تشغيل أو إيقاف سيناريو تقنية Animation.

قيم الخاصية ANIMATION-PLAY-STATE

لذى الخاصية 'ANIMATION-PLAY-STATE' قيمتين خاصتين و هم 'RUNNING' و 'PAUSED'، و تقبل من القيم الشاملة قيمتين.

القيمة RUNNING

هي القيمة التلقائية للخاصية، و تسمح بتشغيل سيناريو التقنية.

القيمة PAUSED

توقف هذه القيمة سيناريو التقنية، و تظهِر مظهر أول Keyframe.

القيم الشاملة

• 'INHERIT' : تورث للعنصر حالة التشغيل أو الإيقاف من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية Shorthand لتقنية Animation

تسمى الخاصية Shorthand لتقنية Animation بـ 'ANIMATION'، و يكتب في قيمتها قيمة الخاصية 'ANIMATION-NAME'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-DURATION'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-TIMING-FUNCTION'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-DELAY'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-ITERATION-COUNT'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-DIRECTION'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-FILL-MODE'، ثم فراغ من نوع Space، ثم قيمة الخاصية 'ANIMATION-PLAY-STATE'.

جميع قيم خواص Longhand لتقنية Animation مدعومة في قيمة الخاصية Shorthand لتقنية Animation باستثناء القيم الشاملة.

أما القيمة التلقائية للخاصية 'ANIMATION' فهي هذه 'NONE 0S EASE 0S 1 NORMAL NONE RUNNING' أي القيمة التلقائية لكل خاصية Longhand لتقنية Animation حسب تنسيق Shorthand.

تقبل أيضاً الخاصية 'ANIMATION' من القيم الشاملة قيمتين و هما 'INHERIT' و 'INITIAL'.

• 'INHERIT' : تورث للعنصر تأثير تقنية Animation من العناصر المحتوية له.

• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.

تطبَّق القيم التلقائية لخواص Longhand في حالة عدم تواجدها في الكود المتوفر على تقنية Animation، و تطبق أيضاً في حالة عدم تواجد القيم الخاصة بها في الخاصية Shorthand لتقنية Animation

See the Pen
تقنية Animation by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

الخاصية transition و خواص تقنية Transition في CSS | الدرس 32\37

noreply@blogger.com (Unknown) — Thu, 26 Dec 2019 21:01:00 +0000

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

Transition هي تقنية تستعمل أثناء مدة انتقال عنصر HTML من حالة إلى حالة، و أثناء رجوعه من الحالة المنتقل إليها إلى الحالة الأولى، و يكون هذين الإنتقالين متشابهين من ناحية التأثير عبر هذه التقنية.

لدى تقنية Transition خاصية Shorthand بإسم 'TRANSITION'، و أربع خواص Longhand وهم :

* TRANSITION-PROPERTY

* TRANSITION-DURATION

* TRANSITION-TIMING-FUNCTION

* TRANSITION-DELAY

الخاصية TRANSITION-PROPERTY

مفهوم الخاصية TRANSITION-PROPERTY

تعتبر الخاصية 'TRANSITION-PROPERTY' الخاصية المسؤولة عن تحديد الخواص المراد التأثير عليها بتقنية Transition، و يشترط على هذه الخواص أن تكون متواجدة في كود CSS الحالة الثانية، و لا يهم إن كانت Longhand أو Shorthand.

قيم الخاصية TRANSITION-PROPERTY

لدى الخاصية 'TRANSITION-PROPERTY' القيمة 'ALL' وقيمة الخواص و القيمة 'NONE'.

• 'ALL' : هي القيمة التلقائية لخاصية 'TRANSITION-PROPERTY' حيث تعطي تأثير تطبيق تقنية Transition على جميع الخواص الموجودة في الحالة الثانية، و تطبق تلقائياً في حال عدم تواجد الخاصية 'TRANSITION-PROPERTY' في كود CSS المتوفر على تقنية Transition.

• قيم الخواص : تكتب عبارة عن إسم الخاصية المراد التأثير عليها بتقنية Transition، و في حالة كتابة أكثر من خاصية في نفس القيمة، يجب الفصل بينها بعلامة Comma (,).

• 'NONE' : تمنع هذه القيمة جميع خواص الحالة الثانية من التأثر بتقنية Transition.

و تقبل أيضاً الخاصية 'TRANSITION-PROPERTY' من القيم الشاملة قيمتين و هما 'INHERIT' و 'INITIAL'.

• 'INHERIT' : تورث للعنصر تحديد الخواص المراد التأثير عليها بتقنية Transition من العناصر المحتوية له.

• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية TRANSITION-DURATION

مفهوم الخاصية TRANSITION-DURATION

تعتبر الخاصية 'TRANSITION-DURATION' الخاصية المسؤولة عن تحديد المدة الزمنية التي يحدث أثناءها إنتقال العنصر من الحالة الأولى إلى الحالة الثانية و العكس صحيح، و هي خاصية مهمة في كود CSS المتوفر على تقنية Transition حيث بدونها يتعذر معاينة التقنية.

قيم الخاصية TRANSITION-DURATION

تقبل الخاصية 'TRANSITION-DURATION' القيم بـ 'S' أي الثانية، و 'MS' أي الميليثانية حيث أن ثانية واحدة تساوي ألف ميليثانية، و قيمتها التلقائية هي '0S'، و في حالة كتابة أكثر من قيمة في قيمة الخاصية 'TRANSITION-DURATION'، يجب فصلها بعلامة Comma استنادا بترتيب الخواص المقحمة في قيمة الخاصية 'TRANSITION-PROPERTY' الموجودة في نفس الكود، حيث تخصَّص قيمة الخاصية 'TRANSITION-DURATION' الأولى للخاصية الأولى المقحمة في قيمة الخاصية 'TRANSITION-PROPERTY'، و الثانية للثانية، و هكذا...

تقبل أيضاً الخاصية 'TRANSITION-DURATION' من القيم الشاملة قيمتين و هما 'INHERIT' و 'INITIAL'.

• 'INHERIT' : تورث للعنصر تحديد المدة الزمنية للتقنية Transition من العناصر المحتوية له.

• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية TRANSITION-TIMING-FUNCTION

مفهوم الخاصية TRANSITION-TIMING-FUNCTION

تعتبر الخاصية 'TRANSITION-TIMING-FUNCTION' الخاصية المسؤولة عن التحكم في السرعة الحركية للإنتقال من الحالة الأولى إلى الحالة الثانية و العكس، بمعنى تجعل الخاصية الإنتقال يتم بسرعات مختلفة كالتباطؤ أو التسارع أثناء المدة الزمنية المحددة له.

قيم الخاصية TRANSITION-TIMING-FUNCTION

لدى الخاصية 'TRANSITION-TIMING-FUNCTION' ثمان قيم خاصة، و تقبل قيمتين شاملتين.

القيمة EASE

هي القيمة التلقائية للخاصية، و تجعل الإنتقال يتحرك بسرعة حركية متسارعة في أول 10% للمدة الزمنية الإجمالية، ثم بسرعة ثابتة إلى غاية نصف المدة الإجمالية، ثم بسرعة متباطئة إلى نهاية المدة الإجمالية للإنتقال، و تطبَّق هذه القيمة أيضاً في حالة انعدام الخاصية في كود CSS المتوفر على تقنية Transition.

القيمة LINEAR

تجعل هذه القيمة الإنتقال يتحرك بسرعة ثابتة طيلة المدة الزمنية الإجمالية للإنتقال.

القيمة EASE-IN

تجعل هذه القيمة الإنتقال يتحرك بسرعة متسارعة طيلة المدة الزمنية الإجمالية للإنتقال.

القيمة EASE-OUT

تجعل هذه القيمة الإنتقال يتحرك بسرعة متباطئة طيلة المدة الزمنية الإجمالية للإنتقال.

القيمة EASE-IN-OUT

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

القيمة (STEPS(n,START

تجعل هذه القيمة الإنتقال يتحرك بسرعة حركية متقطعة، أي أن الإنتقال يتم عبر خطوات ممثلة بـ 'n' في القيمة حيث يكتب عدد صحيح يحدد عدد خطوات الإنتقال، و بالضبط في بداية كل خطوة، و في حال كان العدد هو 1، تستبدَل كامل القيمة بالقيمة 'STEP-START'.

القيمة (STEPS(n,END

تجعل هذه القيمة الإنتقال يتحرك بسرعة حركية متقطعة، أي أن الإنتقال يتم عبر خطوات ممثلة بـ 'n' في القيمة حيث يكتب عدد صحيح يحدد عدد خطوات الإنتقال، و بالضبط في نهاية كل خطوة، و في حال كان العدد هو 1، تستبدَل كامل القيمة بالقيمة 'STEP-END'.

القيمة (CUBIC-BEZIER(n,n,n,n

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

القاعدة الأولى

السرعة الخطية = المسافة \ الزمن

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

القاعدة الثانية

- تقوس خط المنحنى من اليسار نحو الأعلى يدل على سرعة حركية متسارعة.

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

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

- تقوس خط المنحنى من الأعلى نحو اليمين يدل على سرعة حركية متباطئة.

- إستقامة مائلة لخط المنحنى يدل على سرعة حركية ثابتة.

- إستقامة أفقية لخط المنحنى يدل على سرعة حركية منعدمة.

- إستقامة عمودية لخط المنحنى يدل على السرعة الحركية الكبرى.

يمكن الإستعانة بآداة Cubic Bezier Function Tool في إنشاء السرعات الحركية حيث يتم توفير هذه الآداة من طرف أغلب مواقع البرمجة في الويب، و من أهمها هذا الموقع حيث يتوفر على الآداة في الجانب الأيسر لواجهته، و طريقة عمل الآداة هي عبر سحب النقطتين الزرقاء و الوردية ثم وضعهما في أي مكان في الآداة قصد تشكيل خط منحنى يتوافق مع الحاجيات المرغوبة، و بالتالي فمكان كل نقطة من النقطتين في الآداة يشكل إحداثيتا العرض و الإرتفاع حيث يمكن إقحامحها بين قوسي قيمة '()CUBIC-BEZIER'، و يتوفر محتوى أقواس هذه القيمة على أربع Parameters مفروقة بعلامة Comma و هم :

- Parameter الأول : يمثل إحداثية العرض للنقطة الوردية إبتداءً من يمين الآداة إلى يسارها بسعة 1 (من 0 إلى 1) و بدقة 0,01 و لا يقبل القيمة السالبة.

- Parameter الثاني : يمثل إحداثية الإرتفاع للنقطة الوردية بدون سعة حيث يقبل القيمة السالبة، و بدقة 0,01.

- Parameter الثالث : يمثل إحداثية العرض للنقطة الزرقاء إبتداءً من يمين الآداة إلى يسارها بسعة 1 (من 0 إلى 1) و بدقة 0,01 و لا يقبل القيمة السالبة.

- Parameter الرابع : يمثل إحداثية الإرتفاع للنقطة الزرقاء بدون سعة حيث يقبل القيمة السالبة، و بدقة 0,01.

القيم الشاملة

• 'INHERIT' : تورث للعنصر نوع السرعة الحركية من العناصر المحتوية له.

• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.

الفيديو التوضيحي للدرس

الخاصية TRANSITION-DELAY

مفهوم الخاصية TRANSITION-DELAY

تعتبر الخاصية 'TRANSITION-DELAY' الخاصية المسؤولة عن المدة الزمنية قبل بدء تأثير تقنية Transition.

قيم الخاصية TRANSITION-DELAY

تقبل الخاصية 'TRANSITION-DELAY' القيم بـ 'S' أي الثانية، و 'MS' أي الميليثانية حيث أن ثانية واحدة تساوي ألف ميليثانية، و قيمتها التلقائية هي '0S'، و في حالة كتابة أكثر من قيمة في قيمة الخاصية 'TRANSITION-DELAY' يجب فصلها بعلامة Comma استناداً بترتيب الخواص المقحمة في قيمة الخاصية 'TRANSITION-PROPERTY' الموجودة في نفس الكود، حيث تخصَّص قيمة الخاصية 'TRANSITION-DELAY' الأولى للخاصية الأولى المقحمة في قيمة الخاصية 'TRANSITION-PROPERTY'، و الثانية للثانية، و هكذا...

تقبل أيضاً الخاصية 'TRANSITION-DELAY' من القيم الشاملة قيمتين و هما 'INHERIT' و 'INITIAL'.

• 'INHERIT' : تورث للعنصر المدة الزمنية قبل بدء تأثير تقنية Transition من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.

الخاصية Shorthand لتقنية Transition

تسمى الخاصية Shorthand لتقنية Transition بـ 'TRANSITION'، و يكتب في قيمتها قيمة منفردة للخاصية 'TRANSITION-PROPERTY'، ثم فراغ من نوع Space، ثم قيمة منفردة للخاصية 'TRANSITION-DURATION'، ثم فراغ من نوع Space، ثم قيمة منفردة للخاصية 'TRANSITION-TIMING-FUNCTION'، ثم فراغ من نوع Space، ثم قيمة منفردة للخاصية 'TRANSITION-DELAY'

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

أما قيمتها التلقائية فهي هذه 'ALL 0S EASE 0S' أي القيم التلقائية لخواص التقنية Transition حسب تنسيق Shorthand.

تقبل أيضاً الخاصية 'TRANSITION' من القيم الشاملة قيمتين و هما 'INHERIT' و 'INITIAL'.
• 'INHERIT' : تورث للعنصر تأثير تقنية Transition من العناصر المحتوية له.
• 'INITIAL' : ترجع الخاصية إلى قيمتها التلقائية.

يمكن إنشاء اختلاف تأثير Transition بين الإنتقال من الحالة الأولى إلى الحالة الثانية و الرجوع من الحالة الثانية إلى الحالة الأولى، و ذلك بإقحام نفس خاصية التقنية Transition في كود CSS للحالة الأولى و في كود CSS للحالة الثانية، لكن بقيم مختلفة، بحيث عند الإنتقال من الحالة الأولى إلى الحالة الثانية، ستعطي CSS3 الأولوية لخاصية التقنية Transition في كود CSS للحالة الثانية، و عند الرجوع من الحالة الثانية إلى الحالة الأولى، ستعطي CSS3 الأولوية لخاصية التقنية Transition في كود CSS للحالة الأولى

See the Pen
تقنية Transition by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

محددات Pseudo-element في CSS | الدرس 31\37

noreply@blogger.com (Unknown) — Fri, 20 Dec 2019 20:09:00 +0000

السلام عليكم، رأينا في الدرس 12 من هذه الدورة درس المحدِّدات في CSS المحددات البسيطة :

* محدد العنصر -------------- Element Type Selector

* محدد ID Selector ------------------ ID

* محدد CLASS Selector -------------- CLASS

* المحدد الشامل ------------ Universal Selector

و رأينا في الدرس 27 من هذه الدورة درس المحددات المركبة Combinators و محددات Attribute في CSS :

* المحددات المركبة --------- Combinators

* محددات Attribute Selectors --------- Attribute

و رأينا في الدرس السابق من هذه الدورة درس محددات Pseudo-classes

أما في هذا الدرس، فسنرى آخر نوع من المحددات ألا و هو Pseudo-element.

ما هو Pseudo-element ؟

Pseudo-elements هي محددات تخول إمكانية إعطاء مظهر بـ CSS لجزء من محتوى عنصر HTML، أو جعله في حالة معينة عند تحديده، أو إضافة محتوى قبله أو بعده.

طريقة إقحام Pseudo-elements في كود CSS

تقحم جميع Pseudo-elements في كود CSS بنفس الطريقة حيث يكتب المحدد أولاً سواء كان بسيطاً أم مركباً، ثم زوج نقطتي Double Point '::'، ثم إسم Pseudo-element مع الأخذ بعين الإعتبار تفادي الفراغات من نوع Space بين المحدد و زوج النقطين و إسم Pseudo-element، و يمكن كتابة سوى زوج النقطين و إسم Pseudo-element حيث في هذه الحالة يتم استهداف جميع العناصر في ملف HTML، و أيضا يمكن تركيب زوج النقطتين و إسم Pseudo-element مع عناصر HTML أخرى.

أنواع Pseudo-elements

Pseudo-elements خمسة أنواع :

• SELECTION::

• FIRST-LETTER::

• FIRST-LINE::

• BEFORE::

• AFTER::

SELECTION::

يخول هذا Pseudo-element إمكانية تطبيق مظهر بـ CSS على عنصر HTML عندما يتم تحديده سواء بمؤشر الفأرة في أجهزة الحاسوب أو بالأصابع في أجهزة الهواتف و الطابليط.

FIRST-LETTER::

يخصَّص هذا Pseudo-element للعناصر التي تحتوي على نصوص كالعناوين و الفقرات النصية حيث يخوِّل إمكانية إعطاء مظهر بـ CSS لأول حرف في نص العنصر، و يعمل سوى في العناصر من نوع Block، و يفضل إقحامه في العناصر التي تحتوي على نصوص بلغات تكتب منفصلة الأحرف كاللغات اللاتينية و ما شابه مع الأخذ بعين الإعتبار نوع الخط.

FIRST-LINE::

يخصَّص هذا Pseudo-element للعناصر التي تحتوي على نصوص كذلك، حيث يخوِّل إمكانية إعطاء مظهر بـ CSS لأول سطر في نص العنصر نسبة إلى عرض العنصر المحتوي له في الشاشات، و يعمل أيضاً سوى في العناصر من نوع Block.

الفيديو التوضيحي للدرس

BEFORE:: و AFTER::

يعتبران هذين Pseudo-elements شبيهين من ناحية التأثير، حيث كليهما يخولان إمكانية إضافة محتوى في العناصر، و يكمن الفرق بينهما في أن 'BEFORE::' يضيف محتوى قبل العنصر، أما 'AFTER::' فيضيف محتوى بعد العنصر، و يكون هذا المحتوى المضاف غير قابل للتحديد لأنه مضاف بـ CSS، و يمكن أن يكون عبارة عن نص أو أيقونة أو صورة أو فيديو أو أوديو أو رابط أو أشياء أخرى.. و هذا الإختلاف في ماهية المحتوى المضاف تحدده خاصية بإسم 'CONTENT'، بحيث لا يخلو أي كود CSS لـ 'BEFORE::' أو لـ 'AFTER::' من هذه الخاصية التي تحدد المحتوى المضاف بقيمها التي تشكل خمس أنواع محتويات مضافة، و هم :

- محتوى String

- محتوى الميديا

- محتوى Attribute

- محتوى الإقتباس

- محتوى الترقيم

محتوى String

يكون محتوى String عبارة عن نص أو أيقونة، و طريقة إقحامهما مختلفة حيث في النصوص يجب وضع ما يظهر كمحتوى مضاف نصي داخل Double cotations ("") في قيمة الخاصية 'CONTENT'، أما في الأيقونات فيجب الحصول على Entity Css Code للأيقونة المراد توضيفها كمحتوى مضاف، و هو عبارة عن رمز مكون من أربعة أحرف أو أرقام أو مختلطة، ثم وضعه بالجانب الأيمن لعلامة Backslash (\) داخل Double cotations في قيمة الخاصية 'CONTENT'.

محتوى الميديا

يكون محتوى الميديا عبارة عن صورة أو فيديو أو أوديو، أي ميديا، و تقحم عن طريق القيمة '()URL' للخاصية 'CONTENT' حيث يجب وضع داخل قوسي القيمة ما يراد استدعاؤه حسب مكانه، فإذا كان في الويب يجب كتابة العنوان URL للملف، أما إذا كان في المخدم الخاص يجب كتابة مساره استناداً بقاعدة المسارات. (توجد هذه القاعدة في درس الصور و درس الفيديوهات و درس الأوديوهات في هذه الدورة)

محتوى Attribute

يكون محتوى Attribute عبارة عن ما كتب حرفياً في قيمة Attribute المضاف إسمها بين قوسي القيمة '()ATTR' للخاصية 'CONTENT'.

محتوى الإقتباس

يكون محتوى الإقتباس عبارة عن علامات الإقتباس، و تقحم عن طريق أربع قيم خاصة بعلامات الإقتباس في الخاصية 'CONTENT' و هم :

'OPEN-QUOTE' : قيمة لإنشاء علامات بداية الإقتباس، و يحبذ إقحامها في 'BEFORE::'.

'CLOSE-QUOTE' : قيمة لإنشاء علامات نهاية الإقتباس، و يحبذ إقحامها في 'AFTER::'.

'NO-OPEN-QUOTE' : قيمة لحذف علامات بداية الإقتباس، و يحبذ إقحامها في 'BEFORE::'.

'NO-CLOSE-QUOTE' : قيمة لحذف علامات نهاية الإقتباس، و يحبذ إقحامها في 'AFTER::'.

يمكن تغيير علامات الإقتباس التلقائية التي تظهر في متصفحات الإنترنت عند إنشائها، و ذلك عبر الخاصية 'QUOTES'، حيث تقحم هذه الأخيرة في العنصر المحتوي للعناصر المرغوب إنشاء فيها علامات الإقتباس، و في قيمتها تقحم علامة فتح الإقتباس بين Cotation (' ') يسار القيمة، و علامة إغلاق الإقتباس بين Cotation هي الأخرى يمين القيمة.

محتوى الترقيم

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

الترقيم العادي

يخول الترقيم العادي إعطاء لمجموعة عناصر HTML ترقيماً (1 2 3 ...) حسب ترتيب إقحامهم في ملف HTML، و ينشأ الترقيم العادي بإضافة خاصية بإسم 'COUNTER-RESET' في العنصر المحتوي للعناصر المراد ترقيمها، و هي خاصية تعيد الترقيم من البداية، و في قيمتها توضع كلمة تلعب دور معرف ID، ثم في 'BEFORE::' أو 'AFTER::' للعناصر المراد ترقيمها يتم إقحام الخاصية 'COUNTER-INCREMENT' و في قيمتها نفس معرف ID، و الخاصية 'CONTENT' و في قيمتها القيمة '()COUNTER' حيث بين قوسي هذه الأخيرة يوضع نفس معرف ID أيضاً.

الترقيم التشعبي المتفرع

يخول الترقيم التشعبي المتفرع إعطاء لمجموعة عناصر HTML ترقيماً حسب ترتيب إقحامهم في ملف HTML، و لمجموعة متفرعة من العنصر الأول في المجموعة الأولى ترقيماً تشعبياً (1.1 1.2 1.3 ...) و لمجموعة متفرعة من العنصر الثاني في المجموعة الأولى ترقيماً تشعبياً (2.1 2.2 2.3 ...) و هكذا... و ذلك بإنشاء ترقيماً عادياً للمجموعة الأولى، ثم إضافة الخاصية 'COUNTER-RESET' في عناصر المجموعة الأولى، و في قيمتها معرف ID جديد، ثم في 'BEFORE::' أو 'AFTER::' للعناصر المراد إعطاؤها ترقيما تشعبياً يجب إقحام الخاصية 'COUNTER-INCREMENT' و في قيمتها معرف ID الجديد، و الخاصية 'CONTENT' و في قيمتها القيمة '()COUNTER' حيث بين قوسي هذه الأخيرة يوضع معرف ID القديم، ثم Double cotation تحتوي على نقطة (.) ثم قيمة '()COUNTER' أخرى تحتوي على معرف ID الجديد بين قوسيها، و يصنف هذا الترقيم بالترقيم التشعبي المستوى الثانى.

يمكن إنشاء ترقيماً تشعبياً مستوى ثالث (1.1.1 1.1.2 1.1.3 ...) و ذلك بتطبيق نفس طريقة إنشاء الترقيم التشعبي المستوى الثانى، أي إضافة الخاصية 'COUNTER-RESET' مقيمة بمعرف جديد في عناصر المجموعة التي سيتم التفرع منها، ثم في 'BEFORE::' أو 'AFTER::' للعناصر المراد إعطاؤها ترقيما تشعبياً مستوى ثالث تقحم الخاصية 'COUNTER-INCREMENT' و في قيمتها معرف ID الجديد، و الخاصية 'CONTENT' و في قيمتها القيمة '()COUNTER' حيث بين قوسي هذه الأخيرة يوضع معرف ID للترقيم العادي، ثم Double cotation تحتوي على نقطة (.) ثم قيمة '()COUNTER' أخرى تحتوي على معرف ID للترقيم التشعبي المستوى الثاني بين قوسيها، ثم Double cotation أخرى تحتوي على نقطة (.) ثم قيمة '()COUNTER' أخرى تحتوي على معرف ID للترقيم التشعبي المستوى الثالث بين قوسيها، و يمكن إنشاء مستويات أخرى بنفس الطريقة.

يمكن استبدال الأرقام العربية في الترقيم بأرقام رومانية، و ذلك بإضافة علامة Comma (,) ثم كلمة 'UPPER-ROMAN' بالجانب الأيمن لمعرف ID داخل قوسي قيمة الخاصية 'CONTENT'

تقنية ضم الطفو

تقنية ضم الطفو هي تقنية تُستعمل من طرف مصممي الويب من أجل ضم عنصر محتوٍ لعناصر في حالة طفوها بالخاصية 'FLOAT'، و ذلك بجعل 'AFTER::' للعنصر المحتوي يلعب دور آخر عنصر محتوى وهمي لديه خاصية 'CLEAR'، و لديه كيفية ظهور بالخاصية 'DISPLAY'، و الأهم من ذلك أن لديه محتوى بالخاصية 'CONTENT' حيث يوضع فراغ داخل Cotations (' ') في قيمتها.

إذن تلعب الخاصية 'CONTENT' دور فعال في 'BEFORE::' و 'AFTER::' و لو كان في قيمتها فراغ كحالة ضم الطفو، و تقبل أيضاً قيمة 'NONE' التي تعتبر قيمتها التلقائية، و تأثيرها هو إلغاء المحتوى، و أيضاً تقبل القيمة 'NORMAL' حيث تتحول هذه القيمة في أكواد 'BEFORE::' و 'AFTER::' إلى القيمة 'NONE'.

See the Pen
Pseudo-Elements في CSS by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

محددات Pseudo-classe في CSS | الدرس 30\37

noreply@blogger.com (Unknown) — Sat, 14 Dec 2019 01:33:00 +0000

السلام عليكم، رأينا في الدرس 12 من هذه الدورة درس المحدِّدات في CSS المحددات البسيطة :

* محدد العنصر -------------- Element Type Selector

* محدد ID Selector ------------------ ID

* محدد CLASS Selector -------------- CLASS

* المحدد الشامل ------------ Universal Selector

و رأينا في الدرس 27 من هذه الدورة درس المحددات المركبة Combinators و محددات Attribute في CSS :

* المحددات المركبة --------- Combinators

* محددات Attribute Selectors --------- Attribute

أما في هذا الدرس، فسنرى نوع آخر من المحددات ألا و هو Pseudo-classe.

ما هو Pseudo-classe ؟

Pseudo-classe هو نوع من أنواع المحددات وظيفته إعطاء إمكانية تطبيق مظهر بـ CSS على عناصر HTML إبان كونها في حالة معينة.

كيفية إقحام Pseudo-classe في كود CSS

تُقحَم جميع Pseudo-classes في كود CSS بنفس الطريقة حيث يُكتب المحدد أولاً سواء كان بسيطاً أم مركباً، ثم نقطتان Double Point ':'، ثم إسم Pseudo-classe مع الأخذ بعين الإعتبار تفادي الفراغات من نوع Space بين المحدد و النقطتين و إسم Pseudo-classe، و يمكن كتابة سوى Pseudo-classe ( النقطتين و إسم Pseudo-classe ) حيث في هذه الحالة تُستهدف جميع العناصر في ملف HTML، و أيضا يمكن تركيب النقطتين و إسم Pseudo-classe مع عناصر أخرى HTML.

الفيديو التوضيحي للدرس

أنواع Pseudo-classes

هناك العديد من Pseudo-classes في CSS، سنتطرق في هذا الدرس لأهمها و أكثرها استعمالاً من طرف مصممي الويب.

LINK:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عنصر HTML لم يسبق النقر عليه، و غالباً ما يُستعمَل هذا Pseudo-classes في الروابط.

VISITED:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عنصر HTML سبق نُقر عليه، و غالباً ما يُستعمَل هذا Pseudo-classes في الروابط.

HOVER:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عنصر HTML عندما يكون مؤشر الفأرة فوقه مباشرة.

ACTIVE:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عنصر HTML أثناء النقر عليه.

EMPTY:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على جميع العناصر الفارغة المحتوى.

()LANG:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على جميع العناصر التي تحتوي على Attribute بإسم 'LANG' مُقيَّمة بكود ISO 639-1 للغة معينة، حيث يقحم هذا الأخير بين قوسي هذا Pseudo-classes.

FIRST-CHILD:

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

LAST-CHILD:

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

FIRST-OF-TYPE:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على العنصر الأول من نوعه في العنصر المحتوي له.

LAST-OF-TYPE:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على العنصر الأخير من نوعه في العنصر المحتوي له.

ONLY-CHILD:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على جميع العناصر التي هي الوحيدة المحتواة داخل العنصر المحتوي لها.

ONLY-OF-TYPE:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على جميع العناصر التي هي الوحيدة من نوعها المحتواة داخل العنصر المحتوي لها.

()NTH-CHILD:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عناصر تتواجد في رتب معينة مقارنة مع عناصر أخرى محتواة في نفس العنصر المحتوي، و لها نفس المستوى، و يقتصر الإستهداف على ما بداخل قوسي Pseudo-classes حيث هناك قاعدة خاصة بمحتوى أقواس Pseudo-classes ذوات كلمة 'NTH' في إسمها.

قاعدة أقواس Pseudo-classes ذوات NTH

يقحم داخل أقواس Pseudo-classes ذوات كلمة 'NTH' نوعين من القيم :

• الكلمات المفتاحية

- 'ODD' : تَستهدف هذه الكلمة المفتاحية العناصر التي في الترتيب الفردي.

- 'EVEN' : تَستهدف هذه الكلمة المفتاحية العناصر التي في الترتيب الزوجي.

• العمليات الحسابية الرياضية

- 'عدد صحيح' : يُكتب عدد صحيح حيث سيتم استهداف عنصر واحد، و هو العنصر المرتب في رتبة العدد الصحيح المقحَم.

- 'n عدد صحيح' : يُكتب عدد صحيح و بجواره الأيمن حرف 'N' حيث سيتم استهداف جميع العناصر التي في ترتيب مضاعفات العدد الصحيح المقحَم.

- 'عدد صحيح + n عدد صحيح' : يُكتب عدد صحيح، ثم حرف 'N'، ثم علامة الزائد '+'، ثم عدد صحيح، و بالتالي سيتم استهداف العناصر حسب ناتج العملية الحسابية المقحومة، علماً أن الحرف 'N' يعتبر المتغير في العملية الحسابية حيث يساوي 0 عند استهداف العنصر الأول، و يساوي 1 عند استهداف العنصر الموالي، و يساوي 3 استهداف العنصر الموالي، و هكذا...

- 'عدد صحيح + n-' : يُكتب سالب الحرف 'N'، ثم علامة الزائد '+'، ثم عدد صحيح، و بالتالي سيتم استهداف أول مجموعة العناصر محددة بالعدد الصحيح المُقحم، مع الأخد بعين الإعتبار Pseudo-classes النقيضة حيث يتم استهداف آخر مجموعة العناصر محددة بالعدد الصحيح المُقحم.

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

()NTH-LAST-CHILD:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عناصر تتواجد في رتب معينة مقارنة مع عناصر أخرى محتواة في نفس العنصر المحتوي، و لها نفس المستوى، إلا أن الإستهداف يتم بطريقة عكسية، أي يتم استهداف العناصر من الأسفل إلى الأعلى رغم تشابه محتوى الأقواس، لذا يعتبر هذا Pseudo-classes نقيض '()NTH-CHILD:'.

()NTH-OF-TYPE:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عناصر من نفس النوع تتواجد في رتب معينة مقارنة مع عناصر أخرى محتواة في نفس العنصر المحتوي، و لها نفس المستوى، و هذا يقتصر على ما بداخل القوسين حسب قاعدة الأقواس.

()NTH-LAST-OF-TYPE:

يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عناصر من نفس النوع تتواجد في رتب معينة مقارنة مع عناصر أخرى محتواة في نفس العنصر المحتوي، و لها نفس المستوى، إلا أن الإستهداف يتم بطريقة عكسية، أي يتم استهداف العناصر من الأسفل إلى الأعلى رغم تشابه محتوى الأقواس، لذا يعتبر هذا Pseudo-classes نقيض '()NTH-OF-TYPE:'.

في حالة تواجد العديد من Pseudo-classes في عنصر واحد، تعطي CSS3 الأولوية للـ Pseudo-classe المقحَم أخيراً

See the Pen
Pseudo-classe في CSS by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

الجداول في HTML و CSS | الدرس 29\37

noreply@blogger.com (Unknown) — Sat, 07 Dec 2019 16:52:00 +0000

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

إنشاء الجدول

إنشاء الجدول في HTML

العنصر المسؤول عن إنشاء الجداول في HTML هو عنصر من نوع Block, و ثنائي الأوسمة، و يسمى 'TABLE' حيث يقحم داخله عنصر مسؤول عن إنشاء الأسطر أو ما تعرف بالأعمدة الأفقية للجدول، ألا و هو عنصر 'TR' و هو عنصر من نوع Block، و ثنائي الأوسمة، و يقحم بحسب عدد الأعمدة الأفقية المراد إنشاؤها في الجدول، بحيث أن عنصر واحد 'TR' مسؤول عن إنشاء عمود أفقي واحد في الجدول، و يقحم داخله عنصر مسؤول عن إنشاء خانة في العمود الأفقي للجدول، و يسمى هذا العنصر إما بـ 'TH' أو بـ 'TD'، حيث أن العنصر الواحد من هذين العنصرين الأخيرين هو مسؤول عن إنشاء خانة واحدة في العمود الأفقي للجدول، فعنصر 'TH' هو عنصر مسؤول عن إقحام خانات عناوين الجدول، أو ما تعرف برؤوس الجدول، و هو عنصر ثنائي الأوسمة حيث يقحم داخله ما يظهر في متصفحات الإنترنت، أما عنصر 'TD' فهو عنصر مسؤول عن إقحام خانة المعلومات، و هو عنصر ثنائي الأوسمة حيث يقحم داخله ما يظهر في متصفحات الإنترنت.

بعد إنشاء بنية الجدول في HTML، يظهر في متصفحات الإنترنت بدون ستايل (حواف، عرض...) مما يلجأ مصممو الويب من التعديل على مظهره بإضافة بعض Attributes مثل 'BORDER' من أجل إعطائه حواف، و في قيمتها يضعون عدد يحدد سمك الحواف، و مثل 'WIDTH' من أجل إعطائه عرض، و في قيمتها يضعون نفس ما يوضع في الخاصية 'WIDTH'، و مثل 'ALIGN' بقيمتها 'CENTER' من أجل توسطه أو محتويات خاناته وسط العناصر المحتوية... لكن ليس من الإحتراف التعديل على المظهر بالـ HTML، لأن كل Attributes الخاصة بالتعديل على المظهر يوجد لها بديل بـ CSS، و نتيجته أحسن.

التعديل على مظهر الجدول في CSS

من أهم تعديلات الجداول في CSS هو إعطاء للعناصر 'TH' و 'TD' حواف، إلا أن هذه الأخيرة تظهر منفصلة في متصفحات الإنترنت، لذا أنشئت الخاصية 'BORDER-COLLAPSE' للصق الحواف ببعضها البعض جاعلة الجدول يظهر بمظهره المعتاد، و هذه الخاصية لديها قيمتين خاصتين و قيمتين شاملتين :

- القيمتين الخاصتين هما القيمة 'SEPARATE' التي هي القيمة التلقائية للخاصية و تجعل الحواف منفصلة فيما بينها، و القيمة 'COLLAPSE' التي تجعل الحواف ملتصقة فيما بينها.

- القيمتين الشاملتين هما القيمة 'INHERIT' التي تورث للعنصر المظهر من العناصر المحتوية لها، و في حالة هذه الخاصية، فالقيمة تورث حالة الحواف للعنصر من العناصر المحتوية له، و القيمة 'INITIAL' التي ترجع العنصر إلى القيمة التلقائية له، و في حالة هذه الخاصية، فالقيمة ترجع العنصر إلى القيمة 'SEPARATE' التي هي القيمة التلقائية للخاصية.

الجداول العادية و الجداول المتقدمة

الفرق بين الجدول العادي و الجدول المتقدم هو أن هذا الأخير يظهر مقسَّم إلى أقسام في ملف HTML، و ذلك بإقحام العناصر 'TR' داخل عنصر من العناصر الثلاث التالية :

* العنصر 'THEAD' : عنصر من نوع Block و ثنائي الأوسمة، و هو المسؤول عن رأس الجدول، أي تقحم داخله العناصر 'TR' التي تحتوي على العناصر 'TH'.

* العنصر 'TBODY' : عنصر من نوع Block و ثنائي الأوسمة، و هو المسؤول عن جسم الجدول، أي تقحم داخله العناصر 'TR' التي تحتوي على العناصر 'TD'.

* العنصر 'TFOOT' : عنصر من نوع Block و ثنائي الأوسمة، و يقحم بين العنصر 'THEAD' و العنصر 'TBODY'، و رغم ذلك يظهر في متصفحات الإنترنت أسفل الجدول بحيث أنه المسؤول عن قدم الجدول، أي تقحم داخله آخر العناصر 'TR' في الجدول.

الغاية من العناصر الثلاث 'TBODY'، 'THEAD' و 'TFOOT' هو تسهيل فهم أكواد الجداول من طرف مصممي الويب، و الأهم هو تخصيص لهذه العناصر مظهر بأكواد CSS.

الفيديو التوضيحي للدرس

مرفقات الجدول

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

عنوان الجدول

يعتبر عنوان الجدول مهماً في حالة تعدد الجداول في نفس صفحة الويب، و الطريقة المثلى لإنشائه هي عبر العنصر 'CAPTION' في ملف HTML، و هو عنصر من نوع Block و ثنائي الأوسمة حيث يتم كتابة العنوان بين وسميه، و يقحم بعد وسم فتح العنصر 'TABLE'.

الدمج الأفقي لخانات الجدول

تدمج الخانات أفقياً في حالة تشارك الخانات المتجاورة أفقياً نفس المحتوى، حينها يتم دمج الخانات المشتركة في الجدول عبر Attribute تسمى 'COLSPAN' حيث يقحم في قيمتها عدد يحدِّد عدد الخانات المراد دمجها، و دائماً تقحم هذه الـ Attribute في أول عنصر الخانات المراد دمجها ثم تحدف عناصر الخانات المتبقية منها.

الدمج العمودي لخانات الجدول

تدمج الخانات عمودياً في حالة تشارك الخانات المتجاورة عمودياً نفس المحتوى، حينها يتم دمج الخانات المشتركة في الجدول عبر Attribute تسمى 'ROWSPAN' حيث يقحم في قيمتها عدد يحدِّد عدد الخانات المراد دمجها، و دائما تقحم هذه الـ Attribute في أول عنصر الخانات المراد دمجها ثم تُحدف عناصر الخانات المتبقية منها.

تحديد أعمدة الجدول العمودية

يسمى العنصر المسؤول عن تحديد الأعمدة العمودية للجدول بـ 'COLGROUP'، و هو عنصر من نوع Block، و ثنائي الأوسمة، و يقحم بعد وسم فتح العنصر 'TABLE' أو بعد العنصر 'CAPTION' إذا كان موجوداً، و يقحم داخله عنصر صاحب وسم يتيم بإسم 'COL'، حيث لذى هذا العنصر Attribute إجبارية بإسم 'SPAN'، و يقحم في قيمتها عدد يحدِّد عدد الأعمدة العمودية المراد التعديل عليها بأكواد CSS، فمثلاً إذا أقحم العدد 1 سيحدَّد العمود العمودي الأول في الجدول، و إذا أقحم العدد 2 سيحددا العمود العمودي الأول و العمود العمودي الثاني في الجدول، و هكذا... و من أجل المزيد من التحديدات للأعمدة العمودية داخل نفس الجدول يجب إقحام عناصر 'COL' أخرى داخل نفس العنصر 'COLGROUP' للجدول مع الأخذ بعين الإعتبار اتباع نفس طريقة التحديد علماً أن توالي التحديدات يتم استناداً على ترتيب العناصر 'COL' داخل العنصر 'COLGROUP'.

See the Pen
الجداول في HTML و CSS by osama (@webdesigner7)
on CodePen.

الأكواد المستعمة في الدرس

أتمنى أن تستفيدوا من الدرس

التقنيتان Longhand و Shorthand في CSS | الدرس 28\37

noreply@blogger.com (Unknown) — Mon, 02 Dec 2019 19:37:00 +0000

السلام عليكم، سنرى في هذا الدرس تقنيتا Longhand و Shorthand في CSS، حيث سنتعرف على مفهوم التقنيتين و الفرق بينهما.

Longhand

ما هي تقنية Longhand ؟

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

أمثلة عن مجموعات خواص تقنية Longhand

مجموعة الخواص من نوع Font

تتيح هذه الخواص إمكانية التعديل على الخطوط، و هي الخاصية 'FONT-STYLE'، الخاصية 'FONT-WEIGHT'، الخاصية 'FONT-SIZE'، الخاصية 'LINE-HEIGHT' و الخاصية 'FONT-FAMILY'، و لمعرفة تفصيلية أوضح تجاه خواص هذه المجموعة بالإمكان تفقد الدرس 17، و الدرس 18، و الدرس 19 من هذه الدورة.

مجموعة الخواص من نوع Border

تتيح هذه الخواص إمكانية إضافة الحواف أو التعديل عليها، و هي الخاصية 'BORDER-WIDTH'، الخاصية 'BORDER-STYLE' و الخاصية 'BORDER-COLOR'، و لمعرفة تفصيلية أوضح تجاه خواص هذه المجموعة بالإمكان تفقد الدرس 20 من هذه الدورة.

مجموعة الخواص من نوع Background

تتيح هذه الخواص إمكانية إضافة الخلفيات أو التعديل عليها، و هي الخاصية 'BACKGROUND-COLOR'، الخاصية 'BACKGROUND-IMAGE'، الخاصية 'BACKGROUND-REPEAT'، الخاصية 'BACKGROUND-ATTACHMENT' و الخاصية 'BACKGROUND-POSITION'، و لمعرفة تفصيلية أوضح تجاه خواص هذه المجموعة بالإمكان تفقد الدرس 16 من هذه الدورة.

مجموعة خواص Padding

تتيح هذه الخواص إمكانية إضافة فراغات بين العناصر و حوافها أو التعديل على هذه الفراغات، و هي الخاصية 'PADDING-TOP'، الخاصية 'PADDING-RIGHT'، الخاصية 'PADDING-BOTTOM' و الخاصية 'PADDING-LEFT'، و لمعرفة تفصيلية أوضح تجاه خواص هذه المجموعة بالإمكان تفقد الدرس 22 من هذه الدورة.

مجموعة خواص Margin

تتيح هذه الخواص إمكانية إضافة فراغات في حواف العناصر الخارجية أو التعديل على هذه الفراغات، و هي الخاصية 'MARGIN-TOP'، الخاصية 'MARGIN-RIGHT'، الخاصية 'MARGIN-BOTTOM' و الخاصية 'MARGIN-LEFT'، و لمعرفة تفصيلية أوضح تجاه خواص هذه المجموعة بالإمكان تفقد الدرس 22 من هذه الدورة.

الفيديو التوضيحي للدرس

Shorthand

ما هي تقنية Shorthand ؟

تقنية Shorthand هي عبارة عن اختصار لمجموعة خواص من نفس النوع في كود CSS، حيث تُختصر المجموعة في خاصية واحدة تسمى إنجليزياً بـ Shorthand Property، و يقحم في قيمة هذه الأخيرة قيم خواص المجموعة مفروقة بفراغ من نوع Space، و يستثنى إقحام القيم الشاملة.

أمثلة عن خواص تقنية Shorthand

تقنية Shorthand لمجموعة الخواص من نوع Font

تسمى Shorthand Property لمجموعة الخواص من نوع Font بـ 'FONT'، و تقحم في قيمة هذه الأخيرة قيم خواص المجموعة حسب ترتيبهم المذكور أعلاه في تقنية Longhand مفصولين بفراغ من نوع Space ما عدا قيمة الخاصية 'FONT-SIZE' و قيمة الخاصية 'LINE-HEIGHT' حيث يُفرق بينهما بعلامة Slash '/'.

تقنية Shorthand لمجموعة الخواص من نوع Border

تسمى Shorthand Property لمجموعة الخواص من نوع Border بـ 'BORDER'، و تقحم في قيمة هذه الأخيرة قيم خواص المجموعة حسب ترتيبهم المذكور أعلاه في تقنية Longhand مفصولين بفراغ من نوع Space، و لمعرفة تفصيلية أوضح تجاه الخاصية 'BORDER' بالإمكان تفقد الدرس 20 من هذه الدورة.

تقنية Shorthand لمجموعة الخواص من نوع Background

تسمى Shorthand Property لمجموعة الخواص من نوع Background بـ 'BACKGROUND'، و تقحم في قيمة هذه الأخيرة قيم خواص المجموعة حسب ترتيبهم المذكور أعلاه في تقنية Longhand مفصولين بفراغ من نوع Space.

تقنية Shorthand لمجموعة خواص Padding

تسمى Shorthand Property لمجموعة خواص Padding بـ 'PADDING'، و تقحم في قيمة هذه الأخيرة قيم خواص المجموعة حسب ترتيبهم المذكور أعلاه في تقنية Longhand مفصولين بفراغ من نوع Space، و لمعرفة تفصيلية أوضح تجاه الخاصية 'PADDING' بالإمكان تفقد الدرس 22 من هذه الدورة.

تقنية Shorthand لمجموعة خواص Margin

تسمى Shorthand Property لمجموعة خواص Margin بـ 'MARGIN'، و تقحم في قيمة هذه الأخيرة قيم خواص المجموعة حسب ترتيبهم المذكور أعلاه في تقنية Longhand مفصولين بفراغ من نوع Space، و لمعرفة تفصيلية أوضح تجاه الخاصية 'MARGIN' بالإمكان تفقد الدرس 22 من هذه الدورة.

See the Pen
Shorthand و Longhand by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

المحددات المركبة Combinators و محددات Attribute في CSS | الدرس 27\37

noreply@blogger.com (Unknown) — Sat, 30 Nov 2019 20:15:00 +0000

السلام عليكم، رأينا في درس المحدِّدات في CSS المحددات البسيطة و هم :

* محدد العنصر -------------- Element Type Selector

* محدد ID Selector ------------------ ID

* محدد CLASS Selector -------------- CLASS

* المحدد الشامل ------------ Universal Selector

أما اليوم فسنستكمل درس المحددات حيث سنرى :

* المحددات المركبة --------- Combinators

* محددات Attribute Selectors --------- Attribute

المحددات المركبة Combinators

المحددات المركبة و المعروفة إنجليزياً بـ Combinators هي عبارة عن تركيب لعدة محددات مفروقة بعلامة ما ( ',' أو ' ' أو '<' أو '+' أو '~' )، حيث هذه العلامات هي التي تحدد الفرق بين نماذج المحددات المركبة، و لا يفرق إن فُصلت أو لم تفصل المحدادت و العلامات بفراغ عند كتابتها في تنسيق كود CSS.

نموذج المحدد المركب X,Y

الغرض من هذا النموذج هو إعطاء نفس المظهر بـ CSS للعديد من العناصر المختلفة المحدد، يكفي تفرقتها بالفاصلة Comma ',' حيث تلعب هذه الأخيرة دور واو العطف، و بالتالي يأمر هذا النموذج متصفح الإنترنت بإعطاء نفس المظهر للعناصر صاحبة المحدد X و العناصر صاحبة المحدد Y.

نموذج المحدد المركب X Y

الغرض من هذا النموذج هو إعطاء نفس المظهر بـ CSS لجميع العناصر صاحبة المحدد Y التي توجد داخل العناصر صاحبة المحدد X، و ذلك بكتابة العنصر المحتوي أولا، ثم فراغ بزر لوحة المفاتيح Space، ثم العنصر المحتوى، و هكذا إلى أن يُحدَّد الهدف المراد تغيير مظهره.

نموذج المحدد المركب X>Y

الغرض من هذا النموذج هو إعطاء نفس المظهر بـ CSS لجميع العناصر صاحبة المحدد Y التي توجد داخل العناصر صاحبة المحدد X شريطة أن تكون العناصر صاحبة المحدد Y في الحيز الموالي لحيز العناصر صاحبة المحدد X، و ذلك بكتابة العنصر المحتوي أولا، ثم علامة أكبر من '<'، ثم العنصر المحتوى، و هكذا إلى أن يُحدَّد الهدف المراد تغيير مظهره.

نموذج المحدد المركب X+Y

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

نموذج المحدد المركب X~Y

الغرض من هذا النموذج هو إعطاء نفس المظهر بـ CSS لجميع العناصر صاحبة المحدد Y التي توجد بعد وسم إغلاق العنصر صاحب المحدد X، شريطة أن تكون العناصر صاحبة المحدد Y في نفس مستوى العنصر صاحب المحدد X، أي لديهم نفس الحيز، و ذلك بكتابة العنصر صاحب وسم الإغلاق أولا، ثم علامة Tilde '~'، و لكتابة علامة Tilde، فاختصار لوحة المفاتيح الخاص بها هو ALT+126 (يمكن الإستعانة بهذه الصفحة من أجل كتابة الأحرف الخاصة Special Characters) ، بعد كتابة علامة Tilde في المحدد المركب، يجب كتابة العناصر الهدف.

الفيديو التوضيحي للدرس

محددات Attribute

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

النموذج [X[attribute

الغرض من هذا النموذج هو إعطاء المظهر بـ CSS لجميع العناصر صاحبة المحدد X، شريطة أن تتوفر على إسم الـ Attribute الذي داخل قوسي Bracket ' [] ' في النموذج.

النموذج [""=X[attribute

الغرض من هذا النموذج هو إعطاء المظهر بـ CSS لجميع العناصر صاحبة المحدد X، شريطة أن تتوفر على إسم الـ Attribute الذي داخل قوسي Bracket في النموذج، و التي بدورها تتوفر على القيمة المكتوبة داخل Double Cotations ' "" ' في النموذج.

النموذج [""=*X[attribute

الغرض من هذا النموذج هو إعطاء المظهر بـ CSS لجميع العناصر صاحبة المحدد X، شريطة أن تتوفر على إسم الـ Attribute الذي داخل قوسي Bracket في النموذج، و التي بدورها يتوفر جزء من قيمتها على ما كُتب داخل Double Cotations في النموذج.

النموذج [""=^X[attribute

الغرض من هذا النموذج هو إعطاء المظهر بـ CSS لجميع العناصر صاحبة المحدد X، شريطة أن تتوفر على إسم الـ Attribute الذي داخل قوسي Bracket في النموذج، و التي بدورها تتوفر بداية قيمتها على ما كُتب داخل Double Cotations في النموذج.

النموذج [""=$X[attribute

الغرض من هذا النموذج هو إعطاء المظهر بـ CSS لجميع العناصر صاحبة المحدد X، شريطة أن تتوفر على إسم الـ Attribute الذي داخل قوسي Bracket في النموذج، و التي بدورها تتوفر نهاية قيمتها على ما كُتب داخل Double Cotations في النموذج.

يمكن الإستغناء على X في جميع نماذج محددات Attribute حيث سيتم استهداف جميع عناصر الـ HTML التي تتوفر على شروط ما بداخل أقواس Bracket

See the Pen
المحددات المركبة و محدد Attribute by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

الخواص float و clear و overflow في CSS | الدرس 26\37

noreply@blogger.com (Unknown) — Fri, 27 Sep 2019 13:45:00 +0000

السلام عليكم، سنرى في هذا الدرس الخواص 'CLEAR'، 'FLOAT' و 'OVERFLOW'.

الخاصية FLOAT

ما هي الخاصية FLOAT ؟

الخاصية 'FLOAT' هي خاصية تجعل العنصر يطفو في جهة داخل العنصر المحتوي له، و لديها ثلاث قيم خاصة، و تقبل من القيم الشاملة قيمتين.

القيم الخاصة للخاصية FLOAT

لدى الخاصية 'FLOAT' ثلاث قيم خاصة و هم :

• AUTO : هي القيمة التلقائية للخاصية، و تجعل العنصر يظهر في مكانه.

• LEFT : قيمة تجعل العنصر يطفو في جهة اليسار داخل العنصر المحتوي له.

• RIGHT : قيمة تجعل العنصر يطفو في جهة اليمين داخل العنصر المحتوي له.

القيم الشاملة التي تقبلها الخاصية FLOAT

تقبل الخاصية 'FLOAT' من القيم الشاملة قيمتين و هما :

• INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'FLOAT'، تورث القيمة 'INHERIT' للعنصر الطفو من العنصر المحتوي له.

• INITIAL : قيمة ترجع العناصر إلى القيمة التلقائية للخواص، و في حالة الخاصية 'FLOAT'، ترجع القيمة 'INITIAL' العنصر إلى القيمة التلقائية للخاصية، و التي هي القيمة 'NONE'.

الخاصية CLEAR

ما هي الخاصية CLEAR ؟

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

القيم الخاصة للخاصية CLEAR

لدى الخاصية 'CLEAR' أربع قيم خاصة و هم :

• NONE : هي القيمة التلقائية للخاصية، و تسمح بالطفو في كلتا الجهتين.

• LEFT : قيمة تمنع طفو عنصر وراء عنصر طافٍ بقيمة 'LEFT' للخاصية 'FLOAT' داخل العنصر الذي يحتويهما، و تمنع طفو العنصر في يسار العنصر الذي يحتويه.

• RIGHT : قيمة تمنع طفو عنصر وراء عنصر طافٍ بقيمة 'RIGHT' للخاصية 'FLOAT' داخل العنصر الذي يحتويهما، و تمنع طفو العنصر في يمين العنصر الذي يحتويه.

• BOTH : قيمة تمنع طفو عنصر وراء عنصر طافٍ سواء بقيمة 'LEFT' أو بقيمة 'RIGHT' للخاصية 'FLOAT' داخل العنصر الذي يحتويهما، و تمنع طفو العنصر في كلتا جهتي العنصر الذي يحتويه، و تصنَّف أحسن قيم الخاصية 'CLEAR'.

القيم الشاملة التي تقبلها الخاصية CLEAR

تقبل الخاصية 'CLEAR' من القيم الشاملة قيمتين و هما :

• INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'CLEAR'، تورث القيمة 'INHERIT' للعنصر منع الطفو من العنصر المحتوي له.

• INITIAL : قيمة ترجع العناصر إلى القيمة التلقائية للخواص، و في حالة الخاصية 'CLEAR'، ترجع القيمة 'INITIAL' العنصر إلى القيمة التلقائية للخاصية، و التي هي القيمة 'NONE'.

الفيديو التوضيحي للدرس

الخاصية OVERFLOW

ما هي الخاصية OVERFLOW ؟

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

القيم الخاصة للخاصية OVERFLOW

لدى الخاصية 'OVERFLOW' أربع قيم خاصة و هم :

• VISIBLE : هي القيمة التلقائية للخاصية، و لا تحصر فيضان محتوى العنصر داخل العنصر الذي يحتويه، و بالتالي يتعدى محتوى العنصر حدود العنصر المحتوي له.

• HIDDEN : قيمة تحصر فيضان محتوى العنصر داخل العنصر الذي يحتويه خافية المحتوى الفائض عرضاً و ارتفاعاً.

• SCROLL : قيمة تحصر فيضان محتوى العنصر داخل العنصر الذي يحتويه مضيفة Scrollbar أفقية و عمودية لإضهار المحتوى الفائض، و في حالة عدم فيضان محتوى العنصر داخل العنصر الذي يحتويه، القيمة 'SCROLL' تُظهر Scrollbars غير مفعلة.

• AUTO : قيمة تحصر فيضان محتوى العنصر داخل العنصر الذي يحتويه مضيفة Scrollbar أفقية و عمودية لإضهار المحتوى الفائض، و تصنف أحسن قيم الخاصية 'OVERFLOW' حيث أنها لا تُظهر Scrollbars إلا بعد حالة الفيضان، ليس كقيمة 'SCROLL' التي تُظهر Scrollbars غير مفعلة و لو في حالة عدم الفيضان.

القيم الشاملة التي تقبلها الخاصية OVERFLOW

تقبل الخاصية 'OVERFLOW' من القيم الشاملة قيمتين و هما :

• INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'OVERFLOW'، تورث القيمة 'INHERIT' للعنصر ما يمكن فعله في حالة فيضان محتوى عنصر داخله من العنصر المحتوي له.

• INITIAL : قيمة ترجع العناصر إلى القيمة التلقائية للخواص، و في حالة الخاصية 'OVERFLOW'، ترجع القيمة 'INITIAL' العنصر إلى القيمة التلقائية للخاصية، و التي هي القيمة 'VISIBLE'.

See the Pen
overflow و clear و float by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

الخاصية z-index في CSS | الدرس 25\37

noreply@blogger.com (Unknown) — Tue, 24 Sep 2019 21:18:00 +0000

السلام عليكم، سنرى في هذا الدرس الخاصية 'Z-INDEX' و قيمها.

ما هي الخاصية Z-INDEX ؟

الخاصية 'Z-INDEX' هي خاصية تحدد ترتيب عناصر مكدسة في نفس المكان في صفحة الويب مثل طبقات مرتبة الواحدة فوق الأخرى، أي عنصر فوق الآخر، و قد تكون هذه العناصر عبارة عن صور أو فيديوهات أو فقرات نصية أو عناوين أو أي عناصر HTML أخرى سواء كانت من نفس الصنف أو مختلطة الصنف.

قيم الخاصية Z-INDEX

لدى الخاصية 'Z-INDEX' قيمة 'AUTO' التي هي القيمة التلقائية للخاصية حيث تلعب دور التنسيق التلقائي للـ HTML، و قيمة الأرقام منها الموجبة و السالبة، و قيمتين من القيم الشاملة ألا و هما :

- 'INHERIT' : قيمة تورث للعنصر ستايل الخواص من العنصر المحتوي له، و في حالة الخاصية 'Z-INDEX'، القيمة تورث للعنصر الترتيب من العنصر المحتوي له.

- 'INITIAL' : قيمة ترجع العنصر إلى القيمة التلقائية للخواص، و في حالة الخاصية 'Z-INDEX'، القيمة ترجع العنصر إلى القيمة التلقائية للخاصية، و بالتالي ترجعه إلى قيمة 'AUTO'.

الفيديو التوضيحي للدرس

إستعمال الخاصية Z-INDEX

أولاً يجب العلم أن في حالة تكدس العناصر HTML، التنسيق التلقائي للـ HTML يرتب العناصر المكدسة حسب الترتيب الذي أُقحمت به في ملفه، فالعنصر المقحم أولاً يظهر في الطبقة السفلى، ثم يظهر العنصر الذي يليه في طبقة أعلى منه، و هكذا..

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

تُرتَّب العناصر المتوفرة على نفس القيمة الرقمية بالتنسيق التلقائي للـ HTML فيما بينها.

يصنف الـ HTML العناصر الغير المتوفرة على الخاصية 'Z-INDEX' و العناصر المتوفرة على القيمة 'AUTO' و العناصر المتوفرة على القيمة الرقمية '0' نفس التصنيف، و بالتالي يظهرهم بتنسيقه التلقائي، حيث لا يظهر أسفلهم سوى العناصر المتوفرة على القيمة الرقمية السالبة.

ليس بالضرورة إعطاء للعناصر المراد ترتيبها بالقيم الرقمية قيم رقمية بالترتيب الرقمي (1 2 3 4 ...) لأن ما يهم الـ HTML بخصوص القيم الرقمية هو الكبر أو الصغر، و بالتالي وضعها في الطبقات العليا أو في الطبقات السفلى.

See the Pen
الخاصية z-index by osama (@webdesigner7)
on CodePen

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

الخاصية position في CSS | الدرس 24\37

noreply@blogger.com (Unknown) — Mon, 23 Sep 2019 14:44:00 +0000

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

ما هي الخاصية POSITION ؟

الخاصية 'POSITION' هي خاصية مسؤولة عن التعديل على وضعية العناصر HTML في صفحات الويب المتواجدة بها، و لديها أربع خواص متعلقة بها تحدد مكان العنصر، و خمس قيم خاصة تحدد نوع وضعية العنصر، و تقبل أيضاً قيمتين من القيم الشاملة.

الخواص المتعلقة بالخاصية POSITION

الخواص المتعلقة بالخاصية 'POSITION' أو ما يصطلح عليهم بخواص الإزاحة هم خواص تلعب دور الإحداثيات بالنسبة للعنصر المتوفر على الخاصية 'POSITION'، و قيمتهم التلقائية هي 'AUTO' حيث في تواجدها تأمر متصفح الإنترنت بحساب مسافة الإزاحة للعنصر و توظيفها له، و تقبل جميع القيم المطلقة و جميع القيم النسبية منهم الموجبة و السالبة، و أيضا تقبل قيمة 'INHERIT' و قيمة 'INITIAL' من القيم الشاملة حيث أن القيمة 'INHERIT' هي قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة خواص الإزاحة، القيمة تورث للعنصر مسافة الإزاحة من العنصر المحتوي له، أما القيمة 'INITIAL' فهي قيمة ترجع العناصر إلى القيمة التلقائية للخواص، و في حالة خواص الإزاحة، القيمة ترجع العنصر إلى القيمة التلقائية للخواص، و التي هي القيمة 'AUTO'، و هم أربع خواص :

* TOP : هي الخاصية المسؤولة عن إزاحة العنصر إلى الأسفل بالقيمة الموجبة، و إزاحة العنصر إلى الأعلى بالقيمة السالبة.

* RIGHT : هي الخاصية المسؤولة عن إزاحة العنصر إلى اليسار بالقيمة الموجبة، و إزاحة العنصر إلى اليمين بالقيمة السالبة.

* BOTTOM : هي الخاصية المسؤولة عن إزاحة العنصر إلى الأعلى بالقيمة الموجبة، و إزاحة العنصر إلى الأسفل بالقيمة السالبة.

* LEFT : هي الخاصية المسؤولة عن إزاحة العنصر إلى اليمين بالقيمة الموجبة، و إزاحة العنصر إلى اليسار بالقيمة السالبة.

و يجب إقحام إما خاصية واحدة أو خاصيتين مختلفتي المستوى، يعني إما 'TOP' و إما 'BOTTOM' في المستوى العمودي، و إما 'RIGHT' و إما 'LEFT' في المستوى الأفقي.

الفيديو التوضيحي للدرس

القيم الخاصة للخاصية POSITION

القيمة STATIC

تعتبر القيمة 'STATIC' القيمة التلقائية للخاصية 'POSITION' حيث تُظهر العنصر بالتنسيق التلقائي للـ HTML.

القيمة RELATIVE

تجعل القيمة 'RELATIVE' العنصر يتموضع نسبة إلى وضعيته التلقائية، بحيث يمكن التعديل على مكانه بخواص الإزاحة.

القيمة FIXED

تجعل القيمة 'FIXED' العنصر يتموضع نسبة إلى نافذة المتصفح، بحيث يمكن التعديل على مكانه بخواص الإزاحة ليكون عنصر ثابث رغم عمل Scrolling للصفحة المتواجد بها.

القيمة ABSOLUTE

تجعل القيمة 'ABSOLUTE' العنصر يتموضع نسبة إلى عنصر محتوٍ له يتوفر على خاصية 'POSITION' مُقيَّمة بـ 'RELATIVE' أو 'FIXED' أو 'ABSOLUTE'، و في حالة عدم توفر العناصر المحتوية له على الخاصية 'POSITION'، فالعنصر يتموضع نسبة إلى كامل صفحة الويب المتواجد بها، و في كلتا الحاتين يمكن التعديل على مكانه بخواص الإزاحة.

القيمة STICKY

تجعل القيمة 'STICKY' العنصر يتموضع كتأثير القيمة 'RELATIVE'، وعند عمل Scrolling للصفحة المتواجد بها، يصل العنصر إلى نهاية تموضعه كتأثير القيمة 'RELATIVE'، فيتحول تموضعه من شبه تأثير القيمة 'RELATIVE' إلى شبه تأثير القيمة 'FIXED'، و يبقى ثابثاً بالنسبة لنافذة المتصفح مع تطبيق تأثير خواص الإزاحة بعد تحول نوع تموضعه.

القيمتين الشاملتين المقبولتين من طرف الخاصية POSITION

- INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'POSITION'، القيمة تورث للعنصر نوع الوضعية من العنصر المحتوي له.

- INITIAL : قيمة ترجع العناصر إلى القيمة التلقائية للخواص، و في حالة الخاصية 'POSITION'، القيمة ترجع العنصر إلى القيمة التلقائية للخاصية، و التي هي القيمة 'STATIC'.

See the Pen
الخاصية position by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

الخاصية display في CSS | الدرس 23\37

noreply@blogger.com (Unknown) — Sat, 21 Sep 2019 16:37:00 +0000

السلام عليكم، سنرى في هذا الدرس الخاصية 'DISPLAY' و قيمها.

ما هي الخاصية DISPLAY ؟

الخاصية 'DISPLAY' هي خاصية مسؤولة عن تحديد كيفية ظهور العناصر HTML في صفحات الويب، و لديها قيم كثيرة لكن أغلبها قد تم تعويضها بعناصر HTML مخصصة من طرف النسخة الأخيرة للـ HTML التي هي HTML5، و ما سندرسه في هذا الدرس هم أربع أهم قيم للخاصية 'DISPLAY' حيث تعتبر أكثر قيم الخاصية استعمالاً من طرف مصممو الويب، و هم :

* INLINE

* BLOCK

* INLINE-BLOCK

* NONE

الفيديو التوضيحي للدرس

قيم الخاصية DISPLAY

القيمة INLINE

تجعل القيمة INLINE عناصر HTML من نوع Block تظهر كعناصر من نوع INLINE مع عدم إمكانية التعديل على أبعادها، أي عرضها و ارتفاعها.

القيمة BLOCK

تجعل القيمة BLOCK عناصر HTML من نوع INLINE تظهر كعناصر من نوع Block.

القيمة INLINE-BLOCK

تجعل القيمة INLINE-BLOCK عناصر HTML كيفما كان نوعها تظهر كعناصر من نوع Inline آخذة خصائص Block، أي يمكن التعديل عليها أو إقحام عناصر HTML أخرى في محتواها.

القيمة NONE

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

See the Pen
الخاصية display by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

مفهوم و خواص Margin و Padding في CSS | الدرس 22\37

noreply@blogger.com (Unknown) — Thu, 19 Sep 2019 17:33:00 +0000

السلام عليكم، سنرى في هذا الدرس ماهية الـ Margin و الـ Padding، و سنتعرف على Box Model.

Box Model

لن يتم فهم الـ Margin و الـ Padding بدون معرفة شيء يسمى Box Model.

نموذج Box Model

يَعتبر HTML كل عنصر من عناصره كمستطيل لديه محتوى، Padding، حواف و Margin، نموذج Box Model أعلاه يوضح تنسيق العناصر الأربع السابقة الذكر، و يوجد أيضاً أسفل علامة التبويب 'Styles' في العمود الأيمن للآداة 'Inspect Element' الموجودة في متصفحات الإنترنت الكبرى.

Padding

ما هو Padding ؟

الـ Padding هو الفراغ الموجود بين محتوى العنصر و حوافه، و قد خُصِّص له خمس خواص من طرف HTML تقبلن جميع القيم المطلقة و جميع القيم النسبية و قيمة واحدة من القيم الشاملة ألا وهي القيمة 'INHERIT' التي تورث للعنصر ستايل الخواص من العناصر المحتوية لها، و في حالة خواص الـ Padding القيمة تورث للعنصر الفراغ الموجود بين محتواه و حوافه من العنصر المحتوي له.

خواص Padding

• Padding : هي الخاصية المسؤولة عن التعديل على الفراغ الموجود بين محتوى العنصر و حوافه، و تقبل قيمة واحدة، أو قيمتين، أو ثلاث قيم، أو أربع قيم :

- قيمة واحدة : القيمة تُطبَّق على الفراغات الأربع الموجودة بين محتوى العنصر و حوافه.

- قيمتين : القيمة اليسرى هي المسؤولة عن التعديل على الفراغ الأعلى و الفراغ الأسفل الموجودين بين محتوى العنصر و حوافه، أما القيمة اليمنى فهي المسؤولة عن التعديل على الفراغ الأيمن و الفراغ الأيسر الموجودين بين محتوى العنصر و حوافه.

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

- أربع قيم : القيمة الأولى هي المسؤولة عن التعديل على الفراغ الأعلى الموجود بين محتوى العنصر و حافته العليا، القيمة الثانية هي المسؤولة عن التعديل على الفراغ الأيمن الموجود بين محتوى العنصر و حافته اليمنى، القيمة الثالثة هي المسؤولة عن التعديل على الفراغ الأسفل الموجود بين محتوى العنصر و حافته السفلى، أما القيمة الرابعة فهي المسؤولة عن التعديل على الفراغ الأيسر الموجود بين محتوى العنصر و حافته اليسرى.

• Padding-top : هي الخاصية المسؤولة عن التعديل على الفراغ الأعلى الموجود بين محتوى العنصر و حافته العليا.

• Padding-right : هي الخاصية المسؤولة عن التعديل على الفراغ الأيمن الموجود بين محتوى العنصر و حافته اليمنى.

• Padding-bottom : هي الخاصية المسؤولة عن التعديل على الفراغ الأسفل الموجود بين محتوى العنصر و حافته السفلى.

• Padding-left : هي الخاصية المسؤولة عن التعديل على الفراغ الأيسر الموجود بين محتوى العنصر و حافته اليسرى.

الفيديو التوضيحي للدرس

Margin

ما هو Margin ؟

الـ Margin هو الفراغ الموجود خارج حواف العنصر، و قد خُصِّص له خمس خواص من طرف HTML لديهن قيمة خاصة بإسم 'AUTO' حيث في تواجدها تأمر متصفح الإنترنت بحساب الـ Margin و توضيفه في العنصر، و تقبلن جميع القيم المطلقة و جميع القيم النسبية و قيمة واحدة من القيم الشاملة هي القيمة 'INHERIT' التي تورث للعنصر ستايل الخواص من العناصر المحتوية لها، و في حالة خواص الـ Margin القيمة تورث للعنصر الفراغ الموجود خارج حوافه من العنصر المحتوي له.

خواص Margin

• Margin : هي الخاصية المسؤولة عن التعديل على الفراغ الموجود خارج حواف العنصر، و تقبل قيمة واحدة، أو قيمتين، أو ثلاث قيم، أو أربع قيم :

- قيمة واحدة : القيمة تُطبَّق على الفراغات الأربع الموجودة خارج حواف العنصر.

- قيمتين : القيمة اليسرى هي المسؤولة عن التعديل على الفراغ الأعلى و الفراغ الأسفل الموجودين خارج حواف العنصر، أما القيمة اليمنى فهي المسؤولة عن التعديل على الفراغ الأيمن و الفراغ الأيسر الموجودين خارج حواف العنصر.

- ثلاث قيم : القيمة اليسرى هي المسؤولة عن التعديل على الفراغ الأعلى الموجود خارج حافة العنصر العليا، و القيمة الوسطى هي المسؤولة عن التعديل على الفراغ الأيمن و الفراغ الأيسر الموجودين خارج حواف العنصر، أما القيمة اليمنى فهي المسؤولة عن التعديل على الفراغ الأسفل الموجود خارج حافة العنصر السفلى.

- أربع قيم : القيمة الأولى هي المسؤولة عن التعديل على الفراغ الأعلى الموجود خارج حافة العنصر العليا، القيمة الثانية هي المسؤولة عن التعديل على الفراغ الأيمن الموجود خارج حافة العنصر اليمنى، القيمة الثالثة هي المسؤولة عن التعديل على الفراغ الأسفل الموجود خارج حافة العنصر السفلى، أما القيمة الرابعة فهي المسؤولة عن التعديل على الفراغ الأيسر الموجود خارج حافة العنصر اليسرى.

• Margin-top : هي الخاصية المسؤولة عن التعديل على الفراغ الأعلى الموجود خارج الحافة العليا للعنصر.

• Margin-right : هي الخاصية المسؤولة عن التعديل على الفراغ الأيمن الموجود خارج الحافة اليمنى للعنصر.

• Margin-bottom : هي الخاصية المسؤولة عن التعديل على الفراغ الأسفل الموجود خارج الحافة السفلى للعنصر.

• Margin-left : هي الخاصية المسؤولة عن التعديل على الفراغ الأيسر الموجود خارج الحافة اليسرى للعنصر.

إذا كان عنصر HTML لديه Margin أو Border أو Padding أو بعضهم، يجب العلم أن عرضه أو ارتفاعه لا يُحتسب ضمنهما الـ Margin و الـ Border و الـ Padding، لذا عند تحديد عرض لعنصر HTML بالخاصية 'WIDTH' أو تحديد ارتفاع لعنصر HTML بالخاصية 'HEIGHT' يجب الأخذ بعين الإعتبار أطوال الـ Margin و الـ Border و الـ Padding.

See the Pen
padding و margin by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في هذا الدرس

أتمنى أن تستفيدوا من الدرس

العرض و الإرتفاع في CSS | الدرس 21\37

noreply@blogger.com (Unknown) — Mon, 16 Sep 2019 13:57:00 +0000

السلام عليكم، سنرى في هذا الدرس الخاصية 'WIDTH' و الخاصية 'HEIGHT'، و سنتطرق كذلك إلى الخاصيتين 'MAX-WIDTH' و 'MIN-WIDTH'، و أيضاً الخاصيتين 'MAX-HEIGHT' و 'MIN-HEIGHT'.

الخاصية WIDTH

التنسيق التلقائي للـ HTML يعطي عرض للعناصر حسب نوعها، فإذا كانت عناصر من نوع Inline ستأخذ عرض حسب محتواها، أما إذا كانت من نوع Block فستأخذ عرض العنصر المحتوي لها، هنا يأتي دور الخاصية 'WIDTH'، فهي خاصية تحدد عرض للعناصر HTML بـ CSS كيفما كان نوعها، و تقبل قيمة خاصة واحدة، القيم المطلقة (Absolute Lengths)، القيم النسبية (Relative Lengths) و قيمتين من القيم الشاملة :

• القيمة الخاصة : لدى الخاصية 'WIDTH' قيمة خاصة واحدة تسمى 'AUTO'، و تُصنف كقيمتها التلقائية حيث في تواجدها تقوم بأمر متصفح الإنترنت لكي يتكفل بتحديد عرض للعنصر.

• القيم المطلقة : تقبل الخاصية 'WIDTH' جميع القيم المطلقة.

• القيم النسبية : تقبل الخاصية 'WIDTH' جميع القيم النسبية.

• القيم الشاملة : تقبل الخاصية 'WIDTH' من القيم الشاملة قيمتين و هما :

- INHERIT : قيمة تورِّث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'WIDTH'، تورث القيمة 'INHERIT' للعنصر العرض من العنصر المحتوي له.

- INITIAL : قيمة تُرجع العناصر إلى القيم التلقائية للخواص، و في حالة الخاصية 'WIDTH'، ترجع القيمة 'INITIAL' العنصر إلى القيمة التلقائية للخاصية، أي ترجعه إلى القيمة 'AUTO'.

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

الخاصية HEIGHT

التنسيق التلقائي للـ HTML يعطي ارتفاع للعناصر حسب محتواها، هنا يأتي دور الخاصية 'HEIGHT'، فهي خاصية تحدد ارتفاع للعناصر HTML بـ CSS، و تقبل قيمة خاصة واحدة، القيم المطلقة، القيم النسبية و قيمتين من القيم الشاملة :

• القيمة الخاصة : لدى الخاصية 'HEIGHT' قيمة خاصة واحدة تسمى 'AUTO'، و تُصنف كقيمتها التلقائية حيث في تواجدها تقوم بأمر متصفح الإنترنت لكي يتكفل بتحديد ارتفاع للعنصر.

• القيم المطلقة : تقبل الخاصية 'HEIGHT' جميع القيم المطلقة.

• القيم النسبية : تقبل الخاصية 'HEIGHT' جميع القيم النسبية.

• القيم الشاملة : تقبل الخاصية 'HEIGHT' من القيم الشاملة قيمتين و هما :

- INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'HEIGHT'، تورث القيمة 'INHERIT' للعنصر الإرتفاع من العنصر المحتوي له.

- INITIAL : قيمة تُرجع العناصر إلى القيم التلقائية للخواص، و في حالة الخاصية 'HEIGHT'، ترجع القيمة 'INITIAL' العنصر إلى القيمة التلقائية للخاصية، أي ترجعه إلى القيمة 'AUTO'.

الفيديو التوضيحي للدرس

الخاصيتين MAX-WIDTH و MIN-WIDTH

الخاصية 'MAX-WIDTH' هي خاصية تحدد العرض الأقصى للعناصر HTML، و الخاصية 'MIN-WIDTH' هي خاصية تحدد العرض الأدنى للعناصر HTML، يمكن إقحام كلتاهما في كود CSS أو إقحام سوى خاصية واحدة منهما، و تقبلان جميع القيم المطلقة و جميع القيم النسبية و قيمة خاصة تُصنف كقيمتهما التلقائية بإسم 'NONE' حيث تواجدها في الخاصية 'MAX-WIDTH' ينعدم العرض الأقصى للعنصر، و تواجدها في الخاصية 'MIN-WIDTH' ينعدم العرض الأدنى للعنصر، و تقبلان الخاصيتين أيضاً من القيم الشاملة قيمتين و هما :

- INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'MAX-WIDTH' فالقيمة تورث للعنصر العرض الأقصى من العنصر المحتوي له، أما في حالة الخاصية 'MIN-WIDTH'، القيمة تورث للعنصر العرض الأدنى من العنصر المحتوي له.

- INITIAL : قيمة تُرجع العناصر إلى القيم التلقائية للخواص، و في حالة الخاصيتين 'MAX-WIDTH' و 'MIN-WIDTH'، القيمة ترجع العنصر إلى القيمة التلقائية للخاصية، أي ترجعه إلى القيمة 'NONE'.

الخاصيتين MAX-HEIGHT و MIN-HEIGHT

الخاصية 'MAX-HEIGHT' هي خاصية تحدد الإرتفاع الأقصى للعناصر HTML، و الخاصية 'MIN-HEIGHT' هي خاصية تحدد الإرتفاع الأدنى للعناصر HTML، يمكن إقحام كلتاهما في كود CSS أو إقحام سوى خاصية واحدة منهما، و تقبلان جميع القيم المطلقة و جميع القيم النسبية و قيمة خاصة تُصنَّف كقيمتهما التلقائية بإسم 'NONE' حيث تواجدها في الخاصية 'MAX-HEIGHT' ينعدم الإرتفاع الأقصى للعنصر، و تواجدها في الخاصية 'MIN-HEIGHT' ينعدم الإرتفاع الأدنى للعنصر، و تقبلان أيضاً من القيم الشاملة قيمتين و هما :

- INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'MAX-HEIGHT' فالقيمة تورث للعنصر الإرتفاع الأقصى من العنصر المحتوي له، أما في حالة الخاصية 'MIN-HEIGHT'، القيمة تورث للعنصر الإرتفاع الأدنى من العنصر المحتوي له.

- INITIAL : قيمة تُرجع العناصر إلى القيم التلقائية للخواص، و في حالة الخاصيتين 'MAX-HEIGHT' و 'MIN-HEIGHT'، القيمة ترجع العنصر إلى القيمة التلقائية للخاصية، أي ترجعه إلى القيمة 'NONE'.

See the Pen
العرض و الإرتفاع في CSS by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

خواص الحواف border و الخاصية box-shadow في CSS | الدرس 20\37

noreply@blogger.com (Unknown) — Mon, 09 Sep 2019 01:57:00 +0000

السلام عليكم، سنرى في هذا الدرس خواص الحواف BORDER-STYLE، BORDER-WIDTH و BORDER-COLOR، بالإضافة إلى خواص إنشاء و تعديل الحواف المنفردة، و سنرى أيضاً الخاصية BORDER-RADIUS و الخاصية BOX-SHADOW.

الخاصية BORDER-STYLE

الخاصية 'BORDER-STYLE' هي الخاصية المسؤولة عن إنشاء الحواف و تحديد نوعها.

قيم الخاصية BORDER-STYLE

لدى الخاصية 'BORDER-STYLE' عشر قيم و هم :

• SOLID : قيمة تنشئ حواف على شكل خط مستقيم في كل حافة.

• DASHED : قيمة تنشئ حواف على شكل خط متقطع في كل حافة.

• DOTTED : قيمة تنشئ حواف على شكل نقاط مستقيمة في كل حافة.

• DOUBLE : قيمة تنشئ حواف على شكل خطين مستقيمين متوازيين في كل حافة.

• GROOVE : قيمة تنشئ حواف على شكل خطين مختلفين في كل حافة، حيث يوجد خط داخلي و خط خارجي، و يتعاكسان في الجهة الأخرى من قطر الحواف.

• RIDGE : قيمة تنشئ حواف على عكس شكل القيمة 'GROOVE'

• INSET : قيمة تنشئ حواف تظهر مقعَّرة في الإنطباع الثلاثي الأبعاد.

• OUTSET : قيمة تنشئ حواف تظهر محذَّبة في الإنطباع الثلاثي الأبعاد.

• HIDDEN : قيمة تخفي الحواف.

• NONE : قيمة تحذف الحواف.

تعدد القيم في الخاصية BORDER-STYLE

يمكن إقحام في قيمة الخاصية 'BORDER-STYLE' قيمة واحدة، أو قيمتين، أو ثلاث قيم، أو أربع قيم.

- نموذج قيمة واحدة في الخاصية 'BORDER-STYLE' : بإقحام قيمة واحدة ستنشأ الحواف الأربعة بنفس الشكل.

- نموذج قيمتان في الخاصية 'BORDER-STYLE' : القيمة التي في اليسار هي المسؤولة عن إنشاء الحافتين العليا و السفلى، أما القيمة التي في اليمين فهي المسؤولة عن إنشاء الحافتين اليمنى و اليسرى.

- نموذج ثلاث قيم في الخاصية 'BORDER-STYLE' : القيمة الأولى هي المسؤولة عن إنشاء الحافة العليا، القيمة الوسطى هي المسؤولة عن إنشاء الحافتين اليمنى و اليسرى، أما القيمة الثالثة فهي المسؤولة عن إنشاء الحافة السفلى.

- نموذج أربع قيم في الخاصية 'BORDER-STYLE' : القيمة الأولى هي المسؤولة عن إنشاء الحافة العليا، القيمة الثانية هي المسؤولة عن إنشاء الحافة اليمنى، القيمة الثالثة هي المسؤولة عن إنشاء الحافة السفلى، أما القيمة الرابعة فهي المسؤولة عن إنشاء الحافة اليسرى.

خواص إنشاء الحواف المنفردة

الحواف المنفردة هم الحافة العليا، الحافة اليمنى، الحافة السفلى و الحافة اليسرى، و يتم إنشاء كل حافة منفردة بخاصية مخصصة و هم :

• BORDER-TOP-STYLE : هي الخاصية المسؤولة عن إنشاء الحافة المنفردة العليا.

• BORDER-RIGHT-STYLE : هي الخاصية المسؤولة عن إنشاء الحافة المنفردة اليمنى.

• BORDER-BOTTOM-STYLE : هي الخاصية المسؤولة عن إنشاء الحافة المنفردة السفلى.

• BORDER-LEFT-STYLE : هي الخاصية المسؤولة عن إنشاء الحافة المنفردة اليسرى.

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

الخاصية BORDER-WIDTH

الخاصية 'BORDER-WIDTH' هي الخاصية المسؤولة عن التعديل على سمك الحواف، و لا تطبق إلا بوجود الخاصية 'BORDER-STYLE'.

قيم الخاصية BORDER-WIDTH

لدى الخاصية 'BORDER-WIDTH' ثلاث قيم خاصة زيادة عن القيم المطلقة و القيم النسبية و هم :

• THIN : قيمة تُظهر الحواف رقيقة السمك.

• MEDIUM : قيمة تُظهر الحواف متوسطة السمك.

• THICK : قيمة تُظهر الحواف غليضة السمك.

• القيم المطلقة : تقبل الخاصية 'BORDER-WIDTH' جميع القيم المطلقة.

• القيم النسبية : تقبل الخاصية 'BORDER-WIDTH' جميع القيم النسبية.

تعدد القيم في الخاصية BORDER-WIDTH

يمكن إقحام في قيمة الخاصية 'BORDER-WIDTH' قيمة واحدة، أو قيمتين، أو ثلاث قيم، أو أربع قيم.

- نموذج قيمة واحدة في الخاصية 'BORDER-WIDTH' : بإقحام قيمة واحدة سيتم التعديل على سمك الحواف الأربعة.

- نموذج قيمتان في الخاصية 'BORDER-WIDTH' : القيمة التي في اليسار هي المسؤولة عن تعديل سمك الحافتين العليا و السفلى، أما القيمة التي في اليمين فهي المسؤولة عن تعديل سمك الحافتين اليمنى و اليسرى.

- نموذج ثلاث قيم في الخاصية 'BORDER-WIDTH' : القيمة الأولى هي المسؤولة عن تعديل سمك الحافة العليا، القيمة الوسطى هي المسؤولة عن تعديل سمك الحافتين اليمنى و اليسرى، أما القيمة الثالثة فهي المسؤولة عن تعديل سمك الحافة السفلى.

- نموذج أربع قيم في الخاصية 'BORDER-WIDTH' : القيمة الأولى هي المسؤولة عن تعديل سمك الحافة العليا، القيمة الثانية هي المسؤولة عن تعديل سمك الحافة اليمنى، القيمة الثالثة هي المسؤولة عن تعديل سمك الحافة السفلى، أما القيمة الرابعة فهي المسؤولة عن تعديل سمك الحافة اليسرى.

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

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

• BORDER-TOP-WIDTH : هي الخاصية المسؤولة عن تعديل سمك الحافة المنفردة العليا.

• BORDER-RIGHT-WIDTH : هي الخاصية المسؤولة عن تعديل سمك الحافة المنفردة اليمنى.

• BORDER-BOTTOM-WIDTH : هي الخاصية المسؤولة عن تعديل سمك الحافة المنفردة السفلى.

• BORDER-LEFT-WIDTH : هي الخاصية المسؤولة عن تعديل سمك الحافة المنفردة اليسرى.

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

الخاصية BORDER-COLOR

الخاصية 'BORDER-COLOR' هي الخاصية المسؤولة عن التعديل على لون الحواف، و لا تطبق إلا بوجود الخاصية 'BORDER-STYLE'.

قيم الخاصية BORDER-COLOR

تقبل الخاصية 'BORDER-COLOR' جميع قيم الألوان (يمكنكم تفقد قيم الألوان في الدرس 15 من هذه الدورة و هو درس الألوان و الشفافية في CSS) و هم القيم بإسم اللون، القيم بالـ Hexadecimal، القيم بالـ RGB و القيم بالـ RGBa.

تعدد القيم في الخاصية BORDER-COLOR

يمكن إقحام في قيمة الخاصية 'BORDER-COLOR' قيمة واحدة، أو قيمتين، أو ثلاث قيم، أو أربع قيم.

- نموذج قيمة واحدة في الخاصية 'BORDER-COLOR' : بإقحام قيمة واحدة سيتم التعديل على لون الحواف الأربعة.

- نموذج قيمتان في الخاصية 'BORDER-COLOR' : القيمة التي في اليسار هي المسؤولة عن التعديل على لون الحافتين العليا و السفلى، أما القيمة التي في اليمين فهي المسؤولة عن التعديل على لون الحافتين اليمنى و اليسرى.

- نموذج ثلاث قيم في الخاصية 'BORDER-COLOR' : القيمة الأولى هي المسؤولة عن التعديل على لون الحافة العليا، القيمة الوسطى هي المسؤولة عن التعديل على لون الحافتين اليمنى و اليسرى، أما القيمة الثالثة فهي المسؤولة عن التعديل على لون الحافة السفلى.

- نموذج أربع قيم في الخاصية 'BORDER-COLOR' : القيمة الأولى هي المسؤولة عن التعديل على لون الحافة العليا، القيمة الثانية هي المسؤولة عن التعديل على لون الحافة اليمنى، القيمة الثالثة هي المسؤولة عن التعديل على لون الحافة السفلى، أما القيمة الرابعة فهي المسؤولة عن التعديل على لون الحافة اليسرى.

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

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

• BORDER-TOP-COLOR : هي الخاصية المسؤولة عن التعديل على لون الحافة المنفردة العليا.

• BORDER-RIGHT-COLOR : هي الخاصية المسؤولة عن التعديل على لون الحافة المنفردة اليمنى.

• BORDER-BOTTOM-COLOR : هي الخاصية المسؤولة عن التعديل على لون الحافة المنفردة السفلى.

• BORDER-LEFT-COLOR : هي الخاصية المسؤولة عن التعديل على لون الحافة المنفردة اليسرى.

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

الفيديو التوضيحي للدرس

الخاصية BORDER

يمكن جمع الخواص 'BORDER-WIDTH'، 'BORDER-STYLE' و 'BORDER-COLOR' في خاصية واحدة تسمى 'BORDER'، و تكتب في قيمتها كالآتي : Vb-w Vb-s Vb-c

* Vb-w هي قيمة الخاصية 'BORDER-WIDTH'.

* Vb-s هي قيمة الخاصية 'BORDER-STYLE'.

* Vb-c هي قيمة الخاصية 'BORDER-COLOR'.

هذا ما يسمى بتقنية Shorthand في CSS، و يمكن تطبيق هذه التقنية أيضا في خواص الحواف المنفردة، و ذلك بـ :

• BORDER-TOP : هي Shorthand Property للحافة العليا.

• BORDER-RIGHT : هي Shorthand Property للحافة اليمنى.

• BORDER-BOTTOM : هي Shorthand Property للحافة السفلى.

• BORDER-LEFT : هي Shorthand Property للحافة اليسرى.

الخاصية BORDER-RADIUS

الخاصية 'BORDER-RADIUS' هي الخاصية المسؤولة عن التعديل على وتر تقوس الأحرف علماً أن الحرف هو نقطة إلتقاء حافة مع حافة أخرى، و لا تطبق الخاصية 'BORDER-RADIUS' إلا بوجود الخاصية 'BORDER-STYLE' أو الخاصية 'BORDER'، و تقبل من القيم جميع القيم المطلقة و جميع القيم النسبية، و يمكن إقحام في قيمتها قيمة واحدة، أو قيمتين، أو ثلاث قيم، أو أربع قيم.

- نموذج قيمة واحدة في الخاصية 'BORDER-RADIUS' : بإقحام قيمة واحدة سيتم التعديل على وتر تقوس الأحرف الأربعة.

- نموذج قيمتان في الخاصية 'BORDER-RADIUS' : القيمة التي في اليسار هي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليسار و الحرف الموجود في أسفل اليمين، أما القيمة التي في اليمين فهي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليمين و الحرف الموجود في أسفل اليسار.

- نموذج ثلاث قيم في الخاصية 'BORDER-RADIUS' : القيمة الأولى هي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليسار، القيمة الوسطى هي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليمين و الحرف الموجود في أسفل اليسار، أما القيمة الثالثة فهي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أسفل اليمين.

- نموذج أربع قيم في الخاصية 'BORDER-RADIUS' : القيمة الأولى هي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليسار، القيمة الثانية هي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليمين، القيمة الثالثة هي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أسفل اليمين، أما القيمة الرابعة فهي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أسفل اليسار.

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

الأحرف المنفردة هم الحرف الموجود في أعلى اليسار، الحرف الموجود في أعلى اليمين، الحرف الموجود في أسفل اليمين و الحرف الموجود في أسفل اليسار، و يتم التعديل على وتر تقوس كل حرف منفرد بخاصية مخصصة علماً أن هذه الأخيرة لا تطبّق إلا بوجود الخاصية 'BORDER-STYLE' أو الخاصية 'BORDER'، و هم :

• BORDER-TOP-LEFT-RADIUS : هي الخاصية المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليسار.

• BORDER-TOP-RIGHT-RADIUS : هي الخاصية المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليمين.

• BORDER-BOTTOM-RIGHT-RADIUS : هي الخاصية المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أسفل اليمين.

• BORDER-BOTTOM-LEFT-RADIUS : هي الخاصية المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أسفل اليسار.

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

الخاصية BOX-SHADOW

الخاصية 'BOX-SHADOW' هي خاصية تمنح ظل لأغلب العناصر HTML كالصور و الفيديوهات و الحواف و غيرها... و تقبل قيمتين خاصتين و قيمتين شاملتين.

القيم الخاصة للخاصية BOX-SHADOW

• القيمة الخاصة المركبة : تكون القيمة الخاصة المركبة للخاصية BOX-SHADOW كالتالي : Nx Ny Nb Np Nc

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

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

Nb هي القيمة المسؤولة عن تغيير كثافة التضبيب للظل، و هي اختيارية في القيمة، و تكون عبارة عن قيمة مطلقة أو قيمة نسبية.

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

Nc هي القيمة المسؤولة عن تغيير لون الظل، و هي اختيارية في القيمة، و تكون عبارة عن قيمة بإسم اللون، أو قيمة بالـ Hexadecimal، أو قيمة بالـ RGB، أو قيمة بالـ RGBa.

نماذج القيمة الخاصة المركبة للخاصية BOX-SHADOW

يمكن إنشاء عدة نمادج بالقيمة الخاصة المركبة للخاصية 'BOX-SHADOW' أذكر منها :

- نموذج ظل عادي : لإنشاء ظل عادي يجب إقحام سوى القيم الإجبارية.

- نموذج ظل مضبب : لإنشاء ظل مضبب يجب إضافة قيمة التضبيب الإختيارية.

- نموذج ظل مضبب منتشر : لإنشاء ظل مضبب منتشر يجب إضافة قيمتا التضبيب و الإنتشار الضبابي.

- نموذج ظل داخلى : لإنشاء ظل داخلي يجب إضافة الكلمة المفتاحية 'INSET' داخل القيمة.

- نموذج تعدد الضلال : لإنشاء العديد من الظلال في عنصر واحد يجب إقحام قيم كل ظل مفروقة بفاصلة عن قيم الظل الآخر في نفس قيمة الخاصية 'BOX-SHADOW'.

• NONE : هي القيمة التلقائية للخاصية، و تستعمل لحذف الظلال من العناصر.

القيم الشاملة للخاصية BOX-SHADOW

• INHERIT : قيمة تورِّث العناصر الستايل من العناصر المحتوية لها، و في حالة الخاصية 'BOX-SHADOW'، فالقيمة 'INHERIT' تورِّث للعناصر الظل من العناصر المحتوية لها.

• INITIAL : قيمة ترجع ستايل العناصر إلى القيمة التلقائية، و في حالة الخاصية 'BOX-SHADOW'، فالقيمة 'INITIAL' ترجع ستايل العناصر إلى القيمة التلقائية للخاصية التي هي 'NONE'، و بالتالي تحذف الظلال منها.

See the Pen
border and box-shadow by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

خواص التعديل على النصوص بـ CSS | الدرس 19\37

noreply@blogger.com (Unknown) — Mon, 02 Sep 2019 17:57:00 +0000

السلام عليكم، سنرى في هذا الدرس أهم خواص التعديل على النصوص بـ CSS، حيث سنتطرق إلى :

* الخاصية 'DIRECTION'

* الخاصية 'TEXT-ALIGN'

* الخاصية 'TEXT-TRANSFORM'

* الخاصية 'TEXT-DECORATION'

* الخاصية 'TEXT-INDENT'

* الخاصية 'TEXT-SHADOW'

* الخاصية 'LINE-HEIGHT'

* الخاصية 'VERTICAL-ALIGN'

الخاصية DIRECTION

الخاصية 'DIRECTION' هي خاصية تمنح الوجهة للنصوص حسب لغة النص، و هي الخاصية الرئيسية لتعريب القوالب الأجنبية للمواقع و التطبيقات، و تقبل قيمتين خاصتين و قيمتين من القيم الشاملة Global Values.

القيم الخاصة للخاصية DIRECTION

• LTR : هي القيمة التلقائية، و تمنح الوجهة للنص من اليسار إلى اليمين، و خصوصاً للنص الذي يُكتب بلغة من اليسار إلى اليمين كاللغة الإنجليزية مثلاً.

• RTL : قيمة تمنح الوجهة للنص من اليمين إلى اليسار، و خصوصاً للنص الذي يُكتب بلغة من اليمين إلى اليسار كالعربية مثلاً.

القيم الشاملة للخاصية DIRECTION

• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'DIRECTION'، تُورِّث القيمة 'INHERIT' للعنصر وجهة النص من العنصر المحتوي له.

• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'DIRECTION'، تُرجِع القيمة 'INITIAL' وجهة النص إلى الوجهة التلقائية التي هي LTR.

الخاصية TEXT-ALIGN

الخاصية 'TEXT-ALIGN' هي خاصية إما تُحدِّد مكان النصوص نسبة إلى العنصر المحتوي لها، أو تعطيها تنسيق معين، و تقبل أربع قيم خاصة و قيمتين شاملتين.

القيم الخاصة للخاصية TEXT-ALIGN

• LEFT : هي القيمة التلقائية بالنسبة للنص الذي يكتب بلغة LTR، و تُظهِر النص في يسار العنصر المحتوي له.

• RIGHT : هي القيمة التلقائية بالنسبة للنص الذي يكتب بلغة RTL، و تُظهِر النص في يمين العنصر المحتوي له.

• CENTER : قيمة تُظهر النص في الوسط الأفقي للعنصر المحتوي له.

• JUSTIFY : قيمة تُغيّر تنسيق النص بجعل جميع أسطره متساوية الطول.

القيم الشاملة للخاصية TEXT-ALIGN

• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'TEXT-ALIGN'، تُورِّث القيمة 'INHERIT' للنص المكان أو التنسيق من العنصر المحتوي.

• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'TEXT-ALIGN'، تُرجِع القيمة 'INITIAL' النص إلى الوضعية الأولية له حسب نوع اللغة التي هو مكتوب بها، أي هل LTR أو RTL.

الخاصية TEXT-TRANSFORM

الخاصية 'TEXT-TRANSFORM' هي خاصية تغير حجم حروف النصوص إلى حروف كبيرة أو صغيرة أو تغير الحرف الأول من كل كلمة في النص إلى حرف كبير (Capital)، و هي مخصصة للنصوص المكتوبة بلغات من نوع LTR، و تقبل أربع قيم خاصة و قيمتين شاملتين.

القيم الخاصة للخاصية TEXT-TRANSFORM

• LOWERCASE : قيمة تجعل كل حروف النص كبيرة.

• UPPERCASE : قيمة تجعل كل حروف النص صغيرة.

• CAPITALIZE : قيمة تجعل الحرف الأول من كل كلمة في النص حرف كبير.

• NONE : هي القيمة التلقائية الخاصية، و تستعمَل لتعطيل حجم حروف النص في حالة إرثه من العنصر المحتوي.

القيم الشاملة للخاصية TEXT-TRANSFORM

• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'TEXT-TRANSFORM'، تُورِّث القيمة 'INHERIT' للنص حجم حروفه من العنصر المحتوي.

• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'TEXT-TRANSFORM'، تُرجِع القيمة 'INITIAL' حروف النص إلى الوضعية الأولية أي التنسيق التلقائي.

الخاصية TEXT-DECORATION

الخاصية 'TEXT-DECORATION' هي خاصية تعطي للنصوص الديكور أو تعطل منها الديكور، و تقبل أربع قيم خاصة و قيمتين شاملتين.

القيم الخاصة للخاصية TEXT-DECORATION

• UNDERLINE : قيمة تجعل خط تحت النص.

• OVERLINE : قيمة تجعل خط فوق النص.

• LINE-THROUGH : قيمة تجعل خط وسط النص.

• NONE : قيمة تعطل الديكور من النص، و تُستعمَل لتعطيل ديكور التنسيق التلقائي للـ HTML كالديكور التلقائي الذي في الروابط و القوائم.. و تستعمَل أيضاً لحذف إرث ديكور من العنصر المحتوي.

القيم الشاملة للخاصية TEXT-DECORATION

• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'TEXT-DECORATION'، تُورِّث القيمة 'INHERIT' للنص الديكور من العنصر المحتوي.

• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'TEXT-DECORATION'، تجعل القيمة 'INITIAL' النص يظهر بالديكور الأولي، أي التنسيق التلقائي.

الخاصية TEXT-INDENT

الخاصية 'TEXT-INDENT' هي خاصية تمنح إزاحة النصوص أفقياً، و تقبل ثلاث أنواع قيم و هم القيم المطلقة، القيم النسبية و القيم الشاملة.

القيم المطلقة و القيم النسبية للخاصية TEXT-INDENT

تقبل الخاصية 'TEXT-INDENT' جميع وحدات القيم المطلقة و القيم النسبية (يمكنكم التطرق إلى ماهية القيم المطلقة و القيم النسبية و وحداتهما في هذا الدرس) لكن الإزاحة تتم حسب نوع لغة النص، فمثلاً إذا أردنا إزاحة نص مكتوب باللغة العربية التي هي لغة RTL يميناً، يجب إقحام قيمة سالبة، و إذا أردنا إزاحته يساراً يجب إقحام قيمة موجبة، و العكس بالنسبة للغات LTR.

القيم الشاملة للخاصية TEXT-INDENT

• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'TEXT-INDENT'، تُورِّث القيمة 'INHERIT' للنص الإزاحة الأفقية من العنصر المحتوي.

• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'TEXT-INDENT'، تعطل القيمة 'INITIAL' الإزاحة.

الخاصية TEXT-SHADOW

الخاصية 'TEXT-SHADOW' هي خاصية تمنح ظل للنصوص، وتقبل قيمتين خاصتين و قيمتين شاملتين.

القيم الخاصة للخاصية TEXT-SHADOW

• القيمة الخاصة المركبة : تكون القيمة الخاصة المركبة للخاصية 'TEXT-SHADOW' كالآتي Nx Ny Nr Nc

- Nx هي القيمة المسؤولة على تغيير الإزاحة الأفقية للظل، و هي إجبارية في القيمة، و تكون عبارة عن قيمة مطلقة أو قيمة نسبية، و بكونها قيمة موجبة سيزاح الظل يميناً، أما بكونها قيمة سالبة سيزاح الظل يساراً.

- Ny هي القيمة المسؤولة على تغيير الإزاحة العمودية للظل، و هي إجبارية في القيمة، و تكون عبارة عن قيمة مطلقة أو قيمة نسبية، و بكونها قيمة موجبة سيزاح الظل إلى الأسفل، أما بكونها قيمة سالبة سيزاح الظل إلى الأعلى.

- Nr هي القيمة المسؤولة على تغيير شعاع الإنتشار الضبابي للظل، و هي اختيارية في القيمة، و تكون عبارة عن قيمة مطلقة أو قيمة نسبية.

- Nc هي القيمة المسؤولة على تغيير لون الظل، و هي اختيارية في القيمة، و تكون عبارة عن قيمة بإسم اللون أو بـ Hexadecimal أو بـ RGB أو بـ RGBa.

يمكن إنشاء بالقيمة الخاصة المركبة ظل مزاح عن النص بإعطاء لـ Nx و Ny قيم سالبة أو موجبة أو مختلطة، و يمكن إنشاء بالقيمة الخاصة المركبة ظل موسَّط، و ذلك بإعطاء لـ Nx و Ny قيم منعدمة تساوي 0.

• NONE : هي القيمة التلقائية للخاصية بحيث عند تواجدها تقوم بحذف الظل الموروث من العنصر المحتوي.

القيم الشاملة للخاصية TEXT-SHADOW

• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'TEXT-SHADOW'، تُورِّث القيمة 'INHERIT' للنص الظل من العنصر المحتوي.

• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'TEXT-SHADOW'، ترجع القيمة 'INITIAL' النص إلى القيمة التلقائية للخاصية التي هي 'NONE'، و بالتالي تقوم بحذف الظل من النص.

الفيديو التوضيحي للدرس

الخاصية LINE-HEIGHT

الخاصية 'LINE-HEIGHT' هي خاصية تمنح إمكانية التعديل على المسافة التي بين أسطر النصوص، و تقبل خمس أنواع قيم و هم قيمة خاصة، قيمة الأرقام، القيم المطلقة، القيم النسبية و القيم الشاملة.

القيمة الخاصة للخاصية LINE-HEIGHT

تسمى القيمة الخاصة للخاصية 'LINE-HEIGHT' بـ 'NORMAL'، و هي القيمة التلقائية للخاصية بحيث في تواجدها تكون المسافة بين السطور حسب التنسيق التلقائي.

قيمة الأرقام للخاصية LINE-HEIGHT

يكتب في قيمة الخاصية 'LINE-HEIGHT' رقم يضرب في قيمة 'FONT-SIZE' لخط النص ليكون الجداء هو المسافة بين أسطر النص.

القيم المطلقة للخاصية LINE-HEIGHT

تقبل الخاصية 'LINE-HEIGHT' جميع وحدات القيم المطلقة.

القيم النسبية للخاصية LINE-HEIGHT

تقبل الخاصية 'LINE-HEIGHT' جميع القيم النسبية.

القيم الشاملة للخاصية LINE-HEIGHT

• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'LINE-HEIGHT'، تُورِّث القيمة 'INHERIT' للنص المسافة بين أسطره من العنصر المحتوي له.

• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'LINE-HEIGHT'، ترجع القيمة 'INITIAL' المسافة بين أسطر النص إلى المسافة الأولية حسب التنسيق التلقائي.

الخاصية VERTICAL-ALIGN

الخاصية 'VERTICAL-ALIGN' هي خاصية تمنح إمكانية التعديل على الإزاحة العمودية أو ما تعرف بالمحاذاة للعنصر نسبة إلى عناصر أخرى Inline معه، و تقبل أربع أنواع قيم و هم القيم الخاصة، القيم المطلقة، القيم النسبية و القيم الشاملة.

القيم الخاصة للخاصية VERTICAL-ALIGN

• BASELINE : هي القيمة التلقائية للخاصية بحيث عند تواجدها تكون الوضعية العمودية للعنصر هي نفس الوضعية العمودية للعناصر الـ Inline معه.

• SUPER : قيمة تزيح العنصر إلى خط الأساس المرتفع للعنصر المحتوي له.

• SUB : قيمة تزيح العنصر إلى خط الأساس المنخفض للعنصر المحتوي له.

• TOP : قيمة تُمكِّن محاذاة العنصر مع أعلى عنصر في السطر.

• MIDDLE : قيمة تضع العنصر في المنتصف العمودي للعنصر المحتوي له.

• BOTTOM : قيمة تُمكِّن محاذاة العنصر مع أدنى عنصر في السطر.

• TEXT-TOP : قيمة تُمكِّن محاذاة العنصر مع أعلى الخط للعنصر المحتوي له.

• TEXT-BOTTOM : قيمة تُمكِّن محاذاة العنصر مع أدنى الخط للعنصر المحتوي له.

القيم المطلقة للخاصية VERTICAL-ALIGN

تقبل الخاصية VERTICAL-ALIGN جميع وحدات القيم المطلقة مع الأخذ بعين الإعتبار القيم الموجبة و السالبة، فالموجبة تزيح العنصر إلى الأعلى، أما السالبة فتزيح العنصر إلى الأسفل.

القيم النسبية للخاصية VERTICAL-ALIGN

تقبل الخاصية VERTICAL-ALIGN جميع القيم النسبية مع الأخذ بعين الإعتبار القيم الموجبة و السالبة، فالموجبة تزيح العنصر إلى الأعلى نسبة إلى 'LINE-HEIGHT'، أما السالبة فتزيح العنصر إلى الأسفل نسبة إلى 'LINE-HEIGHT'.

القيم الشاملة للخاصية VERTICAL-ALIGN

• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'VERTICAL-ALIGN'، تُورِّث القيمة 'INHERIT' للعنصر المحاذاة من العنصر المحتوي له.

• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'VERTICAL-ALIGN'، تُرجع القيمة 'INITIAL' العنصر إلى الوضعية العمودية الأولية له، أي التنسيق التلقائي.

See the Pen
خواص التعديل على النصوص by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

الخواص font-size و font-style و font-weight في CSS | الدرس 18\37

noreply@blogger.com (Unknown) — Sat, 24 Aug 2019 15:21:00 +0000

السلام عليكم، سنرى في هذا الدرس أهم خواص التعديل على الخطوط، ألا و هم الخاصية FONT-SIZE، الخاصية FONT-STYLE و الخاصية FONT-WEIGHT.

الخاصية FONT-SIZE

الخاصية 'FONT-SIZE' هي Property تعطي إمكانية التعديل على حجم الخط، و تقبل ثلاث أنواع قيم :

* قيم مطلقة Absolute Values

* قيم نسبية Relative Values

* قيم شاملة Global Values

القيم المطلقة Absolute Values

القيم المطلقة هي قيم ثابتة لا تتغير، و ليست مخصصة سوى لخاصية 'FONT-SIZE'، بل نجدها في العديد من خواص CSS حيث تسمى 'Absolute Lengths'، و يُعبَّر عنها عامة بوحدة قياس من مجموعة وحدات القياس أسفله :
- PX : إسمها 'Pixel' و هي الوحدة المتداولة في البرمجة.
- PT : إسمها 'Point' بحيث أن 15pt=20px
- IN : إسمها 'Inche' بحيث أن 1in=96px
- PC : إسمها 'Pica' بحيث أن 1pc=16px
- CM : إسمها 'Centimeter' بحيث أن 1cm=37px
- MM : إسمها 'Millimeter' بحيث أن 1mm=3,7px
أما بخصوص الخاصية 'FONT-SIZE' فهي تقبل من القيم المطلقة جميع وحدات القياس المذكورة أعلاه، إضافة إلى أسماء الحجم بحيث أن هذه الأخيرة مقسمة إلى سبع قيم، و أن كل قيمة من القيم السبع تعطي حجم خط معين و هم :

- XX-SMALL : قيمة حجم الخط الأصغر في القيم السبع.

- X-SMALL : قيمة حجم خط صغير جداً.

- SMALL : قيمة حجم خط صغير.

- MEDIUM : قيمة حجم خط متوسط.

- LARGE : قيمة حجم خط كبير.

- X-LARGE : قيمة حجم خط كبير جداً.

- XX-LARGE : قيمة حجم الخط الأكبر في القيم السبع.

القيم النسبية Relative Values

القيم النسبية هي قيم متغيرة إما نسبة إلى التنسيق التلقائي للـ HTML، و إما نسبة إلى العنصر المحتوي، و ليست مخصصة سوى لخاصية 'FONT-SIZE'، بل نجدها في العديد من خواص CSS حيث تسمى 'Relative Lengths'، و يُعبَّر عنها عامة بوحدة من مجموعة الوحدات أسفله :
- EM : وحدة تطبق مفعولها نسبة إلى حجم العنصر، فمثلاً 3em هي 3 مرات حجم العنصر.
- % : وحدة تطبق مفعولها نسبة إلى العنصر المحتوي أو التنسيق التلقائي.
- EX : وحدة تطبق مفعولها نسبة إلى الإرتفاع X للعنصر.
- CH : وحدة تطبق مفعولها نسبة إلى عرض الصفر '0'.
- REM : وحدة تطبق مفعولها نسبة إلى العنصر الجِذر الذي يكون في أغلب الحالات العنصر 'HTML'.
- VW : وحدة تطبق مفعولها نسبة إلى عرض الشاشة بحيث أن 1vw تساوي 1% من عرض الشاشة.
- VH : وحدة تطبق مفعولها نسبة إلى ارتفاع الشاشة بحيث أن 1vh تساوي 1% من ارتفاع الشاشة.
- VMIN : وحدة تطبق مفعولها نسبة إلى البعد الأصغر في بعدي الشاشة، أي أن 1vmin=1vw في حال عرض الشاشة أصغر من ارتفاعها، أما إذا كان ارتفاع الشاشة أصغر من عرضها، فستكون 1vmin=1vh.
- VMAX : وحدة تطبق مفعولها نسبة إلى البعد الأكبر في بعدي الشاشة، أي أن 1vmax=1vw في حال عرض الشاشة أكبر من ارتفاعها، أما إذا كان ارتفاع الشاشة أكبر من عرضها، فستكون 1vmax=1vh.
أما بخصوص الخاصية 'FONT-SIZE' فهي تقبل من القيم النسبية جميع القيم المذكورة أعلاه، إضافة إلى أسماء الحجم بحيث أن هذه الأخيرة مقسمة إلى قسمين و هما :

- LARGER : قيمة تُكبر الحجم نسبة إلى العنصر المحتوي.

- SMALLER : قيمة تُصغر الحجم نسبة إلى العنصر المحتوي.

القيم الشاملة Global Values

تستعمل القيم الشاملة في أغلب خواص CSS، ففي حالة الخاصية 'FONT-SIZE'، فهذه الأخيرة تقبل قيمتين شاملتين ألا وهما :

- INHERIT : عامة هذه القيمة تأمر متصفح الإنترنت بتوريث تأثير الخاصية للعنصر من العنصر المحتوي، و في حالة الخاصية 'FONT-SIZE'، القيمة تأمر متصفح الإنترنت بتوريث الحجم للعنصر من العنصر المحتوي.

- INITIAL : عامة هذه القيمة تأمر متصفح الإنترنت بإرجاع تأثير الخاصية في العنصر إلى التأثير الأوّلي، و في حالة الخاصية 'FONT-SIZE'، القيمة تأمر متصفح الإنترنت بإرجاع حجم العنصر إلى الحجم الأوّلي.

بالإمكان الإستفادة من هذه الصفحة في الويب باعتبارها صفحة مفيدة حيث تحتوي على جدول تحويل الوحدات 'EM'، 'PX'، 'PT' و '%'، و تحتوي أيضاً على آداة تحويل من الوحدة 'PT' إلى الوحدة 'PX' و العكس

الفيديو التوضيحي للدرس

الخاصية FONT-STYLE

الخاصية 'FONT-STYLE' هي Property تعطي إمكانية التعديل على مظهر الخط، و تقبل نوعين من القيم و هما :

* قيم إسمية Nominal Values

* قيم شاملة Global Values

القيم الإسمية Nominal Values

تقبل الخاصية 'FONT-STYLE' قيم بإسم المظهر و هم ثلاثة :

- NORMAL : قيمة تُظهر الخط بمظهر عادٍ، و هي القيمة التلقائية.

- ITALIC : قيمة تُظهر الخط مائل.

- OBLIQUE : قيمة شبيهة بقيمة 'ITALIC' تُظهر الخط مائل أيضاً، لكنها تستعمل في حال عدم قبول بعض أنواع الخطوط للقيمة 'ITALIC'.

القيم الشاملة Global Values

تقبل الخاصية 'FONT-STYLE' من القيم الشاملة قيمة واحدة ألا و هي :

- INHERIT : قيمة تأمر متصفح الإنترنت بتوريث المظهر للعنصر من العنصر المحتوي في حالة الخاصية 'FONT-STYLE'.

الخاصية FONT-WEIGHT

الخاصية FONT-WEIGHT هي Property تعطي إمكانية التعديل على سمك الخط، و تقبل أربعة أنواع من القيم و هم :

* قيم إسمية Nominal Values

* قيم رقمية Numeric Values

* قيم نسبية Relative Values

* قيم شاملة Global Values

القيم الإسمية Nominal Values

تقبل الخاصية 'FONT-WEIGHT' قيمتين بإسم السمك و هما :

- NORMAL : قيمة تُظهر السمك العادي.

- BOLD : قيمة تُظهر السمك الغليظ.

القيم الرقمية Numeric Values

تُكتب القيم الرقمية من 1 إلى 1000 في قيمة الخاصية 'FONT-WEIGHT' بحيث أن كلما اقتربت القيمة من '1000' غلظ السمك، علماً أن 400 تضاهي سمك القيمة الإسمية 'NORMAL'، و 700 تضاهي سمك القيمة الإسمية 'BOLD'.

القيم النسبية Relative Values

تقبل الخاصية 'FONT-WEIGHT' قيمتين نسبيتين و هما :

- BOLDER : قيمة تُكبر السمك نسبة إلى العنصر المحتوي.

- LIGHTER : قيمة تُصغر السمك نسبة إلى العنصر المحتوي.

القيم الشاملة Global Values

تقبل الخاصية 'FONT-WEIGHT' من القيم الشاملة قيمتين ألا و هما :

- INHERIT : قيمة تأمر متصفح الإنترنت بتوريث السمك للعنصر من العنصر المحتوي في حالة الخاصية 'FONT-WEIGHT'.

- INITIAL : قيمة تأمر متصفح الإنترنت بإرجاع سمك العنصر إلى السمك الأوّلي في حالة الخاصية 'FONT-WEIGHT'

See the Pen
خواص التعديل على الخطوط by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

الخطوط في CSS | الدرس 17\37

noreply@blogger.com (Unknown) — Wed, 21 Aug 2019 20:09:00 +0000

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

إقحام الخطوط الآمنة Web Safe Fonts

ما هي الخطوط الآمنة ؟

الخطوط الآمنة و المعروفة إنجليزياً بـ Web Safe Fonts هي خطوط توجد في أنظمة التشغيل الأكثر تداولاً بين الناس، حيث إذا دخل زائر في موقع أو تطبيق بنظام تشغيل يوجد فيه خط من Web Safe Fonts الذي في الموقع أو التطبيق، سيظهر له ذلك الخط في الموقع أو التطبيق، لذا يسمى خط آمن، و من أشهر الخطوط الآمنة هناك Times New Roman ،Georgia ،Arial ،Verdana ،Lucida Console و Comic Sans Ms.

طريقة إقحام الخطوط الآمنة

يتم إقحام الخطوط الآمنة في CSS عبر الخاصية 'FONT-FAMILY' التي هي الخاصية Property المسؤولة عن إقحام الخطوط في CSS، ثم في قيمتها يوضع إسم الخط الآمن.

بالإمكان الإستناد بهذه الصفحة من الويب في انتقاء الخطوط الآمنة المناسبة، و هي صفحة جد مهمة بإسم CSS Fonts Stack تحتوي على أغلب الخطوط الآمنة مرتبة حسب عائلتها، و بالنقر على كل خط في الصفحة سيتم التوجيه إلى صفحته الخاصة في الموقع حيث تحتوي على المعلومات اللازمة للتعريف بالخط كمعاينة شكله و نسبة تواجده في أنظمة التشغيل و قيمته في الخاصية 'FONT-FAMILY' و غيرها من الأمور الأخرى.

يمكن إقحام عدة خطوط آمنة في نفس الخاصية 'FONT-FAMILY'، حيث تخول هذه التقنية لمتصفح الإنترنت أن يجد خط متواجد في نظام تشغيل جهاز الزائر و يظهره في حالة عدم تواجد الخط الأول في نظام التشغيل لجهاز الزائر، و لتطبيق هذه التقنية يجب كتابة أسماء الخطوط الآمنة المراد إقحامها في قيمة نفس الخاصية 'FONT-FAMILY' مفصولين بفاصلة، و يحبذ وضع الخط الأول بين اقتباس مزدوج.

الفيديو التوضيحي للدرس

طريقة استدعاء الخطوط من الويب

يتم استدعاء الخطوط من الويب عبر مواقع الخطوط، حيث يجب نسخ الكود المخصص لاستدعاء الخط منها، و يكون عبارة عن عنصر 'LINK'، ثم لصقه في عنصر 'HEAD' في ملف HTML، ثم كتابة إسم الخط في قيمة الخاصية 'FONT-FAMILY'، لكن جميع الخطوط التي يحتويها موقع الخطوط متعلقة به، أي في حالة عدم تواجد موقع الخطوط، فلن تظهر الخطوط المستدعاة من ذلك الموقع، لذا يجب استدعاء الخطوط من مواقع الخطوط المعروفة، و من أشهرها و أكثرها تداولاً موقع Google Fonts التابع لشركة جوجل، حيث يجب اختيار الخط بتمرير مؤشر الفأرة فوق إسمه، ثم التعديل على حجمه عبر معدِّل البكسل الأحمر أسفل إسمه، و التعديل أيضاً على سمكه عبر علامة التبويب التي بجوار معدِّل البكسل، ثم النقر على علامة الزائد (+) بجانب إسمه لتنسدل صفحة كود الإستدعاء و كود CSS.

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

إستدعاء الخطوط من المخدم الخاص

يمكن استدعاء نوع خط من المخدم الخاص، حيث يُكتب في ملف CSS المحدِّد 'FONT-FACE@' ثم في كوده تكتب الخاصية 'FONT-FAMILY' و في قيمتها إسم الخط المراد استدعاؤه، و تكتب أيضاً الخاصية 'SRC' و في قيمتها تكتب كلمة 'URL' ثم قوسين، و داخل القوسين يقحم مسار ملف الخط بين اقتباس مزدوج استناداً بقاعدة المسارات التي رأيناها في درس الصور في HTML، يحبذ إقحام الخط بعدة تنسيقات ملفات الخطوط لكي تلقى دعم جميع متصفحات الإنترنت الكبرى، و بالتالي ضمان رؤية الخط من طرف جميع الزوار، و ذلك بإقحام كل تنسيق ملف الخط في خاصية 'SRC' منفردة داخل تنسيق كود المحدد 'FONT-FACE@'، يمكن الإستناد بهذه الصفحة من الويب حيث تحتوي على جدول دعم أكبر متصفحات الإنترنت لتنسيقات ملفات الخطوط.

بعد استدعاء نوع الخط من المخدم الخاص، يمكن توظيفه بكتابة إسمه في قيمة الخاصية 'FONT-FAMILY' في أكواد CSS.

See the Pen
الخطوط في CSS by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

الخلفيات الملونة و الخلفيات الصورية و Linear-Gradient و Radial-Gradient في CSS | الدرس 16\37

noreply@blogger.com (Unknown) — Sun, 18 Aug 2019 00:15:00 +0000

السلام عليكم، سنرى في هذا الدرس أنواع الخلفيات في CSS، بما فيها الخلفيات الملونة و الخلفيات الصورية و Linear-Gradient و Radial-Gradient.

الخلفيات الملونة

تسمى الخاصية (Property) المسؤولة عن إنشاء الخلفيات الملونة بـ 'BACKGROUND-COLOR' و تقبل نفس قيم الخاصية 'COLOR' التي رأيناها في الدرس السابق درس الألوان و الشفافية في CSS، و لا مانع أن نذكِّر بهذه القيم :

* القيمة بإسم اللون.

* القيمة بـ Hexadecimal.

* القيم بـ RGB و RGBa.

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

إنشاء الخلفيات الصورية

تسمى الخاصية (Property) المسؤولة عن إنشاء الخلفيات الصورية بـ 'BACKGROUND-IMAGE' و لديها نوعين من القيم حسب نوع استدعاء الصورة، يعني هل ستستدعى من الويب أو من المخدم الخاص :

* النوع الأول يُكتب عبارة عن كلمة 'URL' ثم قوسين و داخل القوسين يقحم عنوان URL للصورة المراد استدعاؤها، و هذا النوع يحدّد استدعاء الصورة من الويب.

* النوع الآخر يُكتب عبارة عن كلمة 'URL' ثم قوسين و داخل القوسين يقحم مسار الصورة المراد استدعاؤها بتطبيق قاعدة المسارات التي رأيناها في درس الصور في HTML، و هذا النوع يحدّد استدعاء الصورة من المخدّم الخاص.

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

التعديل على تكرار صورة الخلفية

بعد استدعاء صورة الخلفية، التنسيق التلقائي للـ HTML يجعلها تظهر مكررة، للتعديل على تكرار صورة الخلفية هناك خاصية (Property) بإسم 'BACKGROUND-REPEAT' لديها أربع أنواع قيم :

• REPEAT : تُظهر صورة الخلفية مكررة.

• REPEAT-X : تُظهر صورة الخلفية مكررة أفقياً.

• REPEAT-Y : تُظهر صورة الخلفية مكررة عمودياً.

• NO-REPEAT : تُظهر صورة الخلفية وحيدة بدون تكرار.

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

بعد استدعاء صورة الخلفية، التنسيق التلقائي للـ HTML يجعلها تظهر بحجمها الأصلي، للتعديل على حجم صورة الخلفية هناك خاصية (Property) بإسم 'BACKGROUND-SIZE' تقبل القيم بنسبة مئوية، بالبكسل 'px' و بالـ 'em'.

التعديل على تثبيت صورة الخلفية

هناك خاصية (Property) بإسم 'BACKGROUND-ATTACHMENT' تُعدل على تثبيت صورة الخلفية، و لديها نوعين من القيم :

• SCROLL : تعمل على تثبيت الخلفية الصورية نسبة إلى صفحة الويب التي تحتويها.

• FIXED : تعمل على تثبيت الخلفية الصورية نسبة إلى نافذة المتصفح.

التعديل على وضعية صورة الخلفية

هناك خاصية (Property) تُعدل على وضعية صورة الخلفية اسمها 'BACKGROUND-POSITION' و لديها نوعين من القيم :

• النوع الأول يحدَّد ككلمات مفتاحية للإتجاهات الثمانية في مستوى شاقولي تنائي الأبعاد و هم :

- TOP : تُظهر صورة الخلفية أعلى الوسط.

- BOTTOM : تُظهر صورة الخلفية أسفل الوسط.

- RIGHT : تُظهر صورة الخلفية وسط اليمين.

- LEFT : تُظهر صورة الخلفية وسط اليسار.

- TOP RIGHT : تُظهر صورة الخلفية أعلى اليمين.

- TOP LEFT : تُظهر صورة الخلفية أعلى اليسار.

- BOTTOM RIGHT : تُظهر صورة الخلفية أسفل اليمين.

- BOTTOM LEFT : تُظهر صورة الخلفية أسفل اليسار.

• النوع الآخر يُحدَّد بقيمتين بالبكسل بحيث أن هذا النوع أدق شيئاً ما من النوع الأول :

- قيمة البكسل التي في يسار القيمة تحدِّد إزاحة صورة الخلفية من اليسار إلى اليمين.

- قيمة البكسل التي في يمين القيمة تحدِّد إزاحة صورة الخلفية من الأعلى إلى الأسفل.

إقحام العديد من الخلفيات المصورة في عنصر HTML واحد

يمكن إقحام العديد من الخلفيات المصورة في عنصر HTML واحد، و ذلك عبر الخاصية 'BACKGROUND-IMAGE'، لكن في قيمتها يجب وضع كلمات 'URL' بقوسيها مفروقة بفواصل بينها، ثم استدعاء الصور من الويب أو من المخدم الخاص، و للتعديل عليهم يجب إقحام خواص التعديل على الخلفيات المصورة، ثم في قيمها يجب وضع التعديل لكل خلفية مصورة مفروق بفاصلة عن الآخر و بالترتيب نفسه الذي في قيمة الخاصية 'BACKGROUND-IMAGE'.

الفيديو التوضيحي للدرس

LINEAR-GRADIENT

ما هو LINEAR-GRADIENT ؟

LINEAR-GRADIENT هي خلفية تُظهر العديد من الألوان متدرجة بشكل خطي من الحافة إلى الحافة المقابلة.

إنشاء LINEAR-GRADIENT

تسمى الخاصية (Property) المسؤولة عن إنشاء Linear-Gradient بـ 'BACKGROUND' و في قيمتها تكتب كلمة 'LINEAR-GRADIENT' ثم قوسين، و بين القوسين يكتب في الأول توجيه الألوان ثم قيم الألوان الكل مفروق بفاصلة حسب الترتيب المراد ظهور الألوان به في Linear-Gradient.

يمكن في توجيه الألوان إقحام إما الكلمات المفتاحية للإتجاهات الثمانية مرفوقة بكلمة 'TO' في البداية، و إما درجة من 0deg إلى 360deg علماً أن 0deg تُوجِّه الألوان من الأسفل إلى الأعلى، و 90deg توجه الألوان من اليسار إلى اليمين، و 180deg توجه الألوان من الأعلى إلى الأسفل، و 270deg توجه الألوان من اليمين إلى اليسار.

يمكن إقحام قيم الألوان بإسم اللون أو بـ Hexadecimal أو بـ RGB أو بـ RGBa أو مختلطة، و يمكن تحديد حجم لون ما بكتابة نسبة مئوية بعد قيمة اللون مباشرة.

RADIAL-GRADIENT

ما هو RADIAL-GRADIENT ؟

RADIAL-GRADIENT هي خلفية تُظهر العديد من الألوان متدرجة بشكل شعاعي من المركز إلى الحافة.

إنشاء RADIAL-GRADIENT

الخاصية (Property) المسؤولة عن إنشاء Radial-Gradient هي 'BACKGROUND' أيضاً، إلا أن Radial-Gradient ثلاث أنواع :

• النوع الأول هو النوع العادي حيث تكتب في قيمة الخاصية 'BACKGROUND' كلمة 'RADIAL-GRADIENT' ثم قوسين، و بين القوسين تكتب في الأول كلمة 'CIRCLE' ثم قيم الألوان الكل مفروق بفاصلة حسب الترتيب المراد ظهور الألوان به في Radial-Gradient.

• النوع الثاني يحتوي على نفس قيمة خاصية النوع الأول، إلا أنه يستبدل في قيمة النوع الثاني كلمة 'CIRCLE' بـ 'CLOSEST-SIDE AT' ثم نسبتين مئويتين تصنفان كإحداثيات إزاحة المركز، فالنسبة المئوية التي في اليسار تحدد إزاحة المركز أفقياً، أما النسبة المئوية التي في اليمين تحدد إزاحة المركز عمودياً.

• النوع الثالث يحتوي على نفس قيمة خاصية النوع الأول، إلا أنه يستبدل في قيمة النوع الثالث كلمة 'CIRCLE' بـ 'FARTHEST-SIDE AT' ثم نسبتين مئويتين تصنفان كإحداثيات إزاحة المركز، فالنسبة المئوية التي في اليسار تحدد إزاحة المركز أفقياً، أما النسبة المئوية التي في اليمين تحدد إزاحة المركز عمودياً.

الفرق بين النوع الثاني و النوع الثالث هو أن في النوع الثاني تبقى دوائر الألوان كاملة الظهور داخل محيط Radial-Gradient، على عكس النوع الثالث لا تظهر دوائر الألوان كاملة.

مثل Linear-Gradient يمكن في Radial-Gradient إقحام قيم الألوان بإسم اللون أو بـ Hexadecimal أو بـ RGB أو بـ RGBa أو مختلطة، و يمكن أيضاً تحديد حجم لون ما بكتابة نسبة مئوية بعد قيمة اللون مباشرة.

See the Pen
الخلفيات في CSS by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

الألوان و الشفافية في CSS | الدرس 15\37

noreply@blogger.com (Unknown) — Wed, 31 Jul 2019 19:36:00 +0000

السلام عليكم، سنرى في هذا الدرس الألوان و الشفافية في CSS.

تسمى الخاصية Property المسؤولة عن تغيير الألوان في CSS بـ 'COLOR'، و لديها ثلاث أنواع قيم :

* قيمة بإسم اللون

* قيمة بنظام Hexadecimal

* قيمة بـ RGB و RGBa

قيمة الخاصية COLOR بأسماء الألوان

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

قيمة الخاصية COLOR بنظام Hexadecimal

ما هو نظام Hexadecimal ؟

نظام Hexadecimal و المصطلح عليه عربياً بنظام العد الست عشري هو نظام عد على أساس صحيح هو 16، فنظام العد المتداول بين الناس يسمى نظام العد العشري (Decimal) حيث أساسه هو 10 حيث يستعمل فيه العد من 0 إلى 9 ثم 0 و 1 الذي هو عشرة ثم 1 و 1 الذي هو إحدى عشر و ما إلى ذلك.. أما نظام العد الست عشري يستعمل فيه العد من 0 إلى 9 ثم A ثم B ثم C ثم D ثم E ثم F ثم 0 و 1 ثم 1 و 1 إلى 9 و 1 ثم A و 1 ثم B و 1 إلى F و 1 ثم 0 و 2 إلى F و F حيث يصنف العدد FF هو العدد الأخير في الأعداد المكونة من عددين، بعده يأتي 0 و 0 و 1 الذي هو مئة و إلى ما لا نهاية.

تنسيق قيمة الخاصية COLOR بنظام Hexadecimal

تكتب قيمة الخاصية COLOR بنظام Hexadecimal بالتنسيق التالي :

علامة Sharp (#) ثم عدد من 00 إلى FF يُحدِّد اللون الأحمر، ثم عدد من 00 إلى FF يحدد اللون الأخضر، ثم عدد من 00 إلى FF يحدد اللون الأزرق، ليكون التنسيق كالآتي nnnnnn#

اختصار القيمة

تختصر القيمة إذا كانت جميع أعداد الألوان في القيمة تتكون من عددين متشابهين، حينئذ يكتب العدد المتشابه مرة واحدة، مثلا يمكن لهذه القيمة AABBCC# أن تختصر و تصبح هكذا ABC#

الحصول على الألوان

الألوان الرئيسية

- للحصول على اللون الأحمر يجب إعطاء عدد كبير يصل إلى FF في عدد اللون الأحمر في القيمة، و إعطاء عدد صغير إلى منعدم يصل إلى 00 في عدد اللون الأخضر و عدد اللون الأزرق في القيمة.

- للحصول على اللون الأخضر يجب إعطاء عدد كبير يصل إلى FF في عدد اللون الأخضر في القيمة، و إعطاء عدد صغير إلى منعدم يصل إلى 00 في عدد اللون الأحمر و عدد اللون الأزرق في القيمة.

- للحصول على اللون الأزرق يجب إعطاء عدد كبير يصل إلى FF في عدد اللون الأزرق في القيمة، و إعطاء عدد صغير إلى منعدم يصل إلى 00 في عدد اللون الأحمر و عدد اللون الأخضر في القيمة.

الأبيض و الأسود

- للحصول على اللون الأبيض يجب إعطاء عدد FF في أعداد الألوان الثلاثة في القيمة.

- للحصول على اللون الأسود يجب إعطاء عدد 00 في أعداد الألوان الثلاثة في القيمة.

إذن يعبر عن اللون الأبيض بأعلى قيمة أي FFFFFF# و يعبر عن اللون الأسود بأخفض قيمة أي 000000#، و بالتالي فإعطاء عدد مرتفع للون في القيمة سيُنتَج لون فاقع أو فاتح، أما بإعطاء عدد منخفض للون في القيمة سيُنتَج لون غامق أو داكن، و بمعنى أدق كلما اقتربنا من FF كان اللون فاقع، و كلما اقتربنا من 00 كان اللون غامق.

الألوان الثانوية

للحصول على لون ثانوي يجب معرفة مكانه نسبة إلى الألوان الرئيسية، و لمعرفة أمكنة الألوان يمكن الإستعانة بـ Chromatic Palette، فمثلاً نريد الحصول على اللون البنفسجي، يوجد هذا الأخير بين اللون الأحمر و الأزرق، و بالتالي يجب إعطاء عدد بين 01 و FF في عدد اللون الأحمر و اللون الأزرق في القيمة و تجاهل اللون الأخضر بإعطاءه 00، مع الأخذ بعين الإعتبار حدة اللون البنفسجي، يعني مثلاً إذا كان قريباً شيئاً ما من اللون الأحمر، يجب إعطاء عدد اللون الأحمر أكبر من عدد اللون الأزرق في القيمة.

الفيديو التوضيحي للدرس

قيمة الخاصية COLOR بـ RGB و RGBa

تنسيق قيمة الخاصية COLOR بـ RGB

RGB تعني Red Green Blue أي الأحمر الأخضر الأزرق، و هم الألوان الرئيسية التي رأيناها في قيمة الخاصية COLOR بـ Hexadecimal، حيث في هذه الأخيرة يقحم عدد اللون من 00 إلى FF، أما قيمة الخاصية COLOR بـ RGB فيقحم عدد اللون بنظام العد العشري، أي من 0 إلى 255، غير أن القيمة بـ RGB تكتب بتنسيق مغاير عن تنسيق القيمة بـ Hexadecimal و هو كالآتي :

تكتب RGB ثم يفتح القوس ثم عدد اللون الأحمر ثم عدد اللون الأخضر ثم عدد اللون الأزرق مفروقين بفاصلة ليكون التنسيق كالتالي :

(عدد اللون الأزرق , عدد اللون الأخضر , عدد اللون الأحمر)RGB

الحصول على الألوان

الألوان الرئيسية

- للحصول على اللون الأحمر يجب إعطاء عدد كبير يصل إلى 255 في عدد اللون الأحمر في القيمة، و إعطاء عدد صغير إلى منعدم يصل إلى 0 في عدد اللون الأخضر و عدد اللون الأزرق في القيمة.

- للحصول على اللون الأخضر يجب إعطاء عدد كبير يصل إلى 255 في عدد اللون الأخضر في القيمة، و إعطاء عدد صغير إلى منعدم يصل إلى 0 في عدد اللون الأحمر و عدد اللون الأزرق في القيمة.

- للحصول على اللون الأزرق يجب إعطاء عدد كبير يصل إلى 255 في عدد اللون الأزرق في القيمة، و إعطاء عدد صغير إلى منعدم يصل إلى 0 في عدد اللون الأحمر و عدد اللون الأخضر في القيمة.

الأبيض و الأسود

- للحصول على اللون الأبيض يجب إعطاء عدد 255 في أعداد الألوان الثلاثة في القيمة.

- للحصول على اللون الأسود يجب إعطاء عدد 0 في أعداد الألوان الثلاثة في القيمة.

إذن يعبر عن اللون الأبيض بأعلى قيمة أي (255,255,255)RGB و يعبر عن اللون الأسود بأخفض قيمة أي (0,0,0)RGB، و بالتالي فإعطاء عدد مرتفع للون في القيمة سيُنتَج لون فاقع أو فاتح، أما بإعطاء عدد منخفض للون في القيمة سيُنتَج لون غامق أو داكن، و بمعنى أدق كلما اقتربنا من 255 كان اللون فاقع، و كلما اقتربنا من 0 كان اللون غامق.

الألوان الثانوية

للحصول على لون ثانوي يجب معرفة مكانه نسبة إلى الألوان الرئيسية، و لمعرفة أمكنة الألوان يمكن الإستعانة بـ Chromatic Palette، فمثلاً نريد الحصول على اللون البرتقالي، يوجد هذا الأخير بين اللون الأحمر و الأخضر، و بالتالي يجب إعطاء عدد بين 1 و 255 في عدد اللون الأحمر و اللون الأخضر في القيمة و تجاهل اللون الأزرق بإعطاءه 0، مع الأخذ بعين الإعتبار حدة اللون البرتقالي، يعني مثلاً إذا كان قريباً شيئاً ما من اللون الأحمر، يجب إعطاء عدد اللون الأحمر أكبر من عدد اللون الأخضر في القيمة.

الشفافية

يمكن الحصول بقيمة RGB و Hexadecimal على ما يقرب من 15 مليون لون، إلا أن RGB تمتاز بميزة إعطاء للون الشفافية حيث يضاف عدد رابع داخل القوسين مفروق هو الآخر بفاصلة في القيمة، و هو عدد الشفافية حيث يُحدَّد من 0 إلى 1 بالأعشار حسب النظام Anglosaxon حيث تُستبدل الفاصلة العشرية بنقطة في الأعداد العشرية، فكلما اقتربنا من 0 كان اللون أكثر شفافية، و كلما اقتربنا من 1 كان اللون أقل شفافية، ثم يجب استبدال كلمة RGB بـ RGBa.

هناك خاصية Property تُحدِّد الشفافية اسمها 'OPACITY' و يكتب في قيمتها نفس ما يكتب في عدد الشفافية لقيمة الخاصية 'COLOR' بـ RGBa.

See the Pen
الألوان و الشفافية by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في الدرس

أتمنى أن تستفيدوا من الدرس

العناصر DIV و SPAN و BDI في HTML | الدرس 14\37

noreply@blogger.com (Unknown) — Tue, 30 Jul 2019 14:31:00 +0000

السلام عليكم، سنرى في هذا الدرس ماهية العنصران DIV و SPAN و كيفية توظيفهما في HTML، و سنتطرق أيضاً للعنصر BDI و دوره في HTML.

العنصران DIV و SPAN

يقحمان العنصران 'DIV' و 'SPAN' في HTML لسبب واحد، ألا و هو إعطاء لمحتواهما مظهر مخصص بـCSS، حيث أن كلاهما ثنائيا الأوسمة، إلا أنهما يختلفان في النوع، فعنصر 'DIV' هو عنصر من نوع Block، أما عنصر 'SPAN' فهو عنصر من نوع Inline.

العنصر DIV

يقحم عنصر 'DIV' في HTML في حالة إعطاء مظهر مخصص لعنصر أو مجموعة عناصر صفحة الويب أو جلها سواء كانت من نوع Block أو من نوع Inline أو مختلطة، و ذلك بجعلها بين وسم فتح عنصر 'DIV' و وسم إغلاقه، أي جعلها محتواه، ثم إقحام CLASS Attribut أو ID في عنصر 'DIV'، ثم تخصيص المظهر للمحتوى في أكواد CSS عبر محدد Class أو محدد Id حسب ما أقحمناه من Attribut في العنصر 'DIV'.

يقحمان CLASS أو ID في عنصر 'DIV' إذا كان هناك أكثر من عنصر 'DIV' واحد في صفحة الويب، أما في حالة تواجد عنصر 'DIV' وحيد في الصفحة، فيخصص محدد العنصر في CSS.

يمكن لعنصر 'DIV' أو مجموعة عناصر 'DIV' أن تتواجد في نفس عنصر 'DIV'.

العنصر SPAN

يقحم عنصر 'SPAN' في HTML في حالة إعطاء مظهر مخصص لعنصر أو مجموعة عناصر صفحة الويب من نوع Inline، و ذلك بجعلها بين وسم فتح عنصر 'SPAN' و وسم إغلاقه، أي جعلها محتواه، ثم إقحام CLASS Attribut أو ID في عنصر 'SPAN'، ثم تخصيص المظهر للمحتوى في أكواد CSS عبر محدد Class أو محدد Id حسب ما أقحمناه من Attribut في العنصر 'SPAN'.

يقحمان CLASS أو ID في عنصر 'SPAN' إذا كان هناك أكثر من عنصر 'SPAN' في صفحة الويب، أما في حالة تواجد عنصر 'SPAN' وحيد في الصفحة، فيخصص محدد العنصر في CSS.

يمكن لعنصر SPAN أو مجموعة عناصر 'SPAN' أن تتواجد في نفس عنصر 'SPAN'.

من أكبر الأخطاء المرتكبة من مصممو الويب هو توظيف عنصرا 'DIV' و 'SPAN' مكان عناصر HTML أخرى، يوظفان العنصران 'DIV' و 'SPAN' في حالة عدم تواجد عناصر HTML تؤدي الوظيفة

الفيديو التوضيحي للدرس

العنصر BDI

يعتبر العنصر 'BDI' عنصر من نوع Inline و ثنائي الأوسمة، و دوره هو منع لخبطة كلمات تُكتب بلغة من اليمين إلى اليسار كالعربية، مع كلمات لغة تكتب من اليسار إلى اليمين كالفرنسية، حيث تعتبر هذه الأخيرة لغة LTR أي Left To Right، و اللغة العربية لغة RTL أي Left To Right، و بتواجد علامات الترقيم بين كلمات اللغتين تتلخبط لوغاريتمات البرمجة حيث يتدخل عنصر 'BDI' و يصلح الأمر، و ذلك بكتابة كلمات أو جمل اللغة المختلفة الإتجاه داخل عنصر 'BDI'، أي بين وسميه.

See the Pen
BDI و SPAN ، DIV by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في هذا الدرس

أتمنى أن تستفيدوا من الدرس

أمكنة أكواد CSS و الإرث في CSS | الدرس 13\37

noreply@blogger.com (Unknown) — Tue, 16 Jul 2019 20:12:00 +0000

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

هناك ثلاث أمكنة توضع فيها أكواد CSS :

* في ملف CSS.

* في عنصر HEAD بملف HTML.

* في العنصر المراد تغيير مظهره.

أمكنة أكواد CSS

ملف CSS

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

عنصر HEAD بملف HTML

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

العنصر المراد تغيير مظهره

أما المكان الثالث لوضع أكواد CSS فهو في العنصر المراد تغيير مظهره، حيث تكتب أكواد CSS في قيمة Attribut تسمى 'STYLE'، و تكون هذه الأكواد عبارة عن خواص (Properties) و قيمها مفروقة بفواصل منقوطة بدون محددات حيث العنصر هو من يلعب دور المحدد.

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

بخصوص أولوية HTML، فهذا الأخير يعطي الأولوية للأكواد الموجودة في STYLE Attribut، ثم للتي توجد في العنصر 'STYLE'، ثم للتي توجد في ملف CSS.

الفيديو التوضيحي للدرس

الإرث في CSS

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

See the Pen
أمكنة أكواد CSS و الإرث في CSS by osama (@webdesigner7)
on CodePen.

الأكواد المستعملة في هذا الدرس

أتمنى أن تستفيدوا من الدرس