"Lorem ipsum dolor sit amet, consectetur 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 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eiusmod tempor incididunt ut labore et dolore magna aliqua. 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", koji je napisao Ciceron 45. godine nove ere. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemoquie architecto beatae vitae sunt explicabo. eos qui ratione voluptatem sequi nesciunt Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut laborate et dolore magnam minivolupt i aliquam magnam volupt minivolupt reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo paria voluptas nulla?" 1914. engleski prijevod, H. Rackham "Ali moram vam objasniti kako se rodila sva ova pogrešna ideja osuđivanja zadovoljstva i hvaljenja bola, a ja ću vam dati potpuni prikaz sistem, i izlažu stvarna učenja velikog istraživača istine, majstora-graditelja ljudske sreće. Niko ne odbacuje, ne voli ili izbegava samo zadovoljstvo, jer je ono zadovoljstvo, već zato što se oni koji ne znaju kako da racionalno tragaju za zadovoljstvom susreću sa posledicama koje su izuzetno bolne. Niti opet postoji neko ko voli, teži ili želi da zadobije bol od sebe, jer je to bol, već zato što se povremeno dogode okolnosti u kojima mu trud i bol mogu pružiti neko veliko zadovoljstvo. Uzmimo trivijalan primjer, ko se od nas ikada bavi napornim fizičkim vježbama, osim da bi iz toga izvukao neku prednost? Ali ko ima pravo da zamera čoveku koji izabere da uživa u zadovoljstvu koje nema dosadnih posledica, ili onom koji izbegava bol koji ne proizvodi nikakvo zadovoljstvo?" Paragraf 1.10.33 "de Finibus Bonorum et Malorum", napisao Ciceron u 45. n.e. „At vero eos et accamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestiasexcepturi sint off occaecati cupiditate non provident, similie labourique de molecio de molecia de i molestia. Et harum quidem rerum facilis est et expedita differentio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas acceptnda 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." 1914. engleski prijevod, H. Rackham "S druge strane, mi osuđujemo s pravednim ogorčenjem i nesličnim ljudima koji su toliko odvratni čarima zadovoljstva trenutka, toliko zaslijepljeni željom, da ne mogu predvidjeti bol i nevolje koje će sigurno rezultirati; a jednaka krivica pripada onima koji ne ispunjavaju svoju dužnost zbog slabosti volje, što je isto što i reći kroz uzdržavanje od truda i bola. Ovi slučajevi su savršeno jednostavni i lako ih je razlikovati. U slobodnom satu, kada je naša moć izbora neograničena i kada nas ništa ne sprečava da radimo ono što najviše volimo, svako zadovoljstvo treba pozdraviti i svaku bol izbjeći. Ali u određenim okolnostima i zbog pritužbi na dužnost ili poslovnih obaveza, često će se dogoditi da se zadovoljstva moraju odbaciti, a smetnje prihvatiti. Mudar se stoga u ovim stvarima uvijek drži ovog principa odabira: on odbacuje užitke kako bi osigurao druga veća zadovoljstva, ili pak trpi bolove da bi izbjegao gore bolove."
Web resurs korisnici ocjenjuju prema njegovoj vanjskoj atraktivnosti. Stoga, čak i informativno koristan tekst možda neće biti pročitan zbog činjenice da je lošeg kvaliteta. Zaključak - morate pažljivo i pažljivo pristupiti ne samo semantičkom sadržaju stranica web stranice, već i njegovom vizuelna prezentacija. Pojava CSS tehnologije proširila je mogućnosti za kreiranje uvjerljivih članaka. Jedno svojstvo dizajnirano da olakša pisanje je uvlačenje CSS teksta.
Margine i padding: u čemu je razlika?
Prije nego počnete s formatiranjem teksta, trebali biste razumjeti šta su margine i uvlake. Unatoč činjenici da ovi elementi označavanja u nekim slučajevima izgledaju isto za korisnika, postoje fundamentalne razlike između njih:
- polje je postavljeno svojstvom padding, uvlačenje - margina;
- margina je određena razmakom između sadržaja i granice bloka, uvlačenje - između granica susjednih blokova;
- Margine se mogu uzeti u obzir u veličini elementa (širina i visina), ili ne.
margin property
Dakle, da biste postavili horizontalno ili vertikalno uvlačenje CSS teksta, koristite konstrukciju margina. Ovo svojstvo se odnosi na oznaku definisanje paragrafa dokumenta. Najjednostavnije, piše se kao:
margina: 12px
Ova linija znači da će blok teksta (ili bilo koji drugi blok) biti uvučen sa svih strana za 12 piksela. Za povećanje intervala, na primjer, tri puta, dovoljno je napisati:
margina: 36px
Ali što ako razmak između blokova mora biti različit na svakoj strani? Programeri web stranica koriste nekoliko oblika notacije:
- margina: 11px 22px.
- margina: 11px 22px 33px.
- margina: 11px 22px 33px 44px.
U prvom primjeru, 11 piksela će biti uvučeno od donje i gornje ivice bloka, a 22 piksela će biti uvučeno sa strana bloka. Prema drugom obliku pisanja, biće 11 piksela između gornje ivice bloka i sadržaja, 33 piksela između donje i 22 piksela sa strane. U trećem slučaju, padding će biti 11 piksela od vrha, 22 piksela sa desne strane, 33 piksela od dna i 44 piksela sa leve strane.
Također je moguće snimiti udaljenost do granice bloka samo s jedne strane: margin-top, margin-bottom, margin-left, margin-right. Nakon što smo preveli nazive nekretnina na ruski, lako je pogoditi njihovu svrhu. Na primjer, sljedeći unos kaže da će desni padding biti 22 piksela:
margin-desno: 22px
Za ostale strane, udaljenosti oko bloka uzimaju se jednake vrijednosti roditeljskog elementa.
Nekretnina margina ima funkciju koju bi programer trebao imati na umu kada koristi CSS vertikalno uvlačenje. Intervali susjedni elementi nisu kumulativni, već naloženi jedno na drugo. Na primjer, neka ima jedan od blokova margin-bottom: 15px, i blok uz njega odozdo margin-top: 35px. Školska aritmetika i zdrav razum nalažu da ukupan padding između njih bude 50 piksela. U praksi to nije slučaj. Blokiraj sa velika vrijednost svojstva margina"apsorbuje" svog suseda. Kao rezultat toga, razmak između elemenata će biti 35 piksela.
"Crvena linija
Izrada dokumenta u uređivač teksta, korisnici radije postavljaju svaki novi stav koristeći crvenu liniju. Via CSS padding tekst na lijevoj strani je lako napraviti - konstrukcija se koristi uvlačenje teksta. Napisano je ovako:
uvlaka teksta: 11px.
To jest, prvi red pasusa će biti pomaknut od relativne lijeve ivice za 11 piksela. Da bi tekst na web stranici više ličio na dokument u uređivaču, potrebno je dodatno postaviti, odnosno napisati:
uvlaka teksta: 11px;
text-align: justify.
Osim piksela, prilikom opisivanja oznake, dozvoljeno je koristiti i druge jedinice - inče, bodove, procente. Neka blok ima uvlačenje CSS teksta od 10%. Sa širinom bloka od 500 piksela, crvena linija će biti 50 piksela (10% od 500).
Ovo svojstvo se može postaviti na nasljediti. Takav zapis kaže da blok koristi slično svojstvo roditeljskog bloka.
uvlaka teksta: naslijediti.
Iznenađujuće, može imati i negativne vrijednosti! U tom slučaju se formiraju takozvane izbočine, odnosno glavni tekst ostaje na mjestu, a prvi red se pomiče ulijevo za 22 piksela:
uvlaka teksta: -22px.
Da biste spriječili da slova izađu izvan lijeve granice pretraživača, pored uvlačenje teksta trebate koristiti konstrukciju za postavljanje polja:
padding-left: 22px
Glavna svojstva CSS-a koja treba uzeti u obzir. A praksa će vam pomoći da ih popravite. Evo nekoliko konačnih savjeta o tome kako primijeniti ono što ste naučili u razvoju vaše web stranice:
- crvena linija i uvlačenje teksta su različiti koncepti, a različita svojstva se koriste za njihovo specificiranje;
- za vertikalne uvlake ne vrijede pravila matematike - intervali se preklapaju, element s najvećom vrijednošću "pobjeđuje";
- negativan uvlaka stava koristi se za označavanje prvog reda pasusa pomoću slike.
Formatiranje HTML pasusa sa stilovima
U slučaju HTML dokumenata, oznake više rade na označavanju sadržaja nego da naznače kako treba biti predstavljen. Više kontrole nad prezentacijom postiže se stilovima. U ovom članku ću pogledati one stilove koji se odnose na formatiranje pasusa u HTML-u.
Tag
U HTML-u možete specificirati pasuse, a atribut align ih poravnava lijevo, desno, u sredini ili poravnato. Osim njih, koristit ćemo atribut globalnog stila.
Poravnanje pasusa
Možete poravnati paragraf koristeći atribut align sa sljedećim vrijednostima:
text-align: lijevo|desno|centar|justify|početno|naslijediti;
Kopirajte sljedeći kod u .html datoteku.
Ovaj paragraf je poravnat po sredini
Ovaj paragraf je poravnat desno
Ovaj paragraf se prikazuje u prozoru pretraživača sa poravnanjem. Dobro raspoređeni pasus se poravnava desno i lijevo dodavanjem dodatnih razmaka. Možete vidjeti da se ivice poravnatog pasusa poklapaju sa ivicama lijevo i desno poravnatih pasusa. U lijevo poravnatom pasusu, lijeva margina je ravna, a u desnom pasusu je desna. Vidite li da ovaj pasus ima ravne obje ivice? Ovo se postiže zahvaljujući stilu text-align:justify.
U prozoru HTML pretraživač kod paragrafa izgleda ovako.
Prored
Možete kontrolirati razmak između pasusa sa style=line-height. Koristite atribut style sa sljedećim vrijednostima:
visina linije: normalna|broj|dužina|početna|naslijediti;
Slijedi primjer HTML koda koji daje paragrafe sa različitim proredom:
Ovaj paragraf koristi dvije vrijednosti za atribut stila. Prva line-height:1.5 specificira jedan i po prored za pasus, a druga vrijednost text-align:justify specificira da tekst pasusa treba biti poravnat po širini.
Ovaj pasus ima dvostruki prored i opravdan je. line-height:2 specificira dvostruki razmak. Atribut style ne mora imati dvije vrijednosti. Ali ako trebate navesti dvije vrijednosti, to možete učiniti tako što ćete ih odvojiti tačkom i zarezom.
Evo nekoliko različitih načina za korištenje vrijednosti visine linije za atribut stila:
: Garniture prored 13 piksela;
: Postavite na HTML udaljenost između pasusa na 200% trenutne veličine fonta;
: Postavlja visinu linije na 14 piksela.
Udubljenje
Koristio sam izraz "udubljenje" da bih ga lakše razumio. Ali u HTML-u koristimo razmake za stvaranje bijelog prostora oko objekta. Možete koristiti atribut stila sa vrijednošću dopuna da postavite lijevo ili desno uvlačenje pasusa.
Slijedi primjer lijevo i desno uvučenih pasusa:
Ovaj paragraf nije uvučen, samo je opravdan. Pogledajte atribut stila elementa P za ovaj paragraf.
Za ovaj pasus, postavio sam lijevo uvlačenje na 30px koristeći padding-left:30px. Ovaj paragraf je takođe opravdan korišćenjem stila text-align:justify. Kao što već znate, možemo koristiti više vrijednosti za atribut Style tako što ćemo ih odvojiti tačkom i zarezom.
I ovaj pasus ima desno uvlačenje od 30 piksela, ali nema lijevo uvlačenje. Opravdano je i po širini. Vrijednost 'padding-right' atributa stila postavlja padding udesno. Ako ne vidite efekat, smanjite širinu prozora pretraživača tako da se opravdani HTML paragraf pravilno prikazuje.
Uvlake između pasusa (uvlaka prije i uvlaka poslije pasusa)
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 pasusa, koji funkcionira kao gornji ili donji padding. Pogledajte primjer oznake ispod
Postavio sam prvi HTML paragraf na 10px uvlačenje prije drugog i 50px nakon drugog pasusa:
Ovaj paragraf nije uvučen ni prije ni poslije. Ovo je regularan paragraf opravdan. Kao što već znate, možemo opravdati paragraf pomoću koda style=”text-align:justify” unutar oznake.
Ovaj paragraf je poređan. Takođe ima uvlačenje od 10 px ispred pasusa i 50 px posle. Unutar oznake sam postavio 3 stila.
Ovo je normalan pasus bez uvlaka i zadanog poravnanja.
Stvari koje treba zapamtiti
- HTML paragraf se može poravnati align atribut ili stil text-align ;
- HTML će biti različito prikazan u zavisnosti od veličine ekrana, veličine prozora pretraživača;
- Dodavanje dodatnih razmaka ili praznih linija u HTML kod ne utiče na izlaz. Pretraživač uklanja sve dodatne prostore;
- Oznake definišu šta treba da bude prikazano, a stilovi definišu kako treba da bude prikazano;
- Stilovi se mogu definirati u tri Različiti putevi- ugrađeni (unutarnje oznake), interni ( unutar iste HTML datoteke sa elementom
Princ Andrej se nekoliko puta osvrnuo na ovaj hrast dok je jahao kroz šumu. Pod hrastom je bilo cveća i trave, ali on je i dalje stajao usred njih, sumoran, nepomičan, ružan i tvrdoglav.
rezultat:
Princ Andrej se nekoliko puta osvrnuo na ovaj hrast dok je jahao kroz šumu. Pod hrastom je bilo cveća i trave, ali on je i dalje stajao usred njih, sumoran, nepomičan, ružan i tvrdoglav.
Sada možete lako napravite crvenu liniju na svom html stranice . Vidimo se uskoro!
