Automatsko formatiranje css-a. Alati za oblikovanje CSS koda

31.03.2019 Željezo

Pretvaranje i stiliziranje teksta

1. Transformiranje teksta text-transform

Pomoću ovog posjeda možete pretvoriti tekst na vrh i mala slova s, ili prva slova svake riječi koja su bila velika (velika) pretvoriti u mala. Naslijeđeno.

Sintaksa

H2 (transformacija teksta: ništa;) h2 (transformacija teksta: veliko slovo;) h2 (transformacija teksta: velika slova;) h2 (transformacija teksta: mala slova;)
Riža. 1. Transformacija teksta korištenjem svojstva text-transform

2. Smjer pisanja smjer teksta

Svojstvo određuje smjer u kojem se tekst piše, smjer u kojem se postavlja stupac tablice, smjer u kojem blok vodoravno ispunjava sadržaj i položaj posljednjeg retka obostranog elementa. Preporuča se za korištenje s svojstvo unicode-bidi. 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 pisanja riječi u dvosmjernom tekstu. Nije naslijeđeno.

Sintaksa

P (unicode-bidi: normalno;) p (unicode-bidi: ugraditi;) p (unicode-bidi: bidi-nadjačavanje;)

4. Ukras teksta tekst-ukras

Svojstvo ukrašava tekst. Također uklanja podcrtavanje veze. Nije naslijeđeno.

Sintaksa

A (ukras teksta: ništa;) raspon (ukras teksta: podcrtano;) raspon (ukras teksta: prekocrtano;) raspon (ukras teksta: kroz liniju;) Fig. 2. Ukrašavanje teksta korištenjem svojstva text-decoration

5. Oblikovanje prvog slova i prvog retka odlomka

CSS omogućuje formatiranje odlomka pomoću pseudo-elemenata:first-letter i:first-line. Na primjer, možete istaknuti prvi znak svakog odlomka, oponašajući kapu ili dodati posebno oblikovanje prvoj rečenici odlomka. Pozadina za:first-letter također se može postaviti na gradijentnu ispunu.

/*prvi odlomak*/ p:prvo-slovo (veličina fonta: 2em; margin-desno: 2px; boja: #EE9966; težina fonta: podebljano; sjena teksta: -1px -1px 1px bijela, 1px 1px 1px # 9E9D99; ) p:prvi redak ( boja: #EE9966; ) /*drugi odlomak*/ p:prvo-slovo (veličina fonta: 1.2em; ispuna: 5px 10px; margina-desno: 5px; pozadina: #EE9966; boja: #FAF4F4; float: lijevo; border-radius: 50% 0; font-weight: bold; ) /*treći paragraf*/ p:prvo-slovo (veličina fonta: 1.2em; padding: 5px 10px; margin- desno: 5px; margin-bottom: 2px; pozadina: #EE9966; boja: #FAF4F4; float: lijevo; težina fonta: bold; ) /*četvrti odlomak*/ p:prvo-slovo (veličina fonta: 1.2em; padding: 3px 10px; margin-desno: 5px; pozadina: #EE9966; boja: #FAF4F4; float: lijevo; font-weight: bold; border-radius: 50%; ) /*peti odlomak*/ p:prvo-slovo (veličina fonta: 1.5em; padding: 2px 10px; margin-desno: 5px; pozadina: #FAF4F4; obrub: 6px dvostruki; boja: #EE9966; float: lijevo; font-weight: bold; ) /*šesti paragraf* / p:prvo-slovo(veličina-fonta: 1..png); rub: 2px puna #EE9966; boja: #544E3E; plovak: lijevo; font-weight: bold; okvir-sjena: 1px 1px 1px #9E9D99; )

6. Oblikovanje citata

Svojstvo navodi vrstu navodnika koji se koriste u dokumentu za ugniježđene navodnike. Prema zadanim postavkama, tekst unutar oznake nalazi se u navodnicima. . Također možete generirati citate pomoću svojstva sadržaja, dajući mu vrijednosti open-quote i close-quote. Koristi se posebna vrijednost HTML znak ili Unicode znak. Naslijeđeno.

Sintaksa

P (navodnici:""" """;) p (navodnici: nijedan;)

Tablica 1. Navodnici u HTML-u

Opis	Izgled	Unicode broj	HTML kod/mnemotehnika
Dupli navodnici	"	\0022	"
Apostrof	"	\0027	"
Početni pojedinačni navodnik	‘	\2018	‘
Zatvaranje jednostrukih navodnika	’	\2019	’
Zatvaranje dvostrukih navodnika	“	\201C	“
Desni dvostruki navod	”	\201D	”
Dvostruki podnavodnik	⹂	\2E42	⹂
Početni lijevi citat riblja kost	«	\00AB	«
Riblja kost desni završni navodnik	»	\00BB	»
Niži pojedinačni početni citat	‚	\201A	‚
Gornja jednostruka povratna karta	‛	\201B	‛
Donji dvostruki početni navodnik	„	\201E	„
Dvostruka gornja ulaznica	‟	\201F	‟
Francuski kutni navodnik s jednim otvorom (lijevo).	‹	\2039	‹
Jednostruki završni (desni) francuski kutni navodnik	›	\203A	›

Tekst ovog članka fokusiran je na različite načine CSS oblikovanje, što se razlikuje od različitih načina organizacije CSS-a. U biti, ovi koncepti su međusobno slični, ali osobno mi se čini da je organizacija CSS-a odgovornija za to kako su stvari grupirane i poredane. CSS elementi, koji vam omogućuje brzo i praktično pronalaženje i uređivanje potrebnih odlomaka.

Formatiranje nema nikakve veze s tim CSS funkcije. Ovo je samo kako bi kod dobio estetski atraktivan izgled. Istina, to ne znači da formatiranje uopće nije važno. To je isto kao da je umjetniku svejedno na kojem platnu slika. To utječe na praktičnost pisanja CSS koda, jednostavnost pregleda koda i njegovo daljnje uređivanje.

Budući da postoji toliko mnogo različitih načina za formatiranje CSS-a, ne postoje čvrsta i brza pravila u vezi s razmacima i prijelomima redaka. Na primjer:

Div (širina: 50 px)
Ovo je isto kao:

Div(width:50px)
Kao:

}
Oblikovanje u više redaka

Navigation_rss_icon (
pozicija: apsolutna;
lijevo: 940px;
dolje: 0px;
}
#navigation_rss (
pozicija: apsolutna;
lijevo: 720px;
transformacija teksta: velika slova;
boja: #897567;
line-height: 2.5em;
}
#navigation_rss li (
prikaz: inline;
}

boja: #fffffe;
tekst-ukras: nema;
ispuna: 0px 2px;
razmak između slova: -0,05em;
}
#navigation_rss li a:hover (
boja: #eed2a1;
tekst-ukras: nema;
}
Kladim se da je ovo najčešće korištena opcija. Vrlo je lak za čitanje jer je prikazan u kratkim odlomcima, pa su zato nastavni članci najčešće ovako oblikovani. U gore navedenom primjeru, br prazna linija između zagrade i sljedećeg odlomka, a to se zapravo najčešće koristi.

Oblikovanje u više redaka s odlomcima

Navigation_rss_icon (
pozicija: apsolutna;
lijevo: 940px;
dolje: 0px;
}
#navigation_rss (
pozicija: apsolutna;
lijevo: 720px;
obitelj fontova: Verdana, Arial, Helvetica, sans-serif;
transformacija teksta: velika slova;
boja: #897567;
line-height: 2.5em;
}
#navigation_rss li (
prikaz: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited (
boja: #fffffe;
tekst-ukras: nema;
ispuna: 0px 2px;
razmak između slova: -0,05em;
}
#navigation_rss li a:hover (
boja: #eed2a1;
tekst-ukras: nema;
}
Istaknuti blok znači da je ovaj odlomak na neki način specifičan i važan od prethodnih odlomaka, a također prikazuje podređene elemente.

Formatiranje jednim redom

Div.wrapper (margina:0 auto; padding:200px 0 0 0; width:960px; z-index:2)
ul.nav (position:apsolute; top:0; left:430px; padding:120px 0 0 0)
ul.nav li ( display:inline; margin:0 10px 0 0 )
div.column (float:lijevo; margina: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) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 )
div.wrapper img, div.wrapper a img, div.article_illustration_mini ( background:#d3d4cb; padding:10px; border:1px solid #999)
div.wrapper a:hover img ( background:#fff )
Ovo je vjerojatno najekonomičnija opcija, jer je sav kod komprimiran u jedan kontinuirani tekst, bez razmaka ili novih redaka. Istina, ova će metoda zahtijevati stalno pomicanje, okomito i vodoravno, ako želite urediti kôd. Osim toga, ova metoda izgleda prilično ružno, a ako u budućnosti trebate urediti kod, vjerojatno će vam biti izuzetno teško pronaći željeni odlomak.

Formatiranje jednog retka s tabulatorima

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; )
Jednolinijski format s odlomcima

Istaknuti dio koda označava da sadrži informacije koje su podređene informacijama u prethodnom paragrafu.

Normalno oblikovanje u jednom redu

Općenito, preferiram formatiranje u jednom retku, ali koristim prijelom retka uređivač teksta, tako da ti dugi redovi ne traju zauvijek, već stanu u prozor uređivača. Međutim, za posebno duge retke s mnogo različitih odlomaka koristim težak prijenos linije za prebacivanje nova linija s 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: lebdjeti (boja: #fe4902; border-bottom: 1px točkasto #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;
poravnanje teksta: lijevo; )
Varijacije

Može se izvršiti formatiranje jednog retka lako otvaranje nakon čega slijedi zagrada u istom retku, što se također često vidi u PHP kodu:

div
{
ispuna: 10px;
}
U oblikovanju s više redaka s tabulatorima, možete vidjeti početnu zagradu kao razdjelnik:

#content-area ol ( margina: 15px 0 0 25px; list-style: decimal; )
#content-area ol ol ( list-style: lower-alpha; )
#content-area ul ( margina: 0 0 0 5px; list-style: none; )
#content-area ul li ( padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; )
#content-area ul ul ( margina: 15px 0 0 25px; list-style: disc; )
#content-area ul ul li ( pozadina: ništa; ispuna: 0; )
Kombinacija

Kombiniranje višerednog i jednolinijskog oblikovanja može rezultirati samo grupiranjem sličnih atributa u istom retku:

Navigation_rss_icon (
pozicija: apsolutna;
gore: 10px; lijevo: 10px; dolje: 10px; desno: 10px;
veličina fonta: 12px; font-weight: bold;
}
Čitljivost vs. Pomicanje

Vaš izbor opcije oblikovanja trebao bi se temeljiti na čitljivosti koda. Morate se brzo i prikladno kretati kroz kod kako biste hitno ispravili ovaj ili onaj segment. Ako smatrate da je formatiranje u jednom retku previše teško za vaše oči i da vam je teško razumjeti što ide gdje u kodu, onda je, naravno, najbolje izbjegavati ovu opciju.

Općenito, mislim da je opciju formatiranja s više redaka lako pronaći za određeni dio koda, ali redak po redak takav dokument zauzima mnogo više prostora, 5-8 puta. Ali općenito, smatram da su ovi dokumenti manje čitljivi jer postoji ono dosadno okomito pomicanje i morate žuriti s jednog dijela koda na drugi. Dok je formatiranje u jednom retku ponekad čak i mnogo praktičnije zbog činjenice da vam je većina koda na vidiku.

Najboljom opcijom oblikovanja za sebe smatrate ono koje omogućuje veću čitljivost i manje listanja. Općenito gledajte na vlastite osjećaje ugode.

U ovom članku pričati ćemo o tome kako se tekst oblikuje u CSS-u, pogledat ćemo tehnike za poravnavanje teksta, kako pomoću CSS-a napraviti crvenu liniju, postaviti razmak između redaka i riječi, kako ukrasiti tekst, pretvoriti tekst u velika ili mala slova i kako stvoriti velika slova.

Tijekom izgleda web stranice morat ćete se stalno mijenjati izgled Internet stranice. Jedan od prvih zadataka pri radu s tekstom na stranici je potreba za njegovim poravnavanjem.

Poravnanje teksta

Pogledajmo primjer rada s poravnanjem teksta:

Primjer korištenja svojstva text-align

Pojedite još malo ovih mekanih francuskih peciva i popijte čaj.

četiri) klase koje definiraju razne opcije poravnanje teksta. Za sve elemente

postavili smo boju pozadine na rgba(0, 255, 0, .1) .

Rezultat našeg primjera:

Uvlaka prvog retka

Ako otvorite gotovo svaku knjigu koja sadrži tekstualne informacije, možete primijetiti da je prvi redak svakog odlomka obično uvučen (crvena linija).

Ako želite svom dokumentu dati izgled sličan tiskanoj publikaciji, upotrijebite ovo CSS svojstvo m, poput text-indent .

Možete ih primijeniti relativne jedinice mjerenja koja koristite u svom dokumentu, bilo pikselima ili vrijednostima koje ovise o veličina baze font (kao što je em).

Imajte na umu da ćete u nekim situacijama možda trebati koristiti negativnu uvlaku prvog retka; svojstvo uvlake teksta dopušta korištenje negativnih vrijednosti, u kojem slučaju se linija pomiče u suprotnom smjeru.

Pogledajmo primjer korištenja ovog svojstva:

Primjer korištenja svojstva text-indent

Pojedite još malo ovih mekanih francuskih peciva i popijte čaj. Pojedite još malo ovih mekanih francuskih peciva i popijte čaj. Pojedite još malo ovih mekanih francuskih peciva i popijte čaj. Pojedite još malo ovih mekanih francuskih peciva i popijte čaj.

U u ovom primjeru stvorili smo 4 ( četiri) stil i primijenio ih jednu po jednu na četiri stavci. Za prvi odlomak postavljen na zadanu vrijednost uvlake ( 0 ), Za drugi postaviti uvlačenje 40 piksela, Za treći naznačeno negativno uvlačenje ( -20px), kao rezultat toga, odlomak se pomaknuo izvan prozora preglednika i za Četvrta stavak uvučen jednako 50% .

Imajte na umu da ako koristite postotke, uvlaka ovisi o širini nadređeni element, koji sadrži paragraf.

Rezultat našeg primjera:

Riža. 61 Primjer korištenja svojstva text-indent (crvena linija).

Postavljanje proreda

Kada radite s tekstom, često postoji potreba da se linije odlomka približe jedna drugoj ili obrnuto - da se razvuku. Razmak između osnovica susjednih linija naziva se vodeći ili razmak između redova .

U CSS-u, svojstvo line-height odgovorno je za prored (leading). Što je veća vrijednost ovog svojstva, to je veći razmak između redaka.

Imajte na umu da kada postavljate vrijednost visine retka pomoću jedinica piksela, veličina razmak između redova, izravno će ovisiti o veličini fonta, odnosno automatski će se prilagoditi proporcionalno promjeni svojstva veličine fonta (veličine fonta), o čemu smo govorili u prethodnom članku.

U pravilu, u svim moderni preglednici zadana visina linije je 120%.

Prored se izračunava na sljedeći način:

Visina linije ( linija-visina) minus visina fonta ( veličina fonta)

Na primjer, veličina fonta je 20 piksela, i visina linije 150% (30 piksela). Tako se ispostavlja:

Visina linije ( 150% ili 30 px) minus visina fonta ( 20 px) = 10 px

Moguće je postaviti veličinu visine retka pomoću numeričke vrijednosti. Oglas izgleda ovako:

selektor(visina retka: 1,5;)

Kao što vidite, mjerne jedinice nisu naznačene, a broj djeluje kao množitelj. Korištenje brojčane vrijednosti Prored se izračunava na sljedeći način:

Numerička vrijednost * veličina fonta

Na primjer, font odlomka postavljen je na 2em, a visina linije je dana kao 1.5 :

str(veličina fonta: 2em; visina retka: 1,5;)

Izračunata vrijednost proreda u našem slučaju bit će 3em:

Numerička vrijednost ( 1.5 ) * veličina fonta( 2em) = 3em

U većini slučajeva korištenje množitelja je vrlo zgodno, budući da elementi nasljeđuju vrijednosti razmaka redaka nadređenog elementa. visina linije:

Primjer korištenja svojstva line-height

Odlomak u kojem je line-height: 10px

Stavak u kojem line-height: normal

Odlomak u kojem je visina retka: 150%

Odlomak u kojem je visina retka: 2

U ovom smo primjeru pogledali načine za određivanje visine retka u pikselima, postocima i korištenjem množitelja.

Rezultat našeg primjera:

Riža. 62 Primjer korištenja svojstva line-height (postavljanje proreda).

Razmak između riječi i znakova

Kada dizajnirate stranice na web stranici, morate prilagoditi razmak ne samo između redaka, već i između pojedinačnih riječi ili znakova. Na primjer, smanjenje razmaka između znakova učinit će dugačak naslov kompaktnijim ili obrnuto, povećanjem razmaka dati će mu rastegnutiji izgled.

Za postavljanje određenog razmaka između znakova morate upotrijebiti CSS svojstvo razmaka između slova. Kada radite sa svojstvom, koristite relativne jedinice CSS dimenzije (em, rem, px i tako dalje). Dopuštene su i pozitivne i negativne vrijednosti. Pozitivne vrijednosti u skladu s tim povećavaju razmak između znakova, a negativne ga smanjuju, do te mjere da se slova i simboli nanose jedni na druge.

Pogledajmo primjer korištenja svojstva razmaka između slova:

Primjer korištenja svojstva razmaka između slova

klasa = "test" > razmak između slova: -1px

prored između slova: normalan

prored između slova: 2px

prored između slova: 1em

U ovom smo primjeru pogledali načine za određivanje razmaka između znakova u tekstu u pikselima (i pozitivni i negativno značenje) i em jedinice.

Rezultat našeg primjera:

Možete postaviti razmak između pojedinačnih riječi pomoću CSS svojstva sa sličnim nazivom - word-spacing. Slično svojstvu razmaka između slova, koristite CSS relativne jedinice ( em, rem, px i tako dalje). Dopuštene su i pozitivne i negativne vrijednosti. Pozitivne vrijednosti u skladu s time povećavaju razmak između riječi, a negativne ga smanjuju, čak do točke naslaganja riječi jedne na drugu.

Pogledajmo primjer korištenja svojstva razmaka riječi:

Primjer korištenja svojstva razmaka između riječi

U ovom smo primjeru pogledali načine određivanja razmaka između riječi u tekstu u pikselima (negativna vrijednost) i em jedinicama.

Rezultat našeg primjera:

Dekoracija teksta

CSS svojstvo text-decoration daje nam mogućnost dodavanja takvih vrsta ukrasa tekstu kao što su:

podcrtavanje
precrtavanje
linija iznad teksta

Međutim, jedna od najčešćih upotreba ovog svojstva je poništavanje dekoracije, a morate koristiti ključnu riječ none sa svojstvom text-decoration:

a { /* koristite selektor tipa za odabir svih hiperveza */ tekst-ukras: nema; /* uklanjanje ukrasa teksta */ }

U ovom primjeru uklonili smo ukras (podcrtavanje) sa svih hiperveza. Cijeli popis ključne riječi svojstva ukrašavanja teksta navedena su u ovoj tablici:

Imajte na umu da većina korisnika povezuje podcrtani tekst s hipervezom, a prekriženi tekst s izbrisanim tekstom, stoga koristite ukrase kada je to stvarno potrebno.

Možete koristiti više vrijednosti u jednoj deklaraciji:

text-decoration : podcrtano kroz crtu ; /* definira liniju ispod teksta i liniju kroz tekst */

Pogledajmo primjer korištenja svojstva text-decoration na tekstu:

Primjer korištenja svojstva text-decoration

Tekst-ukras: podcrtano;

Tekst-ukras: prekocrt;

Text-decoration: line-through;

Tekst-ukras: podcrtano nadcrtano;

U ovom smo primjeru stvorili četiri različite stilove i primijenili ih na svaki odlomak redom. U prvi odlomku je dodan ukras teksta - redak odozdo (vrijednost podcrtavanja), in drugi dekoracija teksta - redak na vrhu (vrijednost prekocrtka), in treći dekoracija teksta je kroz liniju, i in Četvrta dvostruka dekoracija teksta - linija na vrhu i na dnu (podcrtajte nadcrtane vrijednosti).

Rezultat našeg primjera:

Riža. 65 Primjer korištenja svojstva text-decoration (dekoracija teksta u CSS-u).

Veliko i malo slovo

CSS pruža mogućnost pretvaranja bilo kojeg teksta u velika ili mala slova i pretvaranja prvog slova svake riječi u velika slova. Svojstvo text-transform kontrolira velika i mala slova teksta; tablica u nastavku prikazuje sve njegove vrijednosti:

