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

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

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





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





اجعل فيديو اليوم

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

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





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

  نص مع قيمة مضمنة css

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

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>

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



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

  العناصر التي تحتوي على كتلة عرض css

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

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>

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





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

  عناصر html ذات قيمة كتلة مضمنة css

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

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>

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





إخفاء عناصر موقع الويب مع عرض CSS: لا شيء

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

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

  عرض css flexbox

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

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

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
#flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>

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

  عرض css flexbox بقيمة مضمنة

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

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>

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

  جدول html أساسي مصنوع من css

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

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

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

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

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

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

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

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

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>

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

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

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

  عناصر css ذات قيمة الشبكة

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

الألم نفسه هو نتاج الألم ، المشاكل البيئية الرئيسية ، لكني أعطيها أقل من وقت للعمل
<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>

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

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

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

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

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