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