Saltar al contenido

Πώς να εσοχή παραγράφων με CSS

18 de abril de 2021

Ο καλός σχεδιασμός ιστοσελίδων αφορά συχνά την καλή τυπογραφία. Δεδομένου ότι μεγάλο μέρος του περιεχομένου μιας ιστοσελίδας παρουσιάζεται ως κείμενο, το να μπορείς να διαμορφώσεις αυτό το κείμενο τόσο ελκυστικό όσο και αποτελεσματικό είναι μια σημαντική ικανότητα να έχεις ως σχεδιαστής ιστοσελίδων. Δυστυχώς, δεν έχουμε το ίδιο επίπεδο τυπογραφικού ελέγχου στο διαδίκτυο με αυτό που έχουμε στην έντυπη μορφή. Αυτό σημαίνει ότι δεν μπορούμε πάντα να στυλ στυλ κειμένου σε έναν ιστότοπο με τον ίδιο τρόπο που θα μπορούσαμε να το κάνουμε σε έντυπο. Ένα κοινό στυλ παραγράφου που βλέπετε συχνά σε έντυπη μορφή (και το οποίο μπορούμε να αναδημιουργήσουμε στο διαδίκτυο) είναι όπου η πρώτη γραμμή αυτής της παραγράφου είναι εσοχή με ένα κενό διάστημα. Αυτό επιτρέπει στους αναγνώστες να δουν πού ξεκινά μια παράγραφος και τελειώνει μια άλλη. Δεν βλέπετε αυτό το οπτικό στυλ τόσο στις ιστοσελίδες, επειδή τα προγράμματα περιήγησης, από προεπιλογή, εμφανίζουν παραγράφους με χώρο κάτω από αυτές ως τρόπο για να δείξει πού ξεκινά το ένα και το άλλο ξεκινά, αλλά αν θέλετε να μορφοποιήσετε μια σελίδα για να έχετε αυτήν την εκτύπωση- εμπνευσμένο στυλ εσοχής στις παραγράφους, μπορείτε να το κάνετε με το κείμενο-εσοχή ιδιοκτησία στυλ. Η σύνταξη για αυτήν την ιδιότητα είναι απλή. Να πώς θα προσθέσετε μια εσοχή κειμένου σε όλες τις παραγράφους ενός εγγράφου. Π {
κείμενο-εσοχή: 2em;
}

Προσαρμογή των εσοχών

Με έναν τρόπο που μπορείτε να καθορίσετε ακριβώς τις παραγράφους για να εσοχή, μπορείτε να προσθέσετε μια κλάση στις παραγράφους που θέλετε να εσοχή, αλλά αυτό απαιτεί να επεξεργαστείτε κάθε παράγραφο για να προσθέσετε μια κλάση σε αυτήν. Αυτό είναι αναποτελεσματικό και δεν ακολουθεί τις βέλτιστες πρακτικές κωδικοποίησης HTML. Αντ ‘αυτού, θα πρέπει να λάβετε υπόψη κατά την εσοχή παραγράφων. Εισαγάγετε παραγράφους που ακολουθούν άμεσα άλλη παράγραφο. Για να το κάνετε αυτό, μπορείτε να χρησιμοποιήσετε τον παρακείμενο επιλογέα αμφιθαλών. Με αυτόν τον επιλογέα, επιλέγετε κάθε παράγραφο που προηγείται αμέσως από μια άλλη παράγραφο. p + p {
κείμενο-εσοχή: 2em;
}

Δεδομένου ότι εισάγετε την πρώτη γραμμή, θα πρέπει επίσης να βεβαιωθείτε ότι οι παράγραφοι σας δεν έχουν επιπλέον χώρο μεταξύ τους (που είναι η προεπιλογή του προγράμματος περιήγησης). Στυλιστικά, θα πρέπει είτε να έχετε κενό μεταξύ παραγράφων ή εσοχή στην πρώτη γραμμή, αλλά όχι και τα δύο. Π {
margin-bottom: 0;
επένδυση-κάτω: 0;
}
p + p {
margin-top: 0;
επένδυση: 0;
}

Αρνητικές εσοχές

Μπορείτε επίσης να χρησιμοποιήσετε το κείμενο-εσοχή ιδιότητα, μαζί με μια αρνητική τιμή, να προκαλέσει την έναρξη μιας γραμμής προς τα αριστερά σε αντίθεση με τη δεξιά σαν μια κανονική εσοχή. Μπορείτε να το κάνετε αυτό εάν μια γραμμή ξεκινά με ένα εισαγωγικό έτσι ώστε ο χαρακτήρας των εισαγωγών να εμφανίζεται στο μικρό περιθώριο στα αριστερά της παραγράφου και τα ίδια τα γράμματα να σχηματίζουν μια ωραία αριστερή στοίχιση. Πείτε, για παράδειγμα, ότι έχετε μια παράγραφο που είναι απόγονος ενός blockquote και θέλετε να έχει αρνητική εσοχή. Θα μπορούσατε να γράψετε αυτό το CSS: blockquote p {
κείμενο-εσοχή: -.5em;
}

Αυτό θα δώσει στην αρχή της παραγράφου, η οποία πιθανώς περιλαμβάνει τον εισαγωγικό χαρακτήρα, να μετακινηθεί ελαφρώς προς τα αριστερά για να δημιουργήσει αναρτημένα σημεία στίξης.

Όσον αφορά τα περιθώρια και τα μαξιλάρια

Συχνά στο σχεδιασμό ιστοσελίδων, χρησιμοποιείτε τιμές περιθωρίου ή γεμίσματος για να μετακινήσετε στοιχεία και να δημιουργήσετε κενό διάστημα. Ωστόσο, αυτές οι ιδιότητες δεν θα λειτουργήσουν για να επιτύχουν την εσοχή της παραγράφου. Εάν εφαρμόσετε οποιαδήποτε από αυτές τις τιμές στην παράγραφο, ολόκληρο το κείμενο αυτής της παραγράφου, συμπεριλαμβανομένης κάθε γραμμής, θα βρίσκεται σε απόσταση αντί για την πρώτη γραμμή.