Ինչպես օգտագործել HTML- ը եւ CSS- ը, Tabs եւ Spacing- ը ստեղծելու համար

Նայեք, թե ինչպես HTML- ի սպիտակ տարածքը դիտարկվում է բրաուզերների կողմից

Եթե ​​դուք սկիզբը վեբ դիզայներ եք, շատ բաներից մեկը, որը պետք է վաղ հասկանաք, այն է, որ կայքի կոդի մեջ սպիտակ տարածքը վարվում է վեբ բրաուզերների կողմից:

Ցավոք, բրաուզերների սպիտակ տարածքը վարելու ձեւը, առաջին հերթին, շատ ինտուիտիվ չէ, հատկապես եթե դուք HTML- ի մեջ եք եւ համեմատում եք այն մասին, թե ինչպես է սպիտակ տարածքը վերաբերվում խոսքի մշակման ծրագրերին, որոնք կարող եք ավելի շատ ծանոթանալ:

Բառի մշակման ծրագրակազմի մեջ դուք կարող եք ավելացնել մի շարք ընդգրկույթներ կամ ներդիրներ փաստաթղթում եւ այդ ընդգրկույթը արտացոլվում է փաստաթղթի բովանդակության դրսեւորում: Սա HTML- ի կամ ինտերնետային էջերի հետ չէ: Որպես այդպիսին, սովորելը, թե որքանով է սպիտակ տարածքը, իսկապես, վարվել է վեբ բրաուզերների կողմից, շատ կարեւոր է:

Տպում

Բառի մշակման ծրագրային ապահովման մեջ, երեք հիմնական սպիտակ տիեզերական նշաններն են տարածքը, ներդիրը եւ փոխադրման վերադարձը: Այս գործողություններից յուրաքանչյուրը հստակ ձեւով է, բայց HTML- ում, բրաուզերները դրանք բոլորովին նույնն են ներկայացնում: Անկախ նրանից, թե մեկ տեղ կամ 100 տարածություն տեղադրեք ձեր HTML ձեւաչափով, կամ խառնել ձեր միջակայքերը հետ ներդիրների եւ փոխադրման վերադարձնելու հետ, այդ բոլորը խտացված կլինի մեկ տարածության վրա, երբ էջը բրաուզերի կողմից մատուցվում է: Վեբ դիզայնի տերմինաբանության մեջ դա հայտնի է որպես սպիտակ տիեզերական փլուզում: Դուք չեք կարող օգտագործել այս տիպային ընդգրկույթային բանալիներ, վեբ էջում սպիտակ տարածք ավելացնելով, քանի որ զննարկիչը բրաուզերում տեղադրվում է մի քանի տարածություն ներքեւում միայն մեկ տարածության մեջ,

Ինչու ինչ-որ մեկը օգտագործում է էջանշանները:

Սովորաբար, երբ մարդիկ տեքստերի փաստաթղթում օգտագործում են էջանիշերը, նրանք օգտագործում են դրանք դասավորության պատճառով կամ տեքստը տանում են որոշակի տեղ տեղափոխվելու կամ այլ տարրից որոշակի հեռավորություն: Վեբ դիզայնի մեջ դուք չեք կարող օգտագործել այդ վերոնշյալ տիեզերական նիշերը `հասնելու այդ տեսողական ոճերին կամ դասավորության կարիքներին:

Վեբ դիզայնի մեջ կոդում լրացուցիչ տառատեսակների օգտագործումը բացառապես կլիներ այդ կոդերի ընթերցանության հեշտությամբ: Վեբ դիզայներները եւ մշակողները հաճախակի օգտագործում են ներդիրների կոդերը, որպեսզի նրանք կարողանան տեսնել, թե որ տարրերն են այլ տարրերի երեխաներ, բայց այդ անջատումները չեն ազդում էջի տեսողական դասավորության վրա: Նրանց անհրաժեշտ տեսողական դասավորության փոփոխությունների համար դուք պետք է դիմեք CSS (կասկադային ոճաթերթեր):

Օգտագործելով CSS կոճակներ եւ ընդգրկույթներ ստեղծելու համար

Այսօր կայքերը կառուցված են կառուցվածքի եւ ոճի առանձնահատկությամբ: Էջի կառուցվածքը վարվում է HTML- ով, իսկ ոճը թելադրված է CSS- ով: Սա նշանակում է, որ տարածություն ստեղծելու կամ որոշակի դասավորության հասնելու համար դուք պետք է դառնաք CSS- ի եւ ոչ թե պարզապես ընդգրկող նիշերը HTML կոդի մեջ ավելացնելը:

Եթե ​​դուք փորձում եք ներդիրներ օգտագործել տեքստի սյունակներ ստեղծելու համար, կարող եք փոխարեն օգտագործել

տարրեր, որոնք տեղադրվում են CSS- ով `այդ սյունակի դասավորությունը ստանալու համար: Այս դիրքորոշումը կարող է կատարվել CSS- ի միջոցով, floats, բացարձակ եւ հարաբերական տեղադրման կամ CSS- ի նոր դասավորության մեթոդներ, ինչպիսիք են Flexbox կամ CSS Grid- ը:

Եթե ​​ձեր տվյալները տեղադրում եք աղյուսակային տվյալներ, ապա կարող եք օգտագործել աղյուսակները, որոնք կցուցադրեն այն տվյալները, որոնք ցանկանում եք: Սեղանները հաճախ վեբ դիզայնի վատ ռեպ են ստանում, քանի որ դրանք երկար տարիներ վիրավորվել են որպես մաքուր դասավորության գործիքներ, սակայն սեղանները դեռեւս կատարյալ են, եթե ձեր բովանդակությունը պարունակում է վերոհիշյալ աղյուսակային տվյալներ:

Ծածկանյութեր, լցնում եւ տեքստային հոսանք

CSS- ի հետ զուգահեռներ ստեղծելու ամենատարածված եղանակներն օգտագործվում են հետեւյալ CSS ոճերից մեկը.

  • մարժա
  • լցնում
  • տեքստի ներածություն

Օրինակ, կարող եք շեղարկել առաջին պարբերույթը, ինչպես օրինակ հետեւյալ CSS- ով (նշեք, որ սա ենթադրում է, որ ձեր պարագրաֆը ունի «առաջին» կցված դասի հատկանիշ):

p.first {
տեքստը ներսից `5em;
}

Այս պարբերությունը այժմ հորիզոնականում կլիներ մոտ 5 նիշ:

Դուք նաեւ կարող եք օգտագործել CSS- ի մարժա կամ լիցքաթափման հատկությունները `տարրերի վերին, ներքեւի, ձախ կամ աջ (կամ այդ կողմերի համակցություններ) ընդգրկելու համար: Վերջիվերջո, դուք կարող եք հասնել ցանկացած ընդգրկույթին, սեղմելով CSS- ին:

Առանց տեքստի մեկից ավելի տարածք տեղափոխելու առանց CSS

Եթե ​​ցանկանում եք ձեր տեքստը նախորդ կետից տեղափոխել ավելի քան մեկ տարածություն, կարող եք օգտագործել անջատող տարածքը:

Անջատելու տարածությունը օգտագործելիս պարզապես ավելացնում եք & nbsp; ինչպես շատ անգամ, որքան անհրաժեշտ է ձեր HTML ձեւաչափում:

Օրինակ, եթե ցանկանում եք տեղափոխել ձեր խոսքը հինգ տարածքներ, կարող եք ավելացնել հետեւյալ բառերը առաջ:

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;; & nbsp;;

HTML- ը հարգում է դրանք եւ չի քանդում դրանք մեկ տարածության մեջ: Այնուամենայնիվ, սա համարվում է շատ վատ պրակտիկա, քանի որ ավելացնում է HTML- ի լրացուցիչ դրոշմակնիք փաստաթուղթ `միայն դասավորության կարիքների հասնելու համար: Անդրադառնալով այդ կառույցի եւ ոճի առանձնացմանը, դուք պետք է խուսափեք անընդհատ տարածություններ ավելացնել պարզապես ցանկալի դասավորության արդյունքների հասնելու համար եւ պետք է օգտագործել CSS- ի ծածկանյութերը եւ փոխարենը լիցքավորել: