מאפיין התצוגה של CSS הוא כלי רב עוצמה עבור מעצבי אתרים. זה מאפשר לך לשלוט בפריסות אלמנטים באתר עם סגנון מינימלי, עם ערכים פשוטים שקל לזכור.

אבל מה עושה כל אחד מהערכים הללו, וכיצד הם פועלים? בוא נגלה.

מהו מאפיין התצוגה של CSS?

מאפיין התצוגה מציין את סוג עיבוד התיבה המשמש עבור רכיבי HTML בדף אינטרנט. זה גורם למגוון התנהגויות, כולל לא להופיע בכלל. אתה יכול לערוך ערכים אלה באתר האינטרנט שלך דרך גיליון הסגנונות או הקטעים המתאימים להתאמה אישית של CSS ב כלי CMS כמו וורדפרס.

שמור על רכיבים בשורה אחת עם תצוגת CSS: מוטבע

ערכי רוחב וגובה אינם חלים על אלמנט עם תצוגה מוטבעת; התוכן בפנים קובע את מידותיו. רכיבי HTML מוטבעים יכולים לשבת זה לצד זה עם אלמנטים אחרים, להתנהג כמו א. תצוגה מוטבעת משמשת לרוב עבור טקסט.

<!DOCTYPE html>
<html lang="he">
<רֹאשׁ>
<מטא תווים ="utf-8">
<כותרת>ערכי תצוגה של CSS</title>
<סִגְנוֹן>
.בשורה {
 תצוגה: מוטבע;
 גודל גופן: 3rem;
 }
#inline-1 {
 צבע רקע: צהוב;
 ריפוד: 10px 0px 10px 10px;
 }
#inline-2 {
 צבע רקע: ירוק בהיר;
 ריפוד: 10px 10px 10px 0px;
 }
</style>
</head>
<גוּף>
<h1>CSS Display Inline





instagram viewer


</h1>
<div class="בשורה" id="inline-1">זה טקסט</div>
<div class="בשורה" id="inline-2">עם ערך הנכס המוטבע.</div>
</body>
</html>

סימון HTML ו-CSS שלמעלה משמשים דוגמה טובה לערך המוטבע לתצוגה. בשימוש יחד, זה יציג שורת טקסט אחת שנוצרה עם שני רכיבי HTML שונים.

שליטה בפריסות האתר באמצעות תצוגת CSS: חסום

במובנים מסוימים, ערך בלוק התצוגה הוא ההפך מהערך המוטבע. ניתן להגדיר ממדי גובה ורוחב, ואלמנטים בעלי ערך זה אינם יכולים לשבת אחד ליד השני. הדוגמה שלמעלה מציגה שני אלמנטים עם ערך הבלוק. אלמנטים עם ערך הבלוק מציג ברירת מחדל ברוחב המרבי של רכיב האב שלהם.

<!DOCTYPE html>
<html lang="he">
<רֹאשׁ>
<מטא תווים ="utf-8">
<כותרת>ערכי תצוגה של CSS</title>
<סִגְנוֹן>
.לַחסוֹם {
 בלוק תצוגה;
 גודל גופן: 3rem;
 רוחב: התאמה-תוכן;
 }
#block-1 {
 צבע רקע: צהוב;
 ריפוד: 10px 10px 10px 10px;
 }
#block-2 {
 צבע רקע: ירוק בהיר;
 ריפוד: 10px 10px 10px 10px;
 }
</style>
</head>
<גוּף>
<h1>בלוק תצוגה של CSS</h1>
<div class="לַחסוֹם" id="בלוק-1">זה טקסט</div>
<div class="לַחסוֹם" id="בלוק-2">עם ערך מאפיין הבלוק.</div>
</body>
</html>

בניגוד לדוגמא בסגנון המוטבע, דוגמה זו של ערך בלוק תצוגה מפצלת את שורות הטקסט לשתי שורות שונות. ערך ה-fit-content width קובע את רוחב האלמנטים כך שיתאים לאורך הטקסט.

רכיבי HTML זה לצד זה עם תצוגת CSS: בלוק מוטבע

ערך בלוק מוטבע ב-CSS תצוגת פועל בדיוק כמו ערך מוטבע רגיל, רק עם היכולת להוסיף ממדים ספציפיים. זה מאפשר ליצור פריסות דמויות רשת מבלי שיהיו רכיבי אב במקום. אם נחזור לדוגמא הקודמת, הוספת ערך הבלוק המוטבע מאפשרת לאלמנטים לשבת אחד ליד השני.

<!DOCTYPE html>
<html lang="he">
<רֹאשׁ>
<מטא תווים ="utf-8">
<כותרת>ערכי תצוגה של CSS</title>
<סִגְנוֹן>
.inline-block {
 תצוגה: בלוק מוטבע;
 גודל גופן: 3rem;
 רוחב: התאמה-תוכן;
 }
#inline-block-1 {
 צבע רקע: צהוב;
 ריפוד: 10px 10px 10px 10px;
 }
#inline-block-2 {
 צבע רקע: ירוק בהיר;
 ריפוד: 10px 10px 10px 10px;
 }
