وانەی سێیەم لە زنجیرەی فێربوونی HTML و CSS

لاپەڕەکان بە بەکارهێنانی CSS فۆرمات بکە. فێر دەبین چۆن CSS بەکاربهێنین بۆ ئەوەی لاپەڕەکانتان دیمەنێکی پیشەیی بدەن.

دیزاینی ماڵپەڕ

February 6, 2025

وانە سێیەم: فێربوونی زمانی HTML و CSS! 🎉

بەخێربێیت بۆ وانە سێیەم لە سلسلەی فێربوونی زمانی HTML و CSS ! لەم وانەیەدا، ئێمە بە تێکچوونی ڕوونکردنەوەی پەڕگەکان بە بەکارهێنانی CSS دەچینە سەر. ئێمە فێردەبین چۆن بەکاربێنین CSS بۆ دروستکردنی شێوازێکی پیشەکارانە بۆ پەڕگەکانت، کە شامل دەبێت بە ڕەنگەکان، خطەکان، هاوشوێنەکان، کەسروەکان، و پشتبوونەکان . لەگەڵ ئەمەشدا، ئێمە دەتوانین چەند مفهومێکی پێشکەوتوویش واز بدەینەوە وەک دیزاینی گونجاو (Responsive Design) بە بەکارهێنانی پرسیارە مەدیاکان (Media Queries) .

1. پێداچوونەوەی خێرا

لە وانەی پێشوو، ئێمە فێر بووین:

چۆن جدول و نموذج دروست بکەین.
بەکارهێنانی وشە نیشانەییەکان وەک <header> و <footer>.
زێدەکردنی ڕوونکردنەوەی سادە بە بەکارهێنانی CSS .

ئێستا، ئێمە بەرزدەچینەوە بۆ سطحێکی باڵاوتر لە ڕوونکردنەوە بە بەکارهێنانی CSS !

2. بنەماکانی CSSی پێشکەوتوو

أ. ڕەنگەکان (Colors)

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

ناوی ڕەنگەکان (وەک red, blue).
گۆڕەکە سەداسیەکان (Hexadecimal) وەک #FF5733.
گۆڕەکە RGB وەک rgb(255, 87, 51).
گۆڕەکە RGBA کە "A" واتای شفافیەتە.

نموونە:

h1 {
color: #FF5733; /* ڕەنگی سەردەر */
}
p {
color: rgba(0, 0, 0, 0.7); /* نوسینی شفاف */
}

ب. خطەکان (Fonts)

جۆری خطەکان دەکرێت بگۆڕدرێت بە بەکارهێنانی تایبەتمەندی font-family . ئێمە دەتوانین ڕەنگەکانی گۆڕین بە بەکارهێنانی font-size .

نموونە:

body {
font-family: Arial, sans-serif; /* خطی بنچینەیی بە خطی پشتگیر */
font-size: 16px; /* قەبارەی خط */
}
h1 {
font-family: 'Times New Roman', serif;
font-size: 24px;
}

💡 پێشنیار: ئێمە دەتوانین خطی دیاریکراو لە Google Fonts بەکاربهێنین بە زیادکردنی بەستەر لە ناو <head>:

ئینجا بەکاربێنە لە CSS:

body {
font-family: 'Roboto', sans-serif;
}

ج. هاوشوێن و ناوەوەییەکان (Margins & Padding)

margin : دیاری دەکات هاوشوێنی دەرەکی دەربڕنەوەی ئەلیمەنت.
padding : دیاری دەکات هاوشوێنی ناوەوەیی دەربڕنەوەی ئەلیمەنت.

نموونە:

div {
margin: 20px; /* هاوشوێنی دەرەکی */
padding: 15px; /* هاوشوێنی ناوەوەیی */
border: 1px solid black; /* حدود بۆ ئەلیمەنت */
}

د. پشتبوونەکان (Backgrounds)

ئێمە دەتوانین پشتبوونی ئەلیمەنتەکان دیاری بکەین بە:

ڕەنگی پشتبوون (background-color ).
وێنەی پشتبوون (background-image ).
دووبارەکردنەوەی وێنە (background-repeat ).

نموونە:

body {
background-color: #f4f4f4; /* ڕەنگی پشتبوونی پەڕگە */
}
header {
background-image: url('background.jpg'); /* وێنەی پشتبوون */
background-repeat: no-repeat; /* دووبارەکردنەوە نەکردن */
background-size: cover; /* تەواوکردنی ئەلیمەنت */
}

3. دیزاینی کەسروەکان (Box Model)

هەر ئەلیمەنتێک لە HTML وەک کەسروێک دەستنیشان دەکرێت کە پێکهاتووە لە:

ناوەڕۆک (Content) : نوسین یان وێنە ناو ئەلیمەنت.
هاوشوێنی ناوەوەیی (Padding) : شوێنە نێوان ناوەڕۆک و حدود.
حدود (Border) : هێڵێک دەربڕنەوەی ئەلیمەنت.
هاوشوێنی دەرەکی (Margin) : شوێنە نێوان ئەلیمەنت و ئەلیمەنتەکانی تر.

نموونە:

div {
width: 200px;
height: 100px;
padding: 10px; /* هاوشوێنی ناوەوەیی */
border: 2px solid black; /* حدود */
margin: 20px; /* هاوشوێنی دەرەکی */
}

4. دیزاینی گونجاو (Responsive Design)

أ. یەکەی کێش (Flexible Units)

لە جیاتی بەکارهێنانی یەکەی سنووردار وەک px ، ئێمە دەتوانین بەکاربێنین یەکەی کێش وەک:

% : پلەیەکی سەدا لەسەر کەسروی باو.
em : پلەیەکی سەدا لەسەر قەبارەی خط.
rem : پلەیەکی سەدا لەسەر قەبارەی خطی بنچینەیی پەڕگە.

نموونە:

div {
width: 50%; /* نیوەی عرضی کەسروی باو */
font-size: 1.2rem; /* ١.٢ جار قەبارەی خطی بنچینەیی */
}

ب. پرسیارە مەدیاکان (Media Queries)

ئەمە بەکاردێت بۆ بەکارهێنانی شێوازی جیاواز بە پێی چەقی شاشە.

نموونە:

/* دیزاینی بنچینەیی */
body {
background-color: white;
color: black;
}


/* دیزاین بۆ شاشەکانی بچووک (چەقی کەمتر لە ٦٠٠px) */
@media (max-width: 600px) {
body {
background-color: lightblue;
font-size: 14px;
}
}

5. کاری تاقیکردنەوە

هەوڵبدە پەڕگەیەکی HTML دروست بکەیت کە پێکهاتووە لە:

جدولێکی کاتی هەفتەکەت:
- بەکاربێنە CSS بۆ گۆڕینی ڕەنگی پشتبوون بۆ سەردەرەکان.
- زێدەکەرەوەی حدود و ڕەنگی جیاواز بۆ خانەکان.
نموذجێکی تۆمارکردنی سادە:
- بەکاربێنە CSS بۆ ڕوونکردنەوەی نموذج (ڕەنگەکان، هاوشوێنەکان، حدودەکان).
- دیزاین بکە بۆ ئەوەی نموذجەکە بە شێوازێکی باش لە شاشەکانی بچووک بچێت بە بەکارهێنانی Media Queries .
دیزاینی گونجاو:
- زێدەکەرەوەی پرسیارە مەدیاکان بۆ ئەوەی پەڕگەکە بە شێوازێکی باش لە هەموو ئامرازەکاندا بچێت.

6. چی دواتر؟

لە وانەی داهاتوودا، ئێمە بە تێکچوونی تەکنیکە پێشکەوتووەکانی CSS دەچینە سەر وەک:

ئەنیمەیشنەکان (Animations) .
سێوەیەکان (Shadows) .
ڕووبەندکردنی نوێ (Flexbox و Grid) .

📌 پێشنیار: هیچ شک نەکە بۆ تاقیکردنەوەی کۆدەکان بە خۆت و گۆڕینیان بۆ بینینی ئەنجامەکان. چارەسەرکردن مەرجە بۆ باشبوونەوە! 🚀

کۆمێنتەکان

هیچ کۆمێنتێک نییە

تکایە بچۆرە ژوورەوە بۆ ئەوەی کۆمێنتێک بنوسیت

فێربوونی بەرنامەسازی ماڵپەڕ A-0

لە سفرەوە بۆ پڕۆ: گەشتی تەواوی پەرەپێدانی وێب

بینینی بابەت
جیاوازی نێوان ئەندرۆید و ئای ئۆ ئێس

بەرنامەسازی ئەپی مۆبایل: جیاوازی نێوان ئەندرۆید و ئای ئۆ ئێس و باشترین پراکتیزەکان

بینینی بابەت
پەرەپێدانی یاری بە بەکارهێنانی یونیتی

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

بینینی بابەت
شارەزایی لە بەرنامەسازی بە بەکارهێنانی پایتۆن

شارەزابوون لە بەرنامەسازی بە پایتۆن: پڕۆژە و ئامۆژگاری دەستی

بینینی بابەت
سوودەکانی ماڵپەڕەکان چین؟

سوودەکانی ماڵپەڕی کۆمپانیاکان

بینینی بابەت
فێربوونی بەرنامەسازی ماڵپەڕ A-1

وانەی یەکەم: فێربوونی HTML لە سفرەوە - پێشەکییەکی گشتگیر لەگەڵ ڕێکخستنی ئامرازەکان

بینینی بابەت
فێربوونی بەرنامەسازی ماڵپەڕ A-2

وانەی دووەم: فێربوونی HTML لە سفرەوە - تاگە پێشکەوتووەکان و خشتەکان

بینینی بابەت
ئینتەلیکەنی ئارەزویی Qwen AI

Qwen AI مۆدێلی زانستی ئارەزویییە چەندکارەیە کە زمانەکان پشتگیری دەکات و کارە خەیاڵی و کاراکەرەکان دەڕێژێت

بینینی بابەت