Detyra kryesore e formatimit është ta bëjë tekstin të lexueshëm dhe të kuptueshëm në strukturën e tij. Madje ka udhëzues të tërë se si të formatohen kodet, ku përshkruhen detaje të tilla si numri i hapësirave ose dhëmbëzimi i mbajtëseve kaçurrelë. Në fakt, gjithçka është shumë më e thjeshtë - mjafton që kodi të jetë i lexueshëm vizualisht, dhe hapësirat ose tabuluesit janë një çështje e vogël.

Megjithatë, pika që dua të theksoj është se nëse do të postosh kod për njerëz të tjerë, do të duhet t'i përmbahesh një lloj "standardi bazë".

Mbushja e bllokut

Çdo bllok i mbivendosur duhet të ketë më shumë diferencë të majtë se prindi i tij.

Kjo do të thotë, ne po ndërtojmë një hierarki vizuale të etiketave që është e lehtë për t'u lundruar. Krahaso me "stilin e sheshtë":

Redaktuesit modernë të tekstit, për shembull Notepad++, futen automatikisht duke përdorur Enter, gjë që eliminon plotësisht problemin e renditjes manuale të tyre Zakonisht, koduesit fillimisht krijojnë një etiketë hapëse dhe mbyllëse dhe më pas e ndajnë atë në rreshta duke përdorur Enter. Kjo siguron që etiketa hapëse të ketë gjithmonë një etiketë mbyllëse.

Blloqe "mbyllëse".

Mund të ketë një situatë në kodin tuaj ku blloqet gjithmonë pasojnë menjëherë njëri-tjetrin. Në këtë rast, nuk keni pse t'i ndani ato mes njëri-tjetrit dhe mos bëni një dhëmbëzim shtesë.

Në këtë shembull, div.layout-center-wrap përmban gjithmonë një fëmijë të menjëhershëm të div.layout-wrap pa ndërprerje. Blloqe të tilla mund të shihen vizualisht si një. Këtu është një shembull tjetër ku blloqet mund të vendosen në të njëjtin nivel.

Gjëja kryesore këtu është të mos e teproni: nuk duhet të vendosni më shumë se 2-3 blloqe në një rresht/nivel. Nëse teksti ose kodi vendoset midis blloqeve, atëherë ato duhet të vendosen patjetër në rreshta të ndryshëm.

Ky formatim nuk është i përshtatshëm. Mënyra e duhur do të ishte:

Hapësirë ​​ose skedë

Nuk ka rëndësi. Përdorni atë që ju pëlqen më së miri. Me sa di unë, pothuajse të gjithë koduesit përdorin tabulatorin, thjesht sepse kërkon vetëm një herë shtypjen e tastit Tab.

Nëse e bëni atë me hapësira, atëherë për secilën dhëmbëzim duhet të shtypni 4 hapësira. Një problem i zakonshëm është se gabimisht mund të shtypni jo 4, por 3, 5 ose ndonjë numër tjetër, dhe në këtë rast ju duhet ose të numëroni goditjet e tasteve ose të kontrolloni vizualisht rezultatin.

Në këtë drejtim, tabuluesi është shumë më "i besueshëm". Nga pikëpamja teknike, nuk ka rëndësi nëse është një tabelator apo hapësira (kodi HTML do të jetë ende i ngjeshur).

Përdorimi i hapësirave të shumta është simulimi i një tabuluesi. Pra, kjo pyetje qëndron në fushën e përdorshmërisë. Por, nëse vendosni të përdorni hapësira, atëherë duhet të ketë 4 karaktere për çdo dhëmbëzim, përndryshe teksti humbet lexueshmërinë. Ka udhëzues ku rekomandohet të vendosni 2 hapësira, por për mua një kod i tillë është vizualisht "i lëmuar".

Shkronjat e mëdha dhe të vogla

Nëse po flasim për HTML, atëherë të gjitha etiketat duhet të jenë me shkronja të vogla. Teknikisht, përsëri, nuk ka rëndësi, por shkronjat e mëdha janë të vështira për t'u lexuar. Prandaj, të gjitha etiketat dhe atributet e tyre shkruhen rreptësisht me shkronja të vogla.

Nëse po flasim për gjuhë programimi, atëherë, si rregull, ato janë të ndjeshme ndaj shkronjave të vogla, kështu që shkronjat e mëdha përdoren vetëm aty ku është e nevojshme.

Citate të vetme dhe të dyfishta

Thomat e dyfishta përdoren pothuajse gjithmonë. Kur futni kodin JS në një faqe HTML, mund të lindë një situatë ku kërkohen dy lloje kuotash:

Në këtë shembull, atributi html është i rrethuar nga thonjëza të dyfishta dhe brenda kodit js përdoren thonjëza të vetme. Është e pamundur të përdoret vetëm një lloj.

Prandaj, rregulli për thonjëzat në HTML dhe CSS është i thjeshtë: thonjëzat kryesore janë të dyfishta, dhe nëse mungojnë, atëherë përdorim thonjëza të vetme.

Etiketat mbyllëse opsionale

Është e thjeshtë këtu - ne gjithmonë e vendosim atë. Kjo vlen për etiketat P, LI dhe të tjerët.

Prerë në fund të etiketave të vetme

Ne kurrë nuk bëjmë. Kjo është një relike e standardit të vjetër XHTML. Shume gabim:

Shumë e vërtetë:

Rendi i atributeve në etiketa

Klasa renditet gjithmonë e para. Në fakt, kur analizohet faqosja, gjithmonë shikohet etiketa dhe klasat e saj, dhe më pas pjesa tjetër e atributeve.

Ato atribute që mund të jenë të vetme (siç kërkohet) specifikohen më së miri në fund:

Klasat/atributet boshe duhet të hiqen.

Formatimi i kodit CSS

Klasa vendoset në një vijë të veçantë dhe hap një bllok të veçorive (() Ka një hapësirë ​​​​pas pikës së dyfishtë. Çdo veçori vendoset në një rresht dhe ndiqet gjithmonë nga një pikëpresje (;).

Etiketa T (ngjyra: e bardhë; sfondi: blu; madhësia e shkronjave: .75 rem; mbushja: 1 px 10 px; rreze kufiri: 3 px; )

Nëse specifikohen disa klasa në të njëjtën kohë, ato vendosen në rreshta të veçantë:

Artikulli, mënjanë, fundi, titulli, navigimi, seksioni ( shfaqja: bllok; )

Nëse klasa është e shkurtër dhe përbëhet nga një veti, atëherë ajo mund të vendoset në një rresht:

W100-max ( gjerësia maksimale: 100%; ) .w-fsheh (ekrani: asnjë; ) .w-auto (gjerësia: automatik; )

Njësitë matëse nuk shkruhen për zero (ku kjo nuk ka rëndësi), në vend të 0px duhet thjesht të tregoni 0 .

Për numrat thyesorë me zero, është më mirë të specifikoni .8em në vend të 0.8em. Sidoqoftë, ky kusht nuk është i detyrueshëm dhe mund të përdorni çdo opsion, gjëja kryesore është që të ketë uniformitet të paktën në nivelin e një skedari css.

Nëse vetia mbështet shënimin stenografik, atëherë mund të përdoret, për shembull, në vend të marzhit: 0 20px 0 20px; ju mund të specifikoni marzhin: 0 20px;

Nëse vlera e ngjyrës mund të shkurtohet, atëherë kjo mund të bëhet, për shembull, në vend të #FFAA88, specifikoni #FA8. Pika e rëndësishme këtu është se shpesh kjo ngjyrë nuk zgjidhet manualisht, por kopjohet nga programet eyedropper. Ata zakonisht përdorin shënimin e plotë 6-shifror. Gjithashtu, disa programe japin shkronja të vogla dhe të tjera me shkronja të mëdha: #FFAA88 ose #ffaa88. Prandaj, çdo opsion është i përshtatshëm për vendosjen e ngjyrës. Ndryshimi manual i shkronjave çdo herë është marrëzi.

Emrat e ngjyrave të shkronjave duhet të përdoren me kujdes dhe përdoren më mirë vetëm gjatë fazës së prototipit. Në kodin që rezulton, është më mirë t'i zëvendësoni ato me vlera heksadecimal, për shembull, në vend të ngjyrës: e kuqe; ju duhet të specifikoni ngjyrën: #F00; . Kjo qasje do t'ju lejojë të ndryshoni ngjyrën drejtpërdrejt në një redaktues kodi si Notepad++ (ai reagon ndaj simbolit #).

Rendi i vetive CSS mund të jetë çdo. Mund t'i porosisni sipas renditjes së shtimit, mund t'i gruponi sipas funksionalitetit. Teknikisht, porosia mund të jetë çdo, kështu që nuk ka rregulla këtu.

Duhet të kuptohet se formatimi i kodit CSS është thjesht një konventë. Në realitet, një kod i tillë do të kompresohet dhe minimizohet nga përpiluesi Sass. Nëse duhet ta formatoni për ta parë, askush në mendjen e tij nuk do ta bëjë manualisht: ka dhjetëra shërbime në internet për formatimin e bukur të kodit me çdo cilësim. Prandaj, formatimi CSS kërkohet vetëm në fazën e zhvillimit.

me një atribut të ngjashëm align, siç tregohet në tabelë. 2.

Tabela 2. Përafrimi i tekstit duke përdorur parametrin align

Kodi HTML	Përshkrim
	Shton një paragraf të ri të tekstit, majtas rreshtuar si parazgjedhje. Ndarjet e vogla vertikale shtohen automatikisht para dhe pas paragrafëve.
Teksti	Shtrirja në qendër.
Teksti	Rreshtimi majtas.
Teksti
Teksti	Shtrirja e gjerësisë.
Teksti	Çaktivizon mbështjelljen automatike të linjës, edhe nëse teksti është më i gjerë se dritarja e shfletuesit.
Teksti	Lejon shfletuesin të thyejë një rresht në vendndodhjen e specifikuar, edhe nëse përdoret një etiketë .
Teksti	Shtrirja në qendër.
Teksti	Rreshtimi majtas.
Teksti	Shtrirja e djathtë.
Teksti	Shtrirja e gjerësisë.

Shtrirja majtas e elementeve është vendosur si parazgjedhje, kështu që nuk ka nevojë ta specifikoni përsëri. Pra, align="majtas" mund të hiqet.

Dallimi midis paragrafit (etiketa

) dhe tag

është se një dhëmbëzim vertikal shfaqet në fillim dhe në fund të paragrafit, gjë që nuk ndodh kur përdoret një etiketë

.

Atributi align është mjaft universal dhe mund të zbatohet jo vetëm në tekstin kryesor, por edhe në tituj si

. Shembulli 1 tregon se si të vendosni shtrirjen në një rast të tillë.

Shembulli 1: Rreshtimi i tekstit

Si të kapni një luan?

Metoda e forcës brutale

Ne e ndajmë shkretëtirën në një numër zonash elementare, madhësia e të cilave përkon me dimensionet e përgjithshme të luanit, por është më e vogël se madhësia e kafazit. Më pas, me kërkim të thjeshtë përcaktojmë zonën në të cilën ndodhet luani, gjë që automatikisht çon në kapjen e tij.

Metoda e dikotomisë

E ndajmë shkretëtirën në dy gjysma. Në njërën pjesë ka një luan, në tjetrën nuk ka asnjë. Marrim gjysmën në të cilën ndodhet luani dhe e ndajmë sërish përgjysmë. E përsërisim këtë derisa luani të kapet.

Rezultati i shembullit është paraqitur në Fig. 1.

Oriz. 1. Lidhni tekstin djathtas dhe majtas

Në këtë shembull, titulli është rreshtuar në qendër të dritares së shfletuesit, paragrafi i theksuar është rreshtuar në të djathtë dhe teksti i trupit është rreshtuar në të majtë.

A ju pëlqen kodi juaj CSS po aq sa unë? Nëse po, atëherë, sigurisht, përpiquni të siguroheni që ai jo vetëm të sillet dhe të ndihet mirë, por edhe të duket bukur.
Shpresoj që mjetet e përshkruara më poshtë do ta ndihmojnë kodin tuaj t'i afrohet idealit.

1.Styleneat

Ndoshta shërbimi më i thjeshtë i paraqitur në rishikim.
Mjeti nuk ka shumë opsione:

• Renditni vetitë sipas alfabetit
• Renditja e përzgjedhësve sipas alfabetit (nëse është zgjedhur "Organizimi i sigurt", ky opsion nuk është i disponueshëm)
• Aftësia për të zgjedhur stilin e formatimit: me shumë rreshta ose me një rresht
• Mund të tërheqë skedarë CSS të lidhur duke përdorur importin në skedarin kryesor dhe t'i përpunojë ato pa mëshirë
• Ju mund të dërgoni kodin për përpunim duke përdorur: një fushë teksti, duke ngarkuar një skedar ose duke siguruar një lidhje me CSS
• Rezultati mund të merret si kod CSS ose të ngarkoni një skedar

2.FormatCSS

Pavarësisht pamjes së tij kërcënuese, instrumenti përballon mirë funksionet e tij, nga të cilat ka mjaft.
Mund të konfiguroni shumë:

• vendosja e hapësirave / skedave / linjave të reja,
• renditja e veçorive dhe emrat e përzgjedhësve,
• konvertimi i emrave të pronave dhe përzgjedhësve në shkronja të vogla, etj.

Ajo që më pëlqeu veçanërisht në lidhje me këtë shërbim: aftësia për të formatuar nënrregullat me një "shkallë" (më duket kjo një mënyrë shumë e përshtatshme për të organizuar stilet).

3. CleanCSS

Një mjet mjaft i fuqishëm që na ofron shumë mundësi:

• Ju mund të ushqeni CSS duke kopjuar-ngjitur në fushën "CSS-Code" ose si një lidhje me skedarin e stilit
• Ju mund ta merrni rezultatin si tekst ose si skedar.
• Përdoruesi ka 4 lloje të formatimit të burimit për të zgjedhur: kodi mund të optimizohet për madhësinë më të vogël ose, anasjelltas, për lexueshmëri më të mirë. Është e mundur të vendosni një shabllon formatimi në fushën "Model i personalizuar".
• Në gjendje të kombinojë rregullat dhe të reduktojë vetitë në një formë të shkurtër
• Nëse është e nevojshme, hiqni komentet dhe përkufizimet e pavlefshme
• Ashtu si shërbimet e përshkruara më sipër, ai me kënaqësi do të rendit çdo gjë që dëshiron zemra juaj në mënyrë alfabetike dhe do ta shndërrojë atë në shkronja të vogla/të mëdha

Nga rruga, ky shërbim bazohet në motorin "".- analizues/optimizer CSS me burim të hapur. Pra, të gjithë mund të përshkruajnë lirisht bukurinë e tyre në bazën e saj, me blackjack dhe çelësa.
UPD> Në komentet ata sugjeruan një lidhje me binjakun e këtij shërbimi: CodeBeautifier. Seti i funksioneve është pothuajse identik me CleanCSS (shërbimi funksionon gjithashtu në CSSTidy).

4. ProCSSor

Sipas mendimit tim me përvojë, është më i përshtatshmi nga të gjitha të paraqitura në këtë përmbledhje.
Shërbimi përshëndet përdoruesin me një ndërfaqe të këndshme dhe këshilla shumë të qarta pop-up që ju lejojnë të kuptoni shpejt cilësimet.
Ashtu si çdo zbukurues që respekton veten, ProCSSor do të pranojë kodin nga ne në fushën e hyrjes, në formën e një skedari ose lidhjeje. Do të dërgojë rezultatin në shfletues dhe do të shfaqë një lidhje për të shkarkuar skedarin.
Mjeti ka cilësime të mjaftueshme për të kënaqur pothuajse çdo përdorues, nuk ka kuptim t'i renditni ato - është më mirë ta provoni menjëherë.
Një tipar i mirë i shërbimit është aftësia për të ruajtur cilësimet tuaja, në mënyrë që herën tjetër të mund të kapërceni hapin e cilësimeve dhe të shkoni direkt në procesin e rafinimit.
Një tërheqje tjetër - ProCSSor ofron një API, dokumentacionin mund ta gjeni këtu:

Deri më tani, ne kemi rreshtuar elementë vetëm në të majtë. Më saktësisht, ju dhe unë nuk e bëmë fare këtë, dhe vetë shfletuesi i rreshton elementët majtas si parazgjedhje. Natyrisht, do të ishte shumë e mërzitshme të rreshtosh gjithçka në të majtë. Prandaj, ka mënyra të ndryshme për të lidhur në qendër dhe djathtas.

Rreshtimi i elementeve është diçka që thjesht duhet të dini kur e bëni këtë. Gjëja e parë që duhet të bëni është të shkruani një faqe të thjeshtë.

Njëherë e një kohë kishte një etiketë

Nuk ju këshilloj ta përdorni tani, për shkak të disponueshmërisë së metodave më moderne, por nuk mund të mos e përmend. Është shumë, shumë e thjeshtë për t'u përdorur. Gjithçka që ju nevojitet për t'u përqendruar, vendosni brenda kësaj etikete. Për shembull, këtu ne rreshtojmë nivelin e 1-rë duke shkuar në qendër.

Mund të shtoni një fotografi, gjithashtu të rreshtuar në qendër, le të kalojmë gjithashtu në rreshtin tjetër duke përdorur etiketën
:

Titulli i nivelit të parë, i përafruar në qendër

Ishte një etiketë

, e cila tashmë është e vjetëruar, përveç kësaj, në kundërshtim me pritjet tuaja për etiketat Dhe thjesht nuk ekziston. Le të themi të rreshtuar majtas si parazgjedhje, rreshtuar në qendër duke përdorur etiketën , por ajo e duhura?

Për të zgjidhur këtë problem, zhvilluesit dolën me një mënyrë universale për të lidhur elementët HTML. Metoda është përdorimi i të ashtuquajturave kontejnerë, të cilët krijohen duke përdorur etiketën

. Kjo do të thotë, gjithçka që duhet të vendoset në një enë specifike vendoset brenda etiketës

. Dhe kjo etiketë tashmë ka atributin " rreshtoj", vlera e së cilës përcakton pozicionin e këtij kontejneri. Janë tre vlera: " majtas", "qendër", "drejtë". Si parazgjedhje, është " majtas“Megjithatë, mendoj se kjo nuk ju habit.

Le të shkruajmë të njëjtën gjë tani Kodi HTML, por duke përdorur kontejnerë, përveç kësaj, le të rreshtohemi jo në qendër, por në të djathtë.

Siç mund ta shihni, gjithçka funksionon. Unë ju këshilloj të ndryshoni edhe vlerat e atributit " rreshtoj" për të parë llojet e tjera të shtrirjes së përmbajtjes së kontejnerëve.

Një mënyrë tjetër për të rreshtuar elementët HTML- këto janë tabela, por kjo temë meriton një diskutim të veçantë, kështu që ne do të flasim për të në një nga artikujt e mëposhtëm.

Tani për tani, faqja juaj duhet të duket si kjo:

Titulli i nivelit të parë, i përafruar në qendër

Titulli i nivelit të parë, i rreshtuar djathtas

Sinqerisht, Mikhail Rusakov.

P.S. Nëse dëshironi të dini më shumë rreth HTML, pastaj hidhini një sy kursit tim falas me një shembull të krijimit të një faqe interneti në HTML:

Artikujt më të mirë mbi këtë temë

Çfarë është përpunimi i porosive në Aliexpress dhe çfarë duhet të dini për të

Karakteristikat e punës me programet e përpunimit të tekstit

VK-Downloader - një program për shkarkimin audio dhe video në VKontakte Shkarkoni aplikacionin në VKontakte