Glavni zadatak formatiranja je učiniti tekst čitljivim i razumljivim u svojoj strukturi. Postoje čak i čitavi vodiči za kodiranje koji pokrivaju takve sitnice kao što su broj razmaka ili uvlačenje u vitičastim zagradama. Zapravo, sve je mnogo jednostavnije - dovoljno je da je kod vizualno čitljiv, a razmaci ili tabulatori su dvadeset šesta stvar.

Međutim, želim ovo da naglasim, ako ćete slati kod za druge ljude, onda ćete se morati pridržavati nekog "osnovnog standarda".

Blok uvlačenja

Svaki ugniježđeni blok mora imati više lijevog dopuna od roditeljskog.

Odnosno, gradimo vizuelnu hijerarhiju oznaka po kojoj je lako navigirati. Uporedite sa "ravnim stilom":

Moderni uređivači teksta, kao što je Notepad ++, automatski ih uvlače pomoću Enter "y, što u potpunosti eliminiše problem sa njihovim ručnim postavljanjem. Obično koderi prvo kreiraju oznaku za otvaranje i zatvaranje, a tek nakon toga je razbiju u redove pomoću Enter "ohm. Ovo osigurava da će početna oznaka uvijek imati završnu oznaku.

"Zatvaranje" blokova

U kodu može postojati situacija u kojoj blokovi uvijek odmah slijede jedan za drugim. U ovom slučaju, ne možete ih podijeliti među sobom i ne napraviti dodatnu uvlaku.

U ovom primjeru, div.layout-center-wrap uvijek sadrži neposredno dijete div.layout-wrap bez prekida. Takvi blokovi se mogu vizuelno posmatrati kao jedan. Evo još jednog primjera gdje se blokovi mogu postaviti na isti nivo.

Ovdje je glavna stvar ne pretjerivati: ne biste trebali postavljati više od 2-3 bloka na jednu liniju / nivo. Ako je tekst ili kod postavljen između blokova, onda ih svakako treba postaviti u različite redove.

Ovo formatiranje ne radi. Bit će tačno ovako:

Razmak ili tab

Nema veze. Koristite ono što vam se najviše sviđa. Koliko ja znam, skoro svi koderi koriste tabove, jednostavno zbog činjenice da je to samo jedan pritisak na taster Tab.

Ako to radite s razmacima, tada za svako uvlačenje trebate pritisnuti 4 razmaka. Čest problem je što greškom možete pritisnuti ne 4, već 3, 5 ili nešto drugo, a istovremeno morate ili brojati pritiske na tipku ili vizualno kontrolirati rezultat.

U tom smislu, tabulator je mnogo "pouzdaniji". Sa tehničke tačke gledišta, nema razlike između tabova i razmaka (html kod će i dalje biti komprimovan).

Korišćenje više razmaka je imitacija tabulatora. Dakle, ovo pitanje leži u ravni upotrebljivosti. Ali, ako odlučite da koristite razmake, onda mora biti 4 znaka za svako uvlačenje, inače tekst gubi čitljivost. Postoje priručnici u kojima je preporučljivo staviti 2 razmaka, ali za mene je takav kod vizualno "traljan".

Veliko i malo slovo

Kada je u pitanju HTML, sve oznake moraju biti napisane malim slovima. Tehnički, opet, nije važno, ali velika slova se teško čitaju. Stoga su sve oznake i njihovi atributi napisani striktno malim slovima.

Ako govorimo o programskim jezicima, onda su oni po pravilu osjetljivi na velika i mala slova, pa se velika slova koriste samo tamo gdje je to potrebno.

Jednostruki i dvostruki navodnici

Dvostruki navodnici se skoro uvijek koriste. Kada se JS kod ubaci u HTML stranicu, može doći do situacije kada su potrebne dvije vrste citata:

U ovom primjeru, html atribut je uokviren dvostrukim navodnicima, a jednostruki navodniki se već koriste unutar js koda. Nemoguće je koristiti samo jednu vrstu.

Stoga je pravilo za navodnike u HTML-u i CSS-u jednostavno: glavni navodniki su dvostruki, a ako ih nema dovoljno, onda koristimo jednostruke.

Opcione oznake za zatvaranje

Jednostavno je - uvijek postavljeno. Ovo se odnosi na oznake P, LI i druge.

Kosa crta na kraju pojedinačnih oznaka

Nikad nismo postavili. Ovo je ostatak starog XHTML standarda. tako pogrešno:

tako istinito:

Redoslijed atributa u oznakama

Klasa je uvijek navedena prva. Zapravo, prilikom raščlanjivanja izgleda, oznaka i njene klase se uvijek gledaju, a tek nakon ostalih atributa.

One atribute koji mogu biti pojedinačni (kao što su potrebni) najbolje je specificirati posljednji:

Prazne klase/atribute treba ukloniti.

Formatiranje CSS koda

Klasa se postavlja u poseban red i otvara blok svojstava ((). Nakon dvotačke svojstva stavlja se razmak. Svako svojstvo se stavlja u jedan red i uvijek se završava tačkom-zarezom (;).

T-oznaka (boja: bijela; pozadina: plava; veličina fonta: .75rem; padding: 1px 10px; radijus granice: 3px; )

Ako se navede nekoliko klasa odjednom, one se postavljaju u zasebne redove:

Članak, strana, podnožje, zaglavlje, navigacija, odjeljak (prikaz: blok; )

Ako je klasa kratka i sastoji se od jednog svojstva, onda se može postaviti u jedan red:

W100-max (maksimalna širina: 100%; ) .w-sakrij (prikaz: nema; ) .w-auto (širina: automatski; )

Na nulama se ne pišu mjerne jedinice (gdje nije bitno), umjesto 0px, jednostavno navedite 0.

Za razlomke sa nulom, bolje je navesti .8em umjesto 0.8em. Međutim, ovaj uslov nije obavezan i možete koristiti bilo koju opciju, glavna stvar je da postoji uniformnost barem na nivou jedne css datoteke.

Ako svojstvo podržava skraćenicu, onda se može koristiti, na primjer, umjesto margine: 0 20px 0 20px; možete odrediti marginu: 0 20px;

Ako se vrijednost boje može skratiti, to se može učiniti, na primjer, umjesto #FFAA88, navedite #FA8 . Ovdje je važno da se takva boja često ne upisuje ručno, već se kopira iz programa za pipete. Obično koriste puni zapis od 6 cifara. Osim toga, neki programi vraćaju mala slova, dok drugi vraćaju velika: #FFAA88 ili #ffaa88 . Stoga je svaka opcija prikladna za postavljanje boje. Svaki put kada ručno mijenjate velika i mala slova je glupost.

Nazive boja po abecednom redu treba koristiti oprezno i ​​najbolje samo tokom faze izrade prototipa. U rezultirajućem kodu, bolje ih je zamijeniti heksadecimalnim vrijednostima, na primjer, umjesto bojom: crvena; potrebno je da navedete boju: #F00; . Ovaj pristup će vam omogućiti da promijenite boju direktno u uređivaču koda kao što je Notepad++ (reaguje na simbol #).

Redoslijed css svojstava može biti bilo koji. Može biti po redu dodavanja, može se grupirati po funkcionalnoj namjeni. Tehnički, redoslijed može biti bilo koji, tako da ovdje nema pravila.

Treba shvatiti da je formatiranje CSS koda čista konvencija. U stvarnosti, takav kod će biti komprimiran i minimiziran od strane Sass kompajlera. Ako ga trebate formatirati za gledanje, nitko pri zdravoj pameti to neće učiniti ručno: postoje desetine online usluga za lijepo formatiranje koda s bilo kojim postavkama. Stoga je CSS formatiranje potrebno samo u fazi razvoja.

sa istim atributom poravnanja, kao što je prikazano u tabeli 1. 2.

Tab. 2. Poravnavanje teksta s parametrom poravnanja

HTML kod	Opis
	Dodaje novi pasus teksta, po defaultu poravnat lijevo. Mala vertikalna uvlaka se automatski dodaju prije i poslije pasusa.
Tekst	Centralno poravnanje.
Tekst	Lijevo poravnanje.
Tekst
Tekst	Poravnanje po širini.
Tekst	Onemogućuje automatsko prelamanje redaka, čak i ako je tekst širi od prozora pretraživača.
Tekst	Dozvoljava pretraživaču da prekine liniju na navedenoj lokaciji, čak i ako se koristi oznaka .
Tekst	Centralno poravnanje.
Tekst	Lijevo poravnanje.
Tekst	Desno poravnanje.
Tekst	Poravnanje po širini.

Lijevo poravnanje elemenata je postavljeno prema zadanim postavkama, tako da nema potrebe da ga još jednom specificirate. Dakle align="left" može biti izostavljen.

Razlika između pasusa (oznaka

) i oznaku

u tome što se vertikalna uvlaka pojavljuje na početku i na kraju pasusa, što nije slučaj kada se koristi oznaka

.

Atribut align je prilično svestran i može se primijeniti ne samo na osnovni tekst, već i na naslove poput

. Primjer 1 pokazuje kako postaviti poravnanje u takvom slučaju.

Primjer 1: Poravnanje teksta

Kako uhvatiti lava?

metoda nabrajanja

Pustinju dijelimo na nekoliko elementarnih dijelova, čija se veličina poklapa s ukupnim dimenzijama lava, ali je manja od veličine kaveza. Zatim, jednostavnim nabrajanjem, određujemo područje u kojem se lav nalazi, što automatski dovodi do njegovog hvatanja.

metoda dihotomije

Pustinju dijelimo na dvije polovine. U jednom dijelu je lav, u drugom ga nema. Uzimamo polovinu u kojoj se nalazi lav i ponovo je podijelimo na pola. Tako ponavljamo dok se lav ne uhvati.

Rezultat primjera prikazan je na sl. jedan.

Rice. 1. Poravnajte tekst desno i lijevo

U ovom primjeru, naslov je poravnat sa središtem prozora pretraživača, odabrani pasus je poravnat udesno, a osnovni tekst je poravnat lijevo.

Da li volite svoj CSS koliko i ja? Ako je tako, onda, naravno, nastojte osigurati da se on ne samo ponaša i osjeća dobro, već i izgleda dobro.
Nadam se da će dolje opisani alati pomoći vašem kodu da se približi idealnom.

1.Stil-uredan

Vjerovatno najjednostavniji servis predstavljen u recenziji.
Alat nema mnogo funkcija:

• Sortiraj svojstva po abecednom redu
• Sortiraj birače po abecednom redu (ako je označeno "Sigurno organiziraj" - ova opcija nije dostupna)
• Mogućnost odabira stila oblikovanja: višelinijski ili jednoredni
• Može povući CSS datoteke uključene u uvoz u glavni fajl i nemilosrdno ih obraditi
• Kod za obradu možete poslati koristeći: tekstualno polje, upload-ovanje datoteke ili navođenje linka na CSS
• Rezultat se može uzeti u obliku CSS koda ili prenijeti datoteku

2. Formatirajte CSS

Unatoč svom zastrašujućem izgledu, alat se savršeno nosi sa svojim funkcijama, kojih ima dosta.
Mnogo toga možete prilagoditi:

• razmak / tabulatori / novi redovi,
• svojstva sortiranja i imena selektora,
• pretvaranje imena svojstava i selektora u mala slova, itd.

Ono što mi se posebno dopalo kod ove usluge: mogućnost formatiranja podpravila pomoću "ljestvice" (smatram da je ovo vrlo zgodan način organiziranja stilova).

3. Očistite CSS

Prilično moćan alat koji nam pruža mnoge mogućnosti:

• Možete kopirati i zalijepiti CSS u polje “CSS-Code” ili kao vezu do datoteke stila
• Rezultat možete dobiti kao tekst ili u datoteku.
• Postoje 4 vrste formatiranja izvornog koda koje korisnik može izabrati: kod se može optimizirati za najmanju veličinu ili, obrnuto, za bolju čitljivost. Moguće je postaviti predložak za formatiranje u polju "Prilagođeni šablon"
• Može kombinirati pravila, dovesti evidenciju imovine u kratku formu
• Ako je potrebno - uklonite komentare i nevažeće definicije
• Kao i gore opisane usluge, rado će sortirati sve što vam srce poželi po abecednom redu i pretvoriti u mala/velika slova

Inače, motor „ ” se nalazi u srcu ove usluge- CSS parser/optimizator otvorenog koda. Dakle, svako može slobodno da dočara svog lepoticu na njegovoj podlozi, uz blackjack i prekidače.
UPD> U komentarima su predložili link do blizanca ovog servisa: CodeBeautifier . Skup funkcija je skoro identičan CleanCSS-u (usluga također radi na CSSTidy).

4. ProCSSor

Po mom sofisticiranom mišljenju - najprikladniji od svih predstavljenih u ovoj recenziji.
Usluga izlazi u susret korisniku ugodnim sučeljem i vrlo vizualnim savjetima koji vam omogućavaju da brzo shvatite postavke.
Kao i svaki ljepotan koji poštuje sebe, ProCSSor će prihvatiti kod od nas u polju za unos, u obliku datoteke ili linka. Poslat će rezultat pretraživaču i prikazati vezu za preuzimanje datoteke.
Alat ima dovoljno postavki da zadovolji gotovo svakog korisnika, njihovo nabrajanje nema previše smisla - bolje je odmah isprobati.
Lijepa karakteristika usluge je mogućnost čuvanja vaših postavki tako da sljedeći put možete preskočiti korak podešavanja i preći direktno na proces uljepšavanja.
Još jedna atrakcija - ProCSSor pruža API, dokumentaciju možete pronaći ovdje:

Do sada smo samo poravnavali elemente lijevo. Tačnije, mi to uopće nismo radili, a sam pretraživač po defaultu poravnava elemente lijevo. Naravno, bilo bi previše dosadno poravnati sve na lijevo. Stoga, postoje različiti načini za poravnavanje prema sredini i desno.

Poravnavanje elemenata je nešto što samo trebate znati kada . Prva stvar koju treba uraditi je da otkucate najjednostavniju stranicu.

Nekada davno postojala je oznaka

Ne savjetujem vam da ga koristite sada, zbog dostupnosti modernijih metoda, ali ne mogu a da ne spomenem. Korištenje je vrlo, vrlo jednostavno. Sve što vam je potrebno za centriranje, stavljate unutar ove oznake. Ovdje, na primjer, ovdje poravnavamo naslov 1. nivoa u sredini.

Možete dodati i sliku centriranu, hajde da također pređemo na sljedeći red pomoću oznake
:

Zaglavlje nivoa 1 centrirano

To je bila oznaka

, koji je već zastario, osim toga, suprotno vašim očekivanjima od oznaka I jednostavno ne postoji. Recimo, prema zadanim postavkama poravnat lijevo, poravnat po sredini pomoću oznake , ali šta je sa pravom?

Da bi riješili ovaj problem, programeri su smislili univerzalni način poravnanja elemenata. HTML. Metoda je korištenje takozvanih kontejnera, koji se kreiraju pomoću oznake

. Odnosno, sve što treba staviti u određeni kontejner stavlja se unutar oznake

. I ova oznaka već ima atribut " poravnati", čija vrijednost određuje poziciju ovog kontejnera. Postoje tri vrijednosti: " lijevo", "centar", "u pravu". Zadana postavka je " lijevo Međutim, mislim da vas ovo ne iznenađuje.

Hajde sada da napišemo isto HTML kod, ali uz korištenje kontejnera, pored toga, poravnajmo ne u centar, već udesno.

Kao što vidite, sve funkcioniše. Savjetujem vam da promijenite i vrijednost atributa " poravnati" da pogledate druge vrste poravnanja sadržaja kontejnera.

Drugi način za poravnavanje elemenata HTML- ovo su tabele, ali ova tema zaslužuje posebnu raspravu, pa ćemo o njoj govoriti u jednom od sljedećih članaka.

Za sada bi vaša stranica trebala izgledati ovako:

Zaglavlje nivoa 1 centrirano

Naslov 1. nivoa, poravnat desno

S poštovanjem, Mikhail Rusakov.

P.S. Ako želite da saznate više o HTML, zatim pogledajte moj besplatni kurs s primjerom izrade web stranice na HTML:

Top Related Articles

VKontakte moja stranica (ulaz na VK stranicu)

Promocija na društvenoj mreži: kako promovirati VKontakte grupu Promocija grupe na društvenim mrežama

Mile National. Uđi u moj svijet. Prijavite se na moju stranicu u My World