Դաս 4 : Տեքստ

0

Ցանկացած վեբ դիզայների համար տեքստի ֆորմատ անելը և style ավելացնելը կարևորագույն հարցեր են: Այս դասի միջոցով Դուք կծանոթանաք այն հրաշալի հնարավորություններին, որոնք Ձեզ տալիս է CSS-ը տեքստին layout ավելացնելու հարցում: Դասի ընթացքում կքննարկվեն հետևյալ Property-ները՝

  • text-indent
  • text-align
  • text-decoration
  • letter-spacing
  • text-transform

Text indention [text-indent]

text-indent property-ն թույլ է տալիս Ձեզ տեքստի պարբերություններին էլեգանտ տեսք հաղորդել՝ կիրառելով indent պարբերության առաջին տողի համար: Ներքևում ցուցադրված օրինակում կիրառված  է 30px  բոլոր պարբերություններին, որոնք նշված են  <p>-ով:

               p {

                               text-indent: 30px;

               }

Text alignment [text-align]

CSS-ի text-align property-ն համապատասխանում է  align attribute-ին, որն օգտագործվում էր  HTML-ի հին տարբերակներում: Տեքստը կարող է align լինել դեպի ձախ, աջ կամ լինել կենտրոնում: Իսկ justify կուղղի տողերը այնպես որ ձախ և աջ margin-նները հավասար լինեն:

Ներքևում բերված օրինակում <th> heading-ով տեքստը align է արված դեպի աջ, իսկ <td>-ն՝ կենտրոն: Տեքստի նորմալ պարբերությունները  justify են արված:

               th {

                               text-align: right;

               }

               td {

                               text-align: center;

               }

               p {

                               text-align: justify;

               }

Text decoration [text-decoration]

text-decoration property-ն հնարավոր է դարձնում տարբեր դեկորացիաների կամ էֆֆեկտների ավելացումը տեքստին: Օրինակ՝ Դուք կարող եք ընդգծել տեքստը, տանել գիծ տեքստի վրայով կամ վերևով և այլն: Ներքևում ցուցադրված օրինակում <h1>-ը ընդգծված headline-ներն են, <h2> -ը՝ վերևում գիծ ունեցող, իսկ  <h3> -ը՝ տեքստի վրա գիծ ունեցող:

               h1 {

                               text-decoration: underline;

               }

               h2 {

                               text-decoration: overline;

               }

               h3 {

                               text-decoration: line-through;

               }

Letter space [letter-spacing]

Տեքստի character-ների միջև spacing-ը (միջակայք) կարող է կարգավորվել Letter-spacing property-ի միջոցով: property-ի  value –ն պարզապես Ձեր ցանկացած լայնությունն է: Օրինակ՝ եթե Դուք ցանկանում եք 3px spacing <p>  պարբերության տեքստի տառերի միջև և 6px՝ <h1> headline-նների տառերի միջև, ապա  պետք է օգտագործեք ներքևում նշված կոդը:

               h1 {

                               letter-spacing: 6px;

               }

               p {

                               letter-spacing: 3px;

               }

Text transformation [text-transform]

text-transform property-ն կառավարում է տեքստի capitalization-ը: Դուք կարող եք ընտրել capitalize անել, փոքրատառեր կամ մեծատառեր օգտագործել անկախ նրանից, թե ինչ տեսք է ունեցել տեքստը HTML code-ում:

Օրինակը կարող է լինել “headline” բառը, որը կարող է ներկայացվել որպես “HEADLINE” կամ “Headline”. text-transform-ի համար կան 4 հնարավոր value-ներ:

capitalize

Մեծատառ է դարձնում ամեն բառի առաջին տառը: Օրինակ՝ “john doe” –ն կդառնա “John Doe”:

uppercaԼ

Բոլոր տառերը դարձնում է մեծատառ: Օրինակ՝ “john doe” –ն կլինի “JOHN DOE”:

lowercase

Բոլոր տառերը դարձնում է փոքրատառ: Օրինակ՝ “JOHN DOE”-ն կդառնա “john doe”:

none

Ոչ մի տրանսֆորմացիա՝ տեքստը կներկայացվի այնպես ինչպես երևում  է HTML code-ում:

Որպես օրինակ մենք կօգտագործենք անունների ցուցակ: Բոլոր անունները նշված են <li>-ով (list-item): Ենթադրենք մենք ցանկանում ենք բոլոր անունները capitalize անել, իսկ headline-նները դարձնել մեծատառ:

Նայե՛ք  այս օրինակի HTML կոդին և կտեսնեք, որ  տեքստը փոքրատառերով է:

               h1 {

                               text-transform: uppercase;

               }

               li {

                               text-transform: capitalize;

               }

Summary

Վերջին դասերի շնորհիվ Դուք արդեն սովորել եք մի քանի CSS property-ներ: Հաջորդ դասին մենք կանդրադառնանք է link-երին:

Հարգելի ընթերցող, խնդրում ենք չմոռանալ like տալ մեր ֆեյսբուքյան էջին, քանի որ նորությունների մեծ մասը առաջինը տեղադրվում է հենց այնտեղ։ Ինչպես նաև հետևեք մեզ այլ սոցիալական ցանցերում և, իհարկե, գրանցվեք մեր բլոգում։

Share.