Տեքստի ֆորմատավորման համար բազմաթիվ պիտակներ կան: Նրանցից ոմանք հաճախ են օգտագործվում (և դուք արագ կհիշեք դրանք), մյուսները՝ հազվադեպ (պետք չէ հիշել դրանք):

Այստեղ մենք կանդրադառնանք նրանց, որոնք հաճախ օգտագործվում են:

Թեգեր, որոնք կազմում են տեքստային վերնագրեր

Այս թեգերը ընդգծում են տեքստը որպես վերնագրեր: Նրանք. Յուրաքանչյուր վերնագիր սկսվում է նոր տողով, ընդգծված է թավով և ունի իր չափը (առաջին մակարդակի վերնագիրն ամենամեծն է, վեցերորդը՝ ամենափոքրը):

Այս պիտակները կարող են օգտագործվել հորիզոնական հավասարեցման տարբերակով շարել. Այս պարամետրի հնարավոր արժեքները.

• ձախ- ձախ,
• ճիշտ- աջ կողմում,
• կենտրոն- կենտրոնում,
• արդարացնել- լայնությամբ:

Նմուշ կոդ.

Պարբերության ընդմիջում և տողերի ընդմիջման պիտակներ

Նշել
- հարկադիր գծի սնուցման պիտակ: Այս թեգից հետո տեքստը սկսվում է նոր տողով:
Պիտակներ տեքստը բաժանել պարբերությունների. Յուրաքանչյուր պարբերության սկզբից առաջ դուք պետք է տեղադրեք պիտակ

, փակման պիտակը պարտադիր չէ: Ի տարբերություն պիտակի
Պարբերությունները միմյանցից բաժանված են դատարկ տողով:

Պիտակի վրա

պարամետր կա շարել, որը սահմանում է, թե ինչպես է պարբերության մեջ տեքստը հավասարեցվում: Այս պարամետրի հնարավոր արժեքները.

• ձախ- ձախ,
• ճիշտ- աջ կողմում,
• կենտրոն- կենտրոնում,
• արդարացնել- լայնությամբ:

Նմուշ կոդ.

HTML ձևաչափում

Սա պարբերություն է, այն բաժանված է մնացած տեքստից վերևում և ներքևում գտնվող դատարկ տողերով և հավասարեցված ձախ կողմում:

Սա պարբերություն է, այն բաժանված է մնացած տեքստից վերևում և ներքևում գտնվող դատարկ տողերով և հավասարեցված է աջ կողմում:

Սա պարբերություն է, այն բաժանված է մնացած տեքստից վերևում և ներքևում գտնվող դատարկ տողերով և հավասարեցվում է կենտրոնին:

Դա պարզապես տեքստ է:
Սա տեքստ է նոր տողում:

Բրաուզերի պատուհանում այն ​​կունենա հետևյալ տեսքը.

Թեգեր, որոնք տեքստը դարձնում են շեղ

Այս թեգերը շեղում են տեքստը, բայց դա անում են տարբեր պատճառներով:
Պիտակներ օգտագործվում է գրքերի, հոդվածների և մեջբերումների վերնագրերը տրամաբանորեն ընդգծելու համար:
Պիտակներ օգտագործվում են սահմանումները ընդգծելու համար:
Պիտակներ Եվ ընդգծել տեքստի կարևոր մասերը. Վերջինս խորհուրդ չի տրվում օգտագործել։

Նմուշ կոդ.

HTML ձևաչափում Այս տեքստը գտնվում է մեջբերում պիտակների մեջ
Այս տեքստը dfn թեգերում է
Այս տեքստը em tags-ում է
Այս տեքստը i tags-ում է

Բրաուզերի պատուհանում այն ​​կունենա հետևյալ տեսքը.

Թեգեր, որոնք տեքստը դարձնում են համարձակ

Երկուսն էլ օգտագործվում են տեքստի կարևոր հատվածներն ընդգծելու համար, սակայն նախընտրելի է առաջինը:

Նմուշ կոդ.

Թեգերի այս տեքստը ուժեղ է
Այս տեքստը b թեգերում է

Բրաուզերի պատուհանում այն ​​կունենա հետևյալ տեսքը.

Թեգեր, որոնք ընդգծում են տեքստը

Երկուսն էլ օգտագործվում են տեքստի կարևոր հատվածներն ընդգծելու համար, սակայն նախընտրելի է առաջինը:

Նմուշ կոդ.

HTML ձևաչափում Պարզապես տեքստ

Այս տեքստը u tags-ում է

Բրաուզերի պատուհանում այն ​​կունենա հետևյալ տեսքը.

Պիտակներ, որոնք ցուցադրում են տեքստը monospace տառատեսակով

Տեքստը ցուցադրվում է monospace տառատեսակով, սակայն նախընտրելի է օգտագործել առաջինը։

Նմուշ կոդ.

HTML ձևաչափում Պարզապես տեքստ
Այս տեքստը kbd թեգերով է
Այս տեքստը դրված է samp tags-ում
Այս տեքստը tt պիտակներով է

Բրաուզերի պատուհանում այն ​​կունենա հետևյալ տեսքը.

Պիտակներ, որոնք ցուցադրում են տեքստը վերնագրով և ենթատեքստով

Պիտակներ ցուցադրել տեքստը տողի մակարդակից ներքև՝ ավելի փոքր տառաչափով:
Պիտակներ ցուցադրել տեքստը տողի մակարդակից ավելի փոքր տառաչափով:
Հարմար է մաթեմատիկական և քիմիական բանաձևերի ստացման համար:

Նմուշ կոդ.

HTML ձևաչափում y=x 2 - պարաբոլայի հավասարում։

H 2 O- ը ջրի բանաձեւն է:

Բրաուզերի պատուհանում այն ​​կունենա հետևյալ տեսքը.

Տառատեսակի պիտակը և դրա պարամետրերը

Պիտակներ նշեք տեքստի տառատեսակի պարամետրերը.

դեմքը- տառատեսակի անվանումը. Դուք կարող եք թվարկել մի քանի տառատեսակների անուններ՝ բաժանված ստորակետերով: Այս դեպքում, եթե առաջին նշված տառատեսակը չգտնվի (դուք չգիտեք, թե ինչ տառատեսակներ են տեղադրված օգտատիրոջ համակարգչում), զննարկիչը կօգտագործի ցուցակի հաջորդը:

չափը- տառաչափը կամայական միավորներով 1-ից 7: Տառատեսակի լռելյայն չափը 3 է:

գույն- տեքստի գույնը (կանխադրված - սև):

Գույնը նշելու երկու եղանակ կա՝ անունով և տասնվեցական գունային կոդ նշելով:

Անհատականացված գույներով (դրանցից 156-ը կա) ամեն ինչ պարզ է, նայեք համապատասխան աղյուսակին, ընտրեք այն գույնը, որը ձեզ դուր է գալիս և գրեք դրա անունը պարամետրի արժեքի մեջ (օրինակ՝ color="blue"):

Բայց երկրորդ մեթոդը շատ ավելի մեծ ընտրություն է ապահովում: Այստեղ մենք կարող ենք ընտրել մեկ միլիոն գույներից՝ նշելով դրա տասնվեցական ծածկագիրը: Այս կոդը 6 նիշ է և սկսվում է «#» գրանշանով: Մենք չենք մանրամասնի, թե ինչպես է ձևավորվում գունային ծածկագիրը, մենք միայն կնշենք, որ այն կարելի է ձեռք բերել, օրինակ, Photoshop-ում: Կարդացեք, թե ինչպես դա անել էջում
Ավելի պարզ կլինի օրինակով.

Կարմիրով առանձնացնենք «տեքստ» բառը.

Տեքստ

