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