Բարի օր, կայքի կառուցման սիրահարներ: Այսօրվա հրապարակումում մենք կքննարկենք մի թեմա, որը վերաբերում է տեքստային բովանդակության նախագծմանը: Ահա թե ինչու դուք կսովորեք, թե ինչպես մեծատառեր տեղադրել css- ում - միջոցներով, կծանոթանաք գլխարկ ստեղծելու մի քանի տարբերակներին և, իհարկե, ամեն ինչ կարող եք փորձել գործնականում: Հիմա անցնենք զվարճալի հատվածին:
Եկեք փոխենք տեքստը
Կասկադային ոճի թերթերով կարող եք փոխել ինչպես բլոկի առաջին նիշը, այնպես էլ ամբողջ տեքստը: Ես ձեզ ցույց կտամ, թե ինչպես կարող եք երկուսն էլ անել: Ավելին, այս հոդվածում նշված բոլոր գործիքներն ապահովված են լեզվի երեք մակարդակներով ՝ css1, css2, css2.1 և css3:
Ես կսկսեմ մի հետաքրքիր հատկությամբ, որը փոփոխում է ընտրված տեքստի ամբողջ բովանդակությունը: այն տեքստ-փոխակերպում.
Անվանված տարրը կարող է կերպարները վերածել մեծատառերի, փոքրատառերի, ինչպես նաև մեծատառ տալ բառի յուրաքանչյուր առաջին նիշին: Աղյուսակի արժեքների մասին ավելի շատ եմ գրել:
Այժմ, տեսական նյութը համախմբելու համար, օրինակ վերցրեք:
Ուշադրություն.
Վաղը գործում է զեղչ գեղեցկության բոլոր ապրանքների համար:
Ակցիան գործում է ձեր քաղաքում տեղակայված բոլոր մասնաճյուղերում:
Ստեղծեք կաթիլային գլխարկ
Եթե չգիտեք, թե ինչ է նշանակում «կաթիլային գլխարկ» տերմինը, ապա սա ժամանակն է պարզելու, քանի որ այն անմիջականորեն կապված է ընթացիկ թեմայի հետ:
Անկման գլխարկը (կամ երբեմն ասում են սկզբնատառը) գլխի առաջին տառն է, որը մյուսներից տարբերվում է իր մեծ չափերով, գույնով և, որոշ դեպքերում, նույնիսկ տառատեսակի ձևավորմամբ: Իրական կյանքում նման նամակի օրինակ կարելի է գտնել հին ձեռագրերում և գրքերում:
Սկզբնաղբյուր ստեղծելու մի քանի եղանակ կա: Հաճախ կերպարը նշվում է նշման լեզվի պիտակով և դրանից հետո որոշակի հատկություններ սահմանվում են այն փոփոխող ոճերում: Սա լավ միջոց է, բայց այս հրապարակումը խոսում է css մեխանիզմների մասին (որոնք, իմ կարծիքով, շատ ավելի տրամաբանական և հարմար են օգտագործել այս դեպքում):
Խնդիրը լուծելու համար կարող եք օգտագործել այնպիսի գործիք, ինչպիսին է.
Այսպիսով, այս դեպքում օգտագործվում է առաջին տառը: Ինչպես բոլոր կեղծ-տարրերը, այն վերագրվում է ընտրիչին ՝ բաժանված բալոններով: Այնուհետեւ, ըստ ոճերի թերթերի բոլոր կանոնների, հատկությունները նշվում են: Այնուամենայնիվ, կարող եք կիրառել միայն տառատեսակների, լրացման, գույնի, ֆոնի, լուսանցքների և եզրագծերի խմբագրման հետ կապված հատկություններ:
Ես առաջարկում եմ դիտարկել կոնկրետ օրինակ: Ներկայացված փոքր ծրագիրն իրականացնելիս որոշեցի պատրաստել ոչ միայն գունավոր կաթիլային գլխարկ, այլ լցնել այն ծաղիկներով: Դա անելու համար հարկավոր է օգտագործել մի քանի խորամանկ հնարքներ `տառատեսակի թափանցիկ գույն սահմանելով և ընտրված պատկերով տառ լրացնելով:
Այս պարբերությունը պարունակում է շատ հետաքրքիր բովանդակությամբ նախադասություն:
Եկեք շարունակենք մի հետաքրքիր պատմություն հաջորդ պարբերությունում:
Արդյունքը շատ գրավիչ և անսովոր տեսք ունի, ինչը կատարյալ լուծում է:
Ինչպես տեսնում եք, այս թեման շատ պարզ է: Դուք կարող եք հեշտությամբ օգտագործել իմ տված ծրագրի ծածկագիրը ձեր վեբ ռեսուրսների համար ՝ փոփոխելով և հարմարեցնելով ձեր ոճին:
Եթե ներկայացված նյութը օգտակար էր ձեզ համար, ապա բաժանորդագրվեք իմ բլոգի թարմացումներին և մի մոռացեք ձեռք բերված գիտելիքները (և իհարկե հղում իմ բլոգին) կիսել ձեր ընկերների հետ: Հաջողություն!
Ցտեսություն!
Հարգանքներով ՝ Ռոման Չուեշով
Մեծատառ, ըստ սահմանման, տեքստի տարր է, որը համեմատաբար մեծանում է: Գրեթե բոլոր լեզուներում նախադասությունը սկսվում է մեծատառով: Իսկ պարբերության սկզբի նախագիծը նշանավոր մեծատառով թույլ է տալիս կառուցել տեքստը և հեշտացնում է կարդալը: Երբ վեբ էջը կազմվում է, տեքստը կարող է գրվել հեղինակի նախասիրությունների և ռուսաց լեզվի կանոնների համաձայն: Բացի այդ, դրա ձևավորումը կարող է «ավտոմատացվել» ՝ մուտքագրելով որոշակի «հրամաններ» css- ի ընդլայնմամբ ֆայլում ՝ ոճաթերթ, կամ լրացնել ձեր html ֆայլը ոճային բաժնով: Սովորաբար CSS- ն լրացուցիչ ուսումնասիրվում է html- ով, որպեսզի ամբողջ տեքստում միանգամից փոխվեն դիզայնի որոշ տարրեր:
Սա հատկապես ճիշտ է, եթե կայքը հարյուրավոր էջեր ունի, և դրանցից յուրաքանչյուրում փոփոխություններ կատարելը շատ ժամանակատար գործընթաց է:
Եթե կիրառեք css, յուրաքանչյուր պարբերության սկզբում մեծատառերը կարող են առանձնահատուկ տեսք ունենալ: Օրինակ ՝ ներքևում գտնվող HTML կոդը ՝ առանց փակագծերի, թույլ է տալիս «p» պիտակով ձևակերպված տեքստին մեծատառ ՝ առաջին տառ - ավելի մեծ - ստանդարտ չափի 220%, դեղին - գույնի արժեքը դեղին, և գրեք այն տառատեսակով ՝ տարբեր տեքստի մնացած տարբերակից ՝ Վրաստան ընդդեմ բատանգչեի:
(<) style(>)
p: առաջին տառ (տառատեսակ-ընտանիք ՝ Վրաստան; տառատեսակի չափը ՝ 220%; գույնը ՝ դեղին;)
(<)/style(>)
Դուք կարող եք ստանալ գեղեցիկ մեծատառեր, եթե ստեղծեք ձեր սեփական տառատեսակը նկարների տեսքով - յուրաքանչյուր տառի համար առանձին նկար, օրինակ ՝ հին ռուսերեն կամ գոթական ոճով: Դրանք կարող են գծվել այնտեղ: Հետո, մեծատառի փոխարեն անհրաժեշտ վայրերում, կարող եք ծածկագիրը տեղադրել առանց փակագծերի (<) img src=”ссылка на место, где лежит картинка”(>): Լրացուցիչ հատկանիշները կլինեն բարձրությունը և լայնությունը `պատկերի լայնությունն ու բարձրությունը, որը կարող է սահմանվել պիքսելներով` տեքստի մնացած մասի հետ ներդաշնակորեն համադրվելու համար: Օրինակ: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>): Փակագծեր շուրջը< и >մենք հեռացնում ենք:
Եթե այբուբենը ինքնուրույն նկարելու հնարավորություն չունեք, ապա մեծատառերը կարող են զարդարվել ՝ Google- ում (բաժին Տառատեսակներ) կամ այլ որոնիչներում և ռեսուրսներում ազատորեն հասանելի տառատեսակներով: Դա անելու համար վերը նշված կոդը պետք է ձևակերպվի հետևյալ կերպ.
(<) style(>)
p (տառատեսակ-ընտանիք ՝ batangche; տառաչափը ՝ 93%;)
p: առաջին տառ (տառատեսակ-ընտանիք ՝ Kelly + Slab; տառատեսակի չափը ՝ 220%; գույնը ՝ կապույտ;)
(<)/style(>)
(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).
Google ծառայությունը թույլ է տալիս ընտրել մեկը կամ մյուսը և տրամադրում է պատրաստի հղումներ ՝ html կամ css- ում տեղադրելու համար: Ձեր ուշադրությունը հրավիրում ենք այն փաստի վրա, որ անհրաժեշտ է ընտրել տառատեսակների խումբ `լատիներեն կամ կիրիլիցա, քանի որ գրեթե բոլոր լատինատառ տառերը չեն աշխատում ռուսալեզու տեքստի համար: Այս պահին որոնման համակարգն անվճար տրամադրում է մոտ 40 տեսակ:
Մեծատառ կամ դրա մեծատառ զուգահեռը կարելի է ոճավորել ՝ օգտագործելով CSS տեքստային փոխակերպման հատկությունը: Եթե դուք սահմանում եք տեքստի փոխակերպում. Ոչ մի արժեք ոճաթերթում, ապա տեքստը տեսք կունենա այն գրելիս: Բոլոր տառերը փոքրատառ փոխարկելու համար սահմանեք տեքստի փոխակերպում. Փոքրատառ, որը բաժանված է երկու կետով, և մեծատառ `մեծատառով: Տեքստի փոխակերպման հատկությունը. Մեծատառով կստացվի այնպես, որ յուրաքանչյուր բառի սկզբում լինի մեծատառ:
Թույլ է տալիս փոխել տեքստի տառերի տառերը:
Լռելյայն, արժեքը սահմանվում է ոչ մեկի վրա, ինչը ոչ մի ազդեցություն չունի տեքստի վրա: Տեքստի գործը մնում է նույնը: Մեծ և փոքր արժեքները համապատասխանաբար փոխակերպում են նիշերը մեծ և փոքրատառերի: Եթե նշեք մեծատառով արժեքը, ապա յուրաքանչյուր բառի միայն առաջին նիշերը կգրվեն մեծատառով: Inառանգությունը ժառանգում է արժեքը ծնողից:
Օրինակ
h3 (տեքստ-փոխակերպում ՝ մեծ;). փոքրատառ (տեքստ-փոխակերպում ՝ փոքր;).Սա վերնագիրն է: Այն ունի տեքստի վերափոխման հատկություն, որը դրված է մեծատառ: Բոլոր նիշերը կլինեն մեծատառ:
Text-transform Property- ը կիրառվել է այս պարբերության վրա ՝ փոքրատառ արժեքով, ինչը նշանակում է, որ բոլոր տառերը կլինեն փոքրատառ:
Եվ այս վերջին պարբերությունն ունի տեքստի փոխակերպման հատկություն `կիրառված ԿԱՊԻՏԱԼԻZԱՏԵԼ հատկությամբ: Յուրաքանչյուր բառի առաջին տառերը կլինեն մեծատառ, և միայն դա: