Ένα στοιχείο σε επίπεδο μπλοκ σε ένα έγγραφο HTML (π.χ. μια ιστοσελίδα) εμφανίζεται με διαδοχική σειρά. Για να τροποποιήσετε την παραγγελία για να κάνετε την σελίδα πιο ελκυστική ή για να βελτιώσετε τη χρησιμότητά της, θα πρέπει να τυλίξετε μπλοκ, συμπεριλαμβανομένων των εικόνων, έτσι ώστε το κείμενο αυτής της σελίδας να ρέει γύρω της.
Σε όρους ιστού, αυτό το φαινόμενο είναι γνωστό ως "κυμαινόμενο" στην εικόνα. Αυτό το στυλ επιτυγχάνεται με την ιδιότητα CSS για "float". Αυτή η ιδιότητα επιτρέπει την ροή κειμένου γύρω από την αριστερά ευθυγραμμισμένη εικόνα στη δεξιά πλευρά της. Ή γύρω από μια δεξιά ευθυγραμμισμένη εικόνα στην αριστερή της πλευρά.
Ξεκινήστε με HTML
Το πρώτο πράγμα που θα πρέπει να κάνετε είναι να έχετε κάποια HTML με την οποία θα εργαστείτε. Για παράδειγμα, θα γράψουμε μια παράγραφο κειμένου και θα προσθέσουμε μια εικόνα στην αρχή της παραγράφου (πριν το κείμενο, αλλά μετά το άνοιγμα
ετικέτα). Εδώ φαίνεται αυτό το HTML markup:
Το κείμενο της παραγράφου πηγαίνει εδώ. Σε αυτό το παράδειγμα, έχουμε μια εικόνα μιας κεφαλίδας φωτογραφίας, οπότε αυτό το κείμενο θα είναι πιθανότατα για το πρόσωπο για το οποίο είναι το headshot.
Από προεπιλογή, η ιστοσελίδα μας θα εμφανίζεται με την εικόνα πάνω από το κείμενο, επειδή οι εικόνες είναι στοιχεία σε επίπεδο μπλοκ σε HTML. Αυτό σημαίνει ότι το πρόγραμμα περιήγησης εμφανίζει διακεκομμένες γραμμές πριν και μετά από το στοιχείο εικόνας από προεπιλογή. Θα αλλάξουμε αυτήν την προεπιλεγμένη εμφάνιση γυρίζοντας στο CSS. Πρώτον, ωστόσο, θα προσθέσουμε μια τιμή κλάσης στο στοιχείο εικόνας μας. Αυτή η κατηγορία θα λειτουργήσει ως "γάντζο" που θα χρησιμοποιήσουμε αργότερα στο CSS.
Το κείμενο της παραγράφου πηγαίνει εδώ. Σε αυτό το παράδειγμα, έχουμε μια εικόνα μιας κεφαλίδας φωτογραφίας, οπότε αυτό το κείμενο θα είναι πιθανότατα για το πρόσωπο για το οποίο είναι το headshot.
Σημειώστε ότι αυτή η κατηγορία "αριστερά" δεν κάνει τίποτα από μόνο του. Για να επιτύχουμε το επιθυμητό στυλ, πρέπει να χρησιμοποιήσουμε το CSS στη συνέχεια.
Στυλ CSS
Με το HTML στη θέση μας (συμπεριλαμβανομένου του χαρακτηριστικού κατηγορίας "αριστερά"), μπορούμε τώρα να στραφούμε στο CSS. Θα προσθέσαμε έναν κανόνα στο φύλλο στυλ που θα επιπλέει αυτή την εικόνα και προσθέτουμε επίσης ένα μικρό παραπέτασμα δίπλα σε αυτό, έτσι ώστε το κείμενο που τελικά θα τυλίξει γύρω από την εικόνα δεν θα προσκρούει σε αυτό πολύ προσεκτικά. Εδώ είναι το CSS που μπορείτε να γράψετε:
.left { float: αριστερά. συμπλήρωμα: 0 20px 20px 0;}
Αυτό το στυλ επιπλέει αυτή την εικόνα στα αριστερά και προσθέτει ένα μικρό παραπέτασμα (χρησιμοποιώντας κάποια συντομογραφία CSS) στο δεξιό και το κάτω μέρος της εικόνας. Εάν έχετε ελέγξει τη σελίδα που περιέχει αυτήν την HTML σε ένα πρόγραμμα περιήγησης, η εικόνα θα ευθυγραμμίζεται τώρα προς τα αριστερά και το κείμενο της παραγράφου θα φαίνεται στα δεξιά της, με ένα κατάλληλο διάστημα μεταξύ των δύο. Σημειώστε ότι η τιμή κλάσης του "αριστερού" που χρησιμοποιήσαμε είναι αυθαίρετη. Θα μπορούσαμε να το λέγαμε τίποτα επειδή ο όρος "αριστερά" δεν κάνει τίποτα από μόνο του. Οποιοσδήποτε όρος χρησιμοποιείτε πρέπει να έχει ένα χαρακτηριστικό κλάσης στην HTML που λειτουργεί με ένα πραγματικό στυλ CSS που υπαγορεύει τις οπτικές αλλαγές που θέλετε να κάνετε. Αυτή η προσέγγιση που δίνει στο στοιχείο εικόνας ένα χαρακτηριστικό κλάσης και στη συνέχεια χρησιμοποιώντας ένα γενικό στυλ CSS που επιπλέει το στοιχείο είναι μόνο ένας τρόπος που θα μπορούσατε να ολοκληρώσετε αυτήν την εμφάνιση "αριστερά ευθυγραμμισμένη εικόνα". Θα μπορούσατε επίσης να αφαιρέσετε την αξία της κλάσης από την εικόνα και να την στυλίσατε με το CSS γράφοντας έναν πιο συγκεκριμένο επιλογέα. Για παράδειγμα, ας δούμε ένα παράδειγμα όπου η εικόνα αυτή βρίσκεται μέσα σε ένα τμήμα με μια τιμή κλάσης "κύριου περιεχομένου". Για να διαμορφώσετε αυτήν την εικόνα, θα μπορούσατε να γράψετε αυτό το CSS: .main-content img { float: αριστερά. συμπλήρωμα: 0 20px 20px 0;}
Σε αυτό το σενάριο, η εικόνα μας θα ευθυγραμμίζεται προς τα αριστερά, με το κείμενο να επιπλέει γύρω του όπως πριν, αλλά δεν χρειαζόταν να προσθέσουμε επιπλέον αξία κλάσης στο markup μας. Κάνοντας αυτό σε κλίμακα μπορεί να βοηθήσει στη δημιουργία ενός μικρότερου αρχείου HTML, το οποίο θα είναι πιο εύκολο στη διαχείριση και μπορεί επίσης να συμβάλει στη βελτίωση της απόδοσης. Τέλος, μπορείτε να προσθέσετε ακόμη και τα στυλ απευθείας στο HTML markup σας, όπως αυτό:
Αυτή η μέθοδος ονομάζεται "inline styles". Δεν είναι σκόπιμο επειδή συνδυάζει το στυλ ενός στοιχείου με τη δομική σήμανση του. Οι βέλτιστες πρακτικές του διαδικτύου υπαγορεύουν ότι το στυλ και η δομή μιας σελίδας πρέπει να παραμείνουν χωριστά. Αυτός ο διαχωρισμός είναι ιδιαίτερα χρήσιμος όταν η σελίδα σας χρειάζεται να αλλάξει τη διάταξη και να αναζητήσει διαφορετικά μεγέθη οθόνης και συσκευές με έναν ανταποκρινόμενο ιστότοπο. Έχοντας το στυλ της σελίδας που είναι συνυφασμένη με το HTML, θα είναι πολύ πιο δύσκολο να δημιουργήσετε ερωτήματα μέσων που θα προσαρμόσουν την εμφάνιση του ιστότοπού σας όπως απαιτείται για αυτές τις διαφορετικές οθόνες. Εναλλακτικοί τρόποι για την επίτευξη αυτών των μορφών
Το κείμενο της παραγράφου πηγαίνει εδώ. Σε αυτό το παράδειγμα, έχουμε μια εικόνα μιας κεφαλίδας φωτογραφίας, οπότε αυτό το κείμενο θα είναι πιθανότατα για το πρόσωπο για το οποίο είναι το headshot. Αποφύγετε Inline Styles
Το κείμενο της παραγράφου πηγαίνει εδώ. Σε αυτό το παράδειγμα, έχουμε μια εικόνα μιας κεφαλίδας φωτογραφίας, οπότε αυτό το κείμενο θα είναι πιθανότατα για το πρόσωπο για το οποίο είναι το headshot.
