Naudojant teksto įtraukimo savybę ir gretimus broliškus selektorius
Geras web dizainas dažnai yra apie gerą spausdinimą. Kadangi tiek daug turinio tinklalapyje pateikiama kaip tekstas, sugebėjimas stilizuoti šį tekstą yra patrauklus ir efektyvus, tai yra svarbus įgūdis turėti kaip interneto dizainerį. Deja, mes neturime tokio pat lygio spausdinimo kontrolės internete, kad mes spausdiname. Tai reiškia, kad mes ne visada gali patikimai susikurti svetainės tekstą taip, kaip mes galėtume tai padaryti atspausdintame lape.
Paprastai dažnai spausdintoje dalyje (ir kurią mes galime atkurti internete) dažniausiai naudojamas pastraipos stilius yra ta vieta, kur pirmoje šios pastraipos eilutėje yra įtraukta viena skirtuko vieta . Tai leidžia skaitytojams pamatyti, kur prasideda viena pastraipa, o kitas baigiasi.
Jūs nematote šio vizualinio stiliaus daugelyje tinklalapių, nes naršyklės pagal numatytuosius nustatymus rodomos pastraipos su erdve po jais, kaip būdas parodyti, kur baigiasi, o kitas prasideda, bet jei norite, kad puslapis būtų sukurtas, įkvėptas atribojimo stilius ant pastraipų, galite tai padaryti su teksto įtraukos stiliaus nuosavybe.
Šio turto sintaksė yra paprasta. Štai kaip galite pridėti teksto įtrauką į visas dokumento pastraipas.
p {text-indent: 2em; }Indentų pritaikymas
Vienas iš būdų, kuriuo galite tiksliai nurodyti paragrafus su įtrauka, galite pridėti klasę į tuos taškus, kuriuos norite išdėstyti, tačiau reikia redaguoti kiekvieną pastraipą, kad į ją būtų įtraukta klasė. Tai yra neveiksminga ir nesilaikoma HTML kodavimo geriausios praktikos.
Vietoj to, turėtumėte apsvarstyti, kada jūs įtraukiate pastraipas. Jūs įtraukiate pastraipas, kurios yra tiesiogiai susijusios su kita pastraipa. Norėdami tai padaryti, galite naudoti gretimą brolių selektorių. Naudodamiesi šia parinktimi, jūs pasirenkate kiekvieną pastraipą, prieš kurią yra kita pastraipa.
p + p {text-indent: 2em; }Kadangi jūs įtraukiate pirmąją eilutę, taip pat turėtumėte įsitikinti, kad jūsų pastraipose tarp jų nėra jokio papildomo tarpo (tai pagal numatytąją naršyklę). Stiliškai, jūs turėtumėte turėti tarpą tarp pastraipų arba įtraukos į pirmąją eilutę, bet ne abu.
p (margin-bottom: 0; užpildas-apačia: 0; } p + p (margin-top: 0; padding-top: 0; }Neigiami įtraukikliai
Taip pat galite naudoti teksto įtraukos turinį kartu su neigiama verte, kad linija pradėtų eiti į kairę, o ne į dešinę, kaip įprasta įtrauka. Tai galite padaryti, jei eilutė prasideda kabučių ženklu, taigi citatos simbolis pasirodo šiek tiek kairėje pastraipos dalyje, o raidės vis dar sudaro gražų kairįjį derinimą.
Pavyzdžiui, pasakykite, kad turite pastraipą, kuri yra skilties tęsinys ir norite, kad ji būtų neigiamai išdėstyta. Galėtumėte parašyti šį CSS:
blockquote p (text-indent: -5em; }Tai suteiktų pastraipos pradžią, kuri, matyt, apima pradžios skaičiavimo charakteristiką, kad būtų šiek tiek perkelta į kairę, kad būtų sukurtos skyrybos skyrybos ženklai.
Dėl maržų ir užsegimo
Dažnai naudojantis žiniatinklio dizainu, jūs naudojate maržos ar polsterio vertes, kad perkeltumėte elementus ir sukurtumėte baltą erdvę. Tačiau šios savybės neveiks, kad būtų pasiektas išreikštas pastraipos efektas. Jei taikote bet kurią iš šių verčių pastraipoje, visas tos pastraipos tekstas, įskaitant kiekvieną eilutę, bus išdėstytas vietoj pirmosios eilutės.