وانەی ٣٠: تایبەتمەندییەکانی class و id

کۆدی CSSـی پێویست لەناو <style> لە بەشی <head>ـدا بۆ دانراوە.

تێبینی: کۆدی ناو <style> بۆ ئەم وانەیە ئامادە کراوە، بۆ ئەوەی کاریگەریی class ببینین. ئێستا پێویست ناکات وردەکارییەکانی CSS بزانیت؛ سەرنجمان لەسەر class و idـە.

نموونە

html

<!DOCTYPE html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>مێنیوی چا</title>
    <style>
      .card {
        border: 2px solid #b5651d;
        padding: 12px;
        margin-bottom: 12px;
      }
    </style>
  </head>
  <body>
    <h1>مێنیوی چا</h1>
    <div class="card">
      <h2>چای ڕەش</h2>
      <p>بەهێز و تۆخ.</p>
    </div>
    <div class="card">
      <h2>چای سەوز</h2>
      <p>سووک و تازە.</p>
    </div>
    <div>
      <h2>چای گیایی</h2>
      <p>لە گیا و گوڵ دروست دەکرێت.</p>
    </div>
  </body>
</html>

خۆت تاقی بکەرەوە ↗

دەستکاری HTML بکە

ئەنجام

بەشی ١: تایبەتمەندی class

کۆدەکەی سەرەوە کار پێبکە، دەبینیت هەردوو گروپی یەکەم سنووریان هەیە، و سێیەمیان نییەتی. سەیری کۆدەکە بکە. دوو توخمی <div>ـی یەکەم تایبەتمەندییەکیان هەیە: class="card".

کڵاس (Class) ناوێکە کە دەیدەیتە توخمەکان(Elements). چەند توخمێک دەتوانن هەمان ناوی کڵاس هاوبەش بکەن. کۆدی CSSـەکە دەڵێت «card» چۆن دەردەکەوێت، بۆیە هەر توخمێک ئەو کڵاسەی هەبێت هەمان سنووری دەبێت.

هەمان کڵاس بدە بە گروپی سێیەم:

<div class="card">
  <h2>چای گیایی</h2>
  <p>لە گیا و گوڵ دروست دەکرێت.</p>
</div>

ببینە ئێستا هەر سێ گروپەکە سنووریان هەیە.

لەبیرت بێت: کڵاس تەنها ناوێکە. HTML سنوورەکە ناکێشێت. کۆدی CSSـەکە دەیکێشێت.

تێبینی: کڵاس بەپێی ئەوەی توخمەکە چییە ناو بنێ، وەک tea-card، نەک بەپێی ئەوەی چۆن دەردەکەوێت، وەک brown-box. توخمێک دەتوانێت چەند ناوی کڵاسیشی هەبێت، کە بە بۆشایی لێک جیا دەکرێنەوە.

بەشی ٢: تایبەتمەندی id

تایبەتمەندی دووەم idـە. لە وانەی ١٢ بۆ لینکی بازدان بەکارمان هێنا. id ئەویش ناوێکە، بەڵام دەبێت بێ هاوتایەunique - تاک و تەنها : دەبێت لە هەمان لاپەڕەدا تاک و تەنها بێت. واتە هەمان بەهای id نادەینە زیاتر لە یەک توخم.

<div class="card" id="black-tea">
  <h2>چای ڕەش</h2>
  <p>بەهێز و تۆخ.</p>
</div>

کڵاسی card دەتوانرێت دووبارە و دووبارە بەکاربهێنرێت. بەڵام id="black-tea" تەنها دەبێت یەک توخم هەیبێت.

هەمان id بدەیتە دوو توخم. وێبگەڕ بە شێوەی ئاسایی پەیامی هەڵەیەک لەسەر لاپەڕەکە پیشان نادات، بەڵام لینکی بازدان بۆ ئەو idـە دەچێتە سەر یەکەم توخمی هەڵگری ئەو ناوە. ڤالیدەیتەر، کە لە وانەی ٨٠ بەکاری دەهێنین، ئەم هەڵەیە ڕاپۆرت دەکات.

بەشی ٣: class یان id؟

ئەمە خواستی خۆتە.

ئەگەر دەتەوێت ناوێک بدەیت بە گروپێکی توخمی هاوشێوە، class بەکاربهێنە.

ئەگەر دەتەوێت ناوێک بدەیت بە یەک توخمی دیاریکراو، بۆ نموونە بۆ بازدان بۆی، id بەکاربهێنە.

توخمێک دەتوانێت هەردووکیانی هەبێت، وەک نمونەی سەرەوە.

پوختە

هەمان ناوی class دەتوانرێت بە چەند توخمێک بدرێت، یان تەنها بە یەک توخم.
هەمان بەهای id تەنها بە یەک توخم لە هەر لاپەڕەیەکدا دەدرێت.
class بە خۆی ڕووخسار ناگۆڕێت. لەم نموونەیەدا، کۆدی CSSـەکە سنوورەکە زیاد دەکات.
هەرگیز هەمان id دوو جار لەسەر یەک لاپەڕە بەکارمەهێنە.

ڕاهێنان

١. کڵاسی card بدە بە گروپی سێیەم.

٢. id بدە بە گروپی چای سەوز، و لینکێکی بازدان بۆی بنووسە.

٣. بیری لێبکەرەوە: ئایا ناوی کڵاسەکان دووبارە دەبنەوە یان idـەکان

نموونە

html

<!doctype html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>مێنیوی چا</title>
    <style>
      .card {
        border: 2px solid #b5651d;
        padding: 12px;
        margin-bottom: 12px;
      }
    </style>
  </head>
  <body>
    <h1>مێنیوی چا</h1>
    <div class="card" id="black-tea">
      <h2>چای ڕەش</h2>
      <p>بەهێز و تۆخ.</p>
    </div>
    <div class="card">
      <h2>چای سەوز</h2>
      <p>سووک و تازە.</p>
    </div>
    <div class="card">
      <h2>چای گیایی</h2>
      <p>لە گیا و گوڵ دروست دەکرێت.</p>
    </div>
  </body>
</html>

خۆت تاقی بکەرەوە ↗

دەستکاری HTML بکە

ئەنجام