Html razmak između pasusa. HTML: odlomak i crvena linija. Citati i definicije

Dobar dan dragi čitatelji. Danas kratka napomena o tome kako napraviti crvena linija za svaki odlomak na html stranici. Ako netko ne zna, onda je crvena linija uvlačenje prvog retka u bloku teksta. Takvo uvlačenje u odlomcima može se pronaći u gotovo svakom tiskanom tekstu, no pri izradi web stranica dizajn crvene linije je prilično rijedak, unatoč činjenici da čini tekst znatno čitljivijim. U slučaju da kupac iznenada zahtijeva da odlomci na njegovoj stranici počnu crvenom linijom, onda vam dajem jednostavan recept za rješavanje ovog problema.

Postoji mnogo načina za rješavanje problema, na primjer, možete umetnuti nekoliko posebnih znakova u nizu na početku svakog odlomka, ali to može potrajati dosta vremena. Stoga preporučam korištenje CSS svojstva za stvaranje crvene linije uvlačenje teksta, koji postavlja uvlaka prvog retka blok teksta. U tom slučaju nema utjecaja na preostale linije.

Svojstvo text-indent ima jednostavnu sintaksu:

uvlaka teksta:<значение> | <проценты>| naslijediti

Kao vrijednosti možete odrediti piksele (px), točke (pt) i druge jedinice prihvaćene u CSS-u. Vrijednost određuje koliko treba pomaknuti tekst prvog retka udesno od izvorne pozicije. Dopušteno je navesti negativne vrijednosti, tada će se tekst pomaknuti ulijevo. Prilikom određivanja postotnih vrijednosti, uvlačenje prvog retka izračunava se ovisno o širini tekstualnog bloka.

Ako crvenu liniju treba dodati samo jednom odlomku, to možete učiniti:

Proizlaziti:

Na rubu ceste bio je hrast. Vjerojatno je bila deset puta starija od breza koje su činile šumu, deset puta deblja i dvostruko viša od svake breze. Bio je to golemi hrast dva obima, s polomljenim granama i korom obraslom starim ranama. S golemim, nespretnim, asimetrično raširenim nespretnim rukama i prstima stajao je između nasmiješenih breza poput starog, ljutog i prezrivog čudaka. Samo se on jedini nije htio pokoriti čarima proljeća i nije htio vidjeti ni proljeće ni sunce.

Ili dodajte atribut class paragrafima koji bi trebali započeti crvenom linijom i dodati željeni stil:

Princ Andrej se nekoliko puta osvrnuo na ovaj hrast dok je jahao kroz šumu. Pod hrastom je bilo cvijeća i trave, ali on je i dalje stajao usred njih, tmuran, nepomičan, ružan i tvrdoglav.

Proizlaziti:

Princ Andrej se nekoliko puta osvrnuo na ovaj hrast dok je jahao kroz šumu. Pod hrastom je bilo cvijeća i trave, ali on je i dalje stajao usred njih, tmuran, nepomičan, ružan i tvrdoglav.

Sada možete lako napravite crvenu liniju na svojim html stranicama. Vidimo se uskoro!

html redline može se postaviti na 4 različita načina. Iako ovaj programski jezik ne daje određene standarde za ovaj fenomen, stoga nema ograničenja u tom pogledu. U ovom članku koristit ćemo ne baš standardni skup alata za stvaranje crvene linije.

1. način

Trebali biste početi s najčešćim načinom. Samo u ovom slučaju potrebno je koristiti kaskadne tablice, jer je CSS neraskidivo povezan s jezikom za označavanje hiperteksta. Crvena linija html-a može se postaviti pomoću svojstva "text-indent". Dovoljno je odrediti željeni element i udaljenost koja će se koristiti za uvlačenje na lijevoj strani dokumenta. Na primjer, unos: "p (uvlačenje teksta: 20px;)" znači da će se u svakom p odlomku napraviti crvena linija od 20 piksela. Bilo koji blok teksta može se koristiti kao element za koji je navedena vrijednost. Zapravo, ovo svojstvo ne postavlja crvenu liniju, već jednostavno specificira uvlačenje za prvi redak odabranog elementa. Ali tko će primijetiti razliku? Svojstvo "uvlaka teksta" može imati tri različite vrste vrijednosti:

• Bilo koja uobičajena mjerna jedinica, kao što su px (pikseli), in (inči), pt (točke) i druge.
• Postotna vrijednost. U ovom slučaju se uzima u obzir udaljenost od roditeljskog elementa.
• Naslijediti. Ako navedete ovu vrijednost, svojstvo će biti naslijeđeno od nadređenog elementa.

2. način

U html-u se crvena linija može postaviti bez uključivanja kaskadnih tablica. Dovoljno je staviti nekoliko razmaka ispred prvog znaka u izvornom kodu stranice. Samo trebate koristiti posebne znakove, odnosno "", jer ako stavite razmak, tada će se samo jedan uzeti u obzir. A pomoću ovog simbola možete postaviti potrebnu uvlaku. Takva crvena HTML linija neće imati globalni učinak i sve ćete razmake morati unijeti ručno. Ovaj minus će vas uvelike opteretiti kada radite s velikim brojem dokumenata. Također, ova metoda će proglasiti vaš kôd stranice nevažećim.

3. način

Zaključak

Kao zaključak, možemo reći da html zajedno s CSS-om omogućuje izradu raznih efekata. Ponekad se svojstva i elementi koriste u druge svrhe, ali ne biste trebali previše odstupati od standardnog značenja oznaka.

Svaki tekst ima svoju jedinstvenu strukturu: knjige su podijeljene na dijelove, odjeljke i poglavlja, novine i časopisi imaju zasebne naslove i podnaslove, koji zauzvrat uključuju fragmente teksta koji također imaju svoju strukturu: odlomke, uvlake itd.

Tekst postavljen na web stranicama nije iznimka, on također mora imati logičnu strukturu razumljivu svakom korisniku. Uostalom, puno ovisi o tome koliko će tekst na stranici biti prikladan i jednostavan: prije svega, kakav će dojam posjetitelj imati o vašoj web-lokaciji.

Za stvaranje takvih strukturnih jedinica teksta kao što su odlomci, oznaka se koristi u HTML dokumentima.

, koji odvaja fragmente teksta okomitom uvlakom (prazan redak dodaje se ispred i iza odlomka).

Napomena: prema zadanim postavkama, razmak između pasusa je 1em (em je mjerna jedinica jednaka visini fonta), odnosno razmak između pasusa izravno ovisi o veličini fonta.

Da biste promijenili uvlake između pasusa bez promjene veličine fonta, možete koristiti svojstvo CSS margine.

Ne zaboravite završnu oznaku

Većina preglednika će ispravno prikazati HTML dokument čak i ako ste zaboravili završnu oznaku.

Stavak

Još jedan odlomak

Ovaj kod će raditi u većini preglednika, ali nemojte se oslanjati na njega. Zaboravljena završna oznaka može dovesti do neočekivanih rezultata ili pogrešaka.

crvena crta

Što je crvena linija? Po definiciji, ovo je početni redak odlomka, koji je nekada bio istaknut crvenom bojom (otuda i naziv). Prije izuma tiska, knjige su se pisale rukom – poglavlje ili dio teksta, prva riječ ili slovo ispisivali su crvenom bojom. Tako se pojavio koncept "pisanja s crvene linije" - to znači početak nove misli, poglavlja ili dijela.

Međutim, pri izradi web stranica dizajn crvene linije koristi se prilično rijetko, unatoč činjenici da vam omogućuje vizualno percipiranje teksta s mnogo većom praktičnošću, što je prilično važno za tradicionalnog čitatelja - nije svima ugodno čitati elektronska verzija teksta.

Da biste svojim odlomcima dodali crvenu liniju, trebate upotrijebiti svojstvo CSS-a za uvlačenje teksta, koje vam omogućuje uvlačenje prve rečenice:

Pokušajte »

U gornjem primjeru, prvi redak svakog odlomka na stranici počet će s uvlakom od 25px. Primjer u nastavku pokazuje kako možete postaviti crvenu liniju samo na određeni odlomak na stranici.

Kao i u svakoj pravoj umjetnosti, u dobrim tekstovima nema sitnica, na koje neki uključuju i crvenu crtu, smatrajući da njezino korištenje nije toliko važno. Međutim, treba shvatiti da svaki zarez nosi i estetsko i semantičko opterećenje i nije samo priznanje gramatičkim pravilima - to se također odnosi i na oblikovanje.

Pokušajte »

Napomena: nije potrebno postaviti uvlačenje na 25px, možete sami odabrati optimalnu veličinu uvlake, također je moguće napraviti liniju koja strši iznad ostatka teksta pomoću svojstva text-indent, za to morate postaviti negativnu vrijednost za svojstvo (na primjer: -30px).

Čitajući neku knjigu, novine, časopis, pa i bilo koji normalan tekst, naišli ste na puno paragrafa, a prvi red svakog od njih sadrži malu uvlaku. U ovom članku pokazat ću vam najbolju opciju. uvlačenje pasusa putem CSS-a.

Naravno, bilo koji broj razmaka može se umetnuti pomoću , čime se odabire potrebno uvlačenje, ali, sigurno, razumijete da je ova metoda, blago rečeno, nezgodna. A rješenje ovog problema je vrlo jednostavno.

To biste već trebali znati u HTML odlomak se stvara pomoću oznake<str>. Stoga bi svaki odlomak trebao biti u svojoj oznaci.<str>. I za uvlačenje prvog retka svakog odlomka dovoljno za povezivanje CSS kod:

P(
uvlaka teksta: 10px;
}

U ovom primjeru smo uvukli 10 piksela. Možete se poigrati s ovom vrijednošću kako biste pronašli najbolju za svoju web-lokaciju.

Na ovaj jednostavan način možete postavite uvlačenje prvih redaka bilo kojeg odlomka u tekstu na stranici.

Ako imate bilo kakvih pitanja, ili želite govoriti o ovom članku, onda možete ostaviti svoj komentar na dnu stranice.

Komentari (9 ):

31.05.2013 13:10:03

Pozdrav Michael, pomozite mi riješiti problem sa sljedećim css kodom: .bam ( granica: 1px puna crna; radijus obruba: 8px; margin-bottom: 4%; text-align: lijevo; širina: 84%; ) . bam .autor (boja pozadine: bijela; obrub-dno: 1px puna crna; radijus-gore-desno: 8px; radijus-obličje-gore-lijevo: 8px; težina fonta: bold; padding:4px; ) . bam .text (boja pozadine: WhiteSmoke; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding:4px; ) Tekst unutar ".bam .text" treba premotati u drugi redak ako ne stane na jednu liniju. Ali iz nekog razloga se ne prenosi, već puzi iz bloka. Pomozite riješiti ovaj problem.

Odgovor

06.06.2013 22:42:20

Zdravo Mikhail, slučajno ne znaš kako pronaći izlaz iz sljedeće situacije: postoji blok, a unutar njega je još jedan blok, a unutra je u ovaj blok upisan tekst (dužina teksta nije poznata unaprijed). Dakle, kako učiniti da visina roditeljskog bloka ovisi o visini bloka unutar njega (s tekstom)? I onda iz nekog razloga shvatim da je visina roditeljskog bloka manja od visine unutarnjeg.

Odgovor

Admin 06.06.2013 23:32:40

Svi vanjski blokovi su rastegnuti prema dimenzijama unutarnjih blokova. Ne morate to učiniti, već bi trebalo biti prema zadanim postavkama.

Odgovor

07.06.2013 11:11:09

i pogledate: http://progbase.ru/about.php

Odgovor

Admin 07.06.2013 21:54:37

Mora se koristiti

- stavite ovaj blok na različita mjesta i pogledajte što se mijenja. Kada sve bude u redu, ostavite ga tamo.

Odgovor

13.09.2013 21:39:34

Zdravo! Pomozite, molim vas, u prozoru ovog savjeta kada lebdite da napravite uvlake i druge stilove teksta. trag i dalje u tekstu

U slučaju HTML dokumenata, oznake više služe za označavanje sadržaja nego za označavanje načina na koji bi se trebao predstaviti. Više kontrole nad prezentacijom postiže se stilovima. U ovom ću članku pogledati one stilove koji su povezani s oblikovanjem odlomka u HTML-u.

Označiti

U HTML-u možete odrediti odlomke, a atribut align ih poravnava ulijevo, desno, središte ili poravnato. Osim njih, koristit ćemo atribut globalnog stila.

Poravnanje pasusa

Odlomak možete poravnati pomoću atributa align sa sljedećim vrijednostima:

text-align: lijevo|desno|centar|justify|inicial|naslijediti;

Kopirajte sljedeći kod u .html datoteku.

Ovaj je odlomak poravnat po sredini

Ovaj odlomak je poravnat udesno

Ovaj odlomak se prikazuje u prozoru preglednika opravdano. Dobro raspoređeni odlomak se poravnava desno i lijevo dodavanjem dodatnih razmaka. Možete vidjeti da se rubovi poravnatog odlomka podudaraju s rubovima lijevo i desno poravnatog odlomka. U lijevo poravnatom odlomku lijeva margina je ravna, a u desnom odlomku desna. Možete li vidjeti da ovaj odlomak ima oba ruba jednaka? To se postiže zahvaljujući stilu text-align:justify.

U prozoru HTML preglednika kod paragrafa izgleda ovako.

Razmak između redova

Možete kontrolirati razmak između odlomka pomoću style=line-height. Koristite atribut stila sa sljedećim vrijednostima:

visina reda: normalna|broj|dužina|početna|naslijediti;

Slijedi primjer HTML koda koji daje paragrafe s različitim razmacima između redaka:

Ovaj paragraf koristi dvije vrijednosti za atribut stila. Prva line-height:1.5 specificira jedan i pol razmak između redaka za odlomak, a druga vrijednost text-align:justify specificira da tekst odlomka treba biti poravnat po širini.

Ovaj odlomak ima dvostruki prored i opravdan je. line-height:2 specificira dvostruki razmak. Atribut stila ne mora imati dvije vrijednosti. Ali ako trebate navesti dvije vrijednosti, to možete učiniti tako da ih odvojite točkom i zarezom.

Evo nekoliko različitih načina za korištenje vrijednosti visine linije za atribut stila:

: Postavlja razmak između redaka na 13 piksela;

: Postavlja razmak između pasusa u HTML-u na 200% trenutne veličine fonta;

: Postavlja visinu linije na 14 piksela.

Uvlačenje

Koristio sam izraz "udubljenje" kako bih ga lakše razumio. Ali u HTML-u koristimo razmake za stvaranje bijelog prostora oko objekta. Možete koristiti atribut stila s vrijednošću odsječaka za postavljanje lijevog ili desnog uvlačenja odlomka.

Slijedi primjer lijevo i desno uvučenih odlomaka:

Ovaj stavak nije uvučen, samo je opravdan. Pogledajte atribut stila elementa P za ovaj odlomak.

Za ovaj odlomak postavio sam lijevo uvlačenje na 30px koristeći padding-left:30px. Ovaj je odlomak također opravdan korištenjem stila text-align:justify. Kao što već znate, možemo koristiti više vrijednosti za atribut Style tako da ih odvojimo točkom i zarezom.

I ovaj odlomak ima desnu uvlaku od 30 piksela, ali nema lijevu uvlaku. Također je opravdana širinom. Vrijednost 'padding-right' atributa stila postavlja padding udesno. Ako ne vidite učinak, smanjite širinu prozora preglednika tako da se opravdani HTML odlomak ispravno prikazuje.

Uvlake između pasusa (uvlaka prije i uvlaka poslije odlomka)

U HTML-u ili CSS-u ovo nam ne treba. Možemo samo stilizirati padding na elementu

Padding-top i padding-bottom definiraju bijeli prostor prije i poslije odlomka, koji funkcionira kao gornji ili donji padding. Pogledajte primjer oznake u nastavku

Postavio sam prvi HTML odlomak na 10px uvlačenje prije drugog i 50px nakon drugog odlomka:

Ovaj odlomak nije uvučen ni prije ni poslije. Ovo je redoviti paragraf opravdan. Kao što već znate, možemo opravdati odlomak pomoću koda style=”text-align:justify” unutar oznake.

Ovaj paragraf je poredan. Također ima uvlačenje od 10 px prije odlomka i 50 px poslije. Unutar oznake postavio sam 3 stila.

Ovo je normalan odlomak bez uvlaka i zadanog poravnanja.

Stvari koje treba zapamtiti

• HTML odlomak može se poravnati pomoću atributa align ili stila za poravnavanje teksta;
• HTML će se različito prikazati ovisno o veličini zaslona, ​​veličini prozora preglednika;
• Dodavanje dodatnih razmaka ili praznih redaka HTML kodu ne utječe na izlaz. Preglednik uklanja sve dodatne razmake;
• Oznake definiraju što treba biti prikazano, a stilovi definiraju kako se treba prikazati;
• Stilovi se mogu postaviti na tri različita načina - inline (unutarnje oznake), interni ( unutar iste HTML datoteke s elementom

  © 2022 Sva prava pridržana

  Web stranica o računalima

  • Oglašavanje na projektu