Ինչպես համադրեք եւ գլորում տարրեր Վեբ էջում

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

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

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

Հավասարեցնել տեքստի պարբերությունները

Պարբերության պիտակը առաջին տեղն է, որը սկսում է ձեր վեբ էջը տեղադրելու մեջ: Այն բացվում եւ փակվում է պիտակների նման:

Պարբերության տեքստի լռելյայն հավասարեցումը էջի ձախ կողմում է, բայց նաեւ կարող եք ուղղել ձեր պարբերությունները դեպի աջ եւ կենտրոն:

Օգտագործելով float հատկությունը թույլ է տալիս պարբերությունները հավասարեցնել տարրերի աջ կամ ձախ: Ցանկացած տարրեր այդ ծնողի տարրի մեջ կթողնվեն լողացող տարրի շուրջ:

Լավագույն արդյունքը պարբերության հետ ստանալու համար լավագույնն է ընդգրկել այն լայնությունը, որը փոքր է, քան կոնտեյների (ծնողի) տարրը:

Հավասարեցնել տեքստի ներսում պարագրաֆները

Անշուշտ, պարբերության տեքստի համար ամենահետաքրքիր հարթությունը «արդարացնում է», որը պատմում է զննարկիչին, պատուհանը ճիշտ եւ ձախ կողմերում, ըստ էության, ցուցադրելու տեքստը:

Պարբերության համար տեքստը հիմնավորելու համար դուք կօգտագործեք տեքստի հարթակի գույքը:

Դուք կարող եք նաեւ համընկնել բոլոր տեքստը պարբերության մեջ աջ կողմը կամ ձախը (կանխադրված), օգտագործելով տեքստի հարթությունը:

Text-align հատկությունը կտտացրեք տեքստը տարրի մեջ: Տեխնիկապես դա ենթադրվում է, որ պարբերության կամ այլ տարրի մեջ պարունակվող պատկերները գցեք, սակայն բրաուզերների մեծ մասը վերաբերում է պատկերներին, որպես ներկառուցված այս գույքի համար:

Պատկերացրեք պատկերներ

Օգտագործելով float հատկությունը պատկերի վրա, դուք կարող եք սահմանել պատկերների տեղադրումը էջում եւ ինչպես տեքստը կպցրեք դրանց շուրջ:

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

Վերեւում գտնվող պատկերային տողի հետեւից տեքստը կցուցադրվի պատկերի աջ կողմում, քանի որ պատկերն էկրանին ձախ կողմում է:

Եթե ​​ուզում եմ, որ տեքստը դադարեցնի պատկերի շրջանակը, ես օգտագործում եմ հստակ առանձնահատկությունը.

style = "clearar: left"

Հավասարեցնել պարբերություններից

Այնուամենայնիվ, եթե ինչ-որ բան ուզում եք ավելի շատ թվարկել, քան պարզապես պարբերություն կամ պատկեր: Պարզապես կարող եք ոճի գույքը դնել յուրաքանչյուր պարբերությունում, բայց կա պիտակ, որը կարող եք օգտագործել այն ավելի արդյունավետ: