Մանրապատկեր

Մանրապատկեր

Սովորականից ավելին

Սովորականից քիչ

Շեղագիր

Շեղագիր

Ընդգծումով

Strikethrough

Ոճի հատկանիշի հնարավորություններ

Բացի նկարագրված թեգերից, html-ում տառատեսակը փոխելու ևս մի քանի եղանակ կա: Դրանցից մեկն է օգտագործել ընդհանուր ոճ հատկանիշը: Օգտագործելով դրա հատկությունների արժեքները, կարող եք սահմանել տառատեսակի ցուցադրման ոճը.

1) font-family - հատկությունը սահմանում է տառատեսակների ընտանիքը: Հնարավոր է թվարկել բազմաթիվ արժեքներ։
html տառատեսակը հաջորդ արժեքով փոխելը տեղի կունենա, եթե նախորդ ընտանիքը սահմանված չէ օգտագործողի օպերացիոն համակարգում:.

Գրելու շարահյուսություն.

տառատեսակի ընտանիք՝ տառատեսակի անուն [, տառատեսակի անուն[, ...]]

2) font-size - չափը սահմանվում է 1-ից մինչև 7: Սա հիմնական միջոցներից մեկն է, որով կարող եք մեծացնել տառատեսակը html-ում:
Գրելու շարահյուսություն.

տառաչափ՝ բացարձակ չափ | հարաբերական չափը | արժեքը | տոկոսներ | ժառանգել

Կարող եք նաև սահմանել տառատեսակի չափը.

• Փիքսելներով;
• Բացարձակ մեծությամբ ( xx-փոքր, x-փոքր, փոքր, միջին, մեծ);
• Տոկոսներով;
• Կետերում (pt).

տառաչափ՝ 7

տառաչափը՝ 24px

Տառատեսակի չափը՝ x-large

տառատեսակի չափը՝ 200%

տառաչափ՝ 24 pt

3) տառատեսակի ոճ - սահմանում է տառատեսակի ոճը: Շարահյուսություն:

տառատեսակի ոճը՝ նորմալ | շեղ | թեք | ժառանգել

Արժեքներ:

• նորմալ - նորմալ ուղղագրություն;
• շեղ - շեղ
• թեք - աջ թեքությամբ տառատեսակ;
• ժառանգել - ժառանգում է մայր տարրի ուղղագրությունը:

Օրինակ, թե ինչպես փոխել տառատեսակը html-ում՝ օգտագործելով այս հատկությունը.

տառատեսակի ոճը՝ ժառանգել

տառատեսակի ոճը՝ շեղ

տառատեսակի ոճը՝ նորմալ

font-style:շեղ

4) տառատեսակ-տարբերակ - բոլոր մեծատառերը վերածում է մեծատառերի: Շարահյուսություն:

տառատեսակ-տարբերակ՝ նորմալ | փոքր գլխարկներ | ժառանգել

Օրինակ, թե ինչպես փոխել տառատեսակը html-ում այս հատկությամբ.

տառատեսակ-տարբերակ:ժառանգել

տառատեսակ-տարբերակ:նորմալ

font-variant:small-caps

5) font-weight - թույլ է տալիս սահմանել տեքստի գրության հաստությունը (հագեցվածությունը): Շարահյուսություն:

տառատեսակի քաշը՝ թավ|ավելի համարձակ|թեթեւ|նորմալ|100|200|300|400|500|600|700|800|900

Արժեքներ:

• bold - սահմանում է html տառատեսակը bold;
• համարձակ - ավելի համարձակ համեմատ նորմալ;
• ավելի թեթև - նորմալի համեմատ ավելի քիչ հագեցած;
• նորմալ - նորմալ ուղղագրություն;
• 100-900 - սահմանում է տառատեսակի հաստությունը թվային առումով:

տառատեսակ-քաշ՝ թավ

font-weight:ավելի համարձակ

տառատեսակի քաշը՝ ավելի թեթև

տառատեսակի քաշը: նորմալ

տառատեսակի քաշը՝ 900

տառատեսակի քաշը՝ 100

տառատեսակի հատկությունը և html տառատեսակի գույնը

Տառատեսակը կոնտեյների մեկ այլ հատկություն է: Ներքին, այն միավորում էր մի քանի հատկությունների արժեքները, որոնք նախատեսված են տառատեսակներ փոխելու համար: Տառատեսակի շարահյուսություն.

տառատեսակ՝ տառաչափի չափ տառատեսակ-ընտանեկան | ժառանգել

Նաև համակարգի կողմից օգտագործվող տառատեսակները տարբեր հսկիչների պիտակներում կարող են սահմանվել որպես արժեք.

• վերնագիր - կոճակների համար;
• պատկերակ - սրբապատկերների համար;
• մենյու - մենյու;
• հաղորդագրություն-արկղ - երկխոսության տուփերի համար;
• փոքր վերնագիր - փոքր հսկիչների համար;
• status-bar - կարգավիճակի տառատեսակ:

տառատեսակ:պատկերակ

տառատեսակ:վերնագիր

տառատեսակ: մենյու

տառատեսակ:հաղորդագրություն-արկղ

փոքր վերնագիր

font:status-bar

font:italic 50px bold "Times New Roman", Times, serif

html-ում տառատեսակի գույնը սահմանելու համար կարող եք օգտագործել գույնի հատկությունը։ Այն թույլ է տալիս գույնը սահմանել ինչպես հիմնաբառով, այնպես էլ rgb ձևաչափով: Եվ նաև տասնվեցական կոդի տեսքով։

Կաթիլային գլխարկը պարբերության առաջին տառն է, ավելի մեծ, քան մնացածը, և տեղադրված է այնպես, որ դրա վերևը գտնվում է պարբերության առաջին տողի մակարդակում: Պատկերում դուք կարող եք տեսնել տեքստում ներկառուցված սկզբնական տառի օրինակ:

Ի դեպ, WordPress-ն ունի հատուկ փլագին (wordpress.org/extend/plugins/drop-caps), որը թույլ է տալիս ավտոմատ կերպով ստեղծել ներկառուցված տեքստում (և տեղափոխված ներքև) մեծատառեր. Զարմանալի! Այնուամենայնիվ, ի՞նչ անել, եթե չես ուզում օգտագործել plugin-ը (վստահ եմ, որ չես ուզում) և պարզապես պետք է մի քանի հաղորդագրություն փակել, և միգուցե կոնկրետ վայր:

Լավ նորությունն այն է, որ մեծատառեր ստեղծելու համար ձեզ հարկավոր չէ plugin, ձեզ հարկավոր է ընդամենը մի քանի css և span թեգ: Բացեք ձեր css ֆայլը և ավելացրեք հետևյալ կոդը.

Span.dropcaps ( font-family:Georgia, serif; գույնը՝ #cccc; տառաչափը՝ 46px; float: ձախ; տառատեսակի քաշը՝ 400; տող-բարձրությունը՝ 1em; լուսանցք-ներքև՝ -0.4em; լուսանցք-աջ 0.09em; դիրքը՝ հարաբերական;)

Նման մի բան. Իհարկե, ձեզ անհրաժեշտ կլինի ոճ, որը կհամապատասխանի ձեր դիզայնին և տեքստին: Օրինակ, սեփականության արժեքները՝ տառաչափի չափը, լուսանցքները և տողի բարձրությունը պետք է ճշգրտվեն՝ հիմնվելով ձեր դիզայնի և տեքստի վրա:

span պիտակ

Որպեսզի ոճը կիրառվի տեքստի մեծատառի վրա, անհրաժեշտ է մեծատառը «փաթաթել» span պիտակի մեջ և նշանակել համապատասխան դաս։

Ա

Կեղծ տարր՝ առաջին տառ

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

P:առաջին տառ ( տառատեսակ-ընտանիք:Georgia, սերիֆ; գույնը` #cccc; տառաչափը` 46px; float: ձախ; տառատեսակի քաշը` 400; տող-բարձրությունը` 1մ; լուսանցք-ներքև: -0.4em; լուսանցք -աջ՝ 0.09em; դիրքը՝ հարաբերական;)

Այստեղ, ըստ էության, մի քանի խմբագրման մեթոդներ մեծատառեր CSS-ով:

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

Նամակներ այն ժամանակ և հիմա

Ժամանակագիրները մեծատառ են օգտագործել ձեռագիր ձեռագրերում, որոնց մի մասը թվագրվում է 5-րդ դարով։ Մեծատառերը շարունակվել են օգտագործել 8-15-րդ դարերից, երբ տպագրական մեքենաները հնարավորություն են տվել տպագրությունը հասցնել արդյունաբերական մակարդակի։ Տեքստի սկզբում տեղադրվել են ինչպես ձեռագիր, այնպես էլ տպագիր մեծատառեր։ Հաճախ դրանք զարդարված էին դեկորատիվ նախշով, որը գտնվում էր տառի շուրջ:

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

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

Օգտագործելով դասեր

Դիզայներները, ովքեր արդեն հասկանում են CSS-ը, գիտեն ստեղծել առանձին CSS դաս առաջին մեծատառի համար:

Պարբերության տարրի և տառը ստեղծող դասի CSS կոդը կունենա հետևյալ տեսքը.

p ( տառաչափ՝ 20 px; տառատեսակ ընտանիք՝ Georgia, «Times New Roman», Times, սերիֆ;) .myinitialcaps (տառաչափ՝ 48 px; տառատեսակ ընտանիք՝ Didot;)

Իսկ HTML կոդը կունենա հետևյալ տեսքը.

Ինչ է տալիս մեզ.

Թվում է, թե չափազանց հեշտ? Փաստորեն, դուք ստիպված կլինեք ճշգրտումներ կատարել՝ կախված կոնկրետ բարձրացված տառերից, քանի որ յուրաքանչյուր մեծատառ պահանջում է հատուկ միջուկ: Բարձրացված տառերի և հիմնական տեքստի համար տառատեսակ ընտրելուց հետո պետք է յուրաքանչյուր բարձրացված տառի համար առանձին դասեր ստեղծել: Ներքևում CSS class.myinitialcapsiաջ կողմում լուսանցքը բացասական է՝ I-ի և n-ի միջև հեռավորությունը նվազեցնելու համար:

Myinitialcapsi (տառաչափ՝ 48px; տառատեսակ՝ ընտանիք՝ Didot; լուսանցք՝ աջ՝ -1px;)

ԻԱյս դեպքում «I»-ի և «n»-ի միջև կա լրացուցիչ տարածություն:

ԻԲացասական մարժան ունեցող նոր դասի ընդգրկումը ավելի է մոտեցնում այն:

Կախված վերը նշված օրինակի էկրանի լուծաչափից, ես և n-ը կարող է թվալ, որ դրանք միաձուլվել են: Դա պայմանավորված է տառերի ծայրերում գտնվող սերիֆներով: Հետևաբար, նախքան ձեր վերջնական CSS ոճերը ընտրելը, փորձարկեք ձեր կայքը տարբեր սարքերի վրա՝ տեսնելու, թե ինչպես է մեծատառով CSS տեքստը նայում դրանց վրա:

Մեջբերումներ և այլ հատուկ դեպքեր

Դուք կարող եք մեծացնել ոչ միայն տառերը տեքստի սկզբում: Դուք կարող եք իրականացնել մեկ այլ դաս՝ չակերտների ավելի մեծ տարբերակ ստեղծելու համար, որը կհայտնվի տառի կողքին: Մեր դեպքում ոչ 48 չափի տառերի դասը, ոչ էլ 20 պիքսել տեքստային դասը հարմար չեն չակերտների համար։ Ավելի շուտ, դա կլինի միջակայքում՝ 30 պիքսել: Մենք չակերտները տեղափոխում ենք ներքև 4 պիքսելով՝ դրանք օպտիկականորեն հավասարեցնելու համար I-ի հետ:

Myinitialcapsq (տառաչափ՝ 30px; տառատեսակի ընտանիք՝ Didot; float՝ ձախ; լուսանցք՝ վերև՝ 4px;)

“Իներառյալ» բացասական լուսանցքով նոր դասը մոտեցնում է այն:

Դուք պետք է շատ զգույշ լինեք CSS-ի մեծատառերից յուրաքանչյուրը չակերտների հետ միասին նշելիս, որպեսզի դրանց միջուկը և հավասարեցումը համապատասխանեն շրջապատող նշագրմանը: Օրինակ, T տառը պետք է տեղափոխվի ձախ՝ պարբերության եզրից մի փոքր այն կողմ, որպեսզի դրա լայնակի գիծը տեսողականորեն տեղավորվի դասավորության մեջ: Դուք պետք է նույնը անեք կլոր տառերի հետ, ինչպիսիք են C, G, O և Q: Այս օրինակը օգտագործում է 20, 30 և 48 տառաչափերը: Բայց դուք պետք է կարգավորեք չափերը՝ հիմնվելով ձեր ընտրած հատուկ տառատեսակների վրա: Ինչպես նաև էկրանների չափերն ու լուծումները, որոնց վրա կդիտվի կայքը:

Կեղծ տարրեր և կեղծ դասեր

Օգտագործելով CSS կեղծ տարրը, կարող եք հեշտությամբ ստեղծել բարձրացված տառ՝ պարբերության տարրին ավելացնելով ::first-տառ: Օգտագործեք :first-letter ( մեկ հաստակետով) հին բրաուզերների համար.

p ( տառաչափ՝ 1.2em; տառատեսակ-ընտանիք՝ Georgia, «Times New Roman», Times, սերիֆ; տող-բարձրություն՝ 2em; padding-ներքև՝ 1.2em;) p::first-letter ( տառաչափ՝ 3.6em; տեքստ-տրանսֆորմ՝ մեծատառ; տառատեսակ-ընտանիք՝ «Monotype Bernard Condensed», սերիֆ; լուսանցք-աջ՝0.03em;) .initialb (լուսանցք-աջ՝-0.1em;) .initialn (լուսանցք-աջ՝-0.15): էմ ;)

HTML կոդը, որը պարունակում է CSS դասեր, որոնք հաշվի են առնում N և B տառերի միջուկը, նման կլինի…

Նախնական տառ, որի առաջին տառը մեծատառ է:
Գծի ընդմիջման դեպքում հաջորդ տողը սկզբնական գլխարկ չունի:

n HTML-ի սկզբնաղբյուրում նշեք, թե ինչպես է առաջին տառը, այլ ոչ թե մեծատառը HTML-ում, չափվում է մինչև 3.6em սկզբնական գլխարկի չափը: Կոկիկ, հա՞:

Բդժվար վերադարձով, և սկսվեց նոր պարբերություն, ևս մեկ սկզբնական գլխարկ միշտ ստեղծվում է: Դուք կարող եք ինքներդ ձեզ հարցնել Ինչպե՞ս եմ ես դրա համար հաշիվ տալու: Ենթադրվում է, որ ես պետք է նախնական գլխարկ ունենա՞մ շատ նոր պարբերության սկզբում:Դե, դուք կարող եք: Բայց դուք ուզու՞մ եք, որ այն այդպես երևա, և արդյո՞ք այն պետք է բացարձակապես այդպես նայվի:

Պարբերության առաջին մեծատառը վերածվում է տառի:
Տողերի ընդմիջումից հետո առաջին տառը չի գրվի մեծատառով:

մասինՆկատի ունեցեք, որ HTML սկզբնաղբյուրում առաջին տառը գրված չէ մեծատառով, սակայն այն փոխարկվում է 3.6em նիշի:

ՕԱյնուամենայնիվ, նույնիսկ տողի հարկադիր ընդմիջումից հետո, յուրաքանչյուր նոր պարբերության սկզբում միշտ տառ է ստեղծվում: Դուք կարող եք ինքներդ ձեզ հարցնել. Ինչպե՞ս կարող եմ սա հաշվի առնել: Պե՞տք է արդյոք տառեր ավելացնել այս բոլոր դեպքերի համար:Դե, դուք կարող եք: Բայց արդյո՞ք դա անհրաժեշտ է։

Նույնիսկ այն առավելությունների հետ, որոնք ապահովում են կեղծ տարրերը, մենք ստիպված եղանք ավելացնել շատ կոդ՝ առանձին դասեր սահմանելու համար՝ կարգավորելու kerning-ի և padding-ի խնդիրները: Բայց այս մեթոդը յուրաքանչյուր նոր պարբերության առաջին տառը կվերածի CSS կապիտալիզացիայի: Ոմանց համար դա կարող է հարմար չլինել, քանի որ ձեզ հարկավոր չէ փոխարկել յուրաքանչյուր պարբերության առաջին տառը:

Խելացի դասավորություն ստեղծելու համար կեղծ դասերի և կեղծ տարրերի համադրում

:first-child կեղծ դասի ավելացումն օգնում է լուծել առաջին տառերի անհարկի փոխակերպման խնդիրը.

p ( տառաչափ՝ 1.2em; տառատեսակ-ընտանիք՝ Georgia, «Times New Roman», Times, սերիֆ; տող-բարձրություն՝ 2em; padding-ներքև՝ 0.5em;) p:first-child::first-letter ( տառաչափ՝ 3,6 մ, տեքստի փոխակերպում՝ մեծատառ, տառատեսակ՝ «Մոնոտիպ Բերնարդ խտացված», սերիֆ; լուսանցք՝ աջ՝ 0,03 մ;)

Համակցելով այս կոդը HTML-ի հետ.

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

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

Կեղծ դասերի օգտագործման առավելությունը տարբեր հատուկ գործեր վարելու ունակությունն է: Ինչ վերաբերում է թերություններին: Կան բազմաթիվ տարբեր կեղծ դասեր, և դրանք կարող են համակցվել այնքան շատ ձևերով, որ դա կարող է ստիպել ձեր գլուխը պտտվել: Օրինակ, կեղծ դասերը :first-child և :first-of-type կարող են տալ նույն արդյունքները: Դուք կարող եք նաև կեղծ դաս կիրառել ոչ միայն պարբերության, այլև տարրերի նկատմամբ