CSS / أساليب العرض (Display)

الناشر :كودا فوكس -

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

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

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

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 حتى يظهر لوحده على السطر.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
 <!DOCTYPE html>
<html>
	<head>
        <style>
button {
	display: block;
    margin-bottom: 10px;
}
        </style>
	</head>
	<body>
        <h2>CSS display block</h2>
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
    </body>
</html>

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
div {
    display: inline-block;
    border: 1px solid black;
    padding: 10px 50px;
    margin: 5px;
}    
        </style>
	</head>
	<body>
		<h2>Display inline-block</h2>
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
    </body>
</html>

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

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
harmash {
    display: inline;
    color: red;
    margin: 30px;
    padding: 30px;
    border: 1px solid red;
}
        </style>
	</head>
	<body>
		<h2>Display inline</h2>
        <p>This is a special <harmash>tag</harmash>
           where that is used display inline. As you
           see the padding and margin at the top and
           bottom is not working in inline mode.</p>
    </body>
</html>

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

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
h1 {
    display: none;
}
        </style>
	</head>
	<body>
		<h1>Display none</h1>
        <p>H1 is not displayed at all.</p>
    </body>
</html>

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
h1 {
    visibility: hidden;
}
        </style>
	</head>
	<body>
		<h1>Visibility hidden</h1>
        <p>H1 is hidden but its place is reserved.</p>
    </body>
</html>
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال