Kako uvući html kod. Kako napraviti crvenu liniju u html-u ili uvući prvu liniju u paragrafu

04/11/16 10,5K Formatiranje HTML odlomka pomoću stilova

U slučaju HTML dokumenata, oznake više služe za označavanje sadržaja nego za označavanje kako bi trebao biti predstavljen. Veća kontrola nad prezentacijom postiže se stilovima. U ovom ću članku pogledati one stilove koji su povezani s oblikovanjem odlomaka u HTML-u.

Označiti

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

Poravnanje odlomaka

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

poravnanje teksta: lijevo|desno|sredina|obostran|početno|naslijediti;

Kopirajte sljedeći kod u svoju .html datoteku.

Poravnanje odlomka pomoću atributa Style

Ovaj je odlomak poravnat po sredini

Ovaj odlomak je poravnat udesno

Ovaj se odlomak pojavljuje poravnat u prozoru preglednika. Obostrani odlomak poravnat je udesno i ulijevo dodavanjem dodatnih razmaka. Možete vidjeti da rubovi poravnatog odlomka odgovaraju rubovima lijevo i desno poravnatih odlomaka. U lijevo poravnatom odlomku, lijevi rub je ravan, dok je u desnom poravnatom odlomku lijevi rub ravan. Vidite li kako su oba ruba ovog odlomka ravna? To se postiže stilom text-align:justify.

U prozoru preglednika HTML kod za odlomak izgleda ovako:

Razmak između redova

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

visina-line: normalan|broj|duljina|početno|naslijediti;

Dolje je primjer HTML koda koji prikazuje odlomke s različitim proredom:

Postavljanje proreda pomoću atributa Style

Ovaj odlomak koristi dvije vrijednosti za atribut stila. Prva line-height:1.5 određuje jedan i pol prored za odlomak, a druga vrijednost text-align:justify navodi da tekst odlomka treba biti raspoređen po širini.

Ovaj odlomak je dvostruki prored i obostrano poravnat. line-height:2 specificira dvostruki prored. 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 prored na 13 piksela;

: postavlja HTML razmak između odlomaka na 200% u odnosu na trenutnu veličinu fonta;

: Postavlja visinu linije na 14 piksela.

Udubljenja

Upotrijebio sam izraz "uvlake" radi lakšeg razumijevanja. Ali u HTML-u koristimo razmak za stvaranje praznog prostora oko objekta. Možete upotrijebiti atribut stila s vrijednošću ispune za uvlačenje odlomka ulijevo ili udesno.

Ispod je primjer odlomaka s lijevom i desnom uvlakom:

Uvucite odlomke pomoću atributa Style

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

Za ovaj odlomak postavio sam lijevo padding na 30 px koristeći stil padding-left:30px. Ovaj je odlomak također poravnat pomoću 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 desno uvlačenje od 30 piksela, ali nema lijevo uvlačenje. Također je usklađeno sa širinom. Vrijednost 'padding-right' atributa stila specificira pravo ispunjavanje. Ako ne vidite učinak, smanjite širinu prozora preglednika kako bi se opravdani HTML odlomak pravilno prikazao.

Uvlačenje između odlomaka (uvlačenje prije i uvlačenje iza odlomka)

U HTML-u ili CSS-u ovo nam ne treba. Možemo jednostavno odrediti stil ispune za element

Padding-top i padding-bottom određuju prazan prostor prije i iza odlomka, koji se ponaša kao ispuna na vrhu ili dnu. Pogledajte primjer oznake u nastavku

Postavio sam da prvi HTML odlomak ima ispunu od 10 piksela prije drugog odlomka i 50 piksela nakon drugog odlomka:

Uvucite odlomke pomoću atributa Style

Ovaj odlomak nema navedene uvlake prije ili poslije. Ovo je redoviti paragraf, obostran. Kao što već znate, možemo opravdati odlomak pomoću koda style=”text-align:justify” unutar oznake.

Ovaj paragraf je predimenzioniran. Također ima 10 piksela ispune prije odlomka i 50 piksela iza njega. Unutar oznake postavio sam 3 stila.

Ovo je uobičajeni odlomak bez uvlaka i zadanog poravnanja.

Stvari koje treba zapamtiti

• HTML odlomak može se poravnati pomoću atributa align ili stila poravnanja teksta;
• HTML će se prikazati drugačije ovisno o veličini zaslona, ​​veličini prozora preglednika;
• Dodavanje dodatnih razmaka ili praznih redaka u vaš HTML ne utječe na izlaz. Preglednik uklanja sve dodatne razmake;
• Oznake definiraju što bi trebalo biti prikazano, a stilovi definiraju kako bi trebalo biti prikazano;
• Stilovi se mogu specificirati na tri različita načina - inline (unutar oznaka), interni (unutar iste HTML datoteke pomoću elementa) i vanjski (u zasebnoj datoteci);
• Najbolja praksa pri razvoju web stranica je korištenje vanjske CSS datoteke. Na taj način možemo odvojiti sadržaj i prezentaciju;
• Stil je globalni atribut, pa se može koristiti na svim drugim elementima, a ne samo na elementu

  ;

• Stil poravnavanja teksta poravnava odlomak lijevo, središte, desno ili obostrano;
• Prored za odlomak može se postaviti pomoću stila visine retka. Može poprimiti različita značenja;
• Možete odrediti više vrijednosti za visinu retka (1 za jednostruki prored, 1,5 za jedan i pol, 2 za dvostruki, 3 za trostruki itd.), kao i piksele, postotke itd.;
• Uvlačenje odlomka u HTML-u može se postaviti pomoću stila padding-left ili padding-desno. Može uzeti vrijednosti u pikselima, postocima itd.;
• Razmak između odlomaka u HTML-u može se postaviti pomoću stilova padding-top ili padding-bottom. Vrijednosti u pikselima, postocima itd. također su prihvatljive za ovo.

Ova publikacija je prijevod članka “Formatiranje HTML paragrafa”, koji je pripremio prijateljski projektni tim

Zdravo! Nastavimo s osvrtom na osnove programiranja web stranice. Teško je zamisliti barem jedan od njih koji u svom kodu ne sadrži oznaku paragrafa. Danas ćemo pogledati kako to ispravno napisati i opis nekoliko dodatnih radnji s tekstom.

Primjer

Pogledajmo primjer kako napraviti odlomak u HTML kodu.

Jedna ili više rečenica.

Preduvjet je prisutnost oznake za otvaranje i zatvaranje. Usput, sve možete učiniti izravno u Notepadu, samo trebate kasnije spremiti datoteku u odgovarajućem formatu.

Oblikovanje

Često primjećujem da ljude zanima kako napraviti crvenu liniju. Za određeni odlomak to se radi vrlo jednostavno.

Omogućavanje ovih opcija uvući će prvi redak 15 piksela od lijevog ruba. Ako se takve promjene trebaju primijeniti na sve oznake P, tada u CSS datoteku koja je povezana sa stranicama web-mjesta možete napisati kod prikazan u nastavku.

Osobno, obično ne pravim crvene crte kada uređujem kod u Notepadu ili drugom uređivaču.

Jednostavno uključujem ispunu između tekstualnih blokova. Da biste to učinili, morate navesti posebne parametre u CSS-u.

p(margin-bottom:25px;)

Ako koristite ovaj dizajn, nakon svakog odlomka bit će uvlaka od 25 piksela.

Zapravo, postoji mnogo opcija za rad s HTML-om i raznim stilovima. Opisao sam samo neke od njih, vrlo je teško sve pokriti u jednom članku.

Želite znati više? Možda će vam moje prethodne publikacije o sljedećim temama biti korisne:

Ovdje ću zaključiti članak i, mislim, sada neće biti teško napraviti odlomke u HTML-u i lijepo ih oblikovati pomoću posebnih oznaka.

Želim vam puno uspjeha u savladavanju programiranja. Usput, jeste li razmišljali o zaradi na neprofitnim informativnim stranicama? Dao je jednostavno nevjerojatne informacije posebno za svoje čitatelje.

Normalan online rad i financije ključne su teme ovog bloga. Možete se upoznati s pojedinačnim izgledima na mreži upravo sada iz objavljenih materijala. Nastavljam pripremati i objavljivati ​​nove, i što je najvažnije, stvarno korisne sadržaje. Pretplatite se na ažuriranja Workipa na svoju e-poštu. Vidimo se kasnije.

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

Problem možete riješiti na više načina, na primjer, možete umetnuti nekoliko posebnih znakova u nizu na početku svakog odlomka, ali to može oduzeti dosta vremena. Stoga preporučujem korištenje svojstva CSS text-indent za stvaranje crvene linije, koja postavlja uvlaku prvog retka bloka teksta. U tom slučaju nema učinka na preostale retke.

Svojstvo text-indent ima jednostavnu sintaksu:

uvlaka teksta: | | naslijediti

Kao vrijednosti možete navesti piksele (px), točke (pt) i druge jedinice prihvaćene u CSS-u. Vrijednost određuje koliko treba pomaknuti tekst prvog retka udesno od izvornog položaja. Prihvatljivo je navesti negativne vrijednosti, tada će se tekst pomaknuti ulijevo. Prilikom navođenja postotnih vrijednosti, uvlačenje prvog retka izračunava se ovisno o širini bloka teksta.

Ako trebate dodati crvenu liniju samo jednom odlomku, možete učiniti sljedeće:

Proizlaziti:

Uz rub ceste stajao je hrast. Bila je vjerojatno deset puta starija od breza koje su činile šumu, deset puta deblja i dvostruko viša od svake breze. Bio je to golem hrast, duplo veći, slomljenih grana i kore obrasle starim ranama. Golemih, nespretnih, asimetrično raširenih kvrgavih ruku i prstiju, stajao je poput starog, ljutog i prezrivog čudaka između nasmiješenih breza. Samo se on jedini nije htio pokoriti čarima proljeća i nije htio vidjeti ni proljeća ni sunca.

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

p.uvlaka(
uvlaka teksta: 25px;
}

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

Proizlaziti:

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

Sada možete jednostavno napraviti crvenu liniju na svojim html stranicama. Vidimo se opet!

Čitajući bilo koju knjigu, novine, časopis ili općenito bilo koji normalan tekst, naišli ste na mnogo odlomaka, a prvi redak svakog od njih sadrži malu uvlaku. U ovom ću članku pokazati najbolju opciju za postavljanje uvlaka odlomaka pomoću CSS-a.

Naravno, pomoću , odabirom potrebne uvlake, možete umetnuti bilo koji broj razmaka, ali vjerojatno razumijete da je ova metoda, blago rečeno, nezgodna. A rješenje ovog problema je vrlo jednostavno.

Već biste trebali znati da se u HTML-u odlomak stvara pomoću . Dakle, svaki odlomak treba biti u vlastitoj oznaci. Da biste uvukli prvi redak svakog odlomka, samo povežite sljedeći CSS kod:

P(
uvlaka teksta: 10px;
}

U ovom smo primjeru napravili uvlačenje od 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 postaviti uvlaku za prve retke bilo kojeg odlomka u tekstu na stranici.

Ako imate pitanja ili želite komentirati ovaj članak, svoj komentar možete ostaviti na dnu stranice.

Komentari (9):

31.05.2013 13:10:03

Zdravo Mikhail, pomozi mi riješiti problem sa sljedećim css kodom: .bam ( border: 1px full black; border-radius: 8px; margin-bottom: 4%; text-align: left; width: 84%; ) .bam .author (boja-pozadine: bijela; rub-bottom: 1px puna crna; border-top-right-radius: 8px; border-top-left-radius: 8px; font-weight: bold; padding:4px; ) .bam .text ( background-color: WhiteSmoke; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding:4px; ) Potrebno je da se tekst unutar ".bam .text" prelama u drugi linija 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

Pozdrav Mikhail, znaš li možda kako pronaći izlaz iz sljedeće situacije: postoji blok, a unutar njega je još jedan blok, au tom bloku ono što je unutra je napisan tekst (dužina teksta je nije unaprijed poznato). Dakle, kako možete učiniti da visina nadređenog bloka ovisi o visini bloka unutar njega (s tekstom)? Iz nekog razloga ispada da je visina matičnog bloka manja od visine unutarnjeg.

Odgovor

Administrator 06/06/2013 23:32:40

Svi vanjski blokovi rastegnuti su ovisno o veličini unutarnjih blokova. Nema potrebe to činiti, već bi trebalo biti tamo prema zadanim postavkama.

Odgovor

07.06.2013 11:11:09

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

Odgovor

Admin 06/07/2013 21:54:37

Mora se koristiti - postavite ovaj blok na različita mjesta i pogledajte što se mijenja. Kada je sve u redu, ostavite ga tamo.

Odgovor

13.09.2013 21:39:34

