پێشتر دواتر

CSS (Cascading Style Sheets) سیستەمێکە بۆ دیزاینکردن و style دانان بۆ پەڕەکانی HTML.

 

سێ ڕێگای جیاواز هەیە بۆ پەیوەستکردنی CSS بە پەڕەکانی HTML:

  1. External Css (CSS ی دەرەکی)
  2. Internal CSS (CSS ی ناوخۆیی)
  3. Inline CSS (ڕاستەوخۆ لەسەر تاگ)

 

1.ڕێگای دەرەکی External CSS

ئەمە باشترین ڕێگایە بۆ کارکردن لەگەڵ پرۆژە گەورەکان. فایلی CSS لە فایلێکی جیاواز نووسراوە و بە تاگی <link>  لەگەڵ HTML پەیوەستدەکرێت.

 

فایلی HTML

 

فایلی CSS

 

تێبینی : بۆشایی دامەنێ لە نێوان نرخی (16) لەگەڵ یەکەی (px) 

 

شێوەی ڕاست : font-size:16px

شێوەی هەڵە : font-size:16 px

 

 

 

2.ڕێگای ناوخۆیی Internal CSS

لەم ڕێگایەدا CSS لە نێوان تاگی <style> لە بەشی <head> بەکاردەهێنرێت.

<!DOCTYPE html>
<html dir="rtl" lang="ku">
<head>
    <meta charset="UTF-8">
    <title>نمونەی Internal CSS</title>
    <style>
        body {
            font-family: Tahoma, serif;
            margin: 20px;
        }
        
        .card {
            background-color: #ffffff;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        h2 {
            color: #2c3e50;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="card">
        <h2>ناونیشان</h2>
        <p>ناوەڕۆکی کارت</p>
    </div>
</body>
</html>

 

3. Inline CSS

لەم ڕێگایەدا CSS ڕاستەوخۆ بە ئەترەبیوتی style بۆ هەر تاگێکی HTML زیاددەکرێت.

<!DOCTYPE html>
<html dir="rtl" lang="ku">
<head>
    <meta charset="UTF-8">
    <title>نمونەی Inline CSS</title>
</head>
<body>
    <h1 style="color: red; text-align: center; font-size: 28px;">
        ناونیشانی سەرەکی
    </h1>
    
    <p style="color: blue; font-weight: bold; background-color: yellow;">
        ئەمە پاراگرافێکە بە Inline CSS.
    </p>
    
    <div style="width: 300px; height: 200px; background-color: #e8f4fd; border: 2px solid #007bff; padding: 20px;">
        ئەمە بۆکسێکە بە چەندین style property.
    </div>
</body>
</html>

ئەفزەلیەتی هەر سێ ڕێگاکە لە CSS دا

یەکێک لە گرنگترین concepts لە CSS دا ئەوەیە کە بزانی کام ڕێگا ئەفزەڵیەتی زیاتری هەیە کاتێک چەندین style بۆ یەک element دادەنرێت. ڕیزبەندیەکە بەم شێوەیە:

  • Inline CSS - بەرزترین ئەفزەڵیەت
  • Internal CSS - ئەفزەڵیەتی ناوەند
  • External CSS ئەفزەڵیەتی نزم

بەراوردکردنی ڕێگاکان

External CSS

سوودەکان:

  • گونجاوە بۆ پرۆژە گەورەکان
  • کۆد دووبارە ناکاتەوە
  • ئاسانە بۆ پاراستن و بەڕێوەبردن
  • باشتری کارایی cache

زیانەکان:

  • پێویستی بە HTTP request زیاترە
  • فایلی زیاتر

 

Internal CSS

سوودەکان:

  • هەموو شت لە یەک فایلدایە
  • زیاتر لە ڕێکخراوە لە چاو Inline CSS
  • باشە بۆ پەڕە تاکەکەسیەکان

زیانەکان:

  • دووبارەبوونەوە لە چەندین پەڕەدا
  • style هەر کاتێک HTML load بکرێت، دووبارە load دەبێت

 

Inline CSS

سوودەکان:

  • بەردەستترین ڕێگا
  • باشە بۆ test کردنی خێرا
  • priority ی بەرزی هەیە

زیانەکان:

 

  • خراپترین بۆ بەڕێوەبردن کردن
  • پەڕەی HTML زۆر پڕدەکاتەوە
  • نابێت بۆ responsive design بەکاربهێنرێت