Transformacija i dekoracija teksta
1. Text-transform text-transform
Via datoj imovini može pretvoriti tekst na vrh i mala slova s, ili pretvorite prva slova svake riječi koja su bila velika (velika slova) u mala. Naslijeđeno.
Sintaksa
h2 (transformacija teksta: nema;) h2 (transformacija teksta: velika slova;) h2 (transformacija teksta: velika slova;) h2 (transformacija teksta: mala;) 
Rice. 1. Transformirajte tekst sa svojstvom text-transform
2. Smjer teksta
Svojstvo specificira smjer pisanja teksta, smjer postavljanja kolone tablice, smjer u kojem blok ispunjava sadržaj horizontalno i poziciju posljednjeg reda elementa sa poravnanjem. Preporučuje se za korištenje sa unicode-bidi svojstvo. Naslijeđeno.
Sintaksa
P (smjer: ltr;) p (smjer: rtl;)
3. Smjer pisanja riječi u unicode-bidi tekstu
Svojstvo se koristi zajedno sa svojstvom smjera za podršku pisanju riječi u dvosmjernom tekstu. Nije naslijeđen.
Sintaksa
P (unicode-bidi: normal;) p (unicode-bidi: embed;) p (unicode-bidi: bidi-override;)
4. Dekoracija teksta Tekstualna dekoracija
Svojstvo ukrašava tekst. Također uklanja podvlačenje veza. Nije naslijeđen.
Sintaksa
A (dekoracija teksta: nema;) span (dekoracija teksta: podcrtana;) span (dekoracija teksta: precrtana;) span (dekoracija teksta: linija;) 2. Dekoriranje teksta svojstvom text-decoration
5. Formatiranje prvog slova i prvog reda pasusa
CSS dozvoljava formatiranje pasusa koristeći pseudoelemente :first-letter i :first-line. Na primjer, možete naglasiti prvi znak svakog pasusa oponašanjem kapice ili možete dati posebno oblikovanje prvoj rečenici pasusa. Pozadina za :first-letter se također može postaviti na gradijent ispunu.
/*prvi pasus*/ p:first-letter (font-size: 2em; margin-right: 2px; boja: #EE9966; font-weight: bold; text-shadow: -1px -1px 1px bijeli, 1px 1px 1px # 9E9D99; ) p:prvi red (boja: #EE9966; ) /*drugi pasus*/ p:prvo slovo (veličina fonta: 1,2em; padding: 5px 10px; margin-desno: 5px; pozadina: #EE9966; boja: #FAF4F4; float: lijevo; radijus granice: 50% 0; težina fonta: bold; ) /*treći pasus*/ p:prvo slovo (veličina fonta: 1,2em; padding: 5px 10px; margin- desno: 5px; margin-bottom: 2px; pozadina: #EE9966; boja: #FAF4F4; float: lijevo; font-weight: bold; ) /*četvrti pasus*/ p:first-letter (font-size: 1.2em; padding: 3px 10px; margin-desno: 5px; pozadina: #EE9966; boja: #FAF4F4; float: lijevo; font-weight: bold; border-radijus: 50%; ) /*peti pasus*/ p:first-letter (font-size: 1.5em; padding: 2px 10px; margin-right: 5px; pozadina: #FAF4F4; ivica: 6px dupla; boja: #EE9966; float: lijevo; font-weight: bold; ) /*šesti pasus* / p: prvo slovo( font-si ze: 1..png); granica: 2px čvrsta #EE9966; boja: #544E3E; float: lijevo; font-weight: bold; box-shadow: 1px 1px 1px #9E9D99; )
6. Oblikujte navodnike
Svojstvo specificira tip navodnika koji se koristi u dokumentu za ugniježđene citate. Podrazumevano, navodnici obuhvataju tekst u okviru oznake. . Također možete generirati citate koristeći svojstvo sadržaja tako što ćete ga postaviti na open-quote i close-quote. Vrijednost je posebna HTML znak ili Unicode znak. Naslijeđeno.
Sintaksa
P (navodnici:""" """;) p (navodniki: nema;)
| Opis | Izgled | Unicode broj | HTML kod/Mnemonika |
|---|---|---|---|
| dvostruki citat | " | \0022 | " |
| Apostrof | " | \0027 | " |
| Otvaranje jednostrukog citata | ‘ | \2018 | ‘ |
| Zatvaranje jednostrukog navodnika | ’ | \2019 | ’ |
| Završni dvostruki navodnik | “ | \201C | “ |
| Pravi dupli navodnik | ” | \201D | ” |
| Dvostruki donji citat | ⹂ | \2E42 | ⹂ |
| Otvaranje lijevog navodnika "božićno drvce" | « | \00AB | « |
| Zatvarajući desni navodnik "božićno drvce" | » | \00BB | » |
| Niži pojedinačni početni citat | ‚ | \201A | ‚ |
| Gornji pojedinačni zadnji navodnik | ‛ | \201B | ‛ |
| Donji dvostruki uvodni citat | „ | \201E | „ |
| dupli gornji zadnji navodnik | ‟ | \201F | ‟ |
| Jedan otvor (lijevo) Francuski ugaoni citat | ‹ | \2039 | ‹ |
| Jednostruki završni (desni) francuski ugaoni citat | › | \203A | › |
Tekst ovog članka fokusira se na različite načine CSS formatiranje, što se razlikuje od različitih načina na koji je CSS organizovan. U suštini, ovi koncepti su međusobno slični, ali lično mi se čini da je organizacija CSS-a odgovornija za to kako su grupisani i uređeni. css elementi, koji vam omogućava da brzo i jednostavno pronađete i uredite željene pasuse.
Formatiranje nema nikakve veze CSS funkcije. Ovo samo daje estetski ugodan izgled kodu. Međutim, to ne znači da formatiranje uopće nije važno. To je kao da kažete da umjetniku nije važno na kojem platnu će slikati. Ovo utiče na praktičnost prilikom pisanja CSS koda, na lakoću pri pregledavanju koda, prilikom daljeg uređivanja.
Budući da postoji mnogo različitih načina za formatiranje CSS-a, ne postoje čvrsta i brza pravila o razmacima i prijelomima redaka. Na primjer:
Div (širina: 50px)
Ovo je isto kao:
Div(širina:50px)
kao:
}
Višelinijsko oblikovanje
Navigation_rss_icon(
pozicija: apsolutna;
lijevo: 940px;
dno: 0px;
}
#navigation_rss (
pozicija: apsolutna;
lijevo: 720px;
transformacija teksta: velika slova;
boja: #897567;
line-height: 2.5em;
}
#navigation_rss li (
displej: inline;
}
boja: #fffffe;
dekoracija teksta: nema;
padding: 0px 2px;
razmak između slova: -0,05em
}
#navigation_rss li a:hover (
boja: #eed2a1;
dekoracija teksta: nema;
}
Kladim se da je ovo najčešće korištena opcija. Vrlo je lak za čitanje jer je predstavljen u kratkim odlomcima, zbog čega su tutoriali najčešće oblikovani na ovaj način. U gore navedenom primjeru, br prazan niz između završne zagrade i sljedećeg pasusa, a ovo je zapravo najčešće korišteno.
Formatiranje u više redaka s razmakom pasusa
Navigation_rss_icon(
pozicija: apsolutna;
lijevo: 940px;
dno: 0px;
}
#navigation_rss (
pozicija: apsolutna;
lijevo: 720px;
porodica fontova: Verdana, Arial, Helvetica, sans-serif;
transformacija teksta: velika slova;
boja: #897567;
line-height: 2.5em;
}
#navigation_rss li (
displej: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited (
boja: #fffffe;
dekoracija teksta: nema;
padding: 0px 2px;
razmak između slova: -0,05em
}
#navigation_rss li a:hover (
boja: #eed2a1;
dekoracija teksta: nema;
}
Istaknuti blok znači da je ovaj odlomak na neki način specifičan i važan od prethodnih pasusa, a također prikazuje podređene elemente.
Formatiranje u jednom redu
Div.wrapper ( margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2)
ul.nav ( pozicija:apsolutna; vrh:0; lijevo:430px; padding:120px 0 0 0 )
ul.nav li ( display:inline; margin:0 10px 0 0 )
div.column (float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px)
div.post_wrapper ( background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) donji centar bez ponavljanja; margina:0 0 40px 0; padding:0 0 40px 0 )
div.wrapper img, div.wrapper a img, div.article_illustration_mini ( background:#d3d4cb; padding:10px; granica:1px solid #999 )
div.wrapper a:hover img (pozadina:#fff)
Ovo je vjerovatno najekonomičnija opcija, jer je sav kod komprimiran u jedan kontinuirani tekst, bez razmaka ili novih redova. Istina, ova metoda će zahtijevati stalno pomicanje, i okomito i horizontalno, ako želite urediti kod. Osim toga, ova metoda izgleda prilično ružno, a u slučaju kada kasnije trebate urediti kod, vjerovatno će vam biti izuzetno teško pronaći pravi odlomak.
Formatiranje u jednom redu sa tabovima
p, li, dd (font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margina: 0 0 15px 0; boja: #5e5d5d; )
td, th ( font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; poravnanje teksta: lijevo; )
Formatiranje jednog reda s prijelomima pasusa
Istaknuti isječak koda označava da sadrži informaciju koja je podređena informacijama iz prethodnog pasusa.
Normalno formatiranje u jednom redu
Općenito, više volim formatiranje u jednom redu, ali koristim prijelome redaka uređivač teksta tako da ovi dugi redovi ne traju zauvijek, već se uklapaju u prozor editora. Međutim, za posebno dugačke redove s mnogo različitih pasusa koristim tvrdi transfer linije za prebacivanje novi red sa atributima.
H1, h2, h3 (font: 24px Helvetica, Sans-Serif; margina: 0 0 10px 0; )
h1 (veličina fonta: 36px;)
h2 (veličina fonta: 30px;)
h2 a, h2 a:posjećeno ( boja: #2e2e2e; )
h2 a:hover (boja: #fe4902; ivica-dno: 1px s tačkama #2e2e2e; )
p, li, dd (font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
margina: 0 0 15px 0; boja: #5e5d5d; )
td, th ( font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
text-align: lijevo; )
Varijacije
Formatiranje u jednom redu može se obaviti sa jednostavno otvaranje prateći zagradu na istoj liniji, što se takođe često vidi u PHP kodu:
Div
{
padding: 10px
}
U višelinijskom formatiranju sa tabulatorima, možete posmatrati početnu zagradu kao graničnik:
#content-area ol ( margina: 15px 0 0 25px; stil liste: decimalni; )
#content-area ol ol (list-style: low-alpha;)
#content-area ul ( margina: 0 0 0 5px; stil liste: nema; )
#content-area ul li ( padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px bez ponavljanja; )
#content-area ul ul ( margina: 15px 0 0 25px; stil liste: disk; )
#content-area ul ul li (pozadina: nema; padding: 0; )
kombinacija
Kombinovanje višelinijskog i jednolinijskog oblikovanja može rezultirati samo grupiranjem sličnih atributa u istu liniju:
Navigation_rss_icon(
pozicija: apsolutna;
vrh: 10px; lijevo: 10px; dno: 10px; desno: 10px;
veličina fonta: 12px; font-weight: bold;
}
Čitljivost vs. skrolovanje
Vaš izbor formatiranja treba da se zasniva na čitljivosti koda. Morate se brzo i jednostavno kretati kroz kod kako biste hitno popravili ovaj ili onaj segment. Ako vam se čini da je jednolinijsko oblikovanje preteško za vaše oči i teško vam je razumjeti šta i gdje se nalazi u kodu, onda je bolje, naravno, izbjeći ovu opciju.
Općenito, smatram da je mogućnost oblikovanja u više redaka lako pronaći ovaj ili onaj dio koda, ali red po red takav dokument zauzima mnogo više prostora, 5-8 puta. Ali generalno, smatram da su takvi dokumenti manje čitljivi, jer postoji ovo dosadno vertikalno pomeranje i morate žuriti od jednog dela koda do drugog. Dok je formatiranje u jednom redu ponekad čak i mnogo praktičnije zbog činjenice da je većina koda ispred vas.
Općenito se smatra da je najbolje formatiranje za sebe ono koje predstavlja veću čitljivost i manje pomicanja. Općenito gledajte na vlastite osjećaje udobnosti.
U ovom članku razgovaraćemo o tome kako je tekst formatiran u CSS-u, razmotrit će se tehnike poravnanja teksta, kako koristiti CSS da napravite crvenu liniju, postavite prored i razmak između riječi, kako ukrasiti tekst, pretvoriti tekst u velika ili mala slova i kako kreirati velika slova.
Tokom izgleda stranice, morat ćete se stalno mijenjati izgled web stranice. Jedan od prvih zadataka kada radite s tekstom na stranici je da ga poravnate.
Poravnanje teksta
Pogledajmo primjer rada s poravnavanjem teksta:
četiri) klasa koja definiše razne opcije poravnanje teksta. Za sve elemente
Rezultat našeg primjera:
Uvlaka prvog reda
Ako otvorite skoro svaku knjigu koja sadrži tekstualne informacije, možda ćete primijetiti da je prvi red svakog pasusa obično uvučen (crvena linija).
Ako želite da vaš dokument izgleda kao štampana publikacija, koristite ovo CSS svojstvo m kao uvlaka teksta .
Možete ih primijeniti relativne jedinice mjere koje koristite u svom dokumentu, bilo da se radi o pikseli ili vrijednostima koje ovise o tome osnovna veličina fontove (npr em).
Skrećem vam pažnju na činjenicu da ćete u nekim situacijama možda morati koristiti negativnu uvlaku prvog reda, svojstvo text-indent dozvoljava korištenje negativnih vrijednosti, u kom slučaju se red pomiče u suprotnom smjeru.
Pogledajmo primjer korištenja ovog svojstva:
Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja.
Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja.
Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja.
Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja.
AT ovaj primjer kreirali smo 4 ( četiri) stilove i primjenjivali ih jedan po jedan na četiri paragrafi. Za prvo paragraf ima zadanu vrijednost uvlačenja ( 0 ), za sekunda set indent 40 piksela, za treći naznačeno negativno uvlačenje ( -20px), kao rezultat toga, paragraf se pomerio izvan prozora pretraživača i za četvrto paragraf uvučen jednako 50% .
Imajte na umu da ako koristite procentualne vrijednosti, onda uvlačenje ovisi o širini roditeljski element U kojem se paragraf nalazi.
Rezultat našeg primjera:
Rice. 61 Primjer korištenja svojstva text-indent (crvena linija).
Postavljanje razmaka između redova
Kada radite s tekstom, često postaje potrebno postaviti redove pasusa bliže jedan drugom, ili obrnuto - da ih rastegnete. Razmak između osnovnih linija susjednih redova naziva se vodeći ili prored .
U CSS-u, svojstvo visine reda je odgovorno za razmak između redova (vodeći). Što je veća vrijednost ove osobine, veći je razmak između redova.
Skrećem vam pažnju na činjenicu da prilikom postavljanja vrijednosti visine linije pomoću piksela, veličina prored, direktno će ovisiti o veličini fonta, odnosno automatski će se prilagođavati proporcionalno promjeni svojstva veličine fonta (veličine fonta), o kojoj je bilo riječi u prethodnom članku.
Po pravilu, u svemu moderni pretraživači zadana visina reda je 120%.
Razmak između redova se izračunava na sljedeći način:
Visina linije ( visina linije) minus visina fonta ( veličina slova)
Na primjer, veličina fonta je 20 piksela, i visina linije 150% (30 piksela). Dakle, ispada:
Visina linije ( 150% ili 30px) minus visina fonta ( 20px) = 10px
Dozvoljeno je postavljanje veličine visine linije pomoću numeričke vrijednosti. Oglas izgleda ovako:
selektor(visina linije: 1.5;)Kao što vidite, mjerne jedinice nisu naznačene, a broj djeluje kao množitelj. Koristeći numeričke vrijednosti prored se izračunava na sljedeći način:
Numerička vrijednost * veličina fonta
Na primjer, postavljen je font pasusa 2em, a visina linije je data kao 1.5 :
str(veličina fonta: 2em; visina linije: 1,5;)Izračunata vrijednost razmaka između redova u našem slučaju će biti 3em:
Numerička vrijednost( 1.5 ) * veličina slova( 2em) = 3em
U većini slučajeva, upotreba množitelja je vrlo zgodna jer elementi nasljeđuju vrijednosti razmaka između redova roditeljskog elementa. visina linije :
Paragraf sa visinom linije: 10px
Paragraf sa visinom reda: normalno
Paragraf sa visinom reda: 150%
Paragraf sa visinom reda: 2
U ovom primjeru, pogledali smo načine za određivanje visine linije u pikselima, procentima i korištenjem množitelja.
Rezultat našeg primjera:
Rice. 62 Primjer korištenja svojstva line-height (postavljanje razmaka između redova).
Razmak između riječi i znakova
Kada dizajnirate stranice na web stranici, morate prilagoditi razmak ne samo između redova, već i između pojedinačnih riječi ili znakova. Na primjer, smanjenje razmaka između znakova učinit će dugi naslov kompaktnijim, ili obrnuto, povećanjem razmaka će mu dati više rastegnuti izgled.
Da biste postavili određeni razmak između znakova, trebate koristiti CSS svojstvo razmaka slova. Koristite relativne jedinice kada radite sa svojstvom CSS dimenzije (em, rem, px itd). Dozvoljene su i pozitivne i negativne vrijednosti. Pozitivne vrijednosti respektivno povećavaju razmak između znakova, dok ga negativne vrijednosti smanjuju, sve do preklapanja slova i simbola jedan iznad drugog.
Pogledajmo primjer koristeći svojstvo razmaka između slova:
U ovom primjeru, pogledali smo načine da odredimo razmak između znakova u tekstu u pikselima (i pozitivnim i negativno značenje) i em jedinice.
Rezultat našeg primjera:
Možete postaviti razmak između pojedinačnih riječi koristeći CSS svojstvo slično u nazivu - razmak između riječi. Slično svojstvu razmaka slova, koristite relativne CSS jedinice ( em, rem, px itd). Dozvoljene su i pozitivne i negativne vrijednosti. Pozitivne vrijednosti u skladu s tim povećavaju razmak između riječi, dok ga negativne vrijednosti smanjuju, sve do preklapanja riječi.
Pogledajmo primjer korištenja svojstva razmaka riječi:
Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja.
Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja.
Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja.
U ovom primjeru smo pogledali načine da odredimo razmak između riječi u tekstu u pikselima (negativna vrijednost) i em jedinicama.Rezultat našeg primjera:
Dekoracija teksta
CSS svojstvo text-decoration nam omogućava da tekstu dodamo dekoracije kao što su:
- podvući
- precrtano
- red iznad teksta
Međutim, jedna od najčešćih upotreba ovog svojstva je nadjačavanje dekoracije, što zahtijeva korištenje ključne riječi none sa svojstvom text-decoration:
a { /* koristite selektor tipa da odaberete sve hiperveze */ dekoracija teksta : nema /* ukloni tekstualni ukras */ }U ovom primjeru uklonili smo ukras (podvlačenje) sa svih hiperveza. Cijela lista ključne riječi svojstvo text-decoration navedeno je u ovoj tabeli:
Imajte na umu da je za većinu korisnika podvučeni tekst povezan sa hipervezom, a precrtan sa izbrisanim tekstom, pa koristite dekoraciju kada je to zaista potrebno.
Dozvoljeno je koristiti više vrijednosti u jednoj deklaraciji:
dekoracija teksta: podcrtavanje kroz liniju; /* definira liniju ispod teksta i liniju kroz tekst */Pogledajmo primjer korištenja svojstva text-decoration na tekstu:
tekst-dekoracija: podvučena;
dekoracija teksta: precrtavanje;
dekoracija teksta: kroz liniju;
dekoracija teksta: podvučena crta;
U ovom primjeru smo kreirali četiri različite stilove i primjenjivali ih naizmjenično na svaki pasus. AT prvo pasus, dodana je dekoracija teksta - linija odozdo (podvučena vrijednost), tokom sekunda dekoracija teksta - gornja linija (vrijednost iznad linije), in treći dekoracija teksta - precrtano (precrtano), i u četvrto dvostruki ukras teksta - linija iznad i ispod (vrijednosti podvučene iznad).
Rezultat našeg primjera:
Rice. 65 Primjer korištenja svojstva text-decoration (dekoriranje teksta u CSS-u).
Veliko i malo slovo
CSS pruža mogućnost pretvaranja bilo kojeg teksta u velika ili mala slova, kao i pretvaranje prvih slova svake riječi u velika. Svojstvo text-transform kontroliše velika i mala slova teksta, tabela ispod pokazuje sve njegove vrednosti:
Pogledajmo primjer korištenja svojstva text-transform na tekstu:
Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja.
Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja.
Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja. Pojedite još ovih mekih francuskih rolnica i popijte malo čaja.
U ovom primjeru kreirali smo tri različita stila i primijenili ih redom na svaki pasus. U prvom pasusu, prvi znakovi svake riječi su pretvoreni u velika slova (vrijednost velikih slova), u drugom su svi znakovi konvertovani u velika slova (vrijednost velikih slova), au trećem su svi znakovi pretvoreni u mala slova (vrijednost malih slova).
Rice. 66 Primjer korištenja svojstva text-transform (promjena velikih i malih slova teksta).
Mala slova u CSS-u
Male kapice ili male kapice male kapice) je stil fonta u kojem mala slova izgledaju kao smanjena velika slova. Da biste kreirali takav stil, koristite svojstvo varijante CSS fonta sa sljedećom sintaksom:
selektor(varijanta fonta: mala slova; /* postaviti velika slova */ }Razmotrimo primjer upotrebe:
Paragraf se prikazuje normalnim fontom.
Mala slova se postavljaju kao velika slova smanjene veličine.
U ovom primjeru, prvi pasus je ostavljen nepromijenjen, a drugi pasus je postavljen na svojstvo varijante fonta sa vrijednošću small-caps , što će uzrokovati da se tekst prikazuje malim velikim slovima ( mala slova postaviti kao mala slova).
Ponekad naš kod nije uvijek savršen. I zato želim da bude ne samo funkcionalan, već i lijepo dizajniran i formatiran. Vrijeme je naše glavni neprijatelj, rijetko nam omogućava da slijedimo pravila formatiranja koda. Pokušavamo brzo završiti izgled, ili opisati desetak css stilova, a to radimo na štetu čitljivosti. U ovom članku dat ću popis usluga koje će vam pomoći da formatirate svoj kod tako da ga je ugodno pogledati.
Vjerujete programu ili sve radite ručno?
Sigurno imate pitanje: kako učiniti kod čitljivim? Može li program ispravno postaviti sve uvlake i prijelome linija tako da ljudsko oko dobije samo estetski užitak od pogleda koda? Naravno da može! Nemojte se varati da, pošto posao za vas, u stvari, radi robot, onda će to biti odrađeno "prljavo". Usluge koje će biti predstavljene u članku ispod su me spasile više puta. Na primjer, u situacijama kada je bilo potrebno kopirati isto html kod sa drugog sajta, a kada su umetnute, ispostavilo se da su tagovi jednostavno poređani u nekom haotičnom redosledu duž linija: gomila tabela, bez logičkih preloma linija, apsolutno nikakvo gnežđenje se ne vidi! Vjerovatno je mnogima od vas ovo poznato. I zaista želim da vaša stranica bude drugačija: uredna i čitljiva. Uostalom, prije svega, to radimo za sebe, radi pogodnosti dalje podrške ovog ili onog koda.
Hajde da ponovo formatiramo vaš kod
Manje pričajte, više radite. Kao što je praksa pokazala, formatiranje koda na mreži je prilično jednostavno. Vi samo trebate kopirati svoj "prljavi" kod i zalijepiti ga u poseban tekstualna polja na jednom od ovih sajtova. Zatim pritisnite dugme, sačekajte malo i - voila! Dobijate lijep, formatiran i lak za čitanje kod.
Evo liste svih kodova "pročistača" poznatih za razne jezike.
