Դաս 7 ։ Տարրերի խմբավորում (span և div)

0

Տարրերը <span> և <div> -ը օգտագործվում են փաստաթուղթը խմբավորելու և ձևավորելու համար, և շատ հաճախ կարող են օգտագործվել class և id ատրիբուտների հետ միասին։

Այս դասի ընթացքում, մենք ավելի մանրամանս կուսումնասիրենք <span> և <div>-ի օգտագործումը, քանի որ հենց այս երկու HTML տարրերը ունեն կարևոր նշանակություն CSS-ի համար։

  • Խմբավորում <span>-ով
  • Խմբավորում <div>-ով

Խմբավորում <span>-ով

<span> տարրը կարելի է անվանել չեզոք տարր, որը չի ավելացնում ոչինչ փաստաթղթի մեջ։ Սակայն CSS-ում <span>-ը կարող է օգտագործվել տեքստի առանձին հատվածներին տեսողական առանձնահատկություններ ավելացնելու նպատակով։

Որպես օրինակ կարող է ծառայել Benjamin Franklin-ի այս մեջբերումը:

<p>Early to bed and early to rise makes a man healthy, wealthy and wise.</p>

Դիցուք, ցանկանում ենք, որ պարոն Franklin-ի թվարկած առավելությունները լինեն կարմիր գույնի։ Այդ դեպքում անհրաժեշտ է այդ բառերը նշել <span>-ով։ Ապա յուրաքանչյուր span-ի ավելացվում է a class

<p>Early to bed and early to rise makes a man

<span class=”benefit”>healthy</span>,
<span class=”benefit”>wealthy</span>
and <span class=”benefit”>wise</span>.

</p>

CSS-ի պատկանելիությունը

span.benefit {

                color:red;

}

Իհարկե, դուք կարող եք նաև օգտագործել id-ին <span> -elements-ին ոճեր ավելացնելու համար։ Ինչպես հիշում եք նախորդ դասերից դրա համար անհրաժեշտ է յուրահատուկ id-ին կիրառել յուրաքանչյուր երեք <span> -elements-ի համար։

Խմբավորում <div>-ով։

Մինչդեռ <span>-ը օգտագործվում է block-level տարրերի հետ (ինչպես տեսաք նախորդ օրինակում) <div>-ը օգտագործվում է մեկ կամ ավելի block-level տարրերի խմբավորման համար։

Բացի այս տարբերությունից, <div>-ով խմբավորումը հիմնականում աշխատում է նույն կերպ: Եկեք որպես օրինակ վերցնենք ամերիկյան նախագահների և իրենց քաղաքական հայացքները արտահայտող երկու ցանկ:

<div id=”democrats”>

       <ul>

              <li>Franklin D. Roosevelt</li>

              <li>Harry S. Truman</li>

              <li>John F. Kennedy</li>

              <li>Lyndon B. Johnson</li>

              <li>Jimmy Carter</li>

              <li>Bill Clinton</li>

      </ul>

</div>

<div id=”republicans”>

      <ul>

            <li>Dwight D. Eisenhower</li>

            <li>Richard Nixon</li>

            <li>Gerald Ford</li>

            <li>Ronald Reagan</li>

            <li>George Bush</li>

            <li>George W. Bush</li>

    </ul>

 </div>

Մեր ոճերի թերթիկում (style sheet), մենք կարող ենք օգտագործել խմբավորումը ճիշտ նույն կերպ, ինչպես վերևում:

#democrats {

        background:blue;

 }

#republicans {

         background:red;

}

Վերը նշված օրինակում, մենք միայն օգտագործել ենք <div> և <span>-ը շատ պարզ  բաների համար, ինչպես՝ տեքստային և ֆոնային գույների համար։ Սակայն այս երկու տարրերով կարելի է իրագործել շատ ավելի բարդ բաների, որին կանդրադառնանք  ավելի ուշ:

Ամփոփում

6 և 7-րդ դասերի ընթացքում դուք սովորել եք selectors id և class, span և div տարրերի մասին։

Այժմ դուք ունակ եք խմբավորել և բացահայտել փաստաթղերը, որը մեծ քայլ է CSS-ի յուրացման համար։ 8-րդ դասում կներկայացնենք box model-ը։

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

Share.