فێركاری / وێبداڕشتن

فێربوونی CSS، پێناسە و بەکارهێنان

by In the name of God · Published 02/07/2015 · Updated 07/06/2017

CSS کورتکراوەی Cascading Style Sheets و دەکرێت بە زمان ناوببرێت کە ڕوومەت دەدات بە کۆدی بنچینەنان لە وێب. CSS بزۆک Dynamic نییە.

کاتێک پەڕەیەکی وێب (HTML) دادەڕێژین بە شێوەیەکی ئاسایی و درووست پێناس دەکەین کە پەڕەی ناوبرا لە چی و چۆن پێکهاتووە، بۆ نموونە لە سەرەتادا بە تاگی کردنەوەی HTML دەست پێدەکات و دواتر بەشی head دەست پێدەکات کە لە خۆیدا پێکهاتەکانی لە خۆ دەگرێت. پاشان بەشی body لەگەڵ پێکهاتەکانی خۆی دەست پێدەکات. بەڵام لە نێو هەمان پەڕەدا ئاماژە بەوە نادەین کە ڕەنگ و ڕوومەتی پەڕەی ناوبراو چۆن بێت. دەتوانین ئاماژەی پێ بدەین بەڵام لە ڕوانگەی کۆد نووسینی درووستەوە ئەو شێوازە درووست نییە و هەروەها کاری داهاتوویی بەڕێوەبردنی ماڵپەڕ ئاسان ناکاتەوە.

CSS ئەو بۆشاییە پڕ دەکاتەوە و هاوشانی HTML کار دەکات و ڕەنگ و ڕوومەت دەدات بە کۆدەکان کە پێناسی پێکهاتی پەڕە دەکەن. لە خوارەوە نموونەیەکی سادەی پەڕەی HTML هەیە،

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>پەڕەیەکی HTML</title>
</head>

<body>
<p>هیلاکی ڕه‌نجێکم که‌ ڕه‌نجی من نییه‌<br />
  دانیشتووی خاکێکم که‌ خاکی من نییه‌<br />
  ناسراوی ناوێکم که‌ ناوی من نییه‌<br />
  گریاوی ژانێکم که‌ ژانی من نییه‌<br />
  زاده‌ی له‌ززه‌تێکم، له‌ززه‌تی من نییه‌<br />
  به‌ مه‌رگێکیش ده‌مرم که‌ مه‌رگی من نیی
</p>
</body>
</html>

ئەگەر کۆدەکانی سەرەوە لە نێو پەڕگەیەک بە ناوی index.html پاشەکەوت بکەین و لە وێبگەڕ چاوی لێبکەین وەک وێنەی خوارەوە دەردەکەوێت.

وەک ڕوونە HTML کاری پیشاندنی نووسینەکانی جێبەجێ کردووە، سەردێڕی پەڕەکەی لە شوێنی درووست پیشانداوە و هتد… بەڵام بێ ڕەنگە. ئەگەر بمانەوێت نووسینەکان قەڵەو بکەین، ڕەنگیان بگۆڕین، شوێنیان بگۆڕین یان گۆڕانکاری دیکە جێبەجێ بکەین، پەنا دەبەینە CSS.

نووسینی کۆدەکانی CSS

بۆ نووسینی کۆدەکانی CSS پێویست بە پرۆگرامێک دەکات کە بتوانرێت دەقی ئاسایی تێدا بنووسرێت، ئاسانترین و سادەترین پرۆگرام لە ویندۆز Notepad ـە. لە ئەم بابەتەدا کۆدەکانمان لە نێو پرۆگرامی Notepad++ دەنووسین کە توانای ڕەنگکردن و باشتر پیشاندانی مەرجەکانی هەیە. جگە لە Notepad++ پرۆگرامی دیکەش هەیە کە هاوکاریت دەکات و زۆرێک لە کۆدەکانت بۆ دەنووسێت وەک Adobe DreamWeaver یان Microsoft Expression Web.

داگرتنی Notepad++،

http://notepad-plus-plus.org

شێوازەکانی بەکاربردنی CSS لە نێو پەڕەیەکی وێب

بە ٣ شێواز دەتوانرێت کۆدەکانی CSS بەکار ببرێت

شێوازی یەکەم: CSS ی تێکەڵاو بە کۆد Inline CSS

بەکاربردنی ئەم شێوازە لە وێبی مۆدێڕن دا زۆر کەمە، بەڵام زۆر جارێک کە پرۆگرامی کۆد نووسین وەک Dreamweaver، Microsoft Expression و هتد لەگەڵ وەشانێکی کۆنی HTML بەکار دەبرێت ئەم شێوازە درووست دەبێت و بەکار دەبرێت.

بۆ گۆڕینی ڕەنگی نووسینەکانی نێو پەڕەکەمان بۆ ڕەنگی سوور و بەکاربردنی Inline CSS ڕاستەخۆ لەگەڵ کۆدەکانی HTML، تاگی p دەستکاری دەکەین بە شێوازی خوارەوە.

<p style="color: #F00">هیلاکی ڕه‌نجێکم که‌ ڕه‌نجی من نییه‌<br />
  دانیشتووی خاکێکم که‌ خاکی من نییه‌<br />
  ناسراوی ناوێکم که‌ ناوی من نییه‌<br />
  گریاوی ژانێکم که‌ ژانی من نییه‌<br />
  زاده‌ی له‌ززه‌تێکم، له‌ززه‌تی من نییه‌<br />
  به‌ مه‌رگێکیش ده‌مرم که‌ مه‌رگی من نیی
</p>

کۆدەکانی گۆڕینی ڕەنگ لەگەڵ/لە نێو تاگی p نووسراون.

Inline CSS لە هیچ بوارێکدا درووست نییە بەکار ببرێت، زۆرینەی وێبداڕێژان کە لەسەر ئەو شێوازە کۆد دەنووسن تەنیا دەگەڕێتەوە بۆ ڕاهاتن و هەوڵ نەدان بۆ باشتر کردنی شێوازی کۆد نووسینیان. هۆکارە خراپەکانی بەکاربردنی Inline CSS زۆر زۆرن، لە هەمان کاتدا هۆکاری درووستی نییە. سەرەڕای ئەوەش نووسینی CSS لە نێو تاگەکانی HTML بە پێی ستانداردەکانی وێبداڕشتن هەڵە نییە.

شێوازی دووەم: CSS ی نێوخۆ Internal CSS

شێوازێکی دیکەی نووسینی CSS لە نێو هەمان پەڕگەی HTML بەڵام لە دەرەوەی تاگەکان. بە شێوەیەکی ئاسایی لە نێو بەشی head دەنووسرێت و بە تاگی کردنەوەی <style> پێناس دەکرێت.

جێبەجێکردنی هەمان ڕەنگ گۆڕینی سەرەوە بەڵام بە Internal CSS.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>پەڕەیەکی HTML</title>
<style type="text/css">
p {
color: #F00;
}
</style>
</head>

<body>
<p>هیلاکی ڕه‌نجێکم که‌ ڕه‌نجی من نییه‌<br />
  دانیشتووی خاکێکم که‌ خاکی من نییه‌<br />
  ناسراوی ناوێکم که‌ ناوی من نییه‌<br />
  گریاوی ژانێکم که‌ ژانی من نییه‌<br />
  زاده‌ی له‌ززه‌تێکم، له‌ززه‌تی من نییه‌<br />
  به‌ مه‌رگێکیش ده‌مرم که‌ مه‌رگی من نیی

</p>
</body>
</html>

بە کردنەوەی تاگی <style> کە تاگی پێناسەرە، پەڕەی سەرەوە فرمانی سەپاندنی فرمانی CSS دەنێرێت بۆ وێبگەڕ کە دواتر بە نۆرەی خۆی Render ی دەکات لەگەڵ کۆدەکانی HTML.

تێبینی: لە HTML5 نووسینی تاگی پێناسەری <style> ئاسانتر کراوەتەوە و مەرج نییە وەک شێوازی سەرەوە بنووسرێت، بەڵکوو دەتوانرێت تەنیا بە <style> بکرێتەوە و بە </style> دابخرێت.

شێوازی سێیەم: CSS ی دەرەکی External CSS

نووسینی کۆدەکانی CSS لە پەڕگەیەکی سەربەخۆ کە بە پاشگری .css دەبێت، پاش درووستکردنی بەستەر Link دەکرێت بە پەڕەی HTML ـەوە. بۆ نموونە، هەمان کۆدی گۆڕینی ڕەنگ لە نێو پەڕگەیەکی سەربەخۆی CSS دەنووسینەوە و بە ناوی style.css پاشەکەوتی دەکەین.

p {
color: #F00;
}

کاتێک پەڕگەی سەربەخۆ بۆ CSS درووست دەکرێت، تاگی پێناسەری لەگەڵ نانووسرێت، تەنیا فرمانەکانی CSS لە خۆ دەگرێت. پاشگری .css بە وێبگەڕ ڕادەگەیەنێت کە پەڕگەی ناوبراو CSS ـە.

پاشان بۆ بەستنەوەی style.css بە index.html کۆدی خوارەوە بەکار دەبرێت لە بەشی head،

<link href="style.css" rel="stylesheet" type="text/css">

ئەنجامی کۆتایی index.html بە بەستەرکراویی بۆ style.css،

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>پەڕەیەکی HTML</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>هیلاکی ڕه‌نجێکم که‌ ڕه‌نجی من نییه‌<br />
  دانیشتووی خاکێکم که‌ خاکی من نییه‌<br />
  ناسراوی ناوێکم که‌ ناوی من نییه‌<br />
  گریاوی ژانێکم که‌ ژانی من نییه‌<br />
  زاده‌ی له‌ززه‌تێکم، له‌ززه‌تی من نییه‌<br />
  به‌ مه‌رگێکیش ده‌مرم که‌ مه‌رگی من نیی
</p>
</body>
</html>

هەر ٣ شێوازی سەرەوە هەمان ئەنجام درووست دەکەن کاتێک لە وێبگەڕدا دەبینرێن، بەڵام لە بواری داڕشتن و بەڕێوەبردندا جیاوازی زۆریان هەیە. لە سەرەوە ئاماژەمان بە Inline CSS داوە و بۆچی بەکار نەبرێت.

کاتێک Internal CSS بەکار دەبرێت کۆدەکانی CSS کاریگەر دەبن تەنیا لە نێو ئەو پەڕەی کە تێیدا نووسراون، لە ئەم کاتەدا تەنیا index.html ڕەنگی سوور دەدات بە دەقە نووسراوەکان، ئەگەر پەڕەیەکی دیکە درووست بکەین ئەو کات هەمان ڕەنگ لە خۆ ناگرێت، پێویست دەکات هەمان کۆدی CSS لە پەڕەی نوێدا بنووسرێنەوە. لە خۆیدا کاتی زۆری پێویست دەبێت بۆ دووبارە و سێبارە نووسینەوەی هەمان کۆد، جگە لەوەش بەڕێوەبردنی داهاتوویی زۆر دژوار دەکات.

ئەگەر لە ماڵپەڕەکەت ١٠٠ پەڕەی جیاوازت هەبێت و بتەوێت ڕەنگی نووسینێک لە نێو هەموو ١٠٠ پەڕە بگۆڕیت و Internal CSS ـت بەکار بردبێت، پێویست دەکات دەستکاری هەموو پەڕەکان یەک بە یەک بکەیت.

شێوازی باشتر و درووست تر لە هەردوو شێوازی Inline و Internal، دەمێنێتەوە سەر External CSS. کە هەموو کێشەکانی شێوازی یەکەم و دووەم چارەسەر دەکات، لەوەش زۆرتر دەتوانرێت پەیوەست بکرێت بە پەڕگەی دیکەی CSS بەبێ پێویست کردن بە دەستکاریکردنی پەڕەکانی HTML. لە درێژەی ئەم بابەتە زۆرتر ئاماژەی پێدراوە.

چۆنیەتی نووسینی یاسا/مەرج/فرمانەکانی CSS

لە درێژەی ئەم بابەتەدا وشەی مەرج بەکار دەبەم لە بۆ پێناسەکردنی هەر Rule ـێکی CSS.
نووسینی مەرج لە CSS بە شێوازێکی دیاریکراو جێبەجێ دەکرێت، نووسینی کۆدەکانی CSS لە خۆیدا بە چەند شێوازێک جێبەجێ دەکرێت، لە ئەم بابەتەدا تەنیا شێوازی ستاندارد دەخەمە ڕوو.

لە سەرەوە مەرجێکمان نووسیووە بۆ گۆڕینی ڕەنگی دەقەکانی نێو پاراگراف بۆ ڕەنگی سوور و بە شێوازی خوارەوە نووسراوە.

هەر مەرجێکی CSS لانیکەم لە یەک هەڵبژاردە Selector، یەک تایبەتمەندی Property و یەک نرخ Value پێکدێت.

لە وێنەی سەرەوە پێکهاتەکان ڕوون و دیارن، ئەوە بنەمای نووسینی هەر مەرجێکە لە CSS، دەتوانرێت زۆرتر پەرەی پێبدرێت و قووڵتر بکرێت.

هەر هەڵبژاردەیەک کۆمەڵێک تایبەتمەندی هەیە کە دەکرێت بە CSS گۆڕانکارییان بە سەردا بهێنرێت، بۆ نموونە دەق Text تایبەتمەندی وەک قەبارە، ڕەنگ، شوێنی دەرکەوتن، شێوازی دەرکەوتن، پانی، بەرزی و دەیان تایبەتمەندی دیکەی هەیە و هەموویان بە CSS دەگۆڕدرێن. ئەگەر بمانەوێت جگە لە ڕەنگ گۆڕین نووسراوەی نێو p قەڵەو بکەین، بە شێوازی خوارەوە دەبێت،

p {
color: #F00;
font-weight: bold;
}

پێکهاتە، تایبەتمەندی و هتد… هەمووی لە پەڕەی پێناسەکردنی یاساکانی CSS لە ماڵپەڕی فەرمی هەیە،

http://www.w3.org/TR/CSS21/cover.html#minitoc

تێبینی: زۆرینەی پرۆگرامەکانی کۆد نووسین دەتوانن هاوکارت بن بۆ ئاسانتر نووسینی کۆدەکانی CSS، پرۆگرامەکان بە شێوەیەکی ئاسایی هەموو پێکهاتە و تایبەتمەندییەکانیان لە خۆ گرتووە و دەتوانیت بەبێ نووسینیان بەکاریان ببەیت.

ڕێکخستن بۆ نووسینی کوردی سۆرانی

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

هەموو پەڕەیەکی کوردی سۆرانی دەبێت چەند تایبەتمەندییەکی هەبێت،

١، دەستنیشان کردنی ئاستی نووسینەکان، ڕاست بۆ چەپ کردنیان بە درووستی. ئەم کارە لە CSS جێبەجێ دەبێت بە زۆرکردنی تایبەتمەندی direction بۆ پەڕە و text-align بۆ دەقەکان. ئەو تایبەتمەندییانە لەسەر تاگی body دەنووسرێن چوونکە گشتیی و هەموو بوارەکانی ماڵپەڕ دەگرنەوە. نموونە،

body {
text-align: right;
direction: rtl;
}

٢، دەستنیشان کردنی utf-8 وەک شێوازی پیشاندانی نووسینەکان لە وێبگەڕدا. لە نموونە کۆدی پەڕەی index.html لە سەرەوە ئاماژەی پێدراوە.

٣، هەروەها ڕاست بۆ چەپ کردنی title بۆ درووست پیشاندانی سەردێڕی پەڕەکان لە کاتی هەبوونی نووسراوەی لاتینی و سۆرانی لە هەمان سەردێڕدا. بۆ نموونە ئەگەر سەردێڕی پەڕە لە داڕشتنی پێوه‌كراوی App Shortcut بۆ وێبگه‌ڕی Google Chrome پێکهاتبێت، لە وێبگەڕدا وەک وێنەی خوارەوە دەردەکەوێت.

چارەسەرکردنی کێشەی سەرەوە پێویستی بە دانانی کۆدێکی یونیکۆد هەیە لە پێش دەقەکە بۆ سەپاندنی یاسای ڕاست بۆ چەپ بەسەر وێبگەڕدا.

واتە کۆدی

&#x202B;

پێش دەقی سەردێڕ زۆر دەکرێت.

بە جێبەجێکردنی هەنگاوەکانی سەرەوە، پەڕە و هەموو پێکهاتەکانی بە دەقەوە بە شێوازی درووست دەردەکەون و کار دەکەن.

پێناسکردنی پەڕگەی CSS وەک پەڕگەی UTF-8

لە وەشانی ٣ بە تایبەت بەکاربردنی پێناسەری charset بەربڵاوتر بووە، پێناسکردنی charset بۆ نموونە بە utf-8 وێبگەڕ ئاگادار دەکاتەوە کە پەڕگەی ناوبراو لەسەر بنەماکانی یونیکۆد نووسراوە و ئەگەر لە شوێنێک پیتی یونیکۆد بەکار برابێت بە درووستی دەیناسێتەوە. لە هەمان کاتدا ئەوە دەگەیەنێت کە دەتوانین بە کوردی یونیکۆد مەرجەکانی CSS بنووسین، بۆ نموونە

.ڕەنگ {
color: #000000;
}

بە درووستی کار دەکات. بەڵام بەکاربردنی کارێکی باش نییە، لەوانەیە لە هەموو وێبگەڕەکان بە هەمان و درووست شێوە پاڵپشتی لێنەکرێت، بۆ درووست نەبوونی کێشەی پەیوەندیدار تەنیا پیتی ستانداردی لاتینی بەکار ببە لە پێناسکردنی مەرجەکانی CSS.

بۆ پێناسکردنی پەڕگەیەکی CSS وەک utf-8، پێناسەری خوارەوە لە سەرەوەی پەڕگە لە پێش هەموو کۆدەکانی دیکە دادەنرێت،

@charset "utf-8";

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

Class و ID

