Ús de la propietat Text-Indent i seleccions de germans adjacents
Un bon disseny web sovint és una bona tipografia. Atès que la gran part del contingut d'una pàgina web es presenta com a text, és possible que l'estil d'aquest text sigui atractiu i eficaç és una habilitat important per tenir-lo com a dissenyador web. Malauradament, no tenim el mateix control tipogràfic en línia que ho fem a la impressió. Això significa que no sempre podem tenir un text d'estil confiable en un lloc web de la mateixa manera que ho podríem fer en una peça impresa.
Un estil de paràgraf comú que es veu sovint en la impressió (i que podem tornar a crear en línia) és on la primera línia d'aquest paràgraf té sangria un espai de taules . Això permet als lectors veure on comença un paràgraf i un altre acaba.
No veieu aquest estil visual tant a les pàgines web, ja que els navegadors, de manera predeterminada, mostren paràgrafs amb espai a sota d'ells com una manera de mostrar on s'acaba i una altra, però si voleu que l'estil d'una pàgina tingui aquesta impressió, estil de guió inspirat en paràgrafs, podeu fer-ho amb la propietat d'estil de text sangria .
La sintaxi d'aquesta propietat és senzilla. A continuació us indiquem com afegir un guionet de text a tots els paràgrafs d'un document.
p {text-indent: 2em; }Personalització dels sagnats
D'una manera, podeu especificar exactament els paràgrafs a sangria, podeu afegir una classe als paràgrafs que vulgueu sangrar, però això requereix que editeu tots els paràgrafs per afegir-hi una classe. Això és ineficient i no segueix les millors pràctiques de codificació HTML .
En canvi, haureu de tenir en compte quan esmenar els paràgrafs. Es guarden els paràgrafs que segueixen directament un altre paràgraf. Per fer-ho, podeu utilitzar el selector de germans adjacents. Amb aquest selector, seleccioneu cada paràgraf immediatament precedit d'un altre paràgraf.
p + p {text-indent: 2em; }Ja que està sagnant la primera línia, també haureu d'assegurar-vos que els paràgrafs no tinguin cap espai addicional entre ells (que és el navegador predeterminat). Estilísticament, hauríeu de tenir espai entre paràgrafs o sangria la primera línia, però no ambdós.
p {margin-bottom: 0; padding-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }Sagnats negatius
També podeu utilitzar la propietat de sangria de text , juntament amb un valor negatiu, perquè l'inici d'una línia es dirigeixi cap a l'esquerra i no com a guia normal. Podeu fer-ho si una línia comença amb una cometes perquè el caràcter de cotització aparegui en el petit marge que hi ha a l'esquerra del paràgraf i les mateixes lletres formen un bon alineament esquerre.
Digues, per exemple, que teniu un paràgraf que és descendent d'un bloc de comandes i voleu que quedi indentat negativament. Es pot escriure aquest CSS:
blockquote p {text-indent: -5em; }Això donaria l'inici del paràgraf, que presumiblement inclou el caràcter de cotització d'obertura, que es movirà lleugerament cap a l'esquerra per crear puntuació penjant.
Pel que fa als marges i al farcit
Sovint, al disseny web, utilitza valors de marge o farcit per moure elements i crear espais en blanc. Tanmateix, aquestes propietats no funcionaran per assolir l'efecte de paràgraf indentat. Si apliqueu algun d'aquests valors al paràgraf, el text sencer d'aquest paràgraf, incloent-hi totes les línies, estarà espaiat en comptes de la primera línia.