تتصف عناصر صفحة HTML بعدة أنماط في لغة الـ CSS وتلك الأنماط تحدد ظهور العنصر وتأثره ببعض الخصائص .
سنأخذ في هذا الدرس ثلاث أنماط أساسية وهم الأنماط الإفتراضية الشائعة في اللغة.
النمط الأول [[display:none]]
هذا النمط يخفي العنصر من الصفحة , وهو يعتبر أبسط الأنماط ولا يحتاج شرح أو توضيح مجرد أن تضيفه على أى عنصر في الصفحة سيكون هذا العنصر كأنه غير موجود , ولكن هذا النمط يقوم بالإخفاء وليس الإزالة يعني يظل العنصر موجود في الصفحة حتى لو لم يؤثر علي شكلها لكنه يظل تم تحميله في الصفحة هو فقط مخفي , وأى تنسيقات على هذا العنصر تعتبر بلا قيمة إلا ان تم تفعيله لاحقاً
الإستخدام
.example {
display:none;
color:red;
font-size:16px
}
أسباب الإستخدام
- اخفاء عنصر عند التجاوب
- اخفاء عنصر مؤقتاً لسبب التعديل
- اخفاء عنصر للمبتدئين الذين لا يستطيعون ازالته من الصفحة
النمط الثاني [[display:block]]
وهو ما يسمى بالعناصر الكتلية , هي عناصر تؤثر بشكل ملحوظ على على نمط الصفحة فهي تخلق أقسام مستقلة
من أكثر العناصر شيوعاً التي تعمل بنمط الـ block
[[div]] [[p]] [[section]]
[[article]] [[header]] [[footer]] [[ul]] [[ol]]
[[h1 الى h6]]
خصائص العناصر الكتلية
- تبدأ دائمًا على سطر جديد
- تأخذ العرض الكامل المتاح (ما لم يتم تحديد العرض)
- يمكنك تعيين العرض، الارتفاع، الهوامش، والحشو من جميع الجهات
- تحترم خصائص نموذج الصندوق تمامًا
الإستخدام
.example {
display:block;
height:300px;
width:800px;
margin:20px;
padding:15px
}
أسباب الإستخدام
أنت لا تستخدم هذا النمط لأنه مضاف بشكل افتراضي على العناصر التي تعمل به افتراضياً مثل العناصر التي ذكرناها , لكن نحن نستخدمه إن كنت غيرت الإفتراضي مسبقاً
مثال لديك عنصر استخدمت عليه نمط الإخفاء none ثم تريد إظهاره عند التجاوب حينها تستخدم نمط مثل block ليظهر العنصر ويعود لنمطه الأصلي.
النمط الثالث [[inline]]
وهو ما يسمى بالعنصر المتدفق هو عنصر ينسجم مع المحتوى ويستخدم عادة في عناصر التنسيق مثل
[[strong]] [[span]] [[code]] [[em]] [[i]] [[img]] [[a]]
خصائص العناصر المتدفقة
- تأخذ فقط العرض اللازم
- يتم تجاهل خصائص العرض والارتفاع
- تعمل فقط الهوامش والحشو الأفقية كما هو متوقع
- الحشو والهوامش الرأسية لا تؤثر على ارتفاع السطر أو تدفع المحتوى الآخر بعيدًا
الإستخدام
.example {
display:inline;
margin:0 20px; /*الحشو الأفقي فقط*/
padding:0 15px /*الهامش الأفقي فقط*/
}
أسباب الإستخدام
نفس الشئ نسخدمه فقط ان كنا عدلنا الوضع الإفتراضي الأصلي للعنصر .
عنصر هجين [[display:inline-block]]
هذا هو عنصر هجين بين العنصرين السابقين يجمع صفات عنصر الـ inline ولكن يمكنك ان تستخدم معه خصائص العرض والإرتفاع والهوامش الرأسية مثل عنصر الـ block
الإستخدام
.example {
display:inline-block;
height:60px;
width:80px;
margin:5px;
padding:10px
}
سؤال وجواب
هل يمكن تغيير نمط عنصر من inline الى block والعكس ؟
نعم
هل يمكن استخدام عنصر block داخل عنصر inline ؟
نعم : لكنه ليس الإستخدام الأمثل
عنصر الصور يقبل العرض والإرتفاع مع انه inline لماذا ؟
عنصر الصورة له نمط خاص في التصرف لكنه ما يزال ينتمي للنمط المتدفق
هل نمط inline-block هو الأفضل ؟
ليس في كل وقت حيث أنه لا يتحترم التدفق بشكل كامل فهو يضيف مسافة بيضاء بين العناصر ليثبت تفرده ولا ينسجم داخل التدفق بشكل كامل على عكس inline كل منهم له الإستخدام المناسب له .
مثال على مسألة التدفق تلك لو كتبنا كلمة مثل جميل وجعلنا حرفي الياء واللام داخل عنصر inline لتلوينهم لون مستقل
ستظل الكلمة على حالها , لكن لو استخدمنا نمط inline-block ستنفصل الكلمة ولن تكون ككلمة واحده بل كلمتين.
تعليقات