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

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

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

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

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

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

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

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

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

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

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

معلومة تقنية

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

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

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

button {
    display: block;
}
        

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

div {
    display: inline-block;
}
        

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

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

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

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

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

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

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

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

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

h1 {
    display: none;
}
        

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

h1 {
    visibility: hidden;
}