Zdravo! Molim vas, pomozite mi napraviti uvlake i druge stilove teksta u ovom prozoru s opisom lebdećeg miša. Nešto jednostavno ne funkcionira, to je sve. Hvala unaprijed. .podskazka( background-color: #FF6600; padding:0px; border:3px solid #66FFFF; position:absolute; margin: 3px; width: 200px; min-height: 50px; max-height: auto; white-space: normal ; border-bottom: 1px isprekidano #000080; ) funkcija podskazka() ( this.show = function(text,x,y) ( var div = document.createElement("div"); div.className = "podskazka"; div .id = "metka"; div.innerHTML = tekst; var koordx = x + 0; var koordy = y + 20; div.style.left = koordx + "px"; div.style.top = koordy + "px" ; document.body.appendChild(div); ) this.hide = function() ( var metka = document.getElementById("metka"); metka.parentNode.removeChild(metka); ) ) var vspil = new podskazka(); hint Savjet i dalje u tekstu

Da biste mu dali određeni stil, trebate smjestiti tekst u odgovarajući spremnik.

Sve oznake za oblikovanje mogu se podijeliti u tri skupine:

1. Oznake naslova (h1-h6).

2. Oznake dizajna teksta ( , , , itd.).

3. Oznake za grupiranje (

, ,
)

Naslovne oznake

Oni pretvaraju uobičajeni tekst u naslov određene razine. Oznaka stvara naslov prve razine - najveći i najvažniji (obično naslov članka na stranici), te je odgovoran za naslov šeste razine - najmanji i najneupadljiviji. Ove su oznake važne i za korisnike i za tražilice - i jedni i drugi vole naslove s podnaslovima. Mora se poštovati hijerarhija razina, odnosno ići iza, a ne obrnuto.

Da biste razumjeli kako ovo funkcionira, unesite sljedeći kod u html datoteku:

Naslov prve razine Naslov druge razine Naslov treće razine Naslov četvrte razine Naslov pete razine Naslov šeste razine

U pregledniku će izgledati ovako:

Oznake za dizajn tijela teksta

Omogućuje formatiranje na razini znakova. Pogledajmo što možete učiniti s njima.

Podebljani font

Potrebno je fokusirati pažnju na tekst. Također je važno za tražilice; one mogu istaknuti ključne riječi.

Oznake i zaslužne su za hrabar stil.

Indeks i indeks

Mogu se koristiti u formulama, jednadžbama i označavanju određenih veličina.

Oznaka je odgovorna za kreiranje donjih indeksa, a oznaka se koristi za gornje indekse.

X1=32 m2

Smanjenje broja zaposlenih

Ako trebate učiniti tekst manjim od postavljene vrijednosti na cijeloj stranici, tada morate koristiti oznaku

Običan tekst. Smanjeni tekst.

Podvlaka

Ova vrsta isticanja može se koristiti za označavanje promjena napravljenih na dokumentu ili jednostavno za privlačenje pozornosti na tekst.

Običan tekst. Podcrtani tekst.

Precrtano

Možete prekrižiti informaciju ako je već izgubila svoju važnost. Oznaka je za to namijenjena.

Kurziv

Potreban je za fokusiranje pažnje na tekst, a može se izraditi s oznakom ili .

Računalni unos teksta

Dešava se da trebate dodati izvorni kod programa i rezultate njegovog rada na web stranicu. Kako bi se olakšalo vizualno razlikovanje različitih dijelova teksta jedan od drugog, HTML programeri uveli su oznake ove skupine.

Spremnik sadrži kod programa, dok su njegove varijable označene oznakom, a rezultat izvođenja je . Spremnik sadrži tekst koji korisnik mora unijeti s tipkovnice kada radi s programom, a sve što je u tagovima zadržava izvorni format, uključujući dodatne razmake i prijelome redaka.

dakle a, b, c, ovo je rezultat izvršavanja programa, a ovo je tekst koji je unio korisnik i prikazuje se otprilike ovako.

Citati i definicije

Programski kod će izgledati ovako, varijable su označene na sljedeći način: a, b, c, ovo je rezultat izvršavanja programa, a ovo je tekst koji upisuje korisnik. Zadržavanje izvornog oblikovanja izgleda otprilike ovako.

Citat u oznaci blockquote Citat unutar spremnika cite Kratki citat s oznakom q Istaknuta definicija Kratica (NGO, individualni poduzetnik).

Opći primjer

Da biste bolje razumjeli za što je svaka oznaka odgovorna i kako radi, pogledajte sljedeći kod i rezultat njegovog izvođenja.

Podebljani tekst može se napraviti pomoću oznaka strong i b. Em i odgovorni su za kurziv. ja.

Oznake sub i sup koriste se za stvaranje indeksa (x1...xn) i superscripta (42=16). Del prekriži, in podvuče.

Oznake code, kbd, var i samp rijetko se koriste i potrebne su za prikaz popisa programa

abbr je potreban za označavanje kratica (HTML). Oznake blockquote, cite i q koriste se za oblikovanje citata (Nebo je već disalo u jesen)

Predoznaka čuva izvorno oblikovanje teksta bez uklanjanja razmaka ili prijeloma redaka.

Preglednik tumači ovaj kod na sljedeći način:

Grupiranje oznaka

Potrebno je da tekst ne teče u jednom neprekidnom retku, već da je razlomljen na logične komponente.

• Unutar oznaka nalazi se odlomak.

Prvi paragraf

Drugi paragraf

• Označiti
  prelazi na sljedeći redak unutar odlomka (neće biti uvlake ispred retka).
• omogućuje crtanje vodoravne linije. Možete ga koristiti za jasnije odvajanje teksta. Atributi širine, veličine, boje, poravnanja i bez sjenila određuju širinu, debljinu, boju, poravnanje i odsustvo 3D efekta linije.

Crta iznad crte. Crta ispod crte.