HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

دروس CSS

الصفحة الرئيسية لـ CSS مقدمة CSS بنية CSS محددات CSS كيفية استخدام CSS تعليقات CSS ألوان CSS
Colors RGB HEX HSL
خلفيات CSS
Background Color Background Image Background Repeat Background Attachment Background Shorthand
حدود CSS
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
هوامش CSS
Margins Margin Collapse
حشوة CSS ارتفاع / عرض CSS نموذج مربع CSS مخطط CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
نص CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
خطوط CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
أيقونات CSS روابط CSS قوائم CSS جداول CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
عرض CSS أقصى عرض لـ CSS موقف CSS CSS Z- الفهرس تجاوز CSS تعويم CSS
Float Clear Float Examples
كتلة مضمنة CSS محاذاة CSS موحد CSS فئة CSS الزائفة عنصر زائف لـ CSS تعتيم CSS شريط التنقل CSS
Navbar Vertical Navbar Horizontal Navbar
القوائم المنسدلة CSS معرض صور CSS صور CSS العفاريت محددات CSS Attr نماذج CSS عدادات CSS تخطيط موقع الويب CSS وحدات CSS خصوصية CSS CSS! مهم وظائف الرياضيات CSS

CSS متقدم

زوايا مستديرة CSS صور الحدود CSS خلفيات CSS ألوان CSS الكلمات الأساسية الملونة CSS تدرجات CSS
Linear Gradients Radial Gradients Conic Gradients
ظلال CSS
Shadow Effects Box Shadow
تأثيرات نص CSS خطوط الويب CSS تحويلات CSS 2D تحويلات CSS ثلاثية الأبعاد انتقالات CSS الرسوم المتحركة CSS تلميحات CSS صور نمط CSS انعكاس صورة CSS كائن CSS مناسب موضع كائن CSS اخفاء CSS أزرار CSS ترقيم صفحات CSS أعمدة CSS المتعددة واجهة مستخدم CSS متغيرات CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
تحجيم صندوق CSS استعلامات وسائط CSS أمثلة على CSS MQ فليكس بوكس ​​CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

استجابة CSS

مقدمة RWD منفذ عرض RWD عرض شبكة RWD استعلامات وسائط RWD صور RWD مقاطع فيديو RWD أطر RWD قوالب RWD

شبكة CSS

مقدمة الشبكة حاوية الشبكة عنصر الشبكة

CSS SASS

دروس SASS

أمثلة CSS

قوالب CSS أمثلة CSS اختبار المغلق تمارين CSS شهادة CSS

مراجع CSS

مرجع CSS محددات CSS وظائف CSS CSS المرجعي Aural الخطوط الآمنة للويب CSS متحرك CSS وحدات CSS محول CSS PX-EM ألوان CSS قيم ألوان CSS القيم الافتراضية لـ CSS دعم مستعرض CSS

تخطيط CSS - خاصية العرض

❮ سابق التالي ❯

الخاصية هي displayأهم خاصية CSS للتحكم في التخطيط.

خاصية العرض

تحدد الخاصية ما displayإذا كان / كيف يتم عرض عنصر.

لكل عنصر HTML قيمة عرض افتراضية اعتمادًا على نوع العنصر. قيمة العرض الافتراضية لمعظم العناصر هي blockأو inline.

انقر لإظهار اللوحة

This panel contains a <div> element, which is hidden by default (display: none).

It is styled with CSS, and we use JavaScript to show it (change it to (display: block).

عناصر الكتلة

يبدأ عنصر مستوى الكتلة دائمًا بسطر جديد ويأخذ العرض الكامل المتاح (يمتد إلى اليسار واليمين بقدر الإمكان).

عنصر <div> هو عنصر على مستوى الكتلة.

أمثلة على عناصر مستوى الكتلة:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <رأس>
  • <footer>
  • <القسم>

العناصر المضمنة

لا يبدأ العنصر المضمن في سطر جديد ولا يشغل سوى أكبر قدر ممكن من العرض.

هذا عنصر مضمن <span> داخل فقرة.

أمثلة على العناصر المضمنة:

  • <span>
  • <a>
  • <img>

عرض لا شيء؛

display: none;شائع الاستخدام مع JavaScript لإخفاء وإظهار العناصر دون حذفها وإعادة إنشائها. ألق نظرة على مثالنا الأخير في هذه الصفحة إذا كنت تريد أن تعرف كيف يمكن تحقيق ذلك.

يستخدم <script>العنصر display: none; كافتراضي. 

تجاوز قيمة العرض الافتراضية

كما ذكرنا ، كل عنصر له قيمة عرض افتراضية. ومع ذلك ، يمكنك تجاوز هذا.

يمكن أن يكون تغيير عنصر مضمن إلى عنصر كتلة ، أو العكس ، مفيدًا في جعل الصفحة تبدو بطريقة معينة ، مع الاستمرار في اتباع معايير الويب.

المثال الشائع هو عمل <li>عناصر مضمنة للقوائم الأفقية:

مثال

li {
  display: inline;
}

ملاحظة: يؤدي تعيين خاصية العرض لعنصر ما إلى تغيير كيفية عرض العنصر فقط ، وليس نوع العنصر. لذلك ، لا يُسمح للعنصر المضمن الذي يحتوي display: block;على عناصر كتلة أخرى بداخله.

يعرض المثال التالي عناصر <span> كعناصر كتلة:

مثال

span {
  display: block;
}

يعرض المثال التالي <a> العناصر كعناصر كتلة:

مثال

a {
  display: block;
}

إخفاء عنصر - عرض: لا شيء أم الرؤية: مخفية؟

display:none

إيطاليا

visibility:hidden

غابة

إعادة ضبط

أضواء

يمكن إخفاء عنصر عن طريق تعيين displayالخاصية إلى none. سيتم إخفاء العنصر ، وسيتم عرض الصفحة كما لو كان العنصر غير موجود:

مثال

h1.hidden {
  display: none;
}

visibility:hidden;يخفي أيضًا عنصرًا.

ومع ذلك ، سيظل العنصر يشغل نفس المساحة كما كان من قبل. سيتم إخفاء العنصر ، لكن سيظل يؤثر على التخطيط:

مثال

h1.hidden {
  visibility: hidden;
}

مزيد من الأمثلة


This example demonstrates display: none; versus visibility: hidden;


This example demonstrates how to use CSS and JavaScript to show an element on click.

Test Yourself With Exercises

Exercise:

Hide the <h1> element. It should still take up the same space as before.

<style>
h1 {
  : ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Display/Visibility Properties

Property Description
display Specifies how an element should be displayed
visibility Specifies whether or not an element should be visible

❮ Previous Next ❯