Μόλις αρχίσετε να δημιουργείτε ιστοσελίδες με HTML, θα αρχίσετε να εργάζεστε με το μέγεθος. Για να φτιάξετε τον ιστότοπό σας με τον τρόπο που θέλετε να το αναζητήσετε, πιθανόν να ταιριάζει με ένα σχέδιο που έχετε δημιουργήσει εσείς ή κάποιος άλλος σχεδιαστής, θα θέλετε να αλλάξετε το μέγεθος του κειμένου σε αυτόν τον ιστότοπο καθώς και άλλα στοιχεία στη σελίδα. Για να γίνει αυτό, ίσως αρχίσετε να ψάχνετε μια ετικέτα "μεγέθους" HTML, αλλά θα το βρείτε γρήγορα λείπει.
Η ετικέτα μεγέθους HTML δεν υπάρχει σε HTML. Αντ 'αυτού, για να ορίσετε το μέγεθος των γραμματοσειρών, των εικόνων ή της διάταξης, θα πρέπει να χρησιμοποιείτε Φύλλα Στιγμιότυπων Στυλ. Στην πραγματικότητα, οποιαδήποτε οπτική αλλαγή που πρέπει να κάνετε στο κείμενο ενός ιστότοπου ή σε άλλο στοιχείο θα πρέπει να γίνεται από το CSS! Το HTML είναι μόνο για δομή.
Η πλησιέστερη ετικέτα σε μια ετικέτα μεγέθους HTML είναι η παλιά ετικέτα γραμματοσειράς, η οποία περιλαμβάνει πράγματι ένα χαρακτηριστικό μεγέθους. Προειδοποιήστε ότι αυτή η ετικέτα έχει καταργηθεί σε τρέχουσες εκδόσεις HTML και ενδέχεται να μην υποστηρίζεται από προγράμματα περιήγησης στο μέλλον! Δεν θέλετε να χρησιμοποιήσετε την ετικέτα γραμματοσειράς στο HTML σας! Αντ 'αυτού, θα πρέπει να μάθετε CSS για να διαχωρίσετε τα στοιχεία HTML και να σχεδιάσετε την ιστοσελίδα σας αναλόγως.
Μεγέθη γραμματοσειράς
Οι γραμματοσειρές είναι αναμφισβήτητα το πιο εύκολο να το μέγεθος με το CSS. Moreso από ό, τι ακριβώς το μέγεθος αυτού του κειμένου, με το CSS μπορείτε να είστε πιο συγκεκριμένοι σχετικά με την τυπογραφία του ιστοτόπου σας. Μπορείτε να ορίσετε το μέγεθος της γραμματοσειράς, το χρώμα, το περίβλημα, το βάρος, την κορυφή και άλλα. Με την ετικέτα γραμματοσειράς, μπορείτε να ορίσετε μόνο το μέγεθος και στη συνέχεια μόνο ως αριθμό σε σχέση με το προεπιλεγμένο μέγεθος γραμματοσειράς του προγράμματος περιήγησης που διαφέρει για κάθε πελάτη.
Για να ορίσετε την παράγραφο σας να έχει μέγεθος γραμματοσειράς 12pt, χρησιμοποιήστε την ιδιότητα στυλ μεγέθους γραμματοσειράς:
h3 {font-size = 24px; }}Αυτό το στυλ θα ορίζει το μέγεθος γραμματοσειράς των στοιχείων headiing3 24 εικονοστοιχεία. Θα μπορούσατε να προσθέσετε αυτό σε ένα εξωτερικό φύλλο στυλ και όλα τα H3 του ιστότοπού σας θα χρησιμοποιούσαν αυτό το στυλ.
Αν θέλετε να προσθέσετε επιπλέον τυπογραφικά στυλ στο κείμενό σας, μπορείτε να τα προσθέσετε σε αυτόν τον κανόνα CSS:
h3 {γραμματοσειρά-μέγεθος: 24px; χρώμα: # 000; γραμματοσειρά-βάρος: κανονική; }}Αυτό δεν θα καθόριζε μόνο το μέγεθος της γραμματοσειράς για τα αρχεία H3, αλλά θα έδινε και το χρώμα σε μαύρο χρώμα (αυτό σημαίνει ο κωδικός hex του # 000) και θα έδινε το βάρος σε "κανονικό". Από προεπιλογή, τα προγράμματα περιήγησης προβάλλουν τις επικεφαλίδες 1-6 ως έντονα κείμενα, επομένως αυτό το στυλ θα παρακάμψει αυτό το προεπιλεγμένο και ουσιαστικά "μη τολμηρό" κείμενο.
Μεγέθη εικόνας
Οι εικόνες μπορεί να είναι δύσκολο να ορίσετε μεγέθη επειδή μπορείτε πραγματικά να χρησιμοποιήσετε το πρόγραμμα περιήγησης για να αλλάξετε το μέγεθος της εικόνας. Φυσικά, η αλλαγή μεγέθους των εικόνων με το πρόγραμμα περιήγησης είναι μια κακή ιδέα επειδή προκαλεί αργότερα φόρτωση σελίδων και οι φυλλομετρητές συχνά κάνουν κακή εργασία αλλαγής μεγέθους, κάνοντας τις εικόνες να φαίνονται κακές. Αντ 'αυτού, θα πρέπει να χρησιμοποιήσετε το λογισμικό γραφικών για να αλλάξετε το μέγεθος των εικόνων και στη συνέχεια να γράψετε τα πραγματικά μεγέθη τους στην HTML ιστοσελίδα σας.
Σε αντίθεση με τις γραμματοσειρές, οι εικόνες μπορούν να χρησιμοποιήσουν είτε HTML είτε CSS για να καθορίσουν το μέγεθος. Ορίζετε το πλάτος της εικόνας και το ύψος. Όταν χρησιμοποιείτε HTML, μπορείτε να ορίσετε μόνο το μέγεθος της εικόνας σε εικονοστοιχεία. Αν χρησιμοποιείτε CSS, μπορείτε να χρησιμοποιήσετε άλλες μετρήσεις, συμπεριλαμβανομένων των ιντσών, εκατοστών και ποσοστών. Αυτή η τελευταία τιμή, τα ποσοστά, είναι πολύ χρήσιμη όταν οι εικόνες σας πρέπει να είναι υγρές, όπως σε έναν ανταποκρινόμενο ιστότοπο.
Για να ορίσετε το μέγεθος της εικόνας χρησιμοποιώντας HTML, χρησιμοποιήστε τα χαρακτηριστικά ύψους και πλάτους της ετικέτας img. Για παράδειγμα, αυτή η εικόνα θα είναι 400x400 pixels τετράγωνο:
ύψος = "400" πλάτος = "400" alt = "εικόνα" />Για να ορίσετε το μέγεθος της εικόνας χρησιμοποιώντας το CSS, χρησιμοποιήστε τις ιδιότητες στυλ ύψους και πλάτους. Εδώ είναι η ίδια εικόνα, χρησιμοποιώντας το CSS για να ορίσετε το μέγεθος:
style = "ύψος: 400px · πλάτος: 400px;" alt = "εικόνα" />Μεγέθη διάταξης
Το πιο συνηθισμένο μέγεθος που ορίζετε σε μια διάταξη είναι το πλάτος και το πρώτο πράγμα που θα πρέπει να αποφασίσετε είναι εάν θα χρησιμοποιήσετε μια διάταξη σταθερού πλάτους ή έναν ανταποκρινόμενο ιστότοπο. Με άλλα λόγια, πρόκειται να ορίσετε το πλάτος ως ακριβές αριθμό pixel, ίντσες ή σημεία; Ή μήπως θα ρυθμίσετε το εύρος διάταξης ώστε να είναι ευέλικτο χρησιμοποιώντας ems ή ποσοστά; Για να ορίσετε το μέγεθος της διάταξής σας, χρησιμοποιείτε ιδιότητες CSS πλάτους και ύψους, ακριβώς όπως θα κάνατε σε μια εικόνα.
Σταθερό πλάτος:
style = "width: 600px;">Πλάτος υγρού:
style = "width: 80%;">Όταν αποφασίζετε για τα πλάτη της διάταξης σας, πρέπει να έχετε κατά νου τα διαφορετικά πλάτη του προγράμματος περιήγησης που χρησιμοποιούν οι αναγνώστες σας και τις διάφορες συσκευές που θα χρησιμοποιήσουν επίσης. Αυτός είναι ο λόγος για τον οποίο οι ανταποκρίσιμοι ιστότοποι , οι οποίοι μπορούν να αλλάξουν τη διάταξή τους και το μέγεθος βάσει διαφορετικών συσκευών και μεγεθών οθόνης, είναι σήμερα το καλύτερο πρακτικό πρότυπο.