Html prostor med odstavki. HTML: odstavek in rdeča črta. Citati in definicije
Dober dan dragi bralci. Danes kratek zapis o tem, kako narediti rdeča črta za vsak odstavek na strani html. Če nekdo ne ve, je rdeča črta zamik prve vrstice v bloku besedila. Takšno zamik v odstavkih je mogoče najti v skoraj vsakem tiskanem besedilu, pri izdelavi spletnih strani pa je zasnova rdeče črte precej redka, kljub temu, da naredi besedilo veliko bolj berljivo. V primeru, da stranka nenadoma zahteva, da se odstavki na njegovem spletnem mestu začnejo z rdečo črto, vam dajem preprost recept za rešitev tega problema.
Težavo lahko rešite na veliko načinov, na primer na začetek vsakega odstavka lahko vstavite več posebnih znakov zapored, vendar to lahko traja precej časa. Zato priporočam uporabo lastnosti CSS za ustvarjanje rdeče črte zamik besedila, ki določa alineja prve vrstice blok besedila. V tem primeru ne vpliva na preostale vrstice.
Lastnost text-indent ima preprosto sintakso:
zamik besedila:<значение> | <проценты>| podedovati
Kot vrednosti lahko podate slikovne pike (px), točke (pt) in druge enote, sprejete v CSS. Vrednost določa, za koliko premakniti besedilo prve vrstice v desno od prvotnega položaja. Dovoljeno je določiti negativne vrednosti, potem se bo besedilo premaknilo v levo. Pri določanju odstotnih vrednosti se zamik prve vrstice izračuna glede na širino besedilnega bloka.
Če je treba rdečo črto dodati samo enemu odstavku, lahko to storite:
rezultat:
Ob robu ceste je bil hrast. Verjetno je bila desetkrat starejša od brez, ki so sestavljale gozd, desetkrat debelejša in dvakrat višja od vsake breze. Bil je ogromen, dvodelni hrast, z zlomljenimi vejami in lubjem, poraščenim s starimi ranami. Z ogromnimi, okornimi, asimetrično iztegnjenimi okornimi rokami in prsti je stal med nasmejanimi brezami kot star, jezen in zaničljiv čudak. Le on sam se ni hotel podrediti čaru pomladi in ni hotel videti ne pomladi ne sonca.
Ali pa dodajte atribut razreda odstavkom, ki se morajo začeti z rdečo črto, in dodajte želeni slog:
Princ Andrej se je med vožnjo skozi gozd večkrat ozrl na ta hrast. Pod hrastom so bile rože in trava, a on je še vedno stal sredi njih, mračen, negiben, grd in trmast.
rezultat:
Princ Andrej se je med vožnjo skozi gozd večkrat ozrl na ta hrast. Pod hrastom so bile rože in trava, a on je še vedno stal sredi njih, mračen, negiben, grd in trmast.
Zdaj lahko enostavno naredite rdečo črto na svojih html straneh. Se vidiva kmalu!
Rdečo črto html lahko nastavite na 4 različne načine. Čeprav ta programski jezik ne zagotavlja določenih standardov za ta pojav, zato v zvezi s tem ni omejitev. V tem članku bomo uporabili ne povsem standarden nabor orodij za ustvarjanje rdeče črte.
1. način
Začeti morate z najpogostejšim načinom. Samo v tem primeru je treba uporabiti kaskadne tabele, saj je CSS neločljivo povezan z označevalnim jezikom hiperbesedila. Rdečo vrstico html lahko nastavite z lastnostjo "text-indent". Dovolj je, da določite želeni element in razdaljo, ki bo uporabljena za alinejo na levi strani dokumenta. Na primer, vnos: "p (besedilna zamika: 20px;)" pomeni, da bo v vsakem odstavku p narejena rdeča črta z 20 slikovnimi pikami. Vsak blok besedila se lahko uporabi kot element, za katerega je podana vrednost. Pravzaprav ta lastnost ne nastavi rdeče črte, ampak preprosto določi zamik za prvo vrstico izbranega elementa. Toda kdo bo opazil razliko? Lastnost "text-indent" lahko sprejme tri različne vrste vrednosti:
- Vsaka običajna merska enota, kot so px (piksli), in (palci), pt (točke) in druge.
- Odstotna vrednost. V tem primeru se upošteva oddaljenost od nadrejenega elementa.
- podedovati. Če podate to vrednost, bo lastnost podedovana od nadrejenega elementa.
2. način
V html-ju lahko rdečo črto nastavite brez vključitve kaskadnih tabel. Dovolj je, da pred prvim znakom v izvorni kodi strani postavite več presledkov. Uporabiti morate samo posebne znake, in sicer "", ker če vstavite navaden presledek, bo upoštevan samo en. S tem simbolom lahko nastavite zahtevano zamiko. Takšna rdeča vrstica HTML ne bo imela globalnega učinka in vse presledke boste morali vnesti ročno. Ta minus vas bo močno obremenil pri delu z velikim številom dokumentov. Prav tako bo ta metoda razglasila vašo kodo strani za neveljavno.
3. način
Zaključek
Kot zaključek lahko rečemo, da vam html skupaj s CSS omogoča najrazličnejše učinke. Včasih se lastnosti in elementi uporabljajo za druge namene, vendar ne smete preveč odstopati od standardnega pomena oznak.
Vsako besedilo ima svojo edinstveno strukturo: knjige so razdeljene na dele, razdelke in poglavja, časopisi in revije imajo ločene naslove in podnaslove, ki pa vključujejo fragmente besedila, ki imajo tudi svojo strukturo: odstavke, alinee itd.
Besedilo na spletnih straneh ni izjema, imeti mora tudi logično strukturo, razumljivo vsakemu uporabniku. Konec koncev je veliko odvisno od tega, kako priročno in preprosto bo besedilo na strani zaznano: najprej, kakšen vtis bo imel obiskovalec o vašem spletnem mestu.
Za ustvarjanje takšnih strukturnih enot besedila, kot so odstavki, se oznaka uporablja v dokumentih HTML.
, ki ločuje fragmente besedila z navpično alineo (pred odstavkom in za njim je dodana prazna vrstica).
Opomba: privzeto je razmik med odstavki 1em (em je merska enota, enaka višini pisave), to pomeni, da je razmik med odstavki neposredno odvisen od velikosti pisave.
Če želite spremeniti alinee med odstavki, ne da bi spremenili velikost pisave, lahko uporabite lastnost roba CSS.
Ne pozabite na zaključno oznako
Večina brskalnikov bo pravilno upodobila dokument HTML, tudi če ste pozabili končno oznako.
odstavek
Še en odstavek
Ta koda bo delovala v večini brskalnikov, vendar se ne zanašajte nanjo. Pozabljena zaključna oznaka lahko vodi do nepričakovanih rezultatov ali napak.
rdeča črta
Kaj je rdeča črta? Po definiciji je to začetna vrstica odstavka, ki je bila včasih označena z rdečo (od tod tudi ime). Preden je bil tisk izumljen, so knjige pisali ročno – poglavje ali del besedila, prva beseda ali črka je bila napisana z rdečo barvo. Tako se je pojavil koncept "pisanja iz rdeče črte" - to pomeni začetek nove misli, poglavja ali dela.
Vendar pa se pri ustvarjanju spletnih strani zasnova rdeče črte uporablja precej redko, kljub dejstvu, da omogoča vizualno zaznavanje besedila z veliko večjo priročnostjo, kar je za tradicionalnega bralca zelo pomembno - ni vsem udobno brati elektronska različica besedila.
Če želite odstavkom dodati rdečo črto, morate uporabiti lastnost CSS zamik besedila, ki vam omogoča zamik prvega stavka:
Poskusi »
V zgornjem primeru se bo prva vrstica vsakega odstavka na strani začela z zamikom 25 slikovnih pik. Spodnji primer prikazuje, kako lahko rdečo črto nastavite samo na določen odstavek na strani.
Kot v vsaki pravi umetnosti tudi v dobrih besedilih ni malenkosti, kamor nekateri prištevajo rdečo črto, saj menijo, da njena uporaba ni tako pomembna. Vendar pa je treba razumeti, da vsaka vejica nosi tako estetsko kot pomensko obremenitev in ni le poklon pravilom slovnice - to velja tudi za oblikovanje.
Poskusi »Opomba: zamika ni treba nastaviti na 25px, optimalno velikost zamika lahko izberete sami, možno je tudi, da z lastnostjo text-indent naredite črto, ki štrli nad preostalim besedilom, za to morate nastaviti negativno vrednost za lastnost (na primer: -30px).
Med branjem neke knjige, časopisa, revije in pravzaprav katerega koli običajnega besedila ste naleteli na veliko odstavkov in v prvi vrstici vsakega od njih je majhna alineja. V tem članku vam bom pokazal najboljšo možnost. zamik odstavka prek CSS.
Seveda lahko z uporabo vstavite poljubno število presledkov in s tem izberete potrebno zamik, vendar zagotovo razumete, da je ta metoda, milo rečeno, neprijetna. In rešitev tega problema je zelo preprosta.
To bi že morali vedeti v HTML odstavek je ustvarjen z uporabo oznake<str>. Tako mora biti vsak odstavek v svoji oznaki.<str>. In za zamik prve vrstice vsakega odstavka dovolj za povezavo koda CSS:
P(
zamik besedila: 10px;
}
V tem primeru smo zamaknili 10 slikovnih pik. Lahko se poigrate s to vrednostjo in poiščete najboljšo za svoje spletno mesto.
Na ta preprost način lahko nastavite zamik prvih vrstic katerega koli odstavka v besedilu na spletnem mestu.
Če imate kakršna koli vprašanja ali želite spregovoriti o tem članku, lahko pustite svoj komentar na dnu strani.
Komentarji (9 ):
31.05.2013 13:10:03
Pozdravljeni Michael, prosim, pomagajte mi rešiti težavo z naslednjo kodo css: .bam ( obroba: 1px polna črna; polmer obrobe: 8px; rob-dno: 4%; poravnava besedila: levo; širina: 84%; ) . bam .avtor (barva ozadja: bela; obroba spodaj: 1 slikovna črna; polmer obrobe zgoraj desno: 8 slikovnih pik; polmer obrobe zgoraj levo: 8 slikovnih pik; teža pisave: krepko; padding: 4px; ) . bam .text (barva ozadja: WhiteSmoke; polmer obrobe-spodnje-desno: 8px; polmer obrobe-spodaj-levo: 8px; padding:4px; ) Besedilo znotraj ".bam .text" se mora preliti v drugo vrstico če ne paše v eno vrstico. Toda iz nekega razloga se ne prenese, ampak izleze iz bloka. Pomagajte rešiti to težavo.
Odgovoriti
06.06.2013 22:42:20
Pozdravljeni Mihail, slučajno ne veste, kako najti izhod iz naslednje situacije: blok je, znotraj njega pa še en blok in v ta blok je notri zapisano besedilo (dolžina besedila ni znana vnaprej). Torej, kako narediti višino nadrejenega bloka odvisno od višine bloka v njem (z besedilom)? In potem iz nekega razloga ugotovim, da je višina nadrejenega bloka manjša od višine notranjega.
Odgovoriti
Admin
06.06.2013 23:32:40
Vsi zunanji bloki so raztegnjeni glede na dimenzije notranjih blokov. Tega vam ni treba storiti, mora biti že privzeto.
Odgovoriti
07.06.2013 11:11:09
in pogledaš: http://progbase.ru/about.php
Odgovoriti
Admin
07.06.2013 21:54:37
Uporabiti je treba
- postavite ta blok na različna mesta in poglejte, kaj se spremeni. Ko je vse v redu, ga pustite tam.Odgovoriti
13.09.2013 21:39:34
Zdravo! Pomagajte, prosim, v oknu tega namiga, ko lebdite, naredite zamike in druge sloge besedila. Nekaj malega ne gre in to je to. Hvala vnaprej.
V primeru dokumentov HTML oznake delujejo bolj za označevanje vsebine kot za označevanje, kako naj bo predstavljena. Več nadzora nad predstavitvijo dosežemo s slogi. V tem članku si bom ogledal tiste sloge, ki so povezani z oblikovanjem odstavkov v HTML.
Oznaka
V HTML-ju lahko določite odstavke, atribut align pa jih poravna levo, desno, sredinsko ali poravnano. Poleg njih bomo uporabili atribut globalnega sloga.
Poravnava odstavkov
Odstavek lahko poravnate z atributom align z naslednjimi vrednostmi:
poravnava besedila: levo|desno|središče|justify|inicial|podeduj;
Kopirajte naslednjo kodo v datoteko .html.
Ta odstavek je sredinsko poravnan
Ta odstavek je poravnan desno
Ta odstavek je prikazan v oknu brskalnika upravičeno. Dobro razmaknjen odstavek je poravnan desno in levo z dodajanjem dodatnih presledkov. Vidite lahko, da se robovi poravnanega odstavka ujemajo z robovi levega in desnega poravnanega odstavka. V levo poravnanem odstavku je levi rob enakomeren, v odstavku, ki je poravnan na desno, pa desni. Ali vidite, da ima ta odstavek oba roba enakomerna? To je doseženo s slogom text-align:justify.
V oknu brskalnika HTML je koda odstavka videti takole.
Razmik med vrsticami
Razmik med vrsticami odstavka lahko nadzirate s slogom=line-height . Uporabite atribut style z naslednjimi vrednostmi:
višina vrstice: normalno|število|dolžina|začetno|podeduj;
Sledi primer kode HTML, ki izpiše odstavke z različnimi razmiki med vrsticami:
Ta odstavek uporablja dve vrednosti za atribut sloga. Prva line-height:1.5 določa razmik med vrsticami in pol za odstavek, druga vrednost text-align:justify pa določa, da mora biti besedilo odstavka poravnano po širini.
Ta odstavek ima dvojni razmik med vrsticami in je upravičen. line-height:2 določa dvojni razmik. Atributu sloga ni nujno, da ima dve vrednosti. Če pa morate podati dve vrednosti, lahko to storite tako, da ju ločite s podpičjem.
Tukaj je nekaj različnih načinov uporabe vrednosti višine vrstice za atribut sloga:
: nastavi razmik med vrsticami na 13 slikovnih pik;
: nastavi razmik med odstavki v HTML na 200 % trenutne velikosti pisave;
: nastavi višino vrstice na 14 slikovnih pik.
Zamik
Za lažje razumevanje sem uporabil izraz "vdolbina". Toda v HTML-ju uporabljamo presledke za ustvarjanje belega prostora okoli predmeta. Atribut sloga z vrednostjo paddinga lahko uporabite, da nastavite levi ali desni zamik odstavka.
Sledi primer levo in desno zamaknjenih odstavkov:
Ta odstavek ni zamaknjen, le utemeljen je. Oglejte si atribut sloga elementa P za ta odstavek.
Za ta odstavek sem nastavil levi zamik na 30px z uporabo padding-left:30px. Ta odstavek je tudi utemeljen s slogom text-align:justify. Kot že veste, lahko za atribut Style uporabimo več vrednosti, tako da jih ločimo s podpičjem.
In ta odstavek ima desno zamik 30 slikovnih pik, leve pa ni. Upravičen je tudi po širini. Vrednost 'padding-right' atributa sloga nastavi oblazinjenje v desno. Če ne vidite učinka, zmanjšajte širino okna brskalnika, tako da se odstavek HTML pravilno prikaže.
Zamiki med odstavki (alineja pred in alineja za odstavkom)
V HTML ali CSS tega ne potrebujemo. Lahko samo oblikujemo oblazinjenje elementa
Padding-top in padding-bottom definirata presledek pred in za odstavkom, ki deluje kot zgornji ali spodnji odstavek. Poglejte spodnji primer oznake
Prvi odstavek HTML sem nastavil na 10px zamik pred drugim in 50px za drugim odstavkom:
Ta odstavek ni zamaknjen pred ali za njim. To je običajen odstavek upravičen. Kot že veste, lahko utemeljimo odstavek s kodo style=”text-align:justify” znotraj oznake.
Ta odstavek je razporejen. Ima tudi zamik 10 slikovnih pik pred odstavkom in 50 slikovnih pik za njim. Znotraj oznake sem nastavil 3 sloge.
To je običajen odstavek brez alinej in privzete poravnave.
Stvari, ki si jih je treba zapomniti
- Odstavek HTML lahko poravnate z atributom align ali slogom za poravnavo besedila;
- HTML bo upodobljen drugače, odvisno od velikosti zaslona, velikosti okna brskalnika;
- Dodajanje dodatnih presledkov ali praznih vrstic v kodo HTML ne vpliva na izhod. Brskalnik odstrani vse dodatne presledke;
- Oznake določajo, kaj naj bo prikazano, slogi pa določajo, kako naj bo prikazano;
- Sloge je mogoče nastaviti na tri različne načine - inline (notranje oznake), interne ( znotraj iste datoteke HTML z elementom
© 2022 Vse pravice pridržane
Spletna stran o računalnikih