Hyvä Web-suunnittelu on usein hyvää typografiaa. Koska niin suuri osa verkkosivun sisällöstä esitetään tekstinä, on kyky muotoilla teksti sekä houkuttelevaksi että tehokkaaksi on tärkeä taito hallita web-suunnittelijana. Valitettavasti meillä ei ole verkossa samaa typografisen valvonnan tasoa kuin painettuna. Tämä tarkoittaa, että emme voi aina tyylitellä tekstiä luotettavasti verkkosivustolla samalla tavalla kuin voisimme tehdä niin painettuna.
Yksi yleinen kappaletyyli, jonka näet usein painettuna (ja jonka voimme luoda uudelleen verkossa), on kyseisen kappaleen ensimmäisen rivin sisennys välilehden tila. Tämä antaa lukijoille mahdollisuuden nähdä, missä kappale alkaa ja toinen loppuu.
Et näe tätä visuaalista tyyliä yhtä paljon verkkosivuilla, koska selaimet näyttävät oletuksena kappaleita välilyönnillä niiden alla keinona näyttää, missä toinen loppuu ja toinen alkaa, mutta jos haluat muotoilla sivun niin painettu sisennystyyli kappaleissa, voit tehdä sen teksti-luetelmakohta tyylinen omaisuus.
Tämän ominaisuuden syntakse on yksinkertainen. Näin lisäät teksti-luetelmakohdan asiakirjan kaikkiin kappaleisiin.
p {
teksti-luetelmakohta: 2em;
}
Sisennysten mukauttaminen
Yksi tapa, jolla voit määrittää täsmennettävät kappaleet sisennykseen, voit lisätä luokan kappaleisiin, jotka haluat sisentää, mutta se edellyttää, että muokkaat jokaista kappaletta lisätäksesi siihen luokan. Se on tehotonta eikä seuraa HTML-koodaus parhaat käytännöt.
Sen sijaan sinun on harkittava kappaleiden sisennystä. Sisennät kappaleita, jotka seuraavat suoraan toista kappaletta. Voit tehdä tämän käyttämällä viereistä sisaruksen valitsinta. Tällä valitsimella valitset jokaisen kappaleen, jota edeltää välittömästi uusi kappale.
p + p {
teksti-luetelmakohta: 2em;
}
Koska sisennät ensimmäistä riviä, sinun on myös varmistettava, että kappaleissasi ei ole ylimääräistä tilaa niiden välillä (mikä on selaimen oletusarvo). Tyylillisesti kappaleiden välissä on oltava joko tilaa tai ensimmäisen rivin sisennys, mutta ei molempia.
p {
marginaali-pohja: 0;
pehmustepohja: 0;
}
p + p {
yläreuna: 0;
pehmuste: 0;
}
Negatiiviset sisennykset
Voit käyttää myös teksti-luetelmakohta ominaisuus yhdessä negatiivisen arvon kanssa aiheuttaa rivin alun siirtymisen vasemmalle vastakkaiselle oikealle kuten tavallinen sisennys. Voit tehdä tämän, jos rivi alkaa lainausmerkillä niin, että lainausmerkki näkyy pieni marginaali kappaleen vasemmalla puolella ja itse kirjaimet muodostavat edelleen mukavan vasemman kohdistus.
Sano esimerkiksi, että sinulla on kappale, joka on lohkolausekkeen jälkeläinen, ja haluat, että se sisennetään negatiivisesti. Voit kirjoittaa tämän CSS: n:
lainausmerkki p {
teksti-luetelmakohta: -.5em;
}
Tämä antaisi kappaleen alun, joka oletettavasti sisältää alkulainauksen, siirrettävän hieman vasemmalle roikkuvien välimerkkien luomiseksi.
Marginaaleista ja pehmusteista
Usein web-suunnittelussa käytät marginaali tai täyte-arvot siirtää elementtejä ja luoda tyhjää tilaa. Nämä ominaisuudet eivät kuitenkaan toimi saavuttaakseen sisennetyn kappaleen vaikutusta. Jos käytät jompaa kumpaa näistä arvoista kappaleeseen, kyseisen kappaleen koko teksti, jokainen rivi mukaan lukien, erotetaan toisistaan vain ensimmäisen rivin sijaan.