يتم استخدام سمة الرؤية في CSS لتعيين ما إذا كان العنصر مرئيًا أم لا. يمكنك استخدام هذه السمة مع JavaScript لإنشاء قوائم أو تخطيطات صفحة ويب معقدة للغاية، على سبيل المثال، عند إجراء بعض أسئلة الاختبار على صفحة ويب، يمكنك استخدام إمكانية الرؤية سمة لتغيير إجابات الأسئلة أو إخفاء التحليل وعرضه عند الحاجة.
القيم المحتملة لسمة الرؤية هي كما يلي:
مثال:
1. مرئية
الاستخدام المرئي (الافتراضي).
منذ يتم عرض قيمة الخاصية الافتراضية. لذلك يتم عرض جميع الصناديق الثلاثة الصغيرة.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>المستند</title><style>div{width:100px ;الارتفاع: 100px;}.واحد{خلفية-اللون:شاحب;}.اثنان{خلفية-اللون:شاحب اللون الأحمر;}.ثلاثة{خلفية-اللون:باباياوهيب;</style></head><body><div> </div><div></div><div></div></body></html>نتائج التشغيل:
2. مخفي
عندما قمنا بضبط المربع الصغير الأول على عدم العرض (الرؤية: مخفي؛)، فإن الصندوق الصغير الثاني لا يزال يشغل موضعه الأصلي.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>المستند</title><style>div{width:100px ;الارتفاع: 100px;}.واحد{خلفية-اللون:شاحب;الرؤية:مخفي;}.اثنان{خلفية-اللون:شاحب اللون الأحمر;}.ثلاثة{خلفية-اللون:باباياوهيب;</style></head><body ><div></div><div></div><div></div></body></html>نتائج التشغيل:
ملاحظة: بعد أن يؤدي ظهور العنصر إلى إخفاء العنصر، فإنه يستمر في شغل موضعه الأصلي.
إذا كان العنصر المخفي يريد موضعه الأصلي، استخدم الرؤية: مخفي
إذا كان العنصر المخفي لا يريد موضعه الأصلي، فاستخدم العرض: لا شيء
3. وراثة
مثال:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>المستند</title><style>.one,.two ،. ثلاثة {العرض: 100 بكسل؛ الارتفاع: 100 بكسل؛}. واحد {لون الخلفية: شاحب؛}. اثنان {لون الخلفية: شاحب اللون؛}. ثلاثة {لون الخلفية: باباياوهيب؛}. أربعة،. خمسة {عرض :50px;الارتفاع:50px;لون الخلفية:powderblue;</style></head><body><div><div></div></div><div><div></div>< /div><div></div></body></html>نتائج التشغيل:
عند استخدام قيمة السمة الموروثة.
(1) نظرًا لأنه تم تعيين المربع الأخضر الكبير الأول على عدم العرض، فإن المربع الأزرق الصغير في المربع الأول يرث السمة المخفية للمربع الكبير ولا يتم عرضه.
(2) يرث المربع الأزرق الصغير الثاني سمة العرض الافتراضية المرئية للمربع الوردي الكبير، لذلك يتم عرضه.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>المستند</title><style>.one,.two ،. ثلاثة {العرض: 100 بكسل؛ الارتفاع: 100 بكسل؛}. واحد {لون الخلفية: شاحب؛ الرؤية: مخفي؛}. اثنان {لون الخلفية: شاحب اللون؛}. ثلاثة {لون الخلفية: باباياوهيب؛}. أربعة، .five{width:50px;height:50px;background-color:powderblue;}</style></head><body><div><div></div></div><div><div>< /div></div><div></div></body></html>نتائج التشغيل:
