Liisaska iyo Jadwallada CSS

Liisaska iyo jadwalladu waxay ka mid yihiin hababka ugu wanaagsan ee lagu soo bandhigo xogta habaysan (structured data) [1]. CSS waxay ku siinaysaa maamul iyo xakameyn buuxda oo ku saabsan qaab-dhismeedkooda iyo muuqaalkooda [1]. Casharkan waxaan ku baran doonnaa sida loo dhoodhoobo liisas heersare ah (custom markers, counters) iyo jadwallo tayo leh (sticky headers, zebra striping, hover effects) [1].

`list-style` — Qaabaynta Liisaska

Sifada list-style waxay kuu sahlaysaa inaad maamusho dhammaan qaybaha uu liisku ka kooban yahay:

ul {
  list-style-type: disc;     /* Nooca astaanta */
  list-style-position: outside; /* Goobta ay astaantu fariisanayso */
  list-style-image: none;    /* Sawir loo adeegsanayo astaan ahaan */

  /* Habka Kooban (Shorthand) */
  list-style: square inside;
}

Sifada `list-style-type` — Nooca Astaanta

Qiimaha	Sharaxaadda	Muuqaalka Tusaalaha
`disc`	Goobaabin madow oo buuxda (caadiga ah)	•
`circle`	Goobaabin dhexda ka bannaan	○
`square`	Afar-geesood madow oo buuxa	■
`decimal`	Tirooyin caadi ah	1.
`decimal-leading-zero`	Tirooyin ku bilaabma eber	01.
`lower-roman`	Xarfaha yaryar ee tirada Roomaanka	i.
`upper-roman`	Xarfaha waaweyn ee tirada Roomaanka	I.
`lower-alpha`	Xarfaha yaryar ee alifbeetada	a.
`upper-alpha`	Xarfaha waaweyn ee alifbeetada	A.
`none`	Aan lahayn wax astaan ah	—

/* Liis tirsan (Ordered list) oo adeegsanaya xarfaha Roomaanka: */
ol {
  list-style: upper-roman;
  padding-left: 2em;
}

/* Liis dhibco leh (Unordered list) oo laga saaray astaantii caadiga ahayd: */
ul {
  list-style: none;
  padding-left: 0;
}

Isticmaalka Astaamaha Gaarka ah (Custom Markers) — `::before`

Marka liiska laga saaro astaamihiisa asalka ah adoo isticmaalaya list-style: none, waxaad ku dari kartaa astaan u gaar ah naqshaddaada adoo adeegsanaya curiye-beenta ::before:

ul {
  list-style: none;
  padding-left: 0;
}

li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 8px;
}

li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: #3b82f6;
}

Tirada Is-kordhisa (CSS Counters) — `counter-reset` iyo `counter-increment`

Nidaamkani wuxuu kuu sahlayaa inaad dhisatid tirooyin ama taxaneyaal gaar ah oo si toos ah is-kordhiya:

ol {
  list-style: none;
  padding-left: 0;
  counter-reset: cinwaanka; /* Dejinta ama dib-u-bilaabista tirada */
}

li {
  counter-increment: cinwaanka; /* Kordhinta tirada tallaabo kasta */
  padding-left: 2.5em;
  position: relative;
  margin-bottom: 12px;
}

li::before {
  content: counter(cinwaanka) ".";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: #3b82f6;
}

Sifada	Sharaxaadda
`counter-reset: x`	Abuurista ama dib-u-dejinta tirada
`counter-increment: x`	Kordhinta tirada marka la marayo curiye cusub
`counter(x)`	Muujinta ama soo bandhigidda qiimaha tirada rasmiga ah
`counters(x, "-")`	Muujinta dhammaan tirooyinka is-dhex-jira (Nesting counters)

Tirinta Is-dhex-jirta (Nesting Counters)

ol { counter-reset: cutub; list-style: none; }
li { counter-increment: cutub; }
li::before { content: "Cutubka " counter(cutub) ": "; font-weight: 700; }

Qaabaynta Jadwallada CSS (Table Styling)

Jadwallada waxaa loo qaabeeyaa si ay u noqdaan kuwo si dhib yar loo akhrin karo, muuqaal ahaanna nidaamsan:

table {
  width: 100%;
  border-collapse: collapse; /* Isku-dhafka dhumucda iyo xariiqyada is-dul-saaran */
  font-size: 0.875rem;
}

th, td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
}

th {
  background: #f8fafc;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #64748b;
}

Sifada	Qiimaha	Sharaxaadda
`border-collapse`	`collapse`	Isku-dhafka xariiqyada si ay u noqdaan hal khad oo nadiif ah
`border-collapse`	`separate`	In xariiqyadu kala go’naadaan (caadiga ah)
`border-spacing`	`4px`	Masaafada u dhaxaysa unugyada jadwalka

Zebra Striping — Naqshadaynta Safarka Is-bedbeddela adoo adeegsanaya `:nth-child`

/* In safafka dhabanka ah (even rows) la siiyo midab ka duwan kuwa kinsiga ah: */
tbody tr:nth-child(even) {
  background: #f8fafc;
}

/* Saamaynta marka tilmaamuhu dul dego (Hover effect): */
tbody tr:hover {
  background: #eff6ff;
}

Aad bay u habboon tahay in dusha sare ee jadwalku uu ahaado mid dagan (sticky) marka hoos loo scroll-gareeyo si aan loo waayin magacyada tiirarka:

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc; /* Asalka dambe waa khasab si qoraalka ka hooseeya uusan u dhex-muuqan */
}

Jadwal la-jaanqaada Shaashadaha (Responsive Table) — `overflow-x`

Shaashadaha mobilada, jadwalku wuxuu u baahan yahay inuu yeesho baar jiif ah oo la dhaqaajiyo (horizontal scroll) si aan naqshaddu u qasmin:

.table-weelka {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Tusaale Mashruuc Dhamaystiran

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Liisaska &amp; Jadwallada CSS</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, sans-serif;
      background: #f8fafc;
      padding: 40px 20px;
      color: #0f172a;
    }

    .weelka {
      max-width: 860px;
      margin: 0 auto;
    }

    h1 { font-size: 2rem; margin-bottom: 8px; }
    .subtitle { color: #64748b; margin-bottom: 40px; }

    /* ============================================
       QAABAYNTA LIISASKA (LISTS)
    ============================================ */

    .list-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      margin-bottom: 48px;
    }

    @media (max-width: 640px) {
      .list-section { grid-template-columns: 1fr; }
    }

    .list-box {
      background: white;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      padding: 24px;
    }
    .list-box h2 {
      font-size: 1rem;
      margin-bottom: 16px;
      color: #0f172a;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 10px;
    }

    /* Liiska caadiga ah */
    .list-default {
      padding-left: 1.5em;
    }
    .list-default li {
      margin-bottom: 6px;
      font-size: 0.9rem;
    }

    /* Liiska calaamadda saxda ah (Checkmark list) */
    .list-check {
      list-style: none;
      padding-left: 0;
    }
    .list-check li {
      padding-left: 28px;
      position: relative;
      margin-bottom: 10px;
      font-size: 0.9rem;
    }
    .list-check li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: #22c55e;
      font-weight: 700;
    }

    /* Liiska tirada tooska ah (Counter list) */
    .list-counter {
      list-style: none;
      padding-left: 0;
      counter-reset: cashar;
    }
    .list-counter li {
      counter-increment: cashar;
      padding-left: 2.5em;
      position: relative;
      margin-bottom: 10px;
      font-size: 0.9rem;
    }
    .list-counter li::before {
      content: "Cashar " counter(cashar);
      position: absolute;
      left: 0;
      background: #3b82f6;
      color: white;
      font-size: 0.65rem;
      font-weight: 700;
      padding: 1px 8px;
      border-radius: 99px;
    }

    /* Liiska astaamaha (Icon list) */
    .list-icon {
      list-style: none;
      padding-left: 0;
    }
    .list-icon li {
      padding-left: 32px;
      position: relative;
      margin-bottom: 10px;
      font-size: 0.9rem;
    }
    .list-icon li::before {
      position: absolute;
      left: 0;
    }
    .list-icon li:nth-child(1)::before { content: "🎨"; }
    .list-icon li:nth-child(2)::before { content: "📐"; }
    .list-icon li:nth-child(3)::before { content: "✨"; }
    .list-icon li:nth-child(4)::before { content: "📱"; }

    /* ============================================
       QAABAYNTA JADWALKA (TABLE)
    ============================================ */

    .table-weelka {
      overflow-x: auto;
      background: white;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
    }

    thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: #f8fafc;
      text-align: left;
      padding: 14px 16px;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #64748b;
      font-weight: 700;
      border-bottom: 2px solid #e2e8f0;
    }

    tbody td {
      padding: 12px 16px;
      border-bottom: 1px solid #f1f5f9;
      color: #334155;
    }

    /* Safarka is-bedbeddela (Zebra striping) */
    tbody tr:nth-child(even) {
      background: #fafbfc;
    }

    /* Saamaynta hover-ka */
    tbody tr:hover {
      background: #eff6ff;
      transition: background 0.15s ease;
    }

    /* Badhamada xaaladda (Status badges) */
    .badge {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 600;
      padding: 2px 10px;
      border-radius: 99px;
    }
    .badge-green { background: #dcfce7; color: #166534; }
    .badge-blue  { background: #dbeafe; color: #1e40af; }
    .badge-yellow { background: #fef9c3; color: #854d0e; }
    .badge-red   { background: #fee2e2; color: #991b1b; }

    code {
      background: #f1f5f9;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 0.8em;
    }
  </style>
</head>
<body>

<div class="weelka">
  <h1>Liisaska &amp; Jadwallada</h1>
  <p class="subtitle">CSS list-style, counters, zebra striping, sticky headers</p>

  <!-- Lists -->
  <div class="list-section">
    <div class="list-box">
      <h2>Liiska Caadiga ah</h2>
      <ul class="list-default">
        <li>Hordhaca CSS</li>
        <li>Xulayaasha CSS</li>
        <li>Midabada iyo Gadaasha</li>
        <li>Hanaanka Qoraalka</li>
        <li>Qaabka Sanduuqa</li>
      </ul>
    </div>

    <div class="list-box">
      <h2>Liiska Calaamadda Saxda ah (Checkmark) — <code>::before</code></h2>
      <ul class="list-check">
        <li>Flexbox — Qaab-dhismeedka Hal-Jiho</li>
        <li>CSS Grid — Qaab-dhismeedka Laba-Jiho</li>
        <li>Naqshadda Iskubeddesha</li>
        <li>Wareegyada iyo Dhaqdhaqaaqa</li>
      </ul>
    </div>

    <div class="list-box">
      <h2>Liiska Tirada Is-kordhisa (Counter) — <code>counter()</code></h2>
      <ul class="list-counter">
        <li>Hordhaca CSS</li>
        <li>Flexbox</li>
        <li>CSS Grid</li>
        <li>Responsive Design</li>
      </ul>
    </div>

    <div class="list-box">
      <h2>Liiska Astaamaha (Icon List) — <code>::before</code></h2>
      <ul class="list-icon">
        <li>Midabada &amp; Gradients</li>
        <li>Flexbox &amp; Grid</li>
        <li>Animations &amp; Transitions</li>
        <li>Responsive Design</li>
      </ul>
    </div>
  </div>

  <!-- Table -->
  <h2 style="margin-bottom:12px; font-size:1.25rem;">Jadwal Casharada CSS</h2>
  <div class="table-weelka">
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Casharka</th>
          <th>Qaybta</th>
          <th>Heerka</th>
          <th>Waqtiga</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>01</td>
          <td>Hordhaca CSS</td>
          <td>Introduction</td>
          <td><span class="badge badge-green">Fudud</span></td>
          <td>30 min</td>
        </tr>
        <tr>
          <td>02</td>
          <td>Xulayaasha CSS</td>
          <td>Selectors</td>
          <td><span class="badge badge-green">Fudud</span></td>
          <td>45 min</td>
        </tr>
        <tr>
          <td>03</td>
          <td>Midabada iyo Gadaasha</td>
          <td>Colors</td>
          <td><span class="badge badge-green">Fudud</span></td>
          <td>30 min</td>
        </tr>
        <tr>
          <td>04</td>
          <td>Hanaanka Qoraalka</td>
          <td>Typography</td>
          <td><span class="badge badge-green">Fudud</span></td>
          <td>40 min</td>
        </tr>
        <tr>
          <td>05</td>
          <td>Qaabka Sanduuqa</td>
          <td>Box Model</td>
          <td><span class="badge badge-blue">Dhexe</span></td>
          <td>45 min</td>
        </tr>
        <tr>
          <td>06</td>
          <td>Meelaynta Walxaha</td>
          <td>Positioning</td>
          <td><span class="badge badge-blue">Dhexe</span></td>
          <td>50 min</td>
        </tr>
        <tr>
          <td>07</td>
          <td>Flexbox</td>
          <td>Layout</td>
          <td><span class="badge badge-blue">Dhexe</span></td>
          <td>60 min</td>
        </tr>
        <tr>
          <td>08</td>
          <td>CSS Grid</td>
          <td>Layout</td>
          <td><span class="badge badge-yellow">Dhexe</span></td>
          <td>60 min</td>
        </tr>
        <tr>
          <td>09</td>
          <td>Responsive Design</td>
          <td>Layout</td>
          <td><span class="badge badge-yellow">Dhexe</span></td>
          <td>50 min</td>
        </tr>
        <tr>
          <td>10</td>
          <td>CSS Custom Properties</td>
          <td>Theming</td>
          <td><span class="badge badge-red">Sare</span></td>
          <td>45 min</td>
        </tr>
      </tbody>
    </table>
  </div>

  <p style="margin-top:12px; color:#94a3b8; font-size:0.8rem;">
    Jadwalkani wuxuu adeegsadaa sifooyinka <code>border-collapse: collapse</code>, safarka is-bedbeddela,
    saamaynta hover-ka, iyo dusha sare ee is-dajisa (sticky header).
  </p>
</div>

</body>
</html>

Casharka xiga: Waxaan ku baran doonnaa Sida loo qaabeeyo Foomamka (Form Styling) ee CSS.

Liisaska iyo Jadwallada CSS

`list-style` — Qaabaynta Liisaska

Sifada `list-style-type` — Nooca Astaanta

Isticmaalka Astaamaha Gaarka ah (Custom Markers) — `::before`

Tirada Is-kordhisa (CSS Counters) — `counter-reset` iyo `counter-increment`

Tirinta Is-dhex-jirta (Nesting Counters)

Qaabaynta Jadwallada CSS (Table Styling)

Zebra Striping — Naqshadaynta Safarka Is-bedbeddela adoo adeegsanaya `:nth-child`

Cinwaanka Jadwalka ee Is-dajiya (Sticky Header)

Jadwal la-jaanqaada Shaashadaha (Responsive Table) — `overflow-x`

Tusaale Mashruuc Dhamaystiran

Ready to learn
something new?

list-style — Qaabaynta Liisaska

Sifada list-style-type — Nooca Astaanta

Isticmaalka Astaamaha Gaarka ah (Custom Markers) — ::before

Tirada Is-kordhisa (CSS Counters) — counter-reset iyo counter-increment

Tirinta Is-dhex-jirta (Nesting Counters)

Qaabaynta Jadwallada CSS (Table Styling)

Zebra Striping — Naqshadaynta Safarka Is-bedbeddela adoo adeegsanaya :nth-child

Cinwaanka Jadwalka ee Is-dajiya (Sticky Header)

Jadwal la-jaanqaada Shaashadaha (Responsive Table) — overflow-x

Tusaale Mashruuc Dhamaystiran

Ready to learn something new?

`list-style` — Qaabaynta Liisaska

Sifada `list-style-type` — Nooca Astaanta

Isticmaalka Astaamaha Gaarka ah (Custom Markers) — `::before`

Tirada Is-kordhisa (CSS Counters) — `counter-reset` iyo `counter-increment`

Zebra Striping — Naqshadaynta Safarka Is-bedbeddela adoo adeegsanaya `:nth-child`

Jadwal la-jaanqaada Shaashadaha (Responsive Table) — `overflow-x`

Ready to learn
something new?