Miten sommitella kappaleita CSS: llä

Tekstinsyöttöominaisuuden ja vierekkäisten sisarusten valitsimien käyttäminen

Hyvä web-suunnittelu on usein hyvää typografiaa. Koska niin paljon web-sivun sisältöä on esitetty tekstinä, pystyt tyylillä, että teksti on houkutteleva ja tehokas, on tärkeä taito hallita web-suunnittelija. Valitettavasti meillä ei ole samanlaista typografisen valvonnan tason tulostusta. Tämä tarkoittaa, että emme aina voi luotettavasti muotoilla tekstiä verkkosivustolla samalla tavoin kuin voisimme tehdä sen painetussa kappaleessa.

Yksi tavallinen kappale tyyli, jota näet usein tulosteina (ja joita voimme luoda uudestaan ​​verkossa) on silloin, kun kyseisen rivin ensimmäinen rivi on viistetty yhdelle välilehtipinnalle . Tämä antaa lukijoille mahdollisuuden nähdä, missä kappale alkaa ja toinen päättyy.

Sinä et näe tätä visuaalista tyyliä yhtä paljon verkkosivuilla, koska selaimet näyttävät oletusarvoisesti kohtia, joiden alle on niiden välinen tila, jolla näytetään, missä toinen päättyy ja toinen alkaa, mutta jos haluat muotoilla sivun, inspiroitu sisennystyyli kappaleissa, voit tehdä sen teksti-sisennystyyliominaisuuden avulla .

Tämän ominaisuuden syntaksi on yksinkertainen. Näin voit lisätä tekstin luetelmakohdan kaikkiin asiakirjan kappaleisiin.

p {teksti-indent: 2em; }

Sisätilojen mukauttaminen

Eräs tapa, jolla voit määrittää täsmälleen kappaleita sisennykseen, voit lisätä luokan kappaleisiin, jotka haluat sisennettyä, mutta joka edellyttää, että muokkaat jokaista kappaletta lisäämällä siihen luokan. Se on tehotonta eikä noudata HTML-koodausta parhaita käytäntöjä.

Sen sijaan sinun kannattaa harkita, kun luet kohtia. Kohdat kappaleet, jotka seuraavat suoraan toista kohtaa. Voit tehdä tämän käyttämällä vierekkäistä sibling-valitsinta. Tämän valitsimen avulla valitset jokaisen kohdan, jota välittömästi edeltää toinen kappale.

p + p {teksti-indentti: 2em; }

Koska ensimmäiset rivit on sisennetty, sinun on myös varmistettava, että kappaleissa ei ole ylimääräistä välilyöntiä (joka on selaimen oletusarvo). Stylistisesti sinun on joko oltava välilyönti kappaleiden välillä tai ensimmäisen rivin välissä, muttei molempia.

p {margin-bottom: 0; padding-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }

Negatiiviset sisennykset

Voit myös käyttää teksti-sisennysominaisuutta sekä negatiivista arvoa, jotta linjan alku siirtyisi vasemmalle toisin kuin tavallinen sisennys. Voit tehdä tämän, jos rivi alkaa lainausmerkillä, niin että lainausmerkki ilmestyy kappaleen vasemmalla puolella olevaan pieneen marginaaliin ja kirjaimet itse muodostavat edelleen hienon vasemman reunuksen.

Sano esimerkiksi, että sinulla on kohta, joka on lohkoperunoiden jälkeläinen ja haluat sen olevan negatiivisesti sisennetty. Voit kirjoittaa tämän CSS: n:

blockquote p {teksti-indent: -.5em; }

Tämä antaisi kappaleen alun, joka oletettavasti sisältää avausluettelon luonteen, hieman liikkumaan vasemmalle ja luo roikkuvat välimerkit.

Mitä tulee marginaaleihin ja täyttöön

Usein Web-suunnittelussa käytät marginaali- tai täyttöarvoja elementtien siirtämiseen ja tyhjän tilan luomiseen. Nämä ominaisuudet eivät kuitenkaan toimi indentoitujen kohtavaikutusten saavuttamiseksi. Jos käytät jotakin näistä arvoista kappaleeseen, kyseisen kohdan koko teksti, mukaan lukien jokainen rivi, välitetään vain ensimmäisen rivin sijasta.