Home-theater-designers
מאפיין התצוגה של CSS הוא כלי רב עוצמה עבור מעצבי אתרים. זה מאפשר לך לשלוט בפריסות אלמנטים באתר עם סגנון מינימלי, עם ערכים פשוטים שקל לזכור.
אבל מה עושה כל אחד מהערכים הללו, וכיצד הם פועלים? בוא נגלה.
איפור של סרטון היום
מהו מאפיין התצוגה של CSS?
מאפיין התצוגה מציין את סוג עיבוד התיבה המשמש עבור רכיבי HTML בדף אינטרנט. זה גורם למגוון התנהגויות, כולל לא להופיע בכלל. אתה יכול לערוך ערכים אלה באתר האינטרנט שלך דרך גיליון הסגנונות או הקטעים המתאימים להתאמה אישית של CSS ב כלי CMS כמו וורדפרס .
שמור על רכיבים בשורה אחת עם תצוגת 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: חסום
במובנים מסוימים, ערך בלוק התצוגה הוא ההפך מהערך המוטבע. ניתן להגדיר ממדי גובה ורוחב, ואלמנטים בעלי ערך זה אינם יכולים לשבת אחד ליד השני. הדוגמה שלמעלה מציגה שני אלמנטים עם ערך הבלוק. אלמנטים עם ערך הבלוק מציג ברירת מחדל ברוחב המרבי של רכיב האב שלהם.
<!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>בניגוד לדוגמא בסגנון המוטבע, דוגמה זו של ערך בלוק תצוגה מפצלת את שורות הטקסט לשתי שורות שונות. ערך ה-fit-content width קובע את רוחב האלמנטים כך שיתאים לאורך הטקסט.
רכיבי 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: flex
Display flex הוא אחד ממצבי פריסת ה-CSS החדשים ביותר. כאשר display flex נמצא ברכיב אב, כל האלמנטים בתוכו הופכים לרכיבי CSS גמישים. אלמנט האב בתצורה זו הוא flexbox.
Flexboxes יוצרים עיצובים רספונסיביים עם משתנים מוגדרים מראש, כמו רוחב וגובה. זה שווה ללמוד על HTML/CSS flexboxes לפני שתתחיל.
<!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> מיקום Flexboxes זה לצד זה עם תצוגה: inline-flex
Inline-flex מתנהג בדיוק כמו פלקסבוקס רגיל, עם היתרון הנוסף בכך שהאלמנט יכול לשבת ליד אלמנטים אחרים.
<!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: תא טבלה
אלמנטים עם ערך תא טבלה פועלים כתאים בודדים בטבלה הראשית. וערכי הטבלה-עמודה ושורה-טבלה מקבצים תאים בודדים אלה יחד.
תצוגת 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: טבלה מוטבעת
כמו שאר הווריאנטים המוטבעים שכבר הסתכלנו עליהם, Inline-table מאפשר למקם רכיבי טבלה ליד אלמנטים אחרים.
בנה פריסות אתר רספונסיביות עם תצוגת 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>
רשתות דומות ל-flexboxes, רק שהן יכולות למקם אלמנטים מתחת ולצד זה. נכס הרשת-תבנית-שטחים חיוני לשם כך. כפי שניתן לראות מהקוד, הכותרת העליונה והתחתונה שלנו תופסות ארבעה רווחים במערך, מכיוון שהם ברוחב מלא. סרגלי הצד תופסים משבצת אחת כל אחד, בעוד שהתוכן לוקח שניים, ובכך מפצל למעשה את השורה האמצעית של הרשת לשלוש עמודות.
תצוגת CSS: רשת מוטבעת
שימוש בערך ה-inline-grid יאפשר לרשת שלך לשבת ליד אלמנטים אחרים, בדיוק כמו הערכים המוטבעים האחרים במדריך זה.
כיצד לשחק משחקי Windows XP ב- Windows 10
שימוש ב-CSS Display לעיצוב אתרים
מאפיין התצוגה של CSS מציע דרך שימושית להתאים את מבני רכיבי האתר מבלי לשנות סימון HTML. זה אידיאלי עבור אלה המשתמשים בפלטפורמות אספקת תוכן כמו Shopify או WordPress, אבל זה יכול להיות שימושי גם עבור עיצוב אתרים כללי.