</style>
</head>
<גוּף>
<h1>CSS Display Inline-Block (ערכת רוחב)</h1>
<div class="בלוק מוטבע" id="inline-block-1">זה טקסט</div>
<div class="בלוק מוטבע" id="inline-block-2">עם המאפיין בלוק מוטבע
 ערך.</div>
</body>
</html>

ערך הבלוק המוטבע אינו שונה בהרבה מהערך המוטבע. חשוב לציין שאתה יכול להגדיר את הממדים של אלמנטים עם ערך זה, מה שמקל על העבודה איתם במקרים מסוימים.

ערך התצוגה הפשוט ביותר הוא "ללא". ערך זה מסתיר את האלמנט ואת רכיבי הצאצא, יחד עם שוליים ומאפייני מרווח אחרים. אלמנטים עם CSS לא מציגים שום ערך עדיין גלויים בתוך פקחי הדפדפן.

צור אלמנטים גמישים ומגיבים עם תצוגת CSS: flex

Display flex הוא אחד ממצבי פריסת ה-CSS החדשים ביותר. כאשר display flex נמצא ברכיב אב, כל האלמנטים בתוכו הופכים לרכיבי CSS גמישים. אלמנט האב בתצורה זו הוא flexbox.

Flexboxes יוצרים עיצובים רספונסיביים עם משתנים מוגדרים מראש, כמו רוחב וגובה. זה שווה ללמוד על HTML/CSS flexboxes לפני שתתחיל.

<!DOCTYPE html>
<html lang="he">
<רֹאשׁ>
<מטא תווים ="utf-8">
<כותרת>ערכי תצוגה של CSS</title>
<סִגְנוֹן>
.לְהַגמִישׁ {
 תצוגה: flex;
 גודל גופן: 3rem;
 }
#flex-1 {
 צבע רקע: צהוב;
 רוחב: 40%;
 גובה: 100 פיקסלים;
 }
#flex-2 {
 צבע רקע: ירוק בהיר;
 רוחב: 25%;
 גובה: 100 פיקסלים;
 }
#flex-3 {
 צבע רקע: כחול בהיר;
 רוחב: 35%;
 גובה: 100 פיקסלים;
 }
</style>
</head>
<גוּף>
<h1>CSS Display Flex</h1>
<div class="לְהַגמִישׁ">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>

מיקום Flexboxes זה לצד זה עם תצוגה: inline-flex

Inline-flex מתנהג בדיוק כמו פלקסבוקס רגיל, עם היתרון הנוסף בכך שהאלמנט יכול לשבת ליד אלמנטים אחרים.

<!DOCTYPE html>
<html lang="he">
<רֹאשׁ>
<מטא תווים ="utf-8">
<כותרת>ערכי תצוגה של CSS</title>
<סִגְנוֹן>
.inline-flex {
 תצוגה: inline-flex;
 גודל גופן: 3rem;
רוֹחַב: 49.8%;
 }
#inline-flex-1 {
 צבע רקע: צהוב;
 רוחב: 40%;
 גובה: 100 פיקסלים;
 }
#inline-flex-2 {
 צבע רקע: ירוק בהיר;
 רוחב: 25%;
 גובה: 100 פיקסלים;
 }
#inline-flex-3 {
 צבע רקע: כחול בהיר;
 רוחב: 35%;
 גובה: 100 פיקסלים;
 }
</style>
</head>
<גוּף>
<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: תא טבלה

אלמנטים עם ערך תא טבלה פועלים כתאים בודדים בטבלה הראשית. וערכי הטבלה-עמודה ושורה-טבלה מקבצים תאים בודדים אלה יחד.

תצוגת CSS: שורה טבלה

ערך שורת הטבלה פועל בדיוק כמו a

אלמנט HTML. כהורה של אלמנטים עם ערך תא טבלה, הוא יפצל את הטבלה שלך לשורות אופקיות.

תצוגת CSS: טבלה-עמודה

ערך עמודת הטבלה פועל בדומה לערך שורת הטבלה, רק שהוא לא מפצל את הטבלה שלך. במקום זאת, תוכל להשתמש בערך זה כדי להוסיף כללי CSS ספציפיים לעמודות השונות שכבר קיימות.

<!DOCTYPE html>
<html lang="he">
<רֹאשׁ>
<מטא תווים ="utf-8">
<כותרת>ערכי תצוגה של CSS</title>
<סִגְנוֹן>
.שולחן {
 תצוגה: שולחן;
 גודל גופן: 3rem;
 }
.כּוֹתֶרֶת {
 תצוגה: table-header-group;
 גודל גופן: 3rem;
 }
#column-1 {
 תצוגה: טבלה-עמודה-קבוצה;
 צבע רקע: צהוב;
 }
#column-2 {
 תצוגה: טבלה-עמודה-קבוצה;
 צבע רקע: ירוק בהיר;
 }
#column-3 {
 תצוגה: טבלה-עמודה-קבוצה;
 צבע רקע: כחול בהיר;
 }
#שורה-1 {
 תצוגה: שורה-שולחן;
 }
#שורה-2 {
 תצוגה: שורה-שולחן;
 }
