مفهوم أساليب العرض
أي عنصر تضيفه في الصفحة تجده يظهر بأسلوب معين، فإما أنه يظهر على السطر بأكمله و لا يظهر شيء آخر بجانبه، و إما أنه يظهر بجانب عناصر أخرى في نفس السطر إذا كان هناك مساحة تسمح بظهوره بجانبها.
في هذا الدرس ستتعرف على أساليب العرض الرئيسية التي تملكها عناصر HTML و كيف يمكنك تغييرها بواسطة خصائص CSS لتلائم تصاميمك.
أساليب عرض العناصر
لتحديد أسلوب العرض نستخدم الخاصية display
و من بعدها نمرر لها قيمة تمثل أسلوب العرض الذي نريد أن يعتمده العنصر.
أساليب العرض الأساسية التي تعتمدها وسوم HTML و التي يمكن تمريرها كقيمة لها هي:
block
لجعل العنصر يظهر على كامل السطر (إن لم تتلاعب بحجمه) و لا يظهر أي شيء آخر بجانبه.
inline-block
لجعل العنصر يظهر كبلوك و لا مانع أن يظهر عنصر آخر بجانبه إن كان هناك متسع له.
inline
لجعل العنصر يظهر بنفس حجم محتواه و هذا الأسلوب في العرض يستخدم بشكل خاص عندما تحتاج إلى تعديل تصميم نص موجود في فقرة أو عنوان.
أساليب ظهور عناصر HTML
فيما يلي أساليب الظهور الإفتراضية لبعض العناصر:
- الوسوم
<div>
- <header>
- <footer>
- <aside>
تعتمد أسلوب block
بشكل إفتراضي لهذا تراها تظهر على سطر منفرد.
- الوسمين
<button>
و <select>
يعتمدان أسلوب inline-block
بشكل إفتراضي لهذا تجد أنه يمكن أن يظهر بجانب بعض.
- الوسوم
<span>
- <u>
- <b>
- <i>
تعتمد أسلوب inline
بشكل إفتراضي فهي تستخدم لتعديل تصميم على النص الموجود في الفقرات أو العناوين.
معلومة تقنية
العنصر الذي يظهر كبلوك سواء block
أو inline-block
يمكن إضافة padding
و margin
لهم من كل الجهات ( الأعلى، الأسفل، اليمين و اليسار ) و كذلك يمكن تحديد كم سيكون حجمه بالضبط في الصفحة بواسطة الخاصية width
و الخاصية height
.
العنصر الذي يظهر بأسلوب inline
لا يمكن تحديد حجمه سواء بالطول أو العرض. و في حال إضافة هامش داخلي أو خارجي له من الأعلى و الأسفل ستجد أن المتصفح لا يعطي لها قيمة بمعنى أنه قد يجعل باقي العناصر الموجودة في الصفحة تظهر بشكل متداخل فيها. و بالمناسبة هذا أمر منطقي لأن هذا الأسلوب يُستعمل بالأساس لتطبيق تصميم معين على كلام معين في نص كجعله يظهر بلون آخر، يظهر بشكل مائل إلخ..
في المثال التالي قمنا بجعل الوسم <button>
يعتمد أسلوب block
حتى يظهر لوحده على السطر.
في المثال التالي قمنا بجعل الوسم <div>
يعتمد أسلوب inline-block
حتى لا يظهر على سطر لوحده.
مثال
div {
display: inline-block;
}
جرب الكود
الظهور الإفتراضي للعناصر الجديدة
أي عنصر جديد تقوم بتعريفه بنفسك يستخدم أسلوب inline
بشكل تلقائي ما لم تقم أنت بالتلاعب بطريقة ظهوره.
في المثال التالي قمنا بإضافة وسم جديد إسمه <harmash>
الذي يعتمد أسلوب inline
للظهور في الصفحة.
جعلنا الوسم <harmash>
يظهر بلون أحمر و أضفنا له margin
و padding
و border
من كل الجهات.
أثناء تجربة المثال قم بتغيير قيمة الخاصية و display
إلى و inline-block
و من ثم إلى و block
حتى ترى الفرق.
مثال
harmash {
display: inline;
color: red;
margin: 30px;
padding: 30px;
border: 1px solid red;
}
جرب الكود
أساليب إخفاء العناصر
يوجد أسولبين أساسيين لإخفاء العناصر هما:
display: none
هذا الأسلوب يزيل العنصر تماماً من الصفحة و كأنه لم يعد موجود فيها.
visibility: hidden
هذا الأسلوب يخفي العنصر من الصفحة و لكن مكانه يظل محجوز فيها.
في المثال التالي قمنا بإخفاء العنوان تماماً من الصفحة بواسطة الخاصية display: none
.
في المثال التالي قمنا بإخفاء العنوان من الصفحة مع حفظ مكانه فيها بواسطة الخاصية visibility: hidden
.