Style Sheets Ιστού
CSS συμβουλές και κόλπα

(Αυτή η σελίδα χρησιμοποιεί CSS style sheets)

Το παρόν έγγραφο είναι μετάφραση του άρθρου «Cascading Style Sheets. CSS tips & tricks».
Αυθεντική εκδοχή του εγγράφου βρίσκεται μόνο στην ιστοσελίδα W3C http://www.w3.org/Style/Examples/007/indent
Η παρούσα μετάφραση ΔΕΝ είναι επίσημο έγγραφο της W3C.
Όλα τα κοπιράιτ ανήκουν στη W3C.
Το παρόν έγγραφο μπορεί να έχει λάθη της μετάφρασης και εσφαλμένη εκτύπωση.
Συγγραφέας: Dimitris Papadopoulos

Παράγραφοι με εσοχή

Eiffel tower

Scale model of the Eiffel tower in Parc Mini-France

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

Το κόλπο εδώ είναι να αποκτήσουν την εσοχή μόνο οι παράγραφοι που ακολουθούν άλλες παραγράφους. Η πρώτη παράγραφος της σελίδας δεν πρέπει να έχει εσοχή, και ούτε να κάνει τις παραγράφους που ακολουθούν ένα διάγραμμα, έναν τίτλο ή κάτι άλλο που αντισταθμίζονται από το κείμενο. Οι κανόνες είναι στην πραγματικότητα πολύ απλοί:

p {
  margin-bottom: 0 }
p + p {
  text-indent: 1.5em;
  margin-top: 0 }

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

Σε αυτήν την σελίδα, παραδείγματος χάριν, υπάρχουν στοιχεία P που χρησιμοποιούνται ως τίτλοι για τις εικόνες (δείτε το παράδειγμα “Σχήματα και επικεφαλίδες” ). Τους έχουμε κεντροθετήσει, και έτσι δεν πρέπει να έχουν εσοχή. Ένας απλός κανόνας 'p.caption {text-indent: 0}' φροντίζει αυτό. Μπορείτε να δείτε πως πράγματικά χρησιμοποιήσαμε εκείνο τον κανόνα στο παράδειγμα.

Μπορούμε τώρα να χρησιμοποιήσουμε διάφορές ποσότητες λευκών γραμμών μεταξύ των παραγράφων για να δείξουμε τα σημαντικά σπασίματα στο κείμενο. Ας καθορίσουμε τρεία διαφορετικά classes: : stb (μικρό θεματικό σπάσιμο), mtb mtb (μέσο θεματικό σπάσιμο) και ltb (μεγάλο θεματικό σπάσιμο). Έχουμε δώσει σε αυτήν την παράγραφο ένα class stb , έτσι μπορείτε να δείτε την επίδραση.

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Δημιουργία 17 Jan 2001;
Τελευταία ανανέωση $Date: 2007/10/27 00:47:16 $ GMT