Pogledajmo primjer korištenja svojstva text-transform na tekstu:

Primjer korištenja svojstva text-transform

U ovom primjeru stvorili smo tri različita stila i primijenili ih na svaki odlomak jedan po jedan. U prvom su odlomku prvi znakovi svake riječi pretvoreni u velika slova (velika vrijednost), u drugom su svi znakovi pretvoreni u velika (velika vrijednost), a u trećem u mala slova (mala vrijednost).

Riža. 66 Primjer korištenja svojstva text-transform (promjena veličine i slova teksta).

Velika slova u CSS-u

Mala velika slova ili kapital (engleski) male kapice) - stil fonta u kojem mala slova izgledaju kao smanjena velika slova. Da biste stvorili takav stil, upotrijebite CSS svojstvo varijante fonta sa sljedećom sintaksom:

selektor(varijanta fonta: mala velika slova; /* postavi veliko font */ }

Pogledajmo primjer korištenja:

Primjer korištenja svojstva font-variant

Odlomak se prikazuje normalnim fontom.

Mala slova postavljaju se na manja velika slova.

U ovom primjeru, prvi odlomak ostaje nepromijenjen, a svojstvo font-variant s vrijednošću small-caps primjenjuje se na drugi, zahvaljujući čemu će tekst biti prikazan malim velikim slovima ( mala slova postavljaju se kao kapiteli smanjene veličine).

Ponekad naš kod nije uvijek savršen. I stvarno želim da bude ne samo funkcionalan, već i lijepo dizajniran i formatiran. Vrijeme je naše glavni neprijatelj, rijetko nam omogućuje da slijedimo pravila oblikovanja koda. Pokušavamo brzo završiti izgled ili opisati desetak CSS stilova, a to radimo nauštrb čitljivosti. U ovom ću članku dati popis usluga koje će vam pomoći da formatirate svoj kod tako da bude ugodan za gledanje.

Trebate li vjerovati programu ili sve učiniti ručno?

Sigurno imate pitanje: kako kod učiniti čitljivim? Može li program ispravno rasporediti sve uvlake i prijelome redaka tako da ljudsko oko dobije samo estetski užitak gledanja koda? Naravno da može! Nemojte se zavarati da će, budući da robot u biti obavlja posao umjesto vas, biti obavljen "prljavo". Usluge koje će biti predstavljene u članku u nastavku spasile su me više puta. Primjerice, u situacijama kada je bilo potrebno kopirati isti html kod s drugog mjesta, a kada su umetnute, pokazalo se da su oznake jednostavno raspoređene u nekom kaotičnom redu duž redaka: puno kartica, nelogični prijelomi redaka, apsolutno nikakvo gniježđenje nije vidljivo! Ovo je vjerojatno mnogima poznato. I stvarno želim da vaša web stranica izgleda drugačije: uredno i lako čitljivo. Uostalom, prije svega, to radimo za sebe, radi pogodnosti daljnje podrške ovog ili onog koda.

Hajdemo formatirati vaš kod

Manje pričajte, više radite. Kao što je praksa pokazala, formatiranje koda na mreži prilično je jednostavno. Sve što trebate učiniti je kopirati svoj prljavi kod i zalijepiti ga u poseban tekstualna polja na jednoj od navedenih stranica. Zatim pritisnite tipku, pričekajte malo i - voila! Dobivate lijep, formatiran i lako čitljiv kod.

Ovdje je popis svih "pročišćivača" koda za koje znam za razne jezike.

Automatsko formatiranje css-a. Alati za oblikovanje CSS koda

Pretvaranje i stiliziranje teksta

1. Transformiranje teksta text-transform

2. Smjer pisanja smjer teksta

3. Smjer pisanja riječi u unicode-bidi tekstu

4. Ukras teksta tekst-ukras

5. Oblikovanje prvog slova i prvog retka odlomka

6. Oblikovanje citata

Poravnanje teksta

Uvlaka prvog retka

Postavljanje proreda

Razmak između riječi i znakova

Dekoracija teksta

Veliko i malo slovo

Velika slova u CSS-u

Trebate li vjerovati programu ili sve učiniti ručno?

Hajdemo formatirati vaš kod

Najbolji članci na temu