Հիմա եկեք ավելացնենք շեղ պիտակները (բացվում են ձախ կողմում, փակվում են աջ կողմում).

Տեքստ

Իսկ հիմա՝ համարձակ պիտակներ.

Տեքստ

Ամեն անգամ, երբ մենք տեղադրում ենք բոլոր նախորդ պիտակները նորերի մեջ: Սա կոչվում է բնադրման կարգ: Տեքստը ֆորմատավորելու համար կարող եք օգտագործել տարբեր թեգեր, գլխավորը չխախտել բնադրման կարգը։

Սա ավարտում է երրորդ դասը, մենք նայեցինք տեքստի ֆորմատավորման հիմնական եղանակներին, հաջորդ դասում մենք կանդրադառնանք ավելի քիչ կիրառելի ֆորմատավորման թեգերին: Այնուամենայնիվ, վատ գաղափար չի լինի ծանոթանալ դրանց։

կամ ուսումնասիրել թեգերը, որոնք ֆորմատավորում են HTML տեքստը

Ձեր ուշադրությանն ենք ներկայացնում ձեռնարկի առանցքային և ամենապարզ դասերից մեկը։

• HTML տեքստինտերնետ էջերի մեծ մասի հիմնական բաղադրիչն է:
• Հիմնական արտահայտություններով HTML էջի տեքստումօգտվողները կարող են գտնել ձեր կայքը:
• HTML տեքստԿարող է լինել ցանկացած չափի և գույնի ձեր հայեցողությամբ: Կարող եք նաև որոշել տառատեսակի տեսակը և դրա ծավալը:
• HTML տառատեսակի չափըսովորաբար սահմանվում է պիքսելներով:
• HTML տեքստի ձևաչափումլայնորեն կիրառվում են, օգտագործվում են ֆորմատավորման պիտակներ։

Տես ներքեւում թեգեր, որոնք ձևավորում են HTML տեքստը:

• Պիտակներ → համարձակ HTML տեքստ(թավ տառատեսակ):
• Պիտակներ → համարձակ HTML տեքստ(թավ տառատեսակ):
• Պիտակներ → մոնոտիեզերք HTML տեքստ(monospace տառատեսակ):
• Պիտակներ → մոնոտիեզերք HTML տեքստ(monospace տառատեսակ):
• Պիտակներ → մոնոտիեզերք HTML տեքստ(monospace տառատեսակ):
• Պիտակներ → HTML տեքստ, սովորականից մեծ չափս (մեծ տառատեսակ):
• Պիտակներ → HTML տեքստ, չափը սովորականից փոքր է (փոքր տառատեսակ):
• Պիտակներ → թեք HTML տեքստ(շեղ տառատեսակ):
• Պիտակներ → թեք HTML տեքստ(շեղ տառատեսակ):
• Պիտակներ → թեք HTML տեքստ(շեղ տառատեսակ):
• Պիտակներ → ընդգծված HTML տեքստ(ընդգծված տառատեսակ):
• Պիտակներ → խաչած HTML տեքստ(հարվածային տառատեսակ):
• Պիտակներ → HTML տեքստ(տառատեսակ) ենթատեքստով:
• Պիտակներ → HTML տեքստ(տառատեսակ) վերնագրով:

HTML տեքստի ձևաչափում. գծանշված, ընդգծված տեքստ

Արդյունք՝ ... monospace տառատեսակ

Արդյունք․ ...տառաչափը սովորականից մեծ է

Արդյունք: ... շեղ տառատեսակ

Արդյունք՝ տառատեսակ տեքստ (տառատեսակ)

Արդյունք՝ վերնագիր

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

Նկարագրություն

Ավելացնում է տեքստի ձևավորում ընդգծման, մատնանշման, տեքստի վերևում գտնվող տողի և թարթման տեսքով: Դուք կարող եք միաժամանակ կիրառել մեկից ավելի ոճ՝ թվարկելով բացատներով բաժանված արժեքները:

Շարահյուսություն

