Դաս 10 ։ Borders (եզրագծեր)

0

Border-ները կարող են օգտագործվել տարբեր նպատակներով, օրինակ, որպես դեկորատիվ տարր կամ տարանջատումները ընդգծելու համար: CSS Ձեզ անվերջ ընտրությունների հնարավորություն է տալիս երբ Ձեր էջում օգտագործում եք Border-ը։

  • border-width (եզրագծի լայնությունը)
  • border-color (եզրագծի գույնը)
  • border-style (եզրագծի ոճը)
  • border (եզրագիծը)

 Եզրագծի լայնությունը

Եզրգծի լայնությունը սահմանվում է border-width հատկանիշով, որը կարող է ստանալ արժեքներ՝ բարակ, միջին, հաստ, կամ թվային արժեք, նշված պիքսելներով: Ներքևում ցուցադրված գծագիրը ներկայացնում է ամբողջ համակարգը:

figure012

Եզրագծի գույնը

figure013border-color –ը սահմանում է, թե ինչ գույն պետք է եզրագիծը ունենա։ Այդ արժեքները հասարակ գունային արժեքներ են, օրինակ՝ # 123456, rgb (123,123,123) կամ «yellow»։

Եզրագծի տեսակները կամ ոճը

Գոյություն ունեն տարբեր տեսակի եզրագծեր, որոնցից կարել է ընտրություն կատարել։ Ստորև ցուցադրված են 8 տարբեր տեսակի եզրագծեր, այնպես ինչպես դրանք մեկնաբանում է Internet Explorer 5.5-ը: Բոլոր օրինակները կրում են “Gold” գույնը, իսկ հաստությունը      ՝ «thick»։ Բնականաբար, այս ամենը հնարավոր է ցույցադրել ուրիշ գույներով և այլ հաստությամբ:

none կամ hidden արժեքները կարող են օգտագործվել այն դեպքում, եթե չեք ցանկանում ունենալ որևէ եզրագիծ։

figure014

Եզրագծերը սահմանելու օրինակներ։

Վերը նկարագրված երեք հատկությունները կարելի է միավորել յուրաքանչյուր տարրի հետ և ստեղծել տարբեր տեսակի եզրագծեր: Որպեսզի այս ամենը պատկերացնենք, դիտարկեք ներքում ցուցադրված օրինակը, որտեղ մենք սահմանել ենք տարբեր եզրագծեր <h1>, <h2>, <ul> և <p> -ի համար: Իհարկե արդյունքները այդքան էլ գեղեցիկ չեն ստացվել, սակայն այն բավական լավ պատկերացում է տալիս հնարավորությունների մասին:

        h1 {

               border-width: thick;

               border-style: dotted;

               border-color: gold;

        }

        h2 {

               border-width: 20px;

               border-style: outset;

               border-color: red;

        }

        p {

               border-width: 1px;

               border-style: dashed;

               border-color: blue;

        }

        ul {

               border-width: thin;

               border-style: solid;

               border-color: orange;

        }

Բացի այդ հնարավոր է սահմանել նաև յուրահատուկ հատկությունների top-, bottom-, right- կամ left եզրագծերի համար։ Ահա, օրինակը՝

h1 {

        border-top-width: thick;

        border-top-style: solid;

         border-top-color: red;

         border-bottom-width: thick;

         border-bottom-style: solid;

          border-bottom-color: blue;

           border-right-width: thick;

           border-right-style: solid;

           border-right-color: green;

           border-left-width: thick;

            border-left-style: solid;

            border-left-color: orange;

}

Եզրագծերի կառուցում / Border Compilation

Դուք կարող եք հավաքել տարատեսակ հատկություններ մեկում՝ օգտագործելով եզրագիծը: Դիտարկենք մի օրինակ

p {

border-width: 1px;

border-style: solid;

border-color: blue;

}

Հնարավոր է կազմել

p {

border: 1px solid blue;

}

Ամփոփում։

Այս դասընթացի ընթացքում ծանոթացեք անվերջ ընտրություններին, որը Ձեզ տալիս է CSS –ը եզրագիծը օգտագործելիս։ Իսկ հաջորդ դասին, կուսումնասիրենք, թե ինչպես սահմանել box model-ի չափերը՝ բարձրությունը և լայնությունը:

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

Share.