بە بەکاربردنی Class یان ID دەتوانین مەرجەکانی CSS لە هەر شوێنێک بەکار ببەین کە تاگی بنەڕەتی HTML ـیان نییە. کاتێک ڕەنگی دەقی نێو تاگی <p> ـمان گۆڕی بۆ ڕەنگی سوور، ڕەنگی هەموو دێڕەکان گۆڕدران، ئەگەر پێویست بکات ڕەنگی یەکێک لە ئەو دێڕانە جیاواز بێت دەبێت بە Class یان ID پێناسی بکەین بۆ ئەوەی لە نێو style.css بتوانین مەرجەکانی تایبەت بە ئەو پێکهاتە/هەڵبژاردەیە بنووسین.

جیاوازی نێوان Class و ID، بە شێوەیەکی گشتیی لە بەکارهێنانی ئاسایی Class زۆرتر لە ID بەکار دەبرێت، زۆر جارێک ID بە هیچ شێوەیەک لە پرۆژەکاندا بەکار نابرێت، چوونکە Class هەمان کاری ID جێبەجێ دەکات.

لە ڕوانگەی کۆد نووسینەوە ID نرخێکی گەورەتری هەیە لە نێوان کۆدەکان لە بەراورد لەگەڵ Class.

<span id="reng" class="rengeki-dike"> ناسراوی ناوێکم که‌ ناوی من نییه‌</span><br />

مەرجەکان لە CSS،

.rengeki-dike {
color: #000000;
}
#reng {
color: #FF9933;
}

کاتێک مەرجەکان دەسەپێندرێن بەسەر دەقەکەدا ڕەنگی تایبەت بە #reng دەردەکەوێت، چوونکە وێبگەڕ نرخی ID بە گرینگتر دەژمێرێت.

تێبینی: بۆ نووسینی Class لە CSS بە نوختە دەست پێدەکات .rengeki-dike و ID بە # دەست پێدەکات #reng.

پێشنیار: Class بەکار ببە بۆ ڕوونەدانی کێشەی دەسەڵاتی مەرجەکان، هیچ هۆکارێکی گرینگ نییە بۆ بەکاربردنی ID ئەگەر بەکاربردنی مەرج و پێویست نەبێت لە پرۆژەکەت.

سنوور Border

دانانی سنوور بۆ پێکهاتەیەک یان بەشێک لە پەڕەیەکی HTML کردارێکی زۆر باوە، لەگەڵ هاتنی CSS3 هەندێک تایبەتمەندیی نوێ بۆ سنوور زۆر کراوە کە کۆمەڵێک کاری پێشووی ئاسان کردوەتەوە. لە نموونەی داهاتوو سنوورێک بۆ پێکهاتەی p درووست دەکەین و لە درێژەی ڕوونکردنەوەکە تایبەتمەندیی وەک چەماوەیی و بۆ درووست دەکەین.

وەک لە ناوی ڕوونە بۆ دانانی سنوور تایبەتمەندی border بەکار دەبەین،

p {
color: #F00;
font-weight: bold;
border: 1px solid #999;
}

تایبەتمەندی سەرەوە سنوورێکی یەک ڕەنگ و بەردەوام بە چوارلای p درووست دەکات بە ڕەنگی #999 هەروەها پانیی هێڵی سنوورەکە ١ پیکسڵ دەبێت. لە وێبگەڕدا بە شێوازی خوارەوە دەردەکەوێت.

تایبەتمەندییەک کە لەگەڵ بەربڵاوبوونی CSS3 بۆ سنوور زۆر بەکاردەبرێت، چەماندنەوەی گۆشەکانە کە پێش CSS پێویستی دەکرد بە وێنە درووست کرابا، لە CSS3 دەتوانین تایبەتمەندی border-radius بەکار ببەین بۆ وەدەستهێنانی هەمان کاریگەریی.

لە وێنەی سەرەوە بە padding ١٠ پیسکڵ بۆشاییمان درووست کردووە لە نێوان قەراغی چوارچێوە و دەق کە خوێندنەوەی دەقەکە ئاسانتر دەکاتەوە. لە هەمان کاتدا بە بەکاربردنی border-radius لە هەر گۆشەیەک ١٠ پیسکڵ چەماوەتەوە و گۆشەیەکی نەرمتری درووستکردوە لە باتی گۆشەی تیژ.

تێبینی: بۆ بازنە درووستکردن بە CSS دەتوانرێت هەمان border-radius بەکار ببرێت، بۆ درووستکردنی بازنەیەکی تەواو مەرجە لە چوارگۆشەیەکی یەکسان دەست پێبکرێت، بۆ نموونە ئەگەر چواگۆشەیەکمان هەبێت بە قەبارەی ٢٠٠ پیکسڵ پان و ٢٠٠ پیکسڵ بەزر، نرخی border-radius دەگۆڕین بۆ 50% و بازنەکە پێکدەهێنرێت.

سێبەر Shadow – box-shadow

درووستکردنی سێبەر بە بەکاربردنی CSS3 زۆر ئاسانتر کراوەتەوە و چیتر پێویست بە وێنە ناکات بۆ درووستکردنی کاریگەریی سێبەر، تایبەتمەندی box-shadow کردارەکە جێبەجێ دەکات.

وەک لە وێنەی سەرەوە ڕوونە box-shadow چەند نرخێک لە خۆ دەگرێت، یەکەم نرخی بەهێزیی سێبەرە لەسەر ئاستی x و دووەم نرخی بەهێزی سێبەرە لەسەر ئاستی y. نرخی سێیەم پڕ ڕەنگی سێبەرەکە دەست نیشان دەکات، کەمکردنەوەی نرخی سێیەم سێبەرێکی تیژتر و پڕ ڕەنگتر درووست دەکات و زۆرکردنی سێبەرەکە بڵاوتر دەکاتەوە و بەو شێوەیەش کەم ڕەنگتر دەبێت. نرخی چوارەم هەڵبژاردنی ڕەنگە.

تێبینی: تایبەتمەندی box-shadow نرخی زۆرتری هەیە.

دەق Text

دەق گرینگترین ناوەڕۆک و پێکهاتەی هەر پەڕەیەکە، CSS کۆمەڵێک تایبەتمەندی زۆری هەیە بۆ ڕێکخستن، جێبەجێ کردن و زۆر کرداری دیکەی پەیوەندیدار بە دەق، لە نموونەی داهاتوو بە بەکاربردنی هەندێک لە تایبەتمەندییەکانی دەق نووسراوەی سەرەوەمان دەستکاری دەکەین، قەبارەی نووسراوەکان دەگۆڕین، فۆنت دەگۆڕین، بۆشایی نێوان دێڕەکان زۆرتر دەکەین و نووسینەکان لە نێوەڕاستی چوارچێوەکە جێگیر دەکەین.

p {
box-shadow: 5px 20px 10px #999999;
padding: 10px;
border-radius: 10px;
color: #FF0000;
font-weight: bold;
border: 1px solid #999999;
font-family: Tahoma;
font-size: 10pt;
line-height: 15pt;
text-align: center;
}

ئەگەر بمانەوێت ڕەنگی تەنیا یەک دێڕ لە نووسینەکان بگۆڕین بە تاگی <span> دەپێچرێتەوە.

<span class="rengeki-dike"> ناسراوی ناوێکم که‌ ناوی من نییه‌</span><br />

پاشان تاگی <span> بە Class ـێک پەیوەست دەکەین بۆ ئەوەی بتوانین تەنیا ڕەنگی ئەو <span> ـە بگۆڕێن.

تێبینی: دەتوانیت هەمان Class دووبارە بەکار ببەیتەوە بۆ گۆڕینی ڕەنگی دەقی دیکە. دواتر ئەگەر ویستت ڕەنگی هەموو دەقەکان لە هەموو شوێنێک بگۆڕیت بۆ ڕەنگێکی دیکە، تەنیا دەستکاری .rengeki-dike دەکەیت لە نێو پەڕگەی style.css.

وێنە Image

تاگی img کە بەکار دەبرێت بۆ دانانی وێنە لە نێو پەڕەیەکی وێب تاگێکی بنەڕەتییە کە CSS دەتوانێت ڕاستەوخۆ کاریگەری لەسەر دابنێت.

وێنەیەک لە نێو پەڕگەی index.html بە ناوی webchin-icon.png،

<img src="webchin-icon.png" alt="ئایکۆنی وێبچن" />

وێنەی سەرەوە گەورەیە و لەگەڵ پێکهاتەکانی دیکەی پەڕەکە درووست دەرناکەوێت.

چەند گۆڕانکارییەک لەسەر وێنەی سەرەوە جێبەجێ دەکەین بۆ باشتر گونجاندنی، بچووک کردنەوە، دانانی لە بەشی چەپی پەڕە بەڵام لە نێو هەمان چوارچێوە کە دەقەکەی لێ نووسراوە. گۆشەکانی نەرم دەکەین کە لەگەڵ چوارچێوەی دەوروبەری بگونجێت، border-radius بەکار دەبەین.

img{
float: left;
border-radius: 10px;
width: 100px;
height: 100px;
}

تاگی گشتیی img بەکار دەبەین کە هەموو وێنەکانی نێو پەڕە دەگرێتەوە.

float بۆ دانانی وێنە لە چەپ یان ڕاست. border-radius بۆ نەرمکردنی گۆشەکانی. هەروەها دیاریکردنی پانی بە width و بەرزیی بە height، تێبینی ئەوە بکە دەبێت نرخی پانی و بەرزی بە ژمارە بنووسرێت و لە پاش ژمارەکە بە px کۆتایی پێ بهێنرێت چوونکە وێنە بە پیکسڵ پێوانە دەکرێت.

بۆ بچووکردنەوەی تەنیا وێنەی سەرەوە، پێویست دەکات بە ID یان Class هەڵببژێردرێت و دواتر بە CSS مەرج بۆ ئەو Class یان ID ـە دەنووسیت.

تێبینی: بچووک کردنەوەی وێنە بە CSS شێوازێکی باش نییە بۆ بچووک کردنەوە، CSS تەنیا وێنەکە بۆ دەرخستن بچووک دەکاتەوە، قەبارەی بنەڕەیی وەک خۆی دەمێنێتەوە و بە بچووک کردنەوەی پانی و بەرزیی بە CSS قەبارەی بنەڕەتیی وێنەکە بە هیچ شێوەیەک گۆڕانکاری بەسەر ناهێنرێت. تا دەتوانیت وەشانی جیاواز بۆ قەبارە جیاوازەکانی وێنەکانت درووست بکە کە پێویست نەکات بە CSS قەبارەیان بگۆڕیت.

بەستەر Link

بە هەمان شێوازی دەق و وێنە بەستەر کۆمەڵێک تایبەتمەندی هەیە لە CSS کە زۆر کارێکی دیکە ئاسان دەکەنەوە، بەتایبەت بە بەکاربردنی هەندێک تایبەتمەندی پێشکەوتوو.

<a href="http://www.webchin.org" title="وێبچن"><h1>وێبچن</h1></a>
<a href="http://www.webchin.org/meko" title="مەکۆکانی وێبچن"><h1>مەکۆکانی وێبچن</h1></a>

کۆدەکانی سەرەوە دوو بەستەر درووست دەکەن، لە هەنگاوەکانی داهاتوو چەند گۆرانکارییەک جێبەجێ دەکەین، گۆڕینی ڕەنگی بەستەرەکان، گۆڕینی ڕەنگی بەستەر کاتێک دەستنیشانکەری مشکی کۆمپیوتەر ببرێتە سەریان و هەروەها ڕەنگێکی دیکەیان هەبێت پاش ئەوەی سەردان کران. وەک تاگی img تاگی a بۆ درووستکردنی بەستەر دەتوانرێت ڕاستەوخۆ بە CSS کۆنترۆڵ بکرێت.

a {
color: #FF9900;
text-decoration: none;
}

تاگی a بە تەنیا بۆ گۆڕینی ڕەنگی ناوی بەستەر و هەروەها سڕینەوەی هێڵی ژێر بەستەر.

a:hover {
color: #800000;
text-decoration: underline;
}

a:hover بۆ گۆڕینی تایبەتمەندییەکانی بەستەر لە کاتی هەبوونی دەستنیشانکەری مشکی کۆمپیوتەر لەسەر بەستەر.

بۆ گۆڕینی ڕەنگی بەستەر پاش ئەوەی بەکارهێنەر کرتەی لێکرد، ئاستی a:visited بەکار دەبرێت،

a:visited {
color: #0000FF;
text-decoration: none;
}

جگە لە گۆڕینی ڕەنگ و تایبەتمەندی بنەڕەتیی بەستەر، دەتوانرێت هەندێک گۆڕانکاری دیکەی وردتر جێبەجێ بکرێت، بۆ نموونە لە هەر شوێنێک کە بەستەر کراوە بۆ www.webchin.org/meko ڕەنگی ناوی بەستەرەکە بگۆڕدرێت بۆ ڕەنگێکی دیکە.

a[href*="www.webchin.org/meko"] {
color: #339933;
}

بە بەکاربردنی تاگی a و دواتر پێناسکردنی شێوازی بەستەر کرداری سەرەوە جێبەجێ دەکرێت بەبێ ئەوەی Class یان ID بەکار ببرێت.

زانیاری زۆرتر: http://www.w3.org/TR/CSS2/selector.html#matching-attrs

ستوون Column

درووستکردنی ستوون لە وەشانی سێیەمی CSS زۆر ئاسان کراوەتەوە، بۆ دابەشکردنی دەقی نموونە بۆ ٢ ستوون دەتوانین تایبەتمەندی column بەکار ببەین، بۆ تایبەتمەندی ناوبراو دەتوانرێت ٢ نرخ بنووسرێت، نرخێک بۆ دەستنیشان کردنی ژمارەی ستوونەکان count کە درووست بکرێت، نرخی دیکە بۆ دەستنیشان کردنی پانیی ستوونەکان width.

column-count:2;

فرمانی سەرەوە دەقی نێو p دابەش دەکات بە دوو ستوون.

تێبینی: بۆ بەکاربردنی تایبەتمەندی column و درووست دەرکەوتنی لە وێبگەڕەکانی وەک Google Chrome و Mozilla FireFox پێویست بە نووسینی پێشناوی هەردوو webkit و moz دەکات، جوونکە بە شێوەیەکی کۆتایی لە وێبگەڕەکاندا پاڵپشتی لێنەکراوە. تا کاتی نووسینی ئەم بابەتە وێبگەڕەکانی Opera و Internet Explorer 10 پاڵپشتی دەکەن بەبێ بەکاربردنی پێشناو. (لە بەشی داهاتوو سەبارەت بە Prefix ـەکانی CSS بخوێنەوە)

واتە بۆ ئەوەی لە هەموو وێبگەڕەکاندا کار بکات، دەبێت کۆدی خوارەوە وەک کۆدی کۆتایی لە نێو پرۆژەکەت بەکار ببەیت.

-webkit-column-count:2;
-moz-column-count:2;
column-count:2;

پێشناو Prefix

مەبەست لە وشەی پێشناو ئەو وشەیە کە پێش ناوی مەرجی CSS دەنووسرێت، لە نموونەی سەرەوە -webkit- پێشناوێکە بۆ مەرجەکە. لە پەیوەندی لەگەڵ CSS3 پێشناوەکان بەکار دەبرێن بۆ پێناسکردنی تایبەتمەندییەک بۆ وێبگەڕێکی دیاریکراو.

نموونە: تا کاتی نووسینی ئەم بابەت وێبگەڕی Google Chrome تایبەتمەندی column ناناسێتەوە و تەنیا بە نووسینی colmn-count هیچ گۆڕانکارییەک لە وێبگەڕدا بەدی ناکرێت، هۆکاری ئەوەیە کە Google Chrome بۆ تاقیکردنەوەی column پێشناوی –webkit- ـیان بەکار بردووە بۆ ئەوەی وێبداڕێژان بزان کە تایبەتمەندی ناوبراو لەوانەیە کێشەی هەبێت لە وێبگەڕدا. کاتێک هەموو لایەنەکانی بە تەواوی پاڵپشتی کران و لە وێبگەڕەکەدا بە درووستی و بێ کێشە دەرکەوت، لە کۆتاییدا پێشناو دەسڕنەوە و تەنیا ناوی بنەڕەتیی بەکار دەبەن.

لە ماڵپەڕی Can I Use It دەتوانیت ببینیت چ تایبەتمەندییەک پێویستی بە بەکاربردنی پێشناو هەیە و لە چ وەشانێکی وێبگەڕەکان.

http://caniuse.com/#search=column-count

ئەگەر تایبەتمەندییەکی وەک column هەیە کە پێویستی بە نووسینی پێشناوەکان هەیە، دەتوانیت بە بەکاربردنی ماڵپەڕێکی وەک Prefixr یان پێوەکراوەکەیان بۆ پرۆگرامەکانی وەک Notepad++ ئەو پێشناوانە بە شێوەیەکی خۆکارانە درووست بکەیت.

http://prefixr.com

@font-face

تایبەتمەندییەکی دیکەی CSS3 کە کۆمەڵێک کێشەی گەورە و چەند ساڵانەی چارەسەر کردووە @font-face ـە. زانیاری زۆرتر سەبارەت بە تایبەتمەندی ناوبراو لە بەستەری خوارەوە نووسراوە،

http://www.webchin.org/index.php?besh=kurdish-web-fonts

زانیاری کۆن و نوێی CSS هەموو کات لە بەستەری خوارەوە هەیە،

http://www.w3.org/Style/CSS

دەتوانیت بە کرتە کردن لە بەستەری خوارەوە بابەتی سەرەوە بە فۆرماتی PDF دابگریت بۆ بەکارهێنانی دەرهێڵ یان چاپکردن. (قەبارە ١،١٣ مێگابایت)

http://www.webchin.org/v3-images/babet/ … g-2013.pdf

کۆدە نووسراوەکان لە ئەم بابەتە وەک نموونە بۆ تاقیکردنەوە لە بەستەری خوارەوە هەیە بۆ داگرتن. (قەبارە ٩٧٣ بایت)

http://www.webchin.org/v3-images/babet/ … -files.zip

ئەم نووسراوەیە دواترین جار 2013-03-26 نوێکراوەتەوە.

سه‌رجاوه‌:webchin.org