CSSأساليب العرض

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

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

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

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

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

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

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

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

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

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

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

button {
    display: block;
}

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

div {
    display: inline-block;
}

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

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

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

أثناء تجربة المثال قم بتغيير قيمة الخاصية display من inline إلى inline-block و من ثم إلى block حتى ترى الفرق.

harmash {
    display: inline;
    color: red;
    margin: 30px;
    padding: 30px;
    border: 1px solid red;
}

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

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

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

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

h1 {
    display: none;
}

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

h1 {
    visibility: hidden;
}