אלמנטים ברמת הבלוק בדף אינטרנט מופיעים בסדר רציף. כדי לשפר את מראה הדף או את השימושיות שלו, אתה יכול לשנות את הסדר על ידי גלישת בלוקים, כולל תמונות, כך טקסט זורם סביב תמונות.
במונחי עיצוב אתרים, אפקט זה ידוע כצף התמונה. זה מושג עם נכס CSSלָצוּף, המאפשר לטקסט לזרום סביב התמונה מיושרת לשמאל לצד ימין שלה (או סביב תמונה מיושרת לימין לצד שמאל שלה).
התחל עם HTML
דוגמה זו מוסיפה תמונה בתחילת פיסקה (לפני הטקסט, אך לאחר הפתיחה
תָג). הנה סימון ה- HTML הראשוני:
הטקסט של הפסקה כאן. בדוגמה זו יש לנו תמונה של צילום ראש, כך שטקסט זה עשוי לתאר את האדם שצילם את הראש.
כברירת מחדל, הדף יוצג עם התמונה מעל הטקסט, מכיוון שתמונות הן אלמנטים ברמת הבלוק ב- HTML. המשמעות היא שהדפדפן מציג מעברי שורות לפני ואחרי אלמנט התמונה כברירת מחדל. כדי לשנות מראה ברירת מחדל זה באמצעות CSS, הוסף ערך מחלקה (שמאלה) לאלמנט התמונה שישמש וו אליו ניתן לחבר מאפיינים.
הטקסט של הפסקה כאן. בדוגמה זו יש לנו תמונה של צילום ראש, כך שטקסט זה עשוי לתאר את האדם שצילם את הראש.
שים לב שהמעמד הזה לא עושה דבר בפני עצמו. CSS ישיג את הסגנון הרצוי.
הוספת סגנונות CSS
הוסף כלל זה לאתר גיליון סגנונות:
.שמאלה {
לצוף: שמאלה;
ריפוד: 0 20px 20px 0;
}
סגנון זה צף כל דבר עם הכיתה שמאלה משמאל לדף ומוסיף מעט ריפוד מימין לתחתית התמונה כדי שהטקסט לא יתיישר כנגדו.
בדפדפן, התמונה תהיה מיושרת כעת לשמאל; הטקסט יופיע מימינו עם רווח בין השניים.
ערך הכיתה .שמאלה משמש כאן הוא שרירותי. אתה יכול לקרוא לזה כל דבר שתבחר כי הוא לא עושה כלום בפני עצמו. עם זאת, כדאי גם שלא כל ערך שתשתנה ב- CSS צריך לבוא לידי ביטוי ב- HTML.
דרכים אחרות להשיג סגנונות אלה
אתה יכול גם להוריד את ערך הכיתה מהתמונה ולעצב אותה בעזרת CSS על ידי כתיבת בורר ספציפי יותר. בדוגמה למטה, התמונה נמצאת בתוך חלוקה עם a תוכן עיקרי ערך כיתה.
הטקסט של הפסקה כאן. בדוגמה זו יש לנו תמונה של צילום ראש, כך שטקסט זה עשוי לתאר את האדם שצילם את הראש.
כדי לעצב תמונה זו, כתוב את CSS זה:
img תוכן עיקרי {
לצוף: שמאלה;
ריפוד: 0 20px 20px 0;
}
בתרחיש זה, התמונה מיושרת לצד שמאל, כשהטקסט צף סביבה כמו קודם, אך ללא ערך המחלקה הנוסף בסימון. פעולה זו בקנה מידה יכול לעזור ביצירת קובץ HTML קטן יותר, שיהיה קל יותר לניהול ויכול לשפר את הביצועים.
הימנע מסגנונות מוטבעים
לבסוף, תוכל להשתמש סגנונות מוטבעים:
הטקסט של הפסקה כאן. בדוגמה זו יש לנו תמונה של צילום ראש, כך שטקסט זה עשוי לתאר את האדם שצילם את הראש.
זה לא מומלץ, עם זאת, משום שהוא משלב את הסגנון של אלמנט עם הסימון המבני שלו. שיטות עבודה מומלצות מכתיבות כי סגנון ומבנה הדף נשארים נפרדים. הפרדה זו מועילה במיוחד כאשר עליך לשנות את פריסת הדף ולחפש גדלי מסך ומכשירים שונים עם אתר רספונסיבי.
שזירת סגנון הדף עם ה- HTML עושה מחבר שאילתות מדיה כדי להתאים את האתר שלך למסכים שונים הרבה יותר קשה.