وانەی 1 لە 1

وانەی ١: CSS ڕووخسار دەگۆڕێت، نەک مانای HTML

دەست پێ بکەین

پێشتر فێر بوویت چۆن سەردێڕێک بە HTML بنووسیت. بە شێوەی ئاسایی، وێبگەڕ خۆی بڕیار دەدات سەردێڕەکە چۆن پیشان بدرێت. ئێستا تۆ گۆڕانکارییەکی بچووک دەکەیت: ڕەنگی نووسینی سەردێڕەکە دەکەیتە شین.

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

ناوەڕۆکی ئەم وانەیە

هەنگاوی ١ — دروستکردنی پەڕەکە هەنگاوی ٢ — نووسینی یەکەم دەستووری CSS هەنگاوی ٣ — تێگەیشتن لە کۆدەکە

هەنگاوی ١ — دروستکردنی پەڕەکە

فۆڵدەرێک بە ناوی lesson-01 دروست بکە. لەناویدا فایلێک بە ناوی index.html دروست بکە و ئەم کۆدەی تێدا بنووسە:

نموونە

html

<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>یەکەم CSS ـی من</title>
</head>
<body>
  <h1>سڵاو، CSS!</h1>
  <p>ئەمە یەکەم پەڕەیە کە ستایلی بۆ دادەنێم.</p>
</body>
</html>

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

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

ئەنجام

هەنگاوی ٢ — نووسینی یەکەم دەستووری CSS

فایلی index.html لە وێبگەڕەکەتدا بکەرەوە. سەردێڕێک و پەرەگرافێک دەبینیت، بە ڕووکاری بنەڕەتیی وێبگە.

لەناو ئەلەمێنتی <head>، دوای <title>، ئەم کۆدە زیاد بکە:

<style>
  h1 {
    color: blue;
  }
</style>

فایلەکە پاشەکەوت بکە و پەڕەکە لە وێبگەڕ نوێ بکەرەوە (Refresh).

چی گۆڕا؟ ڕەنگی سەردێڕی «سڵاو، CSS!» بووە شین، بەڵام پەرەگرافەکە وەک خۆی ماوەتەوە.

css color

ئەلەمێنتی <style> بە وێبگەڕ دەڵێت ئەو کۆدەی لەناویدایە CSS ـە. لە وانەکانی داهاتوودا ڕێگاکانی تری زیادکردنی CSS فێر دەبین.

CSS decleration

هەنگاوی ٣ — تێگەیشتن لە کۆدەکە

h1 ئەو سەردێڕانە هەڵدەبژێرێت کە دەتەوێت ڕووکاریان بگۆڕیت.
{ و } دەورەی ڕێنماییەکانی ستایلەکە دەگرن.
color تایبەتمەندی (Property) ـیە؛ ڕەنگی نووسین دیاری دەکات.
: تایبەتمەندی و بەهاکەی لێک جیا دەکاتەوە.
blue بەها (Value) ـیە؛ واتە ڕەنگی شین.
; کۆتایی ئەم ڕێنماییە دیاری دەکات، کە پێی دەوترێت Declaration.

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

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

1. پێشبینی بکە ئەگەر blue بکەیتە red چی ڕوودەدات.

2. گۆڕانکارییەکە بکە، فایلەکە پاشەکەوت بکە و پەڕەکە نوێ بکەرەوە.

3. ئێستا red بکە بە green و ئەنجامەکە ببینە.

دڵنیابە: تەنها ڕەنگی سەردێڕەکە دەبێت بگۆڕێت؛ پەرەگرافەکە نا.

هەڵەیەکی باو

ئەگەر colour: blue; بنووسیت، سەردێڕەکە شین نابێت. لە CSS ـدا ناوی دروستی ئەم تایبەتمەندییە color ـە، نەک colour. ڕاستی بکەرەوە و پەڕەکە نوێ بکەرەوە.

ئەوەی دەبێت لەبیرت بێت

HTML سەردێڕ و پەرەگراف دروست دەکات؛ CSS ڕووکاریان دەگۆڕێت. ئەمڕۆ یەکەم دەستووریCSS ـت نووسی و ئەنجامەکەت لە وێبگەڕ بینی.

وانەی داهاتوو: تێگەیشتن لە هەڵبژێرەر، تایبەتمەندی و بەها لە CSS.

نموونە

html

<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>یەکەم CSS ـی من</title>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>سڵاو، CSS!</h1>
  <p>ئەمە یەکەم پەڕەیە کە ستایلی بۆ دادەنێم.</p>
</body>
</html>

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

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

ئەنجام

چوونەژوورەوە بۆ پاشەکەوتکردنی پێشکەوتنت لە فێربووندا.