HTML առաջին քայլերը - Դաս 8 - Ունիվերսալ տեգերի հատկությունները

Մենք արդեն խոսել ենք այն մասին, որ տարբեր տեգեր ունեն իրենց հատկությունները։ Հիմա եկեք խոսենք այն մասին, որ տարբեր տեգեր ունեն նաև նույնական հատկություններ, որոնք կիրառվում են բոլոր տեգերի համար։ Դавайте քննարկենք դրանցից առավել տարածվածները։

id հատկանիշը

id հատկանիշը ցույց է տալիս տեգի յուրահատուկ անվանումը, այսպիսի անունները չպետք է կրկնվեն, քանի որ դա կարող է խնդիրներ առաջացնել jQuery կամ Javascript հետ աշխատելիս։ Ահա id հատկանիշի օգտագործման մի քանի օրինակներ՝

...
<ul id="menu1">
  <li id="item1">lorem</li>
  <li id="item2">ipsum</li>
  <li id="item3">բարև</li>
  <li id="item4">աշխարհ</li>
</ul>
...
<div id="header"></div>

id հատկանիշը կարող է օգտագործվել CSS-դիզայնի համար՝ առանձնացնելով յուրաքանչյուր բլոկ, մենյու կամ մենյուի տարր այլ տեգերից։ Բացի դրանից, id-ները օգտագործվում են Javascript-ում (jQuery):

class հատկանիշը

class հատկանիշը ցույց է տալիս տեգի դասի պատկանելությունը։ Ինչպես id-ն, class-ը կարելի է օգտագործել միայն CSS-դիզայնի համար՝ այդ դասի բոլոր տեգերին միաժամանակ։ Այսինքն՝ եթե id-ն միակն է, ապա class-ը կարող է նույնական լինել մի քանի տեգերի համար։

<ul id="menu1">
  <li class="item">lorem</li>
  <li class="item">ipsum</li>
  <li class="item">բարև</li>
  <li class="item">աշխարհ</li>
</ul>

style հատկանիշը

style հատկանիշը ծառայում է CSS-ստիլներ դնելու համար անմիջապես տեգում։ Այժմ այս հատկանիշի մանրամասնությունները կտրուկ ուսումնասիրելու կարիք չկա, դրա մասին մենք կխոսենք CSS ուղեցույցում։ Այնուամենայնիվ, ներկայացնում եմ ավելի կամ պակաս հասկանալի օրինակներ՝

...
<div style="width: 200px; height: 100px; background: #dddddd">
Բլոկ
</div>
...
<p style="font-size: 14px; color: #333333">
Տեքստ
</p>

Առաջին օրինակն արտադրում է բլոկ՝ 200 պիքսել լայնությամբ, 100 պիքսել բարձրությամբ և ֆոնի գույնով #dddddd (շատ մոտ Grey-ին)։ Երկրորդ օրինակն է՝ պարբերության տեքստ՝ ֆոնտի չափով 14 պիքսել և գույնով #333333 (մոտավորապես սև, բայց ոչ ամբողջությամբ)։

title հատկանիշը

Այս հատկանիշը կիրառվում է վթարային հուշումների համար, երբ մենք մկնիկը պահում ենք էջի տարրի վրա։

...
<img src="./images/image.jpg" alt="photo" title="այսինքն ես" />
...
<a href="html2.html" title="իմ էջը">Հղում</a>
...
<h2 title="մասխեմ">Բարև, Աշխարհ!</h2>

Իհարկե, կան նաև այլ համընդհանուր հատկանիշներ՝ accesskey, contenteditable, contextmenu, dir, hidden, lang, spellcheck, tabindex։ Ես կարծում եմ, որ դուք կբախվեք դրանց հետ ավելի ուշ, երբ զբաղվեք բազմալեզու կայքերի ձևավորմամբ։ Իսկ մինչ այդ՝ այս համընդհանուր հատկանիշների մասին գիտելիքները բավարար կլինեն։