תמונות מרכזיות, טקסט וחסימה בעת בניית אתרים
אם אתה לומד איך לבנות אתרי אינטרנט , אחד הטריקים הנפוצים ביותר שאתה צריך לשלוט הוא איך מרכז פריטים בחלון הדפדפן. זה יכול להיות מרוכז תמונה על הדף, או שזה יכול להיות מרכז הצדקה טקסט כמו כותרות כחלק העיצוב.
הדרך הנכונה להשיג את המראה החזותי של תמונות או טקסט מרוכז או אפילו את כל דף האינטרנט שלך היא באמצעות גיליונות סגנון מדורגים (CSS) . רוב המאפיינים עבור המרכוז כבר ב- CSS מאז גירסה 1.0, והם עובדים נהדר עם CSS3 ודפדפני אינטרנט מודרניים.
כמו היבטים רבים של עיצוב אתרים, ישנן דרכים רבות להשתמש ב- CSS למרכזי אלמנטים בדף אינטרנט. בואו נסתכל בכמה דרכים שונות להשתמש ב- CSS כדי להשיג את המראה החזותי הזה.
סקירה כללית על השימוש ב- CSS אלמנטים מרכזיים ב- HTML
מרכז עם CSS יכול להיות אתגר עבור מעצבי אינטרנט מתחילים כי יש כל כך הרבה דרכים שונות כדי להשיג את זה סגנון חזותי אחד. בעוד מגוון של שיטות עשוי להיות נחמד או מתובל מפתחי אינטרנט שיודעים כי לא כל טכניקות עבודה על כל אלמנט, זה יכול להיות מאתגר מאוד עבור אנשי מקצוע חדשים באינטרנט מאז מגוון רחב של שיטות אומר שהם צריכים לדעת מתי להשתמש בגישה. הדבר הטוב ביותר לעשות הוא להשיג הבנה של כמה גישות. כאשר אתה מתחיל להשתמש בהם, תוכלו ללמוד איזו שיטה פועלת הכי טוב שבו מקרים.
ברמה גבוהה, ניתן להשתמש ב- CSS כדי:
- טקסט מרכז
- מרכז אלמנט ברמה (כמו חלוקה)
- מרכז תמונה
- אנכית מרכז בלוק או תמונה
לפני שנים רבות (רבות), מעצבי אתרים יכולים להשתמש באלמנט
מרכז טקסט עם CSS
הדבר הכי קל למרכז על דף אינטרנט הוא טקסט. יש רק נכס אחד בסגנון שאתה צריך לדעת לעשות את זה: ליישר טקסט. קח את סגנון CSS להלן, לדוגמה:
p.center {text-align: center; }
עם שורה זו של CSS, כל הפסקה שנכתבה עם המעמד במרכז תהיה מרוכזת אופקית בתוך אלמנט ההורה שלה. לדוגמה, אם הפיסקה הייתה בתוך חלוקה, כלומר זה היה ילד של חלוקה זו, זה יהיה מרוכז אופקית בתוך
הנה דוגמה למחלקה זו שחלה במסמך HTML:
טקסט זה מרוכז.
בעת כתיבת טקסט עם המאפיין ליישר טקסט, זכור שהוא ימוקם בתוך הרכיב המכיל שלו ולא בהכרח ימוקם בתוך הדף עצמו. כמו כן זכור כי טקסט מוצדק במרכז יכול להיות קשה לקריאה עבור בלוקים גדולים של תוכן, אז להשתמש בסגנון זה במשורה. כותרות וקוביות קטנות של טקסט, כמו טקסט של טיזר עבור מאמר או תוכן אחר, הן לעתים קרובות קלות לקריאה וקנס כאשר הן ממוקדות, אך גושי טקסט גדולים יותר, כמו המאמר המלא עצמו, יהיה מאתגר לצרוך אם התוכן היה מלא במרכז מוּצדָק. זכור, הקריאות היא תמיד המפתח כשמדובר טקסט באתר!
בלוקים של תוכן עם CSS
בלוקים הם כל האלמנטים בדף שלך שיש להם רוחב מוגדר והם נקבעים כמרכיב ברמת הבלוק. לעתים קרובות, בלוקים אלה נוצרים באמצעות אלמנט HTML
div.center {
שוליים: 0 אוטומטי;
width: 80em;
}
קיצור זה CSS עבור המאפיין השוליים יהיה להגדיר את השוליים העליונים והתחתונים לערך של 0, בעוד שמאל וימין ישתמשו "אוטומטי". זה בעצם לוקח את כל שטח זמין ומחלק אותו באופן שווה בין שני הצדדים של חלון התצוגה, למעשה המרכוז את האלמנט בדף.
כאן הוא מוחל ב- HTML:
אבל הטקסט שבתוכו נשאר מיושר.
כל עוד הבלוק שלך יש רוחב מוגדר, זה יהיה במרכז עצמו בתוך הרכיב המכיל. טקסט הכלול בבלוק זה לא יהיה מרוכז בתוכו, אך יישאר מוצדק. זה טקסט becaus נשאר מוצדק ברירת המחדל בדפדפני האינטרנט. אם אתה רוצה את הטקסט במרכז, כמו גם, אתה יכול להשתמש בתכונת ליישר טקסט כיסינו קודם לכן בשילוב עם שיטה זו למרכז החטיבה.
מרכז תמונות עם CSS
בעוד שרוב הדפדפנים יציגו תמונות הממוקדות באמצעות אותו מאפיין ליישר טקסט שכבר הסתכלנו עליו עבור הפסקה, זה לא רעיון טוב להסתמך על הטכניקה כפי שהיא לא מומלצת על ידי W3C . מכיוון שזה לא מומלץ, תמיד יש סיכוי כי גירסאות עתידיות של דפדפנים יכול לבחור להתעלם שיטה זו.
במקום להשתמש ביישור טקסט כדי למרכז תמונה, עליך להודיע לדפדפן באופן מפורש שהתמונה היא רכיב ברמת הבלוק. בדרך זו, אתה יכול למרכז זה כמו שאתה עושה כל בלוק אחר. הנה CSS כדי לגרום לזה לקרות:
img.center {
בלוק תצוגה;
שוליים-שמאל: אוטומטי;
margin-right: auto;
}
והנה HTML כי עבור התמונה שאנחנו רוצים להיות במרכז:
ניתן גם למקד אובייקטים באמצעות CSS ב- line (ראה להלן), אך גישה זו אינה מומלצת משום שהיא מוסיפה סגנונות חזותיים לסימון ה- HTML שלך. זכור, אנחנו רוצים להפריד בין סגנון ומבנה, ולכן הוספת סגנונות CSS לקוד ה- HTML שלך עם הפסקה כי ההפרדה, ובתור שכזה, יש להימנע ממנה בכל הזדמנות אפשרית.
אלמנטים מרכזיים עם CSS
אובייקטים מרכזיים אנכית תמיד היה מאתגר בעיצוב אתרים, אבל עם שחרורו של CSS Flexible Box Layout Module ב CSS3, יש עכשיו דרך לעשות את זה.
יישור אנכי פועל באופן דומה ליישור אופקי המכוסה לעיל. המאפיין CSS מאופשר אנכי עם הערך האמצעי.
.vcenter {
An University An University
}
החיסרון לגישה זו היא שלא כל הדפדפנים תומכים ב- CSS FlexBox, אם כי יותר ויותר מגיעים מסביב לפריסת CSS חדשה זו! למעשה, כל הדפדפנים המודרניים כיום תומכים בסגנון CSS זה. משמעות הדבר היא כי רק את החששות עם Flexbox יהיה הרבה יותר ישן גרסה הדפדפן.
אם אתה נתקל בבעיות עם דפדפנים ישנים, ה- W3C ממליץ למקד טקסט אנכית במיכל בשיטה הבאה:
- הצב את האלמנטים להיות מרוכזים בתוך אלמנט המכיל, כגון div.
- הגדר גובה מינימלי על הרכיב המכיל.
- להכריז כי המכיל רכיב כמו תא בטבלה.
- הגדר את היישור האנכי ל"מרכז ".
לדוגמה, הנה CSS:
.vcenter {
min-height: 12em;
תצוגה: תא-תא;
An University An University
}
והנה HTML:
טקסט זה מרוכז אנכית בתיבה.
אנכי מרכזים וגירסאות ישנות יותר של
יש כמה דרכים לאלץ את Internet Explorer (IE) למרכז ולאחר מכן להשתמש בהערות מותנות, כך שרק IE רואה את הסגנונות, אבל הם קצת verbose ומכוער. החדשות הטובות הן כי עם ההחלטה האחרונה של מיקרוסופט להפיל תמיכה בגירסאות ישנות יותר של IE, הדפדפנים הבלתי תומכים האלה אמורים לצאת בקרוב, כך שיהיה קל יותר עבור מעצבי אתרים להשתמש בגישות פריסה מודרניות כגון CSS FlexBox אשר יהפכו את כל פריסת CSS, לא רק מרכז, יותר קל לכל מעצבי אתרים.