տեքստի ձևավորում՝ [blink || գծի միջով || համադրել || ընդգծել ] | ոչ մեկը | ժառանգել

Արժեքներ

blink Սահմանում է, որ տեքստը թարթվի: Նման տեքստը պարբերաբար անհետանում է, մոտավորապես վայրկյանը մեկ, հետո նորից հայտնվում իր սկզբնական տեղում: Այս արժեքը ներկայումս չի աջակցվում բրաուզերների կողմից և հնացած է CSS3-ում, փոխարենը առաջարկվում է անիմացիա: line-through Ստեղծում է տողով տեքստ (օրինակ): overline Տեքստի վրայով անցնում է տող (օրինակ): underline Սահմանում է տեքստը, որը պետք է ընդգծվի (օրինակ): none Չեղարկում է բոլոր էֆեկտները, ներառյալ ընդգծված հղումները, որը սահմանված է լռելյայն: ժառանգել Արժեքը ժառանգվել է ծնողից:

HTML5 CSS2.1 IE Cr Op Sa Fx

Ռազմավարական հարձակում

Օբյեկտի մոդել

document.getElementById("elementID").style.textDecoration

document.getElementById("elementID").style.textDecorationBlink

document.getElementById("elementID").style.textDecorationLineThrough

document.getElementById("elementID").style.textDecorationՈչ

document.getElementById("elementID").style.textDecorationOverLine

document.getElementById("elementID").style.textDecorationUnderline

Բրաուզերներ

Internet Explorer-ի մինչև 7.0-ը ներառյալ տարբերակները չեն աջակցում ժառանգական արժեքը: IE7-ում տողերի միջոցով ստացված գիծը ավելի բարձր է, քան մյուս բրաուզերներում. Այս սխալը շտկվել է IE8-ում:

Գոյություն ունեն ընդգծման ձևավորման մի շարք տարբեր եղանակներ: Դուք կարող եք հիշել Marcin Vichari-ի «Crafting link ընդգծում է» հոդվածը Medium-ում: Medium-ի մշակողները չեն փորձում որևէ խելագար բան անել, նրանք պարզապես ցանկանում են գեղեցիկ գիծ ստեղծել տեքստի տակ:

Սա ամենապարզ ընդգծումն է, բայց այն ճիշտ չափի է և չի համընկնում տառերի առաջատարների հետ: Եվ դա հաստատ ավելի լավ է, քան լռելյայն ընդգծումը բրաուզերների մեծ մասում: Medium-ը ստիպված էր դիմակայել մարտահրավերներին՝ համացանցում իր ոճին հասնելու համար: Երկու տարի անց մենք դեռ դժվարանում ենք գեղեցիկ ընդգծում ստեղծել։

Նպատակներ

Ինչն է սխալ տեքստի սովորական ձևավորման մեջ. ընդգծել: Իդեալական սցենարի դեպքում ընդգծումը պետք է կատարի հետևյալը.

• դիրքը բազայինից ցածր;
• բաց թողնել զանգերը;
• փոխել գծի գույնը, հաստությունը և ոճը;
• աշխատել բազմակողմանի տեքստի հետ;
• աշխատել ցանկացած ֆոնի վրա:

Կարծում եմ, որ սրանք բոլորը ողջամիտ պահանջներ են, բայց որքան ես գիտեմ, CSS-ի միջոցով դրան հասնելու ոչ մի ինտուիտիվ միջոց չկա:

Մոտեցումներ

Այսպիսով, որո՞նք են այս տարբեր եղանակները, որոնց միջոցով մենք կարող ենք ընդգծում կատարել համացանցում:

Ահա նրանք, որոնք ես դիտարկում եմ.

• տեքստային ձևավորում;
• սահման-ներքև;
• տուփ-ստվեր;
• ֆոնային պատկեր;
• SVG զտիչներ;
• Underline.js (կտավ);
• տեքստ-զարդար-* .

