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