Դաս 2։ Գույներ և background-ներ

0

Այս դասի միջոցով Դուք կսովորեք, թե ինչպես կիրառել գույներն ու background գույները վեբ կայքերում: Մենք նաև կանդրադառնանք background նկարների դիրքի և կառավարման advanced մեթոդներին: Հետևյալ CSS property-ները կմատուցվեն՝

  • color
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background

Foreground գույն: ‘color’ (գույն) property

color property-ն նկարագրում է էլեմենտի  foreground գույնը:

Օրինակի համար՝ պատկերացրե՛ք՝ մենք ցանկանում ենք, որ document-ի բոլոր headline-երը լինեն մուգ կարմիր: Բոլոր headline-երը նշված են HTML <h1> էլեմենտով: Ներքևում գրված կոդը փոխում է բոլոր <h1> էլեմենտների գույնը կարմիրի:

               h1 {

                            color: #ff0000;

               }

Գույները կարող են ներդրվել որպես hexadecimal value-ներ ինչպես վերևի օրինակում է (#ff0000), կամ կարող եք օգտագործել գույների անունները (“red”) rgb-value-ները (rgb(255,0,0)):

‘background-color’ property

background-color property-ն նկարագրում է էլեմենտի background գույնը:

էլեմենտի  <body>-ն պարունակում է HTML document-ի ողջ բովանդակությունը: Այսպիսով, ամբողջ էջի background գույնը փոխելու համար background-color property-ն պիտի կիրառվի <body> էլեմենտի վրա:

Դուք կարող եք նաև կիրառել background գույները այլ էլեմենտների, ինչպես օրինակ՝ headline-ններն ու and տեքստերն են: Ներքևում ցույց տրված օրինակում տարբեր background գույներ կիրառվել են <body> և  <h1> էլեմենտների վրա:

               body {

                               background-color: #FFCC66;

               }

               h1 {

                               color: #990000;

                               background-color: #FC9804;

               }

Ուշադրություն դարձրե՛ք, որ մենք կիրառել ենք երկու property-ները  <h1>- ին՝ բաժանելով դրանք  ‘;’-ով:

Background նկարներ [background-image]

background-image CSS property-ն օգտագործվում է background նկար ներդնելու համար:

Որպես background նկարի օրինակ՝ մենք կօգտագործենք ներքևում պատկերված թիթեռը: Դուք կարող եք այն download անել, որպեսզի օգտագործեք Ձեր համակարգչի վրա: Կամ

butterfly

կարող եք օգտագործել Ձեզ հարմար այլ նկար:

Թիթեռի նկարը Ձեր վեբ էջում որպես background նկար ներդնելու համար պարզապես կիրառե՛ք  background-image property-ն <body>-ի վրա և նշե՛ք նկարի լոկացիան:

               body {

                               background-color: #FFCC66;

                               background-image: url(“butterfly.gif”);

               }

               h1 {

                               color: #990000;

                               background-color: #FC9804;

               }

ՈՒշադրություն դարձրե՛ք, թե ինչպես ենք մենք նշել նկարի լոկացիան ՝ url(“butterfly.gif“). Դա նշանակում է, որ նկարը տեղակայված է նույն folder-ում, որտեղ որ style sheet-ն է: Դուք կարող եք հղել նաև այլ folder-ների նկարներին՝ օգտագործելով url(“../images/butterfly.gif“)  կամ անգամ ինտերնետում՝ նշելով ֆայլի ամբողջական հասցեն՝ url(“http://www.html.net/butterfly.gif“).

Repeat (կրկնել) background image [background-repeat]

Նկատեցի՞ք, որ վերևի օրինակում թիթեռի նկարը կրկնվում էր և՛ հորիզոնական, և՛ ուղղահայաց, որպեսզի ծածկի ամբողջ էկրանը: propertybackground-repeat-ը կառավարում է այդ ֆունկցիան:

Ներքևում ցուցադրված աղյուսակը ներկայացնում է 4 տարբեր value-ներ background-repeat-ի համար:

Value Նկարագիր
background-repeat: repeat-x Նկարը կրկնվում է հորիզոնական
background-repeat: repeat-y Նկարը կրկնվում է ուղղահայաց
background-repeat: repeat  Նկարը կրկնվում է և՛ հորիզոնական, և՛ ուղղահայաց
background-repeat: no-repeat Նկարը չի կրկնվում

Օրինակի համար՝ background նկարի repetition-ից խուսափելու համար code-ը պետք է հետևյալ տեսքն ունենա՝

               body {

                               background-color: #FFCC66;

                               background-image: url(“butterfly.gif”);

                               background-repeat: no-repeat;

               }

               h1 {

                               color: #990000;

                               background-color: #FC9804;

               }

Lock background image [background-attachment]

background-attachment property-ն հստակեցնում է արդյոք  background նկարը ֆիքսված է, թե շարժական է պարունակվող էլեմենտի հետ միասին:

Ֆիքսված background նկարը չի շարժվի տեքստի հետ, երբ կարդացողն իջեցնի էջը ներքև, մինչդեռ unlocked background նկարը կշարժվի:

Ստորև ներկայացված աղյուսակը ցույց է տալիս երկու տարբեր value-ներ background-attachment-ի համար: Սեղմե՛ք օրինակների վրա ֆիքսվածի և շարժականի տարբերությունը տեսնելու համար:

Value Նկարագիր
Background-attachment: շարժական Նկարը շարժվում է էջի հետ – unlocked
Background-attachment: ֆիքսված նկարը locked է

Որպես օրինակ՝ ներքևում ներկայացված կոդը կֆիքսի background նկարը:

               body {

                               background-color: #FFCC66;

                               background-image: url(“butterfly.gif”);

                               background-repeat: no-repeat;

                               background-attachment: fixed;

               }

               h1 {

                               color: #990000;

                               background-color: #FC9804;

               }

Place background image [background-position]

By default background նկարը տեղադրվելու է էկրանի վերևի ձախ անկյունում: background-position property-ն թույլ է տալիս Ձեզ փոխել դրա դիրքը էկրանի վրա ինչպես որ ցանկանաք:

Կան բազմաթիվ տարբերակներ background-position-ի Value-ները դնելու համար: Դրանցից բոլորը ֆորմատ են արված որպես կոորդինատների խումբ: Օրինակ՝ ‘100px 200px’ value-ն տեղադրում է background նկարը 100px ձախ կողմից կամ 200px browser-ի պատուհանի վերևից:

Կոորդինատները կարող են նշված լինել որպես տոկոսներ browser-ի պատուհանից ֆիքսված չափման միավորներով (սմ, պիքսել և այլն) կամ Դուք կարող եք օգտագործել վերև, ներքև, աջ, ձախ բառերը: Ստորև կտեսնեք դրա իլյուստրացիան:

figure004

Այս աղյուսակը ցուցադրում է մի քանի օրինակներ՝

Value Նկարագիր
background-position: 2cm 2cm The image is positioned 2 cm from the left and 2 cm down the page
background-position: 50% 25% The image is centrally positioned and one fourth down the page
background-position: վերև աջ Նկարը էջի վերևի աջ անկյունում է

Ստորև ներկայացված կոդի օրինակը տեղակայում է background նկարը էջի ներքևի աջ անկյունում:

               body {

                               background-color: #FFCC66;

                               background-image: url(“butterfly.gif”);

                               background-repeat: no-repeat;

                               background-attachment: fixed;

                               background-position: right bottom;

               }

               h1 {

                               color: #990000;

                               background-color: #FC9804;

               }

Compiling [background]

Սա արագ տարբերակ է դասընթացում նշված բոլոր background property-ների կիրառման համար:

Background-ի օգնությամբ Դուք կարող եք compress անել մի քանի  property-ներ և գրել Ձեր style sheet-ը ավելի արագորեն:

Օրինակի համար՝ նայե՛ք այս 5 տողերին՝

               background-color: #FFCC66;

               background-image: url(“butterfly.gif”);

               background-repeat: no-repeat;

               background-attachment: fixed;

               background-position: right bottom;

 background-ի շնորհիվ այդ ամենը կարելի է գրել մեկ տողանի կոդով՝

               background: #FFCC66 url(“butterfly.gif”) no-repeat fixed right bottom;

Հերթականությունը հետևյալն է՝

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Եթե որևէ property է բաց թողնվել, ապա ավտոմատ կերպով այն  կստանա default value-ն: Որպես օրինակ՝ եթե background-attachment-ը և background-position-ը հանվել են, ապա՝

               background: #FFCC66 url(“butterfly.gif”) no-repeat;

Summary

Այս դասի միջոցով Դուք սովորեցիք HTML oգտագործելու համար անհրաժեշտ նոր տեխնիկաներ: Հաջորդ դասը Ձեզ ներկայացնելու է, թե ինչպես CSS-ով աշխատել font-երի հետ:

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

Share.