Καλός σχεδιασμός ιστοσελίδων αφορά συχνά την καλή τυπογραφία. Δεδομένου ότι μεγάλο μέρος του περιεχομένου μιας ιστοσελίδας παρουσιάζεται ως κείμενο, το να μπορείς να διαμορφώσεις αυτό το κείμενο τόσο ελκυστικό όσο και αποτελεσματικό είναι μια σημαντική ικανότητα να έχεις ως σχεδιαστής ιστοσελίδων. Δυστυχώς, δεν έχουμε το ίδιο επίπεδο τυπογραφικού ελέγχου στο διαδίκτυο με αυτό που έχουμε στην έντυπη μορφή. Αυτό σημαίνει ότι δεν μπορούμε πάντα να προσθέτουμε αξιόπιστα κείμενο σε έναν ιστότοπο με τον ίδιο τρόπο που θα μπορούσαμε να το κάνουμε σε έντυπη μορφή.
Ένα κοινό στυλ παραγράφου που βλέπετε συχνά σε έντυπη μορφή (και το οποίο μπορούμε να αναδημιουργήσουμε στο διαδίκτυο) είναι όπου η πρώτη γραμμή αυτής της παραγράφου είναι εσοχή χώρο καρτελών. Αυτό επιτρέπει στους αναγνώστες να δουν πού ξεκινά μια παράγραφος και τελειώνει μια άλλη.
Δεν βλέπετε αυτό το οπτικό στυλ τόσο στις ιστοσελίδες, επειδή τα προγράμματα περιήγησης, από προεπιλογή, εμφανίζουν παραγράφους με κενό διάστημα από κάτω τους ως τρόπος να δείξουμε πού ξεκινά το ένα και το άλλο ξεκινά, αλλά αν θέλετε να σχεδιάσετε μια σελίδα για να το έχετε εμπνευσμένη από την εκτύπωση
στυλ εσοχής στις παραγράφους, μπορείτε να το κάνετε με το κείμενο-εσοχή ιδιοκτησία στυλ.Η σύνταξη για αυτήν την ιδιότητα είναι απλή. Να πώς θα προσθέσετε μια εσοχή κειμένου σε όλες τις παραγράφους ενός εγγράφου.
Π {
κείμενο-εσοχή: 2em;
}
Προσαρμογή των εσοχών
Ένας τρόπος με τον οποίο μπορείτε να καθορίσετε ακριβώς τις παραγράφους για εσοχή, μπορείτε να προσθέσετε μια κλάση στις παραγράφους που θέλετε να εσοχή, αλλά αυτό απαιτεί να επεξεργαστείτε κάθε παράγραφο για να προσθέσετε μια κλάση σε αυτήν. Αυτό είναι αναποτελεσματικό και δεν ακολουθεί Κωδικοποίηση HTML βέλτιστες πρακτικές.
Αντ 'αυτού, θα πρέπει να λάβετε υπόψη όταν εισάγετε παραγράφους. Εισαγάγετε παραγράφους που ακολουθούν άμεσα άλλη παράγραφο. Για να το κάνετε αυτό, μπορείτε να χρησιμοποιήσετε τον παρακείμενο επιλογέα αμφιθαλών. Με αυτόν τον επιλογέα, επιλέγετε κάθε παράγραφο που προηγείται αμέσως από μια άλλη παράγραφο.
p + p {
κείμενο-εσοχή: 2em;
}
Δεδομένου ότι εισάγετε την πρώτη γραμμή, πρέπει επίσης να βεβαιωθείτε ότι οι παράγραφοι σας δεν έχουν επιπλέον χώρο μεταξύ τους (που είναι η προεπιλογή του προγράμματος περιήγησης). Στυλιστικά, θα πρέπει είτε να έχετε κενό μεταξύ παραγράφων ή εσοχή στην πρώτη γραμμή, αλλά όχι και τα δύο.
Π {
margin-bottom: 0;
επένδυση-κάτω: 0;
}
p + p {
margin-top: 0;
επένδυση: 0;
}
Αρνητικές εσοχές
Μπορείτε επίσης να χρησιμοποιήσετε το κείμενο-εσοχή ιδιότητα, μαζί με μια αρνητική τιμή, να προκαλέσει την έναρξη μιας γραμμής προς τα αριστερά σε αντίθεση με τη δεξιά, όπως μια κανονική εσοχή. Μπορείτε να το κάνετε αυτό εάν μια γραμμή αρχίζει με εισαγωγικό έτσι ώστε ο χαρακτήρας προσφοράς να εμφανίζεται στο ελαφρύ περιθώριο στα αριστερά της παραγράφου και τα ίδια τα γράμματα αποτελούν ακόμα μια ωραία αριστερά ευθυγραμμία.
Πείτε, για παράδειγμα, ότι έχετε μια παράγραφο που είναι απόγονος ενός blockquote και θέλετε να έχει αρνητική εσοχή. Θα μπορούσατε να γράψετε αυτό το CSS:
μπλοκ προσφορά
κείμενο-εσοχή: -.5em;
}
Αυτό θα έδινε στην αρχή της παραγράφου, η οποία πιθανώς περιλαμβάνει τον εισαγωγικό χαρακτήρα, να μετακινηθεί ελαφρώς προς τα αριστερά για να δημιουργήσει κρεμαστά σημεία.
Όσον αφορά τα περιθώρια και τα μαξιλάρια
Πολλές φορές στο σχεδιασμό ιστοσελίδων, χρησιμοποιείτε τιμές περιθωρίου ή γεμίσματος για να μετακινήσετε στοιχεία και να δημιουργήσετε κενό διάστημα. Ωστόσο, αυτές οι ιδιότητες δεν θα λειτουργήσουν για να επιτύχουν την εσοχή της παραγράφου. Εάν εφαρμόσετε οποιαδήποτε από αυτές τις τιμές στην παράγραφο, ολόκληρο το κείμενο αυτής της παραγράφου, συμπεριλαμβανομένης κάθε γραμμής, θα βρίσκεται σε απόσταση αντί για την πρώτη γραμμή.