Uzanta la Tekst-Indentan Proprieton kaj Adjacentajn Siblingajn Elektantojn
Bona retejo-dezajno ofte estas pri bona tipografio. Pro tio ke tiom da enhavo de retpaĝaro estas prezentita kiel teksto, povante stiri, ke tiu teksto, tiel alloga kaj efika, estas grava lerteco posedi kiel retejo-desegnilo. Bedaŭrinde, ni ne havas la saman nivelon de tipografia kontrolo enreta, kiun ni faras en presado. Ĉi tio signifas, ke ni ne ĉiam povas fidinde stiligi tekston en retejo tiel same, kiel ni povus fari ĝin en presita peco.
Unu komuna alinea stilo, kiun vi ofte vidas en presado (kaj kiun ni povas amuzi enretan) estas kie la unua linio de tiu alineo estas indentita unu langeto . Ĉi tio permesas al legantoj vidi, kie komenciĝas unu paragrafo kaj aliaj finoj.
Vi ne vidas ĉi tiun vidan stilon tiel en retpaĝaroj ĉar retumiloj, defaŭlte, montras alineojn kun spaco sub ili kiel maniero montri, kie unu finiĝas kaj alia komencas, sed se vi volas stiligi paĝon por havi tiun printon- inspirita indent-stilo en alineoj, vi povas fari tion kun la tekst-indenta stilo-posedaĵo.
La sintakso por ĉi tiu propraĵo estas simpla. Jen kiel vi aldonus tekston al ĉiuj alineoj en dokumento.
p {teksto-indento: 2em; }Agordigo de la Indentoj
Unuokaze vi povas precize specifi la alineojn, por ke vi povas aldoni klason al la alineoj, kiujn vi deziras, sed postulas ke vi redaktas ĉiun paragrafon por aldoni klason al ĝi. Tio estas nefiĉa kaj ne sekvas HTML-kodigon de plej bonaj praktikoj.
Anstataŭe, vi devus pripensi, kiam vi enmetas alineojn. Vi dentas alineojn, kiuj rekte sekvas alian alineon. Por fari tion, vi povas uzi la apudan sibling-selectoron. Kun ĉi tiu elektilo, vi elektas ĉiun paragrafon, kiu tuj antaŭeniras per alia alineo.
p + p {tekst-indento: 2em; }Pro tio ke vi estas indentanta la unuan linion, vi ankaŭ devas certigi, ke viaj alineoj ne havas ekstra spaco inter ili (kio estas la retumilo defaŭlta). Estilie, vi ankaŭ devas havi spacon inter alineoj aŭ denti la unuan linion, sed ne ambaŭ.
p {rando-fundo: 0; malpleniga fundo: 0; } p + p {margin-top: 0; kompletigado supre: 0; }Negataj Indentoj
Vi ankaŭ povas uzi la tekst-indent- posedaĵon, kune kun negativa valoro, por kaŭzi la komencon de linio iri maldekstre kontraŭe al la dekstra kiel normala indento. Vi povas fari ĉi tion se linio komencas kun citaĵo por ke la citaĵo aperas en la malgrava rando maldekstre de la alineo kaj la literoj mem ankoraŭ formas belan maldekstran alineación.
Diru, ekzemple, ke vi havas alineon kiu estas posteulo de blokkoto kaj vi volas ke ĝi estu negativigita. Vi povus skribi ĉi tiun CSS:
blockquote p {text-indent: -.5em; }Ĉi tio donus la komencon de la alineo, kiu supozeble inkluzivas la malferman citaĵon, esti iomete movita maldekstre por krei pendantan interpunkcion.
Koncerne Margins kaj Padding
Ofte en dezajno retejo, vi uzas randojn aŭ kompletigajn valorojn por movi elementojn kaj krei blankan spacon. Tiuj propraĵoj ne funkcios por atingi la indentitan alinean efikon, tamen. Se vi apliki ĉi tiujn valorojn al la alineo, la tuta teksto de tiu alineo, inkluzive de ĉiu linio, estos interspacigita anstataŭ nur la unua linio.