Kako uvući prvi red u html-u. Kako uvući u CSS? Stvari koje treba zapamtiti

"Lorem IPSUM Dolor Sit Amet, Consectur Adipisicing Elit, Sed Do Eiusmod Tempor Incididunt Ut Labore et Dolore Magna Aliqua. Ut Enim Ad minim Veniam, QUIS NOSTRUD EXERCITATION ULLAMCO Laboris NISI UT Aliquip Ex Ea Commodo Consequat. Duis Aute Irure Dolor in Repreheendit in Voluptate "Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Paragraf 1.10.32 "de Finibus Bonorum et Malorum", napisao Ciceron 45. godine. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit a u t fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Ut enim ad minima veniam , quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur??" Engleski prijevod 1914., H. Rackham "Ali moram vam objasniti kako se rodila sva ova pogrešna ideja osuđivanja užitka i hvaljenja boli i dat ću vam potpuni prikaz sustav, i objasniti stvarna učenja velikog istraživača istine, majstora-graditelja ljudske sreće. Nitko ne odbacuje, ne voli i izbjegava sam užitak zato što je užitak, već zato što onaj tko ne zna razumno ganjati nailazi na posljedice koje su izuzetno bolne. Niti opet postoji itko tko voli ili teži ili želi steći bol samu po sebi, jer je to bol, ali zato što se povremeno događaju okolnosti u kojima mu ulje i bol mogu priskrbiti veliko zadovoljstvo. Uzmimo trivijalni primjer, tko se od nas ikada bavi napornom tjelesnom vježbom, osim da iz nje izvuče neku korist? Ali tko ima ikakvo pravo prigovarati čovjeku koji odluči uživati ​​u užitku koji nema dosadnih posljedica, ili onome koji izbjegava bol koja ne proizvodi nikakvo zadovoljstvo?" Paragraf 1.10.33 "de Finibus Bonorum et Malorum", napisao Ciceron u 45 AD "At vero eos etcusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias exceptionuri sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fu ga . Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas acceptenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat." Engleski prijevod 1914., H. Rackham "S druge strane, mi osuđujemo s pravednim gnjevom i ne volimo ljude koji su toliko prevareni i demoralizirani čarima zadovoljstva trenutka, toliko zaslijepljeni željom, da ne mogu predvidjeti Bol i nevolje koje su dužne riješiti; a jednaka krivica pripada onima koji ne izvrše svoju dužnost zbog slabosti volje, što je isto kao reći kroz sustezanje od ulja i boli. Ovi slučajevi su savršeno jednostavni i lako ih je razlikovati. U slobodnom satu, kada je naša moć izbora nesputana i kada nas ništa ne sprječava da radimo ono što najviše volimo, svako zadovoljstvo je dobrodošlo, a svaka muka izbjegnuta. Ali u određenim okolnostima i zbog zahtjeva dužnosti ili poslovnih obveza često će se dogoditi da se užici moraju odbaciti, a smetnje prihvatiti. Mudar se čovjek stoga u tim stvarima uvijek drži ovog načela odabira: on odbacuje užitke kako bi osigurao druge veće užitke, ili pak podnosi boli kako bi izbjegao gore boli."

Web resurs ocjenjuju korisnici na temelju njegove vizualne privlačnosti. Dakle, čak i informativno koristan tekst možda neće biti pročitan zbog činjenice da je loše dizajniran. Zaključak - morate pažljivo i pažljivo pristupiti ne samo semantičkom sadržaju stranica web mjesta, već i njegovom vizualni prikaz. Pojava CSS tehnologije proširila je mogućnosti stvaranja atraktivnih članaka. Jedno od svojstava dizajniranih za lakše čitanje teksta je uvlačenje CSS teksta.

Margine i ispuna: u čemu je razlika?

Prije nego počnete oblikovati tekst, trebali biste razumjeti što su margine i uvlake. Unatoč činjenici da ovi elementi označavanja u nekim slučajevima korisniku izgledaju isto, među njima postoje temeljne razlike:

• polje je određeno svojstvom podstava, uvlaka - margina;
• margina je određena razmakom između sadržaja i granice bloka, uvlaka - između granica susjednih blokova;
• margine mogu ali ne moraju biti uzete u obzir u dimenzijama elementa (širina i visina).

maržna imovina

Dakle, za postavljanje vodoravne ili okomite uvlake CSS teksta upotrijebite konstrukciju margina. Ovo se svojstvo odnosi na oznaku definiranje paragrafa dokumenta. U najjednostavnijem slučaju piše se ovako:

margina: 12px.

Ova linija znači da će oko bloka teksta (ili bilo kojeg drugog bloka) biti udubljenje od 12 piksela sa svih strana. Za povećanje intervala, na primjer, tri puta, samo napišite:

margina: 36px.

Ali što ako bi interval između blokova trebao biti drugačiji na svakoj strani? Programeri web stranica koriste nekoliko oblika snimanja:

1. margina: 11px 22px.
2. margina: 11px 22px 33px.
3. margina: 11px 22px 33px 44px.

U prvom primjeru, 11 piksela će biti uvučeno od donjeg i gornjeg ruba bloka, a 22 piksela sa strane bloka. Prema drugom obrascu snimanja, bit će 11 piksela između gornjeg ruba bloka i sadržaja, 33 piksela između dna i 22 piksela sa strane. U trećem slučaju, ispuna će biti 11 piksela na vrhu, 22 piksela na desnoj strani, 33 piksela na dnu i 44 piksela na lijevoj strani.

Također je moguće zabilježiti udaljenost do granice bloka samo s jedne strane: margin-gore, margin-bottom, margin-lijevo, margin-desno. Prevođenjem naziva nekretnina na ruski lako je pogoditi njihovu svrhu. Na primjer, sljedeći unos kaže da će desna margina biti 22 piksela:

margina-desno: 22px.

Za druge strane, pretpostavlja se da su udaljenosti oko bloka jednake vrijednosti nadređenog elementa.

Vlasništvo margina ima značajku koju programer mora imati na umu kada koristi vertikalno uvlačenje CSS teksta. Intervali susjedni elementi ne sabiraju se, već se nadovezuju jedna na drugu. Na primjer, neka jedan od blokova ima margina-dno: 15px, i blok ispod njega margin-top: 35px. Školska aritmetika i zdrav razum sugeriraju da će ukupni razmak između njih biti 50 piksela. U praksi to nije slučaj. Blokiraj sa velika vrijednost Svojstva marginaće "apsorbirati" svog susjeda. Kao rezultat toga, razmak između elemenata bit će 35 piksela.

"Crvena crta

Sastavljanje dokumenta u uređivač teksta, korisnici radije pitaju svaki novi paragraf koristeći crvenu liniju. Pomoću CSS uvlačenje tekst na lijevoj strani je jednostavan za izradu - koristi se konstrukcija tekstualna uvlaka. Napisano je ovako:

uvlaka teksta: 11px.

To jest, prvi redak odlomka bit će pomaknut u odnosu na lijevi rub za 11 piksela. Kako bi tekst na web stranici bio što sličniji dokumentu u uređivaču, potrebno je dodatno postaviti, odnosno napisati:

uvlaka teksta: 11px;

poravnanje teksta: poravnanje.

Osim piksela, pri opisivanju oznaka dopušteno je koristiti i druge jedinice - inče, točke, postotke. Neka blok ima CSS ispunu teksta od 10%. Sa širinom bloka od 500 piksela, crvena linija će biti 50 piksela (10% od 500).

Ovo se svojstvo može postaviti na naslijediti. Ovaj unos kaže da blok koristi slično svojstvo nadređenog bloka.

text-indent: naslijediti.

Začudo, može imati i negativne vrijednosti! U ovom slučaju formiraju se takozvani prevjesi, odnosno glavni tekst ostaje na mjestu, a prvi redak pomaknut je ulijevo za 22 piksela:

uvlaka teksta: -22px.

Kako biste spriječili da slova izađu izvan lijevog ruba preglednika, osim toga tekstualna uvlaka trebate upotrijebiti konstrukciju za postavljanje polja:

padding-left: 22px.

Prikazana su osnovna svojstva CSS-a. A praksa će vam pomoći da ih učvrstite. Evo nekoliko završnih savjeta za primjenu onoga što ste naučili u razvoju vaše web stranice:

• crvena linija i uvlačenje teksta različiti su pojmovi, a za njihovo označavanje koriste se različita svojstva;
• Za okomite uvlake ne vrijede matematička pravila - intervali se preklapaju, element s većom vrijednošću “pobjeđuje”;
• negativan uvlačenje odlomka koristi se za označavanje prvog retka odlomka pomoću slike.

Oblikovanje 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.

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 HTML preglednik Kod paragrafa 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:

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.

: Garniture razmak između redova 13 piksela;

: Postavlja na HTML udaljenost 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:

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 tako da se opravdani HTML odlomak ispravno prikazuje.

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:

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 poravnati atribut ili stil 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 odrediti u tri različiti putevi— ugrađeni (unutar oznaka), interni ( unutar iste HTML datoteke pomoću elementa
  

  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 lako napravi crvenu liniju na svom html stranice . Vidimo se opet!