Դաս 6: Տարրերի նույնականացումը և խմբավորումը (class և id)

0

Երբեմն դուք ցանկանում եք որոշակի տարրերի խմբին կամ որևէ տարրին տալ հատուկ ոճ։ Այս դասընթացի ընթացքում, մենք ավելի մանրամասն կուսումնասիրենք, թե ինչպես օգտագործել class և id –ին  ընտրված տարրերին հատկությունները շնորհելու համար։

Ինչպե՞ս կարող եք ձեր վեբկայքում գունավորել մի ենթավերնագիրը մի գույնով, իսկ մյուս մեկ ուրիշ: Ինչպե՞ս կարող եք խմբավորել ձեր հղումներ տարբեր կատեգերիաների մեջ և յուրաքանչյուր կատեգորիան տալ յուրահատուկ ոճ և այլն։

Տարրերի խմբավորումը class-ով

Եկեք պատկերացնենք, որ ունենք հղումներով երկու ցուցակ, որտեղ օգտագործված են խաղողի տարբեր տեսակներ սպիտակ և կարմիր գինի պատրաստելու համար: HTML կոդը կունենա հետևյալ տեսքը:

        <p>Grapes for white wine:</p>

        <ul>

               <li><a href=”#”>Riesling</a></li>

               <li><a href=”#”>Chardonnay</a></li>

                <li><a href=”#”>Pinot Blanc</a></li>

        </ul>

        <p>Grapes for red wine:</p>

        <ul>

                <li><a href=”#”>Cabernet Sauvignon</a></li>

                <li><a href=”#”>Merlot</a></li>

                 <li><a href=”#”>Pinot Noir</a></li>

        </ul>

Այժմ մենք ցանկանում ենք, որ սպիտակ գինու հղումներ լինեն դեղին, կարմիր գինու հղումները՝ կարմիր, իսկ մնացածը կայքում առկա մնացած հղումները մնան կապույտ։

Դրան հասնելու համար, անհրաժեշտ է բաժանել հղումներ երկու կարտեգորիայի։ Վերագրելով class-ը յուրաքանչյուր հղմանը և օգտագործելով class ատրիբուտը՝ դուք կստանաք ցանկալի արդյունքը։

Փորձենք հստակեցնել որոշ class-եր վերևի օրինակից:

         <p>Grapes for white wine:</p>

         <ul>

                <li><a href=”#” class=”whitewine”>Riesling</a></li>

                <li><a href=”#” class=”whitewine”>Chardonnay</a></li>

                 <li><a href=”#” class=”whitewine”>Pinot Blanc</a></li>

           </ul>

           <p>Grapes for red wine:</p>

           <ul>

                 <li><a href=”#” class=”redwine”>Cabernet Sauvignon</a></li>

                 <li><a href=”#” class=”redwine”>Merlot</a></li>

                 <li><a href=”#” class=”redwine”>Pinot Noir</a></li>

           </ul>

Այնուհետև, մենք կարող ենք հղումների համար սահմանել հատուկ հատկություններ (համապատասխանաբար սպիտակ գինու և կարմիր գինու համար)։

a {

      color: blue;

}

a.whitewine {

             color: #FFBB00;

}

a.redwine {

               color: #800000;

}

Ինչպես ցույց է տրված, օրինակում, դուք կարող եք սահմանել այն տարրերի հատկությունները, որոնք պատկանում են որոշակի class-ի օգտագործելով classname-ը ոճերի ցանկից։

Տարրերի նույնականացում id-ին օգտագործելով

Բացի տարրերի խմբավորումից, Ձեզ անհրաժեշտ կլինի ճանաչել որևէ եզակի տարր: Սա արվում է id ատրիբուտի օգնությամբ:

Կարևոր է իմանալ, որ նույն փաստաթղթի մեջ չեն կարող լինել նույն ID-ն ունոցող երկու տարր։ Յուրաքանչյուր id պետք է լինի եզակի։ Մյուս դեպքերում օգտագործեք class ատրիբուտը։ Այժմ անցնենք օրինակներին, թե ինչպես կիրառել ID-ն:

<h1>Chapter 1</h1>

  …

<h2>Chapter 1.1</h2>

<h2>Chapter 1.2</h2>

<h1>Chapter 2</h1>

<h2>Chapter 2.1</h2>

<h3>Chapter 2.1.2</h3>

Վերը նշվածը կարող է լինել գլուխների կամ պարագրաֆների բաժանված ցանկացած փաստաթղթի վերնագիր։ Ճիշտ կլինի նշանակել id յուրաքանչյուր գլխում հետեւյալ կերպով

<h1 id=”c1″>Chapter 1</h1>

<h2 id=”c1-1″>Chapter 1.1</h2>

<h2 id=”c1-2″>Chapter 1.2</h2>

<h1 id=”c2″>Chapter 2</h1>

<h2 id=”c2-1″>Chapter 2.1</h2>

<h3 id=”c2-1-2″>Chapter 2.1.2</h3>

Ենթադրենք, որ 1.2 Գլխի վերնագիրը պետք է լինի կարմիր։ Դա կարելի է անել CSS-ով:

Ինչպես ցույց է տրված վերը նշված օրինակում դուք կարող եք սահմանել առանձին տարրի հատկությունները օգտագործելով #id –ին փաստաթղթի ոճերի ցանկից։

Ամփոփում

Այս դասի ընթացքում մենք իմացանք, որ class –ի և id –ի միջոցվով հնարավոր է տարրերին շնորհել հատկություններ։

Հաջորդ դասին, ավելի սերտ կուսումնասիրենք html-ի 2 տարր, որոնք լայնորեն օգտագործվում են և կապված են CSS-ի հետ <span> և <div>:

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

Share.