#שורה-3 {
 תצוגה: שורה-שולחן;
 }
#cell {
 תצוגה: תא טבלה;
 ריפוד: 10px;
 רוחב: 20%;
 }
</style>
</head>
<גוּף>
<h1>טבלת תצוגה של CSS</h1>
<div class="שולחן">
<div id="עמודה-1"></div>
<div id="עמודה-2"></div>
<div id="עמודה-3"></div>
<div class="כּוֹתֶרֶת">
<div id="תָא">שֵׁם</div>
<div id="תָא">גיל</div>
<div id="תָא">מדינה</div>
</div>
<div id="שורה-1">
<div id="תָא">ג'ף</div>
<div id="תָא">21</div>
<div id="תָא">ארה"ב</div>
</div>
<div id="שורה-2">
<div id="תָא">לתבוע</div>
<div id="תָא">34</div>
<div id="תָא">סְפָרַד</div>
</div>
<div id="שורה-3">
<div id="תָא">בוריס</div>
<div id="תָא">57</div>
<div id="תָא">סינגפור</div>
</div>
</div>
</body>
</html>

צור טבלאות זו לצד זו עם תצוגת CSS: טבלה מוטבעת

כמו שאר הווריאנטים המוטבעים שכבר הסתכלנו עליהם, טבלה מוטבעת מאפשרת למקם רכיבי טבלה לצד אלמנטים אחרים.

בנה פריסות אתר רספונסיביות עם תצוגת CSS: רשת

ערך רשת תצוגת ה-CSS דומה לערך הטבלה, רק עמודות ושורות של רשת יכולים לקבל גודל גמיש. זה הופך את הרשתות לאידיאליות ליצירת הפריסה הראשית עבור דפי אינטרנט. הם משאירים מקום לכותרות עליונות ותחתונות ברוחב מלא ובמקביל מאפשרות לקבל אזורי תוכן בגדלים שונים.

<!DOCTYPE html>
<html lang="he">
<רֹאשׁ>
<מטא תווים ="utf-8">
<כותרת>ערכי תצוגה של CSS</title>
<סִגְנוֹן>
.רֶשֶׁת {
 תצוגה: רשת;
 גודל גופן: 3rem;
 רשת-תבנית-אזורים:
'header header header header'
'תוכן תוכן סרגל צד שמאל סרגל צד ימין'
'כותרת תחתונה כותרת תחתונה';
 פער: 10px;
 }
#grid-1 {
 grid-area: header;
 צבע רקע: צהוב;
 גובה: 100 פיקסלים;
 ריפוד: 20px;
 יישור טקסט: מרכז;
 }
#רשת 2 {
 אזור רשת: סרגל צד שמאלי;
 צבע רקע: ירוק בהיר;
 גובה: 200 פיקסלים;
 ריפוד: 20px;
 יישור טקסט: מרכז;
 }
#grid-3 {
 אזור רשת: תוכן;
 צבע רקע: כחול בהיר;
 גובה: 200 פיקסלים;
 ריפוד: 20px;
 יישור טקסט: מרכז;
 }
#grid-4 {
 אזור רשת: סרגל צד ימין;
 צבע רקע: ירוק בהיר;
 גובה: 200 פיקסלים;
 ריפוד: 20px;
 יישור טקסט: מרכז;
 }
#grid-5 {
 grid-area: כותרת תחתונה;
 צבע רקע: צהוב;
 גובה: 100 פיקסלים;
 ריפוד: 20px;
 יישור טקסט: מרכז;
 }
</style>
</head>
<גוּף>
<h1>רשת תצוגה של CSS</h1>
<div class="רֶשֶׁת">
<div id="רשת-1">כּוֹתֶרֶת</div>
<div id="רשת 2">סרגל צד שמאל</div>
<div id="רשת-3">תוֹכֶן</div>
<div id="רשת-4">סרגל צד ימין</div>
<div id="רשת-5">כותרת תחתונה</div>
</div>
</body>
</html>

רשתות דומות ל-flexboxes, רק שהן יכולות למקם אלמנטים מתחת ולצד זה. נכס הרשת-תבנית-שטחים חיוני לשם כך. כפי שניתן לראות מהקוד, הכותרת העליונה והתחתונה שלנו תופסות ארבעה רווחים במערך, מכיוון שהם ברוחב מלא. סרגלי הצד תופסים משבצת אחת כל אחד, בעוד שהתוכן לוקח שניים, ומפצלים למעשה את השורה האמצעית של הרשת לשלוש עמודות.

תצוגת CSS: רשת מוטבעת

שימוש בערך ה-inline-grid יאפשר לרשת שלך לשבת ליד אלמנטים אחרים, בדיוק כמו הערכים המוטבעים האחרים במדריך זה.

שימוש ב-CSS Display לעיצוב אתרים

מאפיין התצוגה של CSS מציע דרך שימושית להתאים את מבני רכיבי האתר מבלי לשנות סימון HTML. זה אידיאלי עבור אלה המשתמשים בפלטפורמות אספקת תוכן כמו Shopify או WordPress, אבל זה יכול להיות שימושי גם עבור עיצוב אתרים כללי.