استخدام عرض CSS للتحكم في تخطيطات مواقع الويب

تعد خاصية عرض CSS أداة قوية لمصممي الويب. يتيح لك التحكم في تخطيطات عناصر موقع الويب بأقل قدر من التصميم ، بقيم بسيطة يسهل تذكرها.

ولكن ماذا تفعل كل من هذه القيم ، وكيف تعمل؟ هيا نكتشف.

ما هي خاصية عرض CSS؟

تحدد خاصية العرض نوع عرض المربع المستخدم لعناصر HTML على صفحة ويب. ينتج عن هذا مجموعة متنوعة من السلوكيات ، بما في ذلك عدم الظهور على الإطلاق. يمكنك تحرير هذه القيم على موقع الويب الخاص بك من خلال ورقة الأنماط أو أقسام تخصيص CSS المناسبة بتنسيق أدوات CMS مثل WordPress.

الحفاظ على العناصر متسقة مع عرض CSS: مضمنة

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

<! DOCTYPE html>
<أتش تي أم أل لانج ="en">
<رأس>
<meta charset ="UTF-8">
<لقب>قيم عرض CSS</title>
<نمط>
.في النسق {
 عرض: مضمنة ؛
 حجم الخط: 3rem ؛
 }
# مضمنة -1 {
 لون الخلفية: أصفر.
 الحشو: 10 بكسل 0 بكسل 10 بكسل 10 بكسل ؛
 }
# مضمنة 2 {
 لون الخلفية: lightgreen.
 الحشو: 10 بكسل 10 بكسل 10 بكسل 0 بكسل ؛





instagram viewer


 }
</style>
</head>
<هيئة>
<h1>عرض CSS مضمن</h1>
<فئة div ="في النسق" معرف ="مضمنة 1">هذا نص</div>
<فئة div ="في النسق" معرف ="مضمنة 2">مع قيمة الخاصية المضمنة.</div>
</body>
</html>

يعمل ترميز HTML و CSS أعلاه كمثال جيد للقيمة المضمنة للعرض. عند استخدامها معًا ، سيعرض هذا سطرًا واحدًا من النص مكونًا من عنصري HTML مختلفين.

التحكم في تخطيطات مواقع الويب باستخدام عرض CSS: block

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

<! DOCTYPE html>
<أتش تي أم أل لانج ="en">
<رأس>
<meta charset ="UTF-8">
<لقب>قيم عرض CSS</title>
<نمط>
.الكتلة {
 العرض محجوب؛
 حجم الخط: 3rem ؛
 العرض: محتوى مناسب ؛
 }
#كتلة 1 {
 لون الخلفية: أصفر.
 الحشو: 10 بكسل 10 بكسل 10 بكسل 10 بكسل ؛
 }
# block-2 {
 لون الخلفية: lightgreen.
 الحشو: 10 بكسل 10 بكسل 10 بكسل 10 بكسل ؛
 }
</style>
</head>
<هيئة>
<h1>كتلة عرض CSS</h1>
<فئة div ="الكتلة" معرف ="كتلة 1">هذا نص</div>
<فئة div ="الكتلة" معرف ="كتلة 2">مع قيمة خاصية الكتلة.</div>
</body>
</html>

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

عناصر HTML جنبًا إلى جنب مع عرض CSS: inline-block

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

<! DOCTYPE html>
<أتش تي أم أل لانج ="en">
<رأس>
<meta charset ="UTF-8">
<لقب>قيم عرض CSS</title>
<نمط>
.inline-block {
 عرض: مضمنة كتلة ؛
 حجم الخط: 3rem ؛
 العرض: محتوى مناسب ؛
 }
# inline-block-1 {
 لون الخلفية: أصفر.
 الحشو: 10 بكسل 10 بكسل 10 بكسل 10 بكسل ؛
 }
# inline-block-2 {
 لون الخلفية: lightgreen.
 الحشو: 10 بكسل 10 بكسل 10 بكسل 10 بكسل ؛
 }
</style>
</head>
<هيئة>
<h1>عرض CSS Inline-Block (مجموعة العرض)</h1>
<فئة div ="مضمنة كتلة" معرف ="مضمنة كتلة -1">هذا نص</div>
<فئة div ="مضمنة كتلة" معرف ="مضمنة كتلة -2">مع خاصية inline-block
 القيمة.</div>
</body>
</html>

لا تظهر قيمة الكتلة المضمنة مختلفة كثيرًا عن القيمة المضمنة. من المهم ملاحظة أنه يمكنك تعيين أبعاد العناصر بهذه القيمة ، على الرغم من ذلك ، مما يسهل العمل معها في حالات معينة.

أبسط قيمة عرض هي "لا شيء". تخفي هذه القيمة العنصر وأي عناصر فرعية ، بالإضافة إلى الهوامش وخصائص التباعد الأخرى. لا تزال العناصر التي تحتوي على عرض CSS بلا قيمة مرئية داخل مفتشي المستعرض.

إنشاء عناصر مرنة وسريعة الاستجابة باستخدام عرض CSS: مرن

يعد Display flex أحد أحدث أوضاع تخطيط CSS. عندما يكون العرض المرن على عنصر أصلي ، فإن جميع العناصر الموجودة بداخله تصبح عناصر CSS مرنة. العنصر الأصل في هذا التكوين هو flexbox.

تنشئ Flexboxes تصميمات سريعة الاستجابة بمتغيرات محددة مسبقًا ، مثل العرض والارتفاع. انه يستحق التعرف على مربعات فليكس بوكس ​​HTML / CSS قبل أن تبدأ.

<! DOCTYPE html>
<أتش تي أم أل لانج ="en">
<رأس>
<meta charset ="UTF-8">
<لقب>قيم عرض CSS</title>
<نمط>
.ثني {
 عرض: فليكس ؛
 حجم الخط: 3rem ؛
 }
# فليكس -1 {
 لون الخلفية: أصفر.
 العرض: 40٪؛
 الارتفاع: 100 بكسل ؛
 }
# فليكس -2 {
 لون الخلفية: lightgreen.
 العرض: 25٪؛
 الارتفاع: 100 بكسل ؛
 }
# فليكس 3 {
 لون الخلفية: lightblue.
 العرض: 35٪؛
 الارتفاع: 100 بكسل ؛
 }
</style>
</head>
<هيئة>
<h1>CSS Display Flex</h1>
<فئة div ="ثني">
<معرف div ="فليكس 1"></div>
<معرف div ="المرن 2"></div>
<معرف div ="المرن 3"></div>
</div>
</body>
</html>

ضع الصناديق المرنة جنبًا إلى جنب مع شاشة العرض: مضمنة - مرنة

يتصرف Inline-flex تمامًا مثل flexbox العادي ، مع ميزة إضافية تتمثل في قدرة العنصر على الجلوس بجوار العناصر الأخرى.

<! DOCTYPE html>
<أتش تي أم أل لانج ="en">
<رأس>
<meta charset ="UTF-8">
<لقب>قيم عرض CSS</title>
<نمط>
.inline-flex {
 عرض: مضمنة المرن ؛
 حجم الخط: 3rem ؛
العرض: 49.8%;
 }
# inline-flex-1 {
 لون الخلفية: أصفر.
 العرض: 40٪؛
 الارتفاع: 100 بكسل ؛
 }
# inline-flex-2 {
 لون الخلفية: lightgreen.
 العرض: 25٪؛
 الارتفاع: 100 بكسل ؛
 }
# inline-flex-3 {
 لون الخلفية: lightblue.
 العرض: 35٪؛
 الارتفاع: 100 بكسل ؛
 }
</style>
</head>
<هيئة>
<h1>عرض CSS Inline-Flex</h1>
<فئة div ="مضمنة المرن">
<معرف div ="مضمنة المرن 1"></div>
<معرف div ="مضمنة المرن 2"></div>
<معرف div ="مضمنة المرن 3"></div>
</div>
<فئة div ="مضمنة المرن">
<معرف div ="مضمنة المرن 1"></div>
<معرف div ="مضمنة المرن 2"></div>
<معرف div ="مضمنة المرن 3"></div>
</div>
</body>
</html>

إنشاء جداول معقدة مع عرض CSS: الجدول

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

ستؤدي إضافة قيمة الجدول إلى عنصر HTML إلى جعله يعمل كعنصر جدول ، لكنك تحتاج إلى قيم إضافية لجعل الجدول يعمل بشكل صحيح.

عرض CSS: خلية جدول

تعمل العناصر التي تحتوي على قيمة خلية الجدول كخلايا فردية داخل الجدول الرئيسي. وتقوم قيم الجدول والعمود وصف الجدول بتجميع هذه الخلايا الفردية معًا.

عرض CSS: صف الجدول

تعمل قيمة صف الجدول تمامًا مثل ملف

عنصر HTML. كأصل للعناصر ذات قيمة خلية الجدول ، ستقسم الجدول إلى صفوف أفقية.

عرض CSS: عمود الجدول

تعمل قيمة عمود الجدول بشكل مشابه لقيمة صف الجدول ، إلا أنها لا تقسم الجدول لأعلى. بدلاً من ذلك ، يمكنك استخدام هذه القيمة لإضافة قواعد CSS معينة إلى الأعمدة المختلفة الموجودة بالفعل.

<! DOCTYPE html>
<أتش تي أم أل لانج ="en">
<رأس>
<meta charset ="UTF-8">
<لقب>قيم عرض CSS</title>
<نمط>
.الطاولة {
 جدول العرض؛
 حجم الخط: 3rem ؛
 }
.header {
 عرض: مجموعة رأس الجدول ؛
 حجم الخط: 3rem ؛
 }
# عمود -1 {
 عرض: مجموعة عمود الجدول ؛
 لون الخلفية: أصفر.
 }
# عمود -2 {
 عرض: مجموعة عمود الجدول ؛
 لون الخلفية: lightgreen.
 }
# عمود -3 {
 عرض: مجموعة عمود الجدول ؛
 لون الخلفية: lightblue.
 }
# صف -1 {
 عرض: صف الجدول.
 }
# صف -2 {
 عرض: صف الجدول.
 }
# صف -3 {
 عرض: صف الجدول.
 }
#زنزانة {
 عرض: خلية الجدول.
 الحشو: 10 بكسل ؛
 العرض: 20٪؛
 }
</style>
</head>
<هيئة>
<h1>جدول عرض CSS</h1>
<فئة div ="الطاولة">
<معرف div ="العمود 1"></div>
<معرف div ="العمود 2"></div>
<معرف div ="العمود 3"></div>
<فئة div ="رأس">
<معرف div ="زنزانة">اسم</div>
<معرف div ="زنزانة">سن</div>
<معرف div ="زنزانة">دولة</div>
</div>
<معرف div ="صف 1">
<معرف div ="زنزانة">جيف</div>
<معرف div ="زنزانة">21</div>
<معرف div ="زنزانة">الولايات المتحدة الأمريكية</div>
</div>
<معرف div ="الصف 2">
<معرف div ="زنزانة">قاضى</div>
<معرف div ="زنزانة">34</div>
<معرف div ="زنزانة">إسبانيا</div>
</div>
<معرف div ="صف 3">
<معرف div ="زنزانة">بوريس</div>
<معرف div ="زنزانة">57</div>
<معرف div ="زنزانة">سنغافورة</div>
</div>
</div>
</body>
</html>

إنشاء جداول جنبًا إلى جنب باستخدام عرض CSS: جدول مضمّن

مثل المتغيرات المضمنة الأخرى التي نظرنا إليها بالفعل ، يتيح الجدول المضمن إمكانية وضع عناصر الجدول بجوار العناصر الأخرى.

بناء تخطيطات مواقع ويب سريعة الاستجابة باستخدام عرض CSS: الشبكة

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

<! DOCTYPE html>
<أتش تي أم أل لانج ="en">
<رأس>
<meta charset ="UTF-8">
<لقب>قيم عرض CSS</title>
<نمط>
.جريد {
 عرض: شبكة ؛
 حجم الخط: 3rem ؛
 مناطق قالب الشبكة:
'رأس رأس رأس الرأس'
'محتوى محتوى الشريط الجانبي الأيسر الشريط الجانبي الأيمن'
'تذييل تذييل تذييل تذييل';
 فجوة: 10 بكسل ؛
 }
# شبكة -1 {
 منطقة الشبكة: رأس ؛
 لون الخلفية: أصفر.
 الارتفاع: 100 بكسل ؛
 الحشو: 20 بكسل ؛
 محاذاة النص: مركز ؛
 }
#الشبكة 2 {
 منطقة الشبكة: الشريط الجانبي الأيسر ؛
 لون الخلفية: lightgreen.
 الارتفاع: 200 بكسل ؛
 الحشو: 20 بكسل ؛
 محاذاة النص: مركز ؛
 }
# شبكة -3 {
 منطقة الشبكة: المحتوى ؛
 لون الخلفية: lightblue.
 الارتفاع: 200 بكسل ؛
 الحشو: 20 بكسل ؛
 محاذاة النص: مركز ؛
 }
# الشبكة 4 {
 منطقة الشبكة: الشريط الجانبي الأيمن ؛
 لون الخلفية: lightgreen.
 الارتفاع: 200 بكسل ؛
 الحشو: 20 بكسل ؛
 محاذاة النص: مركز ؛
 }
# شبكة -5 {
 منطقة الشبكة: تذييل.
 لون الخلفية: أصفر.
 الارتفاع: 100 بكسل ؛
 الحشو: 20 بكسل ؛
 محاذاة النص: مركز ؛
 }
</style>
</head>
<هيئة>
<h1>شبكة عرض CSS</h1>
<فئة div ="جريد">
<معرف div ="الشبكة 1">رأس</div>
<معرف div ="الشبكة 2">الشريط الجانبي الأيسر</div>
<معرف div ="شبكة 3">محتوى</div>
<معرف div ="شبكة 4">الشريط الجانبي الأيمن</div>
<معرف div ="شبكة 5">تذييل</div>
</div>
</body>
</html>

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

عرض CSS: شبكة مضمنة

سيمكن استخدام قيمة الشبكة المضمنة شبكتك من الجلوس بجوار العناصر الأخرى ، تمامًا مثل القيم المضمنة الأخرى في هذا الدليل.

استخدام عرض CSS لتصميم الويب

توفر خاصية عرض CSS طريقة سهلة لضبط هياكل عناصر موقع الويب دون الحاجة إلى تغيير ترميز HTML. هذا مثالي لمن يستخدمون منصات توصيل المحتوى مثل Shopify أو WordPress ، ولكن يمكن أن يكون مفيدًا أيضًا لتصميم الويب العام.