Kaip įtraukti pastraipas naudojant CSS

click fraud protection

Gerai interneto svetainės dizainas dažnai yra apie gerą tipografiją. Kadangi tiek daug tinklalapio turinio pateikiama kaip tekstas, tai, kad tekstas gali būti patrauklus ir efektyvus, yra svarbus įgūdis, kurį turi turėti kaip interneto dizaineris. Deja, mes neturime tokio pat lygio spausdinimo internete spausdinimo. Tai reiškia, kad mes ne visada galime patikimai suformuluoti tekstą svetainėje taip, kaip galėtume tai padaryti atspausdintame kūrinyje.

Vienas įprastas pastraipos stilius, kurį dažnai matote spausdinant (ir kurį galime atkurti internete), yra ta, kad pirmoji tos pastraipos eilutė yra įtraukta skirtuko tarpas. Tai leidžia skaitytojams pamatyti, kur prasideda viena pastraipa, o kita baigiasi.

Šio vaizdinio stiliaus tiek daug nematote tinklalapiuose, nes naršyklės pagal numatytuosius nustatymus pateikia pastraipas su tarpais po jais kaip būdą parodyti, kur baigiasi vienas ir kitas, bet jei norite suformuoti puslapį, kad tai būtų įkvėptas spausdinimo įtraukos stilius pastraipose galite tai padaryti naudodami teksto įtrauka stiliaus nuosavybė.

instagram viewer

Šios ypatybės sintaksė yra paprasta. Štai kaip prie visų dokumento pastraipų pridedate teksto įtrauką.

p {
teksto įtrauka: 2em;
}

Įtraukų pritaikymas

Vienu būdu galite tiksliai nurodyti pastraipas įtraukai, galite pridėti klasę prie pastraipų, kurias norite įtraukti, tačiau tam reikia redaguoti kiekvieną pastraipą, kad prie jos pridėtumėte klasę. Tai neefektyvu ir to nesilaikoma HTML kodavimas geriausia praktika.

Vietoj to, turėtumėte apsvarstyti įtraukdami pastraipas. Jūs įtraukiate pastraipas, kurios tiesiogiai seka kitą pastraipą. Norėdami tai padaryti, galite naudoti šalia esantį brolių ir seserų parinkiklį. Šiuo pasirinkikliu pasirenkate kiekvieną pastraipą, prieš kurią iškart pateikiama kita pastraipa.

p + p {
teksto įtrauka: 2em;
}

Kadangi įtraukiate pirmąją eilutę, taip pat turėtumėte įsitikinti, kad pastraipose tarp jų nėra papildomos vietos (tai yra naršyklės numatytasis nustatymas). Stilistiškai turėtumėte arba palikti tarpą tarp pastraipų arba įtrauka pirmąją eilutę, bet ne abi.

p {
paraštė-apačia: 0;
kamšalo apačia: 0;
}
p + p {
paraštė-viršuje: 0;
padding-top: 0;
}

Neigiamos įtraukos

Taip pat galite naudoti teksto įtrauka ypatybė kartu su neigiama verte linijos pradžia eina į kairę, o ne į dešinę, kaip įprasta įtrauka. Tai galite padaryti, jei eilutė prasideda kabutėje, kad citatos simbolis būtų rodomas nedidelis paraštė pastraipos kairėje, o pačios raidės vis dar sudaro gražią kairę derinimas.

Tarkime, kad turite pastraipą, kuri yra blokinės citatos palikuonis, ir norite, kad ji būtų neigiamai įtraukta. Galite parašyti šį CSS:

blokinė citata p {
teksto įtrauka: -.5em;
}

Tai suteiktų pastraipos pradžią, kurioje, tikėtina, yra pradinis citatos simbolis, šiek tiek perkelti į kairę, kad būtų sukurti pakabinami skyrybos ženklai.

Dėl paraštių ir paminkštinimo

Dažnai kurdami tinklalapius jūs naudojatės paraštės arba užpildymo vertės norėdami perkelti elementus ir sukurti erdvę. Šios savybės neveiks, kad būtų pasiektas įtraukos pastraipos efektas. Jei pritaikysite bet kurią iš šių reikšmių pastraipai, visas tos pastraipos tekstas, įskaitant visas eilutes, bus išdėstytas tarpais, o ne tik pirmoje eilutėje.

instagram story viewer