Եկեք մեկ առ մեկ նայենք այս մեթոդներին և խոսենք դրանցից յուրաքանչյուրի դրական և բացասական կողմերի մասին:

տեքստային ձևավորում

տեքստի ձևավորումը տեքստն ընդգծելու ամենաակնառու միջոցն է: Դուք կիրառում եք մեկ սեփականություն և բավական է։ Փոքր տառատեսակների դեպքում դա կարող է լավ թվալ, բայց մեծացրեք տառաչափը, և ընդգծումը սկսում է անհարմար թվալ:

Տեքստի ձևավորման ամենամեծ խնդիրը անհատականացման բացակայությունն է: Դուք սահմանափակված եք տեքստի գույնով և տառատեսակի չափսով, և դա փոխելու ոչ մի տարբերակ չկա: Այս մասին ավելի մանրամասն կխոսենք ավելի ուշ:

• հեշտ է օգտագործել;
• տեղակայված է բազային գծի տակ;
• լռելյայն բաց թողնում է զանգերը Safari-ում և iOS-ում;
• ընդգծում է բազմագիծ տեքստը;
• աշխատում է ցանկացած ֆոնի վրա:

• չի բաց թողնում բոլոր մյուս բրաուզերների էջատակերը.
• թույլ չի տալիս փոխել գծի գույնը, հաստությունը կամ ոճը:

սահման-ներքև

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

Ահա թե ինչ տեսք ունի ներքևի ներքևի տարրերը:

Հիմնական թերությունը տեքստից ընդգծված հեռավորությունն է, այն ամբողջությամբ մակագրությունների տակ է: Դուք կարող եք դա շտկել՝ տարրերը դնելով inline-block և նվազեցնելով տողի բարձրությունը, բայց հետո կկորցնեք տեքստը փաթաթելու ունակությունը: Լավ է առանձին գծերի համար, բայց հարմար չէ որևէ այլ տեղ:

Բացի այդ, մենք կարող ենք օգտագործել տեքստային ստվերը, որպեսզի մթագնի գծի հատվածը ներդիր տարրերի կողքին՝ նմանակելով դա՝ օգտագործելով նույն գույնը, ինչ ֆոնը: Այսինքն՝ այս տեխնիկան աշխատում է միայն պարզ մեկ գունավոր ֆոնի վրա՝ առանց գրադիենտների, նախշերի կամ պատկերների։

Այս պահին մենք արդեն օգտագործում ենք չորս հատկություն մեկ տող նախագծելու համար: Դա շատ ավելի աշխատանք է, քան պարզապես տեքստի ձևավորում ավելացնելը:

• կարող է բաց թողնել զանգերը՝ օգտագործելով text-shadow ;
• կարող է փոխել գույնը, քաշը և գծի ոճը;
• թույլ է տալիս օգտագործել գույնի և համարձակության անցումներ և անիմացիաներ.
• աշխատում է բազմագիծ տեքստի հետ, եթե ներկառուցված բլոկը չի կիրառվում.
• Աշխատում է ցանկացած ֆոնի վրա, քանի դեռ չեք օգտագործում տեքստային ստվեր:

• Դիրքը չափազանց ցածր է և շարժվել է դժվար ճանապարհով;
• պատշաճ շահագործման համար օգտագործվում են բազմաթիվ լրացուցիչ հատկություններ.
• Տեքստ-ստվեր օգտագործելիս տեքստի ընդգծումը տգեղ է թվում:

տուփ-ստվեր

box-shadow-ը գծում է ենթագիծ՝ օգտագործելով երկու ներքին ստվերներ. մեկը ստեղծում է ուղղանկյուն, իսկ երկրորդը թաքցնում է դրա մի մասը: Սա նշանակում է, որ ձեզ հարկավոր է միագույն ֆոն, որպեսզի դա աշխատի:

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

• թույլ է տալիս փոխել գծի գույնը և հաստությունը.
• աշխատում է բազմագիծ տեքստով:

• թույլ չի տալիս փոխել ընդգծված ոճը.
• Չի աշխատում ոչ մի ֆոնի վրա:

ֆոն-պատկեր

Ֆոնային պատկերի մեթոդը ամենամոտ է մեր ուզածին և ունի նվազագույն քանակությամբ թերություններ: Գաղափարն այն է, որ օգտագործենք գծային գրադիենտ և ֆոնային դիրք՝ տեքստի տողերի տակ կրկնվող պատկեր ստեղծելու համար:

Որպեսզի այս մոտեցումն աշխատի, տեքստը պետք է լինի ստանդարտ ցուցադրում՝ inline; .

Հաջորդ տարբերակը կատարվում է առանց գծային գրադիենտի, էֆեկտների համար կարող եք ավելացնել ձեր սեփական ֆոնային պատկերը:

• կարող է տեղակայվել բազային գծի տակ;
• կարող է բաց թողնել լրացուցիչ տարրերը, օգտագործելով text-shadow ;
• աշխատում է հատուկ պատկերներով;
• փաթաթում է տեքստի մի քանի տող;
• Աշխատում է ցանկացած ֆոնի վրա, քանի դեռ չեք օգտագործում տեքստային ստվեր:

• Պատկերի չափը կարող է տարբեր լինել՝ կախված էկրանի լուծաչափից, դիտարկիչից և խոշորացումից:

SVG զտիչներ

Ես բավականին շատ եմ խաղացել այս մեթոդով: Դուք կարող եք ստեղծել SVG գծի զտիչ, որը գծում է գիծ, ​​այնուհետև ընդլայնում է տեքստը՝ դիմակավորելու գծի այն հատվածը, որը մենք ցանկանում ենք թափանցիկ լինել: Այնուհետև կարող եք ֆիլտրին տալ id և հղում կատարել այն CSS-ում, ինչպես զտիչը՝ url('#svg-underline') :

Այս մոտեցման առավելությունն այն է, որ թափանցիկությունը ձեռք է բերվում առանց տեքստի ստվերի օգտագործման, ինչը նշանակում է, որ մենք թույլ ենք տալիս, որ տեքստերը հայտնվեն ցանկացած ֆոնի վրա, ներառյալ գրադիենտները և ֆոնային պատկերները: Սա աշխատում է միայն տեքստի մեկ տողում, այնպես որ հիշեք դա:

Ահա թե ինչ տեսք ունի այն Chrome-ում և Firefox-ում.

IE, Edge և Safari-ի աջակցությունը խնդրահարույց է: Դժվար է փորձարկել SVG ֆիլտրի աջակցությունը CSS-ում: Դուք կարող եք օգտագործել @supports հրահանգը ֆիլտրով, բայց դա կստուգի միայն ֆիլտրի հղումի ֆունկցիոնալությունը, այլ ոչ թե ֆիլտրի ֆունկցիոնալությունը: Իմ փորձերը ավարտվեցին բրաուզերի հնարավորությունների ձանձրալի որոշմամբ, սա մեթոդի նկատելի թերությունն է:

• կարող է տեղակայվել բազային գծի տակ;
• կարող է բաց թողնել ընդլայնման տարրերը;
• թույլ է տալիս փոփոխություններ գծերի գույնի, հաստության և ոճի մեջ.
• աշխատում է ցանկացած ֆոնի վրա:

• չի աշխատում բազմագիծ տեքստի հետ;
• չի աշխատում IE-ում, Edge-ում և Safari-ում, բայց դուք կարող եք օգտագործել տեքստային ձևավորումը որպես հետադարձ տարբերակ, Safari-ում այն ​​պատշաճ տեսք ունի:

Underline.js (Կտավ)

Underline.js-ը հետաքրքրաշարժ է: Ես տպավորիչ եմ համարում այն, ինչ Վենտինգ Ժանգը հասցրեց JavaScript-ի իր տիրապետմամբ և մանրուքներին ուշադրությամբ: Եթե ​​չեք տեսել Underline.js-ի տեխնոլոգիական ցուցադրությունը, դադարեցրեք կարդալ և մի րոպե տրամադրեք: Կա նաև նրա կողմից ինը րոպեանոց զրույց այն մասին, թե ինչպես է այն աշխատում, բայց ես այն կարճ կպահեմ. ընդգծումը գծված է տարրերի միջոցով . Սա նոր մոտեցում է, որը զարմանալիորեն լավ է աշխատում:

Չնայած գրավիչ անվանը՝ Underline.js-ը պարզապես տեխնիկական ցուցադրություն է: Սա նշանակում է, որ դուք չեք կարող այն պարզապես միացնել ձեր նախագծին՝ առանց ծածկագիրը փոխելու:

Ես մտածեցի, որ սա նշեմ որպես հայեցակարգի ապացույց ունի հիանալի ինտերակտիվ ընդգծումներ ստեղծելու ներուժ, բայց դուք պետք է գրեք ձեր սեփական JavaScript-ը, որպեսզի այն աշխատի:

Տեքստի ձևավորման նոր հատկություններ

Հիշում եք, որ խոստացել էի ավելի շատ խոսել տեքստ-դեկորացիայի մասին։ Ժամանակը եկել է.

Այս հատկությունը հիանալի է աշխատում ինքնուրույն, բայց դուք կարող եք ավելացնել որոշ փորձնական հատկություններ՝ ընդգծված տեսքը հարմարեցնելու համար:

• տեքստ-զարդար-գույն
• text-decoration-բաց թողնել
• տեքստ-դեկորացիա-ոճ

Բայց շատ մի հուզվեք... Բրաուզերի աջակցությունը ինչպես միշտ է: Այսպիսով, այն գնում է:

տեքստ-զարդար-գույն

Text-decoration-color հատկությունը թույլ է տալիս փոխել ընդգծված գույնը տեքստի գույնից առանձին: Այս հատկության աջակցությունն ավելի լավն է, քան դուք կարող եք ակնկալել. այն աշխատում է Firefox-ում և Safari-ի նախածանցով: Ահա թե որն է գրավչությունը. եթե դուք նշումներ ունեք, Safari-ն ընդգծում կտեղադրի տեքստի վերևում:

text-decoration-բաց թողնել

«Text-decoration-skip» հատկությունը թույլ է տալիս բաց թողնել ընդգծված տեքստի տեքստերը:

Այս գույքը ոչ ստանդարտ է և ներկայումս աշխատում է միայն Safari-ում՝ -webkit- նախածանցով: Safari-ն լռելյայն միացնում է այս հատկությունը, այնպես որ ծանուցումները միշտ չէ, որ խախտվում են:

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

տեքստ-դեկորացիա-ոճ

Տեքստային ձևավորման ոճի հատկությունը առաջարկում է նույն ոճավորման տարբերակները, ինչ սահմանային ոճի հատկությունը՝ ալիքաձև ոճի ավելացումով:

Ահա հասանելի արժեքների ցանկը.

• խզված
• կետավոր
• կրկնակի
• ամուր

Ներկայումս տեքստի ձևավորման ոճի հատկությունն աշխատում է միայն Firefox-ում, ահա դրա սքրինշոթը.

Ինչ է պակասում

Text-decoration-* հատկությունների շարքը շատ ավելի ինտուիտիվ է օգտագործել, քան CSS-ի ընդգծված ձևավորման այլ հատկություններ: Բայց եթե ավելի ուշադիր նայենք, ապա մեր կարիքները բավարարելու համար գծի հաստությունը կամ դիրքը սահմանելու բավարար միջոցներ չկան:

Մի փոքր ուսումնասիրությունից հետո ես գտա ևս մի քանի հատկություններ.

• տեքստ-ընդգծում-լայնություն
• տեքստ-ընդգծում-դիրքորոշում

