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

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

Blokirajte uvlake

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

Odnosno, gradimo vizualnu hijerarhiju oznaka kojom se lako kretati. Usporedi s "ravnim stilom":

Moderni uređivači teksta, kao što je Notepad ++, automatski ih uvlače pomoću Enter "y, što u potpunosti eliminira problem s njihovim ručnim postavljanjem. Obično koderi prvo kreiraju oznaku za otvaranje i zatvaranje, a tek nakon toga je razbijaju u retke pomoću Enter "ohm. To 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 se blokovi mogu vizualno promatrati kao jedan. Evo još jednog primjera gdje se blokovi mogu postaviti na istu razinu.

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

Ovo oblikovanje ne funkcionira. Bit će točno ovako:

Razmak ili tab

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

Ako to radite s razmacima, tada za svaku uvlaku trebate pritisnuti 4 razmaka. Čest je problem što greškom možete pritisnuti ne 4, već 3, 5 ili nešto drugo, a pritom morate ili brojati pritiske tipki ili vizualno kontrolirati rezultat.

U tom smislu, tabulator je puno "pouzdaniji". S tehničkog gledišta, nema razlike između tabova i razmaka (html kod će i dalje biti komprimiran).

Korištenje više razmaka imitacija je tabulatora. Dakle, ovo pitanje leži u ravnini upotrebljivosti. Ali, ako se odlučite koristiti razmake, tada mora biti 4 znaka za svaku uvlaku, inače tekst gubi čitljivost. Postoje priručnici u kojima se preporuča staviti 2 razmaka, ali za mene je takav kod vizualno "neuredan".

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 u pravilu osjetljivi na velika i mala slova, pa se velika slova koriste samo tamo gdje je potrebno.

Jednostruki i dvostruki navodnici

Gotovo uvijek se koriste dvostruki navodnici. Kada se JS kod ubaci u HTML stranicu, može se pojaviti situacija kada su potrebne dvije vrste navodnika:

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.

Izborne oznake za zatvaranje

Jednostavno je - uvijek postavljeno. To 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 krivo:

Istina:

Redoslijed atributa u oznakama

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

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

Prazne klase/atribute treba ukloniti.

Formatiranje CSS koda

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

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

Ako je nekoliko klasa navedeno odjednom, one se postavljaju u zasebne retke:

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

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

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

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

Za razlomke s nulom bolje je navesti .8em umjesto 0.8em. Međutim, ovaj uvjet nije obavezan i možete koristiti bilo koju opciju, glavna stvar je da postoji ujednačenost barem na razini jedne css datoteke.

Ako svojstvo podržava stenografiju, 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žna točka da se često takva boja ne upisuje ručno, već se kopira iz programa za pipete. Obično koriste puni zapis od 6 znamenki. 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 s oprezom i najbolje je samo tijekom faze izrade prototipa. U rezultirajućem kodu bolje ih je zamijeniti heksadecimalnim vrijednostima, na primjer, umjesto bojom: crvena; morate odrediti boju: #F00; . Ovaj pristup će vam omogućiti da promijenite boju izravno u uređivaču koda kao što je Notepad++ (reagira na simbol #).

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

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

s istim atributom poravnanja, kao što je prikazano u tablici 1. 2.

Tab. 2. Poravnavanje teksta s parametrom poravnanja

HTML kod	Opis
	Dodaje novi odlomak teksta, prema zadanim postavkama poravnat lijevo. Male okomite uvlake automatski se dodaju prije i poslije odlomka.
Tekst	Poravnanje po sredini.
Tekst	Lijevo poravnanje.
Tekst
Tekst	Poravnanje po širini.
Tekst	Onemogućuje automatsko prelamanje redaka, čak i ako je tekst širi od prozora preglednika.
Tekst	Omogućuje pregledniku da prekine liniju na navedenom mjestu, čak i ako se koristi oznaka .
Tekst	Poravnanje po sredini.
Tekst	Lijevo poravnanje.
Tekst	Desno poravnanje.
Tekst	Poravnanje po širini.

Lijevo poravnanje elemenata postavljeno je prema zadanim postavkama, tako da ga nema potrebe ponovno specificirati. Dakle align="left" se može izostaviti.

Razlika između paragrafa (oznaka

) i oznaku

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

.

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

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

Primjer 1: Poravnanje teksta

Kako uhvatiti lava?

metoda popisivanja

Pustinju dijelimo na nekoliko elementarnih dijelova, čija se veličina podudara 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 polovice. U jednom dijelu je lav, u drugom ga nema. Uzimamo polovicu u kojoj se nalazi lav i ponovno je podijelimo na pola. Tako ponavljamo dok se lav ne uhvati.

Rezultat primjera prikazan je na sl. jedan.

Riža. 1. Poravnajte tekst desno i lijevo

U ovom primjeru, naslov je poravnat sa središtem prozora preglednika, odabrani odlomak je poravnat udesno, a tijelo teksta lijevo.

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

1.Stil-uredan

Vjerojatno najjednostavniji servis predstavljen u recenziji.
Alat nema mnogo značajki:

• Poredaj svojstva po abecedi
• Poredaj birače po abecedi (ako je označeno "Sigurno organiziraj" - ova opcija nije dostupna)
• Mogućnost odabira stila oblikovanja: višeredni ili jedan redak
• Može povući CSS datoteke uključene uz uvoz u glavnu datoteku i nemilosrdno ih obraditi
• Kod za obradu možete poslati pomoću: tekstualnog polja, učitavanjem datoteke ili navođenjem veze na CSS
• Rezultat se može uzeti u obliku CSS koda ili prenijeti datoteku

2. Formatirajte CSS

Unatoč svom strašnom izgledu, alat se savršeno nosi sa svojim funkcijama, kojih ima dosta.
Možete prilagoditi puno:

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

Ono što mi se posebno svidjelo kod ove usluge: mogućnost oblikovanja podpravila pomoću "ljestve" (smatram da je ovo vrlo prikladan 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 na datoteku stila
• Rezultat možete dobiti kao tekst ili u datoteku.
• Postoje 4 vrste formatiranja izvornog koda koje korisnik može birati: kod se može optimizirati za najmanju veličinu ili, obrnuto, za bolju čitljivost. Moguće je postaviti predložak oblikovanja u polju "Prilagođeni predložak"
• Može kombinirati pravila, dovesti evidenciju imovine u kratki oblik
• 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 abecedi i pretvoriti u mala/velika slova

Usput, motor " " nalazi se u srcu ove usluge- CSS parser/optimizator otvorenog koda. Dakle, svatko može slobodno dočarati vlastitu ljepoticu na svojoj bazi, uz blackjack i prekidače.
UPD> U komentarima su predložili poveznicu na blizanku ove usluge: CodeBeautifier . Skup značajki je gotovo identičan CleanCSS-u (usluga također radi na CSSTidyju).

4. ProCSSor

Po mom sofisticiranom mišljenju - najprikladniji od svih predstavljenih u ovoj recenziji.
Usluga susreće korisnika s ugodnim sučeljem i vrlo vizualnim opisima koji vam omogućuju da brzo shvatite postavke.
Kao i svaki ljepotica koji poštuje sebe, ProCSSor će od nas prihvatiti kod u polju za unos, u obliku datoteke ili veze. Poslat će rezultat pregledniku i prikazati vezu za preuzimanje datoteke.
Alat ima dovoljno postavki da zadovolji gotovo svakog korisnika, njihovo nabrajanje nema previše smisla - bolje ga je isprobati odmah.
Lijepa karakteristika usluge je mogućnost spremanja vaših postavki tako da sljedeći put možete preskočiti korak postavki i prijeći ravno na postupak uljepšavanja.
Još jedna atrakcija - ProCSSor nudi API, dokumentaciju možete pronaći ovdje:

Do sada smo samo poravnavali elemente lijevo. Točnije, mi to uopće nismo radili, a sam preglednik prema zadanim postavkama poravnava elemente ulijevo. Naravno, bilo bi previše dosadno sve poravnati ulijevo. Stoga postoje različiti načini za poravnavanje prema sredini i desno.

Poravnavanje elemenata je nešto što samo trebate znati kada . Prvo što trebate učiniti je upisati najjednostavniju stranicu.

Nekada davno postojala je oznaka

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

Možete dodati i sliku centriranu, također prijeđimo na sljedeći redak pomoću oznake
:

Naslov razine 1 centriran

Bila je to 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 što je s onim pravim?

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

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

. I ova oznaka već ima atribut " uskladiti", čija vrijednost određuje položaj ovog spremnika. Postoje tri vrijednosti: " lijevo", "centar", "pravo". Zadana postavka je " lijevo Međutim, mislim da vas ovo ne iznenađuje.

Napišimo sada isto HTML kod, ali uz korištenje spremnika, osim toga, poravnajmo ne u središte, već udesno.

Kao što vidite, sve radi. Savjetujem vam da promijenite i vrijednost atributa " uskladiti" da pogledate druge vrste usklađivanja sadržaja spremnika.

Drugi način za poravnavanje elemenata HTML- ovo su tablice, 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:

Naslov razine 1 centriran

Naslov razine 1, poravnat udesno

S poštovanjem, Mikhail Rusakov.

p.s. Ako želite saznati više o HTML, zatim pogledajte moj besplatni tečaj s primjerom izrade web stranice na HTML:

Vrhunski povezani članci

Besplatni programi za Windows besplatno preuzimanje

Laserski i inkjet pisač RAM Veličina pisača Opis virtualne memorije

Gaming PC u ruksaku: pregled Intel NUC Hades Canyon