مدرسة الويب web school

خاصية display في CSS

خاصية display تعنى طريقة عرض العنصر وهي من العناصر الهامة جداً لمصممى الواجهات في Html.

ولكل عنصر من عناصر لغة html خاصية العرض display الافتراضية له وهي إما طريقة عرض block اي كتلية أو Inline سطرية.

أولاً: طريقة العرض Inline

فالعناصر التى لها القيمة الافتراضية inline مثل

-- - -

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

خصائص طريقة العرض Inline

تقبل padding- margin من اليمين واليسار فقط

لا يقبل width- height فعند اعطائه قيم لـwidth or height لا يتأثر بهذه القيم.

مثال:

في هذا الدرس لدينا ملف اسمه index.html ونكتب به الكود الموضح بالمثال حيث أن لدينا عناصر inline تمت كتابتها كما هو موضح.

وفي ملف main.css تم وضع بعض التنسيقات لهذه العناصر مثل font-size وcolor وfont-weight كما هو موضح بالمثال

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

ثم نقوم هنا بوضع بعض التنسيقات الآخري للعنصر span

Background-color:#ddd;

Padding: 30px;

Margin: 20px;

نلاحظ ان طريقة العرض inline لم تقبل

Padding سوى من الجهتين اليمنى واليسري فقط ولم تقبلهم من الأعلى والأسفل

Margin تم قبوله من الجهتين الأيمن والأيسر فقط ولكن لم يتم قبولهم من الأعلى والأسفل.

قمنا هنا بوضع قيم width:400px وHeight:50px لمعرفة هل تقبل طريقة العرض inline العرض والارتفاع أم لا؟

نلاحظ أنه في طريقة العرض Inline لم تقبل خاصية width وخاصية height كما هو موضح بالمثال

طريقة العرض : block

وفي هذه الطريقة العناصر تعرض تحت بعضها البعض حيث يتم وضع سطر فاصل بين العنصر والعنصر الذي قبله والذي بعده وأفضل مثال على هده القيم هو div حيث ان وضع عنصرين من ال div مثلا يتم عرضها واحدة تلو الاخرى وليس بجانب بعض ومن الأمثلة على هذه العناصر p، form ، section، footer، header، div ،article

خصائص طريقة العرض block

أنه يأخذ عرض width: الصفحة بالكامل إذا لم يتم تحديد العرض الخاص به.

يقبل Padding- margin من جميع الجهات بعكس العناصر Inline والتى كانت تقبل الـpadding- margin من اليمين واليسار فقط .

يقبل الـwidth- height بالقيم التى يتم تخصيصها له.

نلاحظ هنا ان لدينا 3عناصر block هى div وتم إدراج بعض العناصر بداخلها كما هو موضح في ملف index.html

في ملف css الموضح تم إجراء بعض التنسيقات على العنصر div وذلك بوضع خلفية له background-color وهامش داخلي padding وهامش خارجي margin وعرض width وإطار border

نلاحظ تأثر العنصر block بجميع الخصائص مثل الهامش الداخلي padding والهامش الخارجي margin والعرض width كما هو موضح وظاهر فى المستعرض.

وعند تغيير طريقة العرض الخاصة بالعنصر div إلى display: inline-block

طريقة العرض inline-block

وهو مزيج من طريقة العرض Inline وطريقة العرض block

خصائص طريقة العرض inline -block

حيث يتم عرض العناصر بجوار بعضها مع قبول width و height و padding و Margin

نلاحظ أنه في طريقة العرض Inline-block أنها جمعت بين خصائص الطريقة Inline بوضع العناصر بجوار بعضها البعض وبين الطريقة block بقبولها الـpadding- margin – width كما هو ظاهر فى المتصفح .

الحدود borders في CSS

الحدود borders:

هو الخط المحيط بمساحة المحتوى content والهوامش الداخلية padding للعنصر.

وللحدود ثلاث خصائص لابد أن تكتب مرتبة بهذا الشكل السمك ثم الشكل ثم اللون

border-width: ويقاس بالبيكسل

border-style: وهو إما solid أو dotted أو dashed اوغيرها من الأشكال

border-color: ونكتب لون الحد.

في هذا الدرس لدينا ملف اسمه index.html ونكتب به الكود الموضح بالمثال حيث أن لدينا فيه class اسمه mm وعنوان وفقرة وصورة.

وفي ملف css نقوم بكتابة كود الحدود borders

ومن border-width: 5px نكتب سمك الحد واخترنا هنا سمكه 5 بكسل

ومن border-style: solid نكتب نوع الإطار وهنا نختر نوعه solid

ومن border-color: cornflowerblue نختر لون الإطار وهنا اخترنا لون معين

نلاحظ في المتصفح أنه تم عرض الإطار border بالسمك والنوع واللون الذي اخترناه كما هو موضح.

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

Border-width: 5px 10px 7px 6px;

وعلى نفس المنوال نختر نوع لكل اتجاه مثل

Border-style: solid dashed dotted double;

وهكذا بالنسبة للألوان

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

كما يمكن عمل الصيغة المختصرة للإطار وذلك كما بالشكل

Border: 10px solid red;

حيث نكتب الخاصية border يليها السمك ثم النوع ثم اللون.

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

نلاحظ أن في الصيغة المختصرة shorthand property لابد من ترتيب الخصائص السمك width ثم النوع style ثم اللون color

الهوامش الخارجية margin في لغة html باستخدام CSS

ماهو الـmargin

يعرف الـmargin (بأنه الهامش الخارجي ) أي أنه المساحة بين العنصر والعناصر المحيطة به

في هذا الدرس لدينا ملف اسمه index.html ونكتب به الكود الموضح بالمثال حيث أن لدينا فيه class اسمه mm وعنوان وفقرة وصورة.

كما أن لدينا ملف اسمه Main.css له لون الخلفية background-color:#ddd

ولدينا هوامش داخلية padding: 10px

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

Margin: 30px

ملاحظة: يمكن تعيين هامش علوى مختلف عن الهامش الأيمن وعن الهامش السفلي وعن الهامش الأيسر وذلك كالتالي:-

margin: 30px 20px 15px 10px;

معنى هذا الهامش العلوى 30 بكسل

الهامش الأيمن 20 بكسل

الهامش السفلي 15بكسل

الهامش الأيسر 10 بكسل

نلاحظ أنه تم تعيين الهامش الخارجي بمقدار 30 بكسل في جميع الجهات كما هو موضح بالمثال

نلاحظ أنه عند الضغط كليك يمين على المتصفح واختيار Inspect ثم من التبويب element نلاحظ عند الضغط على الهامش Margin يظهر لنا قيمة الهامش العلوى margin-top: 30 px وهكذا باقي الهوامش في جميع الاتجاهات كما هو موضح بالمثال.

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

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

نلاحظ انه عند اختيار قيمة الهامش بالتلقائية auto يتم عمل توزيع لنسبة 30٪ وهى النسبة المتبقية من العرض حيث أن المحتوى له نسبة عرض 70٪ ويتبقى 30٪ يتم توزيعها بالتساوى على الهامش الأيمن والهامش الأيسر

نلاحظ أنه عند تعيين نسبة الهامش تلقائي marin: auto انه تم ضبط الهامش الأيمن والهامش الأيسر على النسبة المئوية بالتساوي بحيث تتساوى قيمة الهامش الأيسر مع قيمة الهامش الأيمن.

ضبط وتعيين الهامش الداخلي padding في CSS

قبل الحديث عن الـpadding سوف نعرف ما هو padding

تعريف الهامش الداخلي Padding: هو المساحة بين محتوى العنصر وحدوده.

وهو يختلف عن الهامش الخارجي margin والذى سوف نشرحه بمشيئة الله تعالى فى الدرس القادم.

لتعيين وضبط الهامش الداخلي padding

padding: اكتب هنا قيمة الهامش الداخلي

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

ضبط وتعيين الهامش الداخلي padding في CSS

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

نلاحظ أنه عند الضغط على المتصفح كليك يمين right click واختيار Inspect ومن العناصر elements نلاحظ أنه تم وضع القيمة 0 في جميع اتجاهات الهامش الداخلي وهى الهامش العلوى padding-top والهامش الأيمن padding-right والهامش السفلي padding-bottom والهامش الأيسر padding-left كما هو موضح

هنا قمنا بإعطاء قيمة الهامش الداخلي padding: 30px لنلاحظ التغير الذي سيطرأ على شكل النص بعد إعطائه هذه القيمة.

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

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

شكل الصفحة بعد ما تم ضبط الهامش الداخلي لكل اتجاه على حده.

وإذا أردنا إعطاء قيم للهامش الداخلي padding بحيث تكون القيمة العلوية 10 بكسل والقيمة السفلية نفس القيمة فنقوم بكتابة القيمة العلوية فقط ويأخذ قيمة الpadding السفلية من القيمة العلوية ونلاحظ هنا أننا أعطينا قيمة للهامش الأيمن قدره 20 بكسل فنلاحظ أن تلك القيمة تنطبق أيضا على الهامش الأيسر

أي أن كل قيمة تنطبق على القيمة المقابلة لها فإذا وضعنا قيمتين فقط للهامش فإن القيمة الأولى كما في هذا المثال نلاحظ أن القيمة الأولى تنطبق على الاتجاه العلوى والاتجاه المقابل له وهو السفلي والقيمة الثانية تنطبق على الاتجاه الأيمن وعلى الاتجاه السفلي

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

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

عند الرغبة في تعيين هامش داخلي padding في اتجاه معين مثل الهامش العلوي نكتب الكود padding-top: 10px وهكذا يتم تعيين قيم للهوامش الداخلية في الاتجاهات المذكورة فقط وباقي الاتجاهات الخاصة بالهامش الداخلي والتي يتم ذكرها تكون لها القيمة صفر

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

نلاحظ أيضا أنه يمكن إعطاء قيم padding بالنسبة المئوية كما هو موضح بالمثال

تعيين صورة لخلفية الصفحة web page image باستخدام CSS

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

وفي هذا الدرس سنتناول طريقة وضع (تعيين) صورة لخلفية الصفحة web page image عن طريق استخدام CSS

كود وضع صورة فى خلفية صفحة الويب

في ملف css نكتب الكود

background-image: url("هنا يتم وضع مسار الصورة")

لتعيين صورة معينة في خلفية صفحة الويب web page background-image

نكتب هذا الكود

background-image: url("../images/back2.jpeg");

حيث url هو عنوان أو مسار الصورة

نلاحظ أن /.. للذهاب إلى مستوى أعلى حيث أن ملف main.css يوجد في مجلد اسمه css ولكن صورة الخلفية توجد في مجلد images

في ملف Html لها الاسم idex

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

وسنستخدم هنا ملف خارجي external css

تعيين صورة لخلفية الصفحة web page image باستخدام CSS

نلاحظ انه تم تعيين صورة كخلفية للصفحة كما هو موضح وتم عمل تكرار repeat للصورة بحيث تكرر هذه الصورة أفقيا ورأسيا بحيث تملء كل صفحة الويب.

الخاصية: background-repeat: repeat

ومن الخصائص التي تستخدم مع الصورة background-repeat وتستخدم مع الصور والقيمة الافتراضية لها هي repeat أي تكرار الصورة التي تم وضعها في الخلفية أفقيا ورأسيا وهذا ما يتم عمله بالفعل بدون كتابة هذه القيمة.

وإذا أردنا عمل تكرار للصورة بشكل أفقي فقط في الصفحة نكتب في القيمة repeat-x

نلاحظ أن الصورة تم تكرارها بشكل أفقي فقط كما هو موضح في الصفحة

وإذا أردنا عمل تكرار للصورة بشكل رأسي فقط في الصفحة نكتب في القيمة repeat-y

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

الخاصية: Background-repeat: no-repeat

وإذا أردنا عدم عمل تكرار للصورة نهائيا نكتب القيمة no-repeat في الخاصية

Background-repeat: no-repeat

نلاحظ أن الصورة الموجودة في الخلفية لم تتكرر وتم منع تكرارها بناء على الخاصية no-repeat التي تم وضعها في الكود الخاص بـcss

الخاصية: background-attachment : scroll

كما أنه من ضمن الخصائص الموجودة للصور الخاصية background-attachment ولها القيمة الافتراضية scroll

نلاحظ أن القيمة scroll هي القيمة الافتراضية للصورة background-attachment

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

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

أما إذا أردنا أن تظل الصورة في الصفحة أمامنا كلما حركنا شريط الإنزلاق فنختار fixed

Background-attachment: fiexed

نلاحظ أن الصورة تنزل أثناء تمرير شريط الانزلاق لأسفل مع المحتوى لأننا اخترنا الخاصية fixed

Background-attachment: fixed

الخاصية background-position

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

نلاحظ أن موضع الصورة left top كما يظهر في المتصفح.

يمكن جعل موضع الصورة إما left أو center أو right هذا بالنسبة للمحاذاة الأفقية أما بالنسبة للمحاذاة الرأسية

إما top أو center أو bottom

وبهذا يكون لدينا 9 اتجاهات لمحاذاة موضوع الصورة إما left top أو left center لجعل محاذاة الصورة في وسط يسار الصفحة أوbottom Left لجعل الصورة أسفل يسار الصفحة وكذلك center top أو center center أو center bottom أو

Right top أو right center أو right bottom

نلاحظ أن هنا ان موضوع الصورة left center كما يظهر في المتصفح

أما إذا كتبنا عنصر المحاذاة الأول فقط وهو مثلا left فسيتم اعتبار العنصر الثاني للمحاذاة هو cente فيكون هنا محاذاة الصورة left center

نلاحظ هنا أن موضع الصورة هو Left center رغم أننا كتبنا center فقط في موضع محاذاة الصورة لأن المتصفح اعتبر نوع المحاذاة الرأسية هو center تلقائيا كما يظهر في المتصفح شكل الصورة .

كما يمكن اختيار موضع الصورة بالبيكسل فمثلا هنا موضع الصورة 80 بكسل جهة اليسار و50 بكسل من أعلى

نلاحظ أنه تم عمل محاذاة للصورة جهة اليسار بمقدار 80 بكسل وجهة الأعلى بمقدار 50 بكسل كما يظهر في المتصفح

كما يمكن اختيار موضع الصورة background-position من خلال النسبة المئوية فنقول مثلا 30% جهة اليسار و40٪ من أعلى

نلاحظ أن موضع الصورة background-position: 30% 40% يتم عمل محاذاة بنسبة 30٪ للصورة جهة اليسار و40٪ من أعلى كما تظهر الصورة امامنا في المتصفح

الصورة تظهر بالحجم الطبيعي لأننا اخترنا القيمة auto

Background-size: auto

الخاصية:background-size

ومن خصائص الصور أيضا background-size وهو حجم الصورة والقيمة الافتراضية لهذه الخاصية هي auto اى تظهر الصورة بحجمها الطبيعي

الخاصية background-size: contain من ضمن القيم التي يتم إعطاءها للصورة بحيث يتم جعل الصورة ظاهرة تماماً في الخلفية حتى لو تم ذلك على حساب نسب الطول والعرض للصورة الأصلية .

نلاحظ شكل الصورة في الخلفية بعد ما تم إعطاء القيمة contain لها في الخاصية

Background-size: contain

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