Թվում է, թե դրանք CSS-ի վաղ նախագծեր են, բայց երբեք չեն ներդրվել բրաուզերներում՝ հետաքրքրության բացակայության պատճառով:

եզրակացություններ

Այսպիսով, ո՞րն է ընդգծելու լավագույն միջոցը:

Փոքր տեքստի համար խորհուրդ եմ տալիս օգտագործել տեքստային ձևավորում՝ լավատեսորեն ավելացնելով text-decoration-skip : Բրաուզերների մեծ մասում այն ​​փոքր-ինչ կպչուն տեսք ունի, բայց բրաուզերներում ընդգծումը միշտ եղել է այսպես, և մարդիկ պարզապես չեն նկատում: Բացի այդ, միշտ կա հնարավորություն, որ եթե համբերություն ունենաք, այդ ընդգծումը մի օր լավ տեսք կունենա՝ առանց որևէ բան փոխելու, ինչպես անում են բրաուզերները:

Հիմնական տեքստի համար իմաստ ունի օգտագործել ֆոնային պատկերը: Այս մոտեցումն աշխատում է, հիանալի տեսք ունի, և դրա համար կան Sass խառնուրդներ: Դուք կարող եք, սկզբունքորեն, բաց թողնել text-shadow-ը, եթե ընդգծվածը բարակ է կամ տարբերվում է տեքստից:

Տեքստի առանձին տողերի համար օգտագործեք եզրագծերը՝ ցանկացած լրացուցիչ հատկությունների հետ միասին:

Եվ եթե գրադիենտի կամ պատկերի ֆոնի վրա զետեղումների կարիք ունեք, փորձեք օգտագործել SVG զտիչներ: Կամ պարզապես խուսափեք ընդգծումներից:

Ապագայում, երբ բրաուզերի աջակցությունն ավելի լավանա, միակ պատասխանը կլինի text-decoration-* հատկության հավաքածուն:

Ես նաև խորհուրդ եմ տալիս դիտել Բենջամին Վուդրոֆի CSS Underlines Suck հոդվածը, որն անդրադառնում է նույն խնդիրներին:

HTML-ում ընդգծված տեքստը ընդգծվում է պիտակի միջոցով u HTML (բառից ընդգծել) Այն օգտագործվում է հետևյալ կերպ (տեքստի պահանջվող մասը տեղադրվում է պիտակների միջև ):

Կայքի ստեղծող «Նուբեքս»

Բայց այս կոդը համարվում է անվավեր, ուստի շատ ավելի արդյունավետ և ճիշտ է օգտագործել CSS ոճերը տեքստը զարդարելու համար։

Ընդգծիր տեքստը՝ CSS

Ինչպես արդեն ասել ենք հոդվածում, տեքստային դեկորացիաները սահմանվում են՝ օգտագործելով հատկությունը տեքստային ձևավորում. Ընդգծված տեքստը նշվում է պարամետրով ընդգծել:

Կայքի ստեղծող Նուբեքս»

Դուք կարող եք ընդգծել տեքստը CSS-ի միջոցով ավելին, քան պարզապես ամուր տողով: Տեսնենք, թե ինչ տարբերակներ կարող եք օգտագործել տեքստն ընդգծելու համար.

• Ընդգծեք տեքստը կետավոր CSS-ով.

  Կայքի ստեղծող Նուբեքս»

  
  
  
• Ընդգծում կետերով.

  Կայքի ստեղծող Նուբեքս»

  
  
  
• Կրկնակի գծիկ.

  Կայքի ստեղծող Նուբեքս»

  
  
  

Ինչպես տեսնում եք վերը նշված օրինակներից, դուք կարող եք կառավարել ընդգծման ոճը՝ օգտագործելով հատկությունը սահման-ներքև(ներքևի տող): Օգտագործելով այս պարամետրը, կարող եք սահմանել ընդգծված տեսակը, գույնը և հաստությունը: