ناو یان ئیمیل:   
ووشه‌ی نهێنی:   

[-]
دواین 15 بابه‌ته‌كان
نمونه‌ی شێل و داونلۆد کردنی جۆره‌کانی
نووسه‌ری بابه‌ت:ArYaN-22 دواترین وه‌لام:ArYaN-22 ژماره‌ی وه‌لامه‌كان:23 جاری بینراو:275 كات:ئه‌مرۆ
کارەگرنگەکانی فەیسبوک (بەشی ١)
نووسه‌ری بابه‌ت:ArYaN-22 دواترین وه‌لام:ArYaN-22 ژماره‌ی وه‌لامه‌كان:16 جاری بینراو:3213 كات:ئه‌مرۆ
دروست كردنى سايت ززززززززززززور ئاسان
نووسه‌ری بابه‌ت:ArYaN-22 دواترین وه‌لام:ArYaN-22 ژماره‌ی وه‌لامه‌كان:26 جاری بینراو:5729 كات:ئه‌مرۆ
تكاية هةر برسياريكت هةية لةسةر FB ليرة بيكة
نووسه‌ری بابه‌ت:ArYaN-22 دواترین وه‌لام:ArYaN-22 ژماره‌ی وه‌لامه‌كان:691 جاری بینراو:255856 كات:ئه‌مرۆ
تكایه‌ یارمه‌تی
نووسه‌ری بابه‌ت:avevan دواترین وه‌لام:Hawkar sh ژماره‌ی وه‌لامه‌كان:7 جاری بینراو:47 كات:دوێنێ
ئەوەی بتوانێت فێری ئەمەم بکات خەڵاتی دەکەم
نووسه‌ری بابه‌ت:twana gardi دواترین وه‌لام:mazhar apo ژماره‌ی وه‌لامه‌كان:10 جاری بینراو:316 كات:دوێنێ
چيت به‌ خه‌ياڵدا دێ داوايبكه‌ يان بي پرسه‌ هه‌رچي بێ .!!!
نووسه‌ری بابه‌ت:Ł33Ŧ Ħ4X∅R دواترین وه‌لام:Harun Harki ژماره‌ی وه‌لامه‌كان:162 جاری بینراو:52230 كات:08-23-2019
ئایا ئەتوانی راوتەری فایبەر ئۆپتیک بگۆردرێت بە مەبەستی بەهێزکردن
نووسه‌ری بابه‌ت:xXZER0Xx دواترین وه‌لام:Mr Karol ژماره‌ی وه‌لامه‌كان:1 جاری بینراو:96 كات:08-23-2019
ڕەمزی فیسبووکم بیرچووە تکایە یارمەتی
نووسه‌ری بابه‌ت:Abdulla Mohammed دواترین وه‌لام:Mr Karol ژماره‌ی وه‌لامه‌كان:2 جاری بینراو:8 كات:08-23-2019
به‌ده‌ست هێنانی UC بۆ PUBG و ئه‌ڵماسی Free Fire[ئه‌ندروید و ئایفون]نوێ
نووسه‌ری بابه‌ت:Araz Ibrahim دواترین وه‌لام:Araz Ibrahim ژماره‌ی وه‌لامه‌كان:9 جاری بینراو:942 كات:08-22-2019
به‌ده‌ست هێنانی پاره‌|ناردنی بۆFastPay-Zain-AsiaHawala-Bitcoinورگرتنی به‌كاش
نووسه‌ری بابه‌ت:Araz Ibrahim دواترین وه‌لام:Araz Ibrahim ژماره‌ی وه‌لامه‌كان:11 جاری بینراو:1095 كات:08-22-2019
چیت بەخەیاڵدادێت بیڵێ دەربارەی فەیس بووک❤
نووسه‌ری بابه‌ت:balen.halabjay.69 دواترین وه‌لام:birhatzaxoy ژماره‌ی وه‌لامه‌كان:4 جاری بینراو:488 كات:08-21-2019
ایمیل بومبا چیه
نووسه‌ری بابه‌ت:bnari_safin دواترین وه‌لام:bnari_safin ژماره‌ی وه‌لامه‌كان:0 جاری بینراو:15 كات:08-20-2019
ھاوکاری لەسەر بلۆک کردنی وایفا
نووسه‌ری بابه‌ت:rawand_hacked دواترین وه‌لام:Mr Karol ژماره‌ی وه‌لامه‌كان:1 جاری بینراو:503 كات:08-20-2019
WP Mass Pass Changer Via Config - PHP Script
نووسه‌ری بابه‌ت:LulzSec Kurdistan دواترین وه‌لام:Mr Karol ژماره‌ی وه‌لامه‌كان:1 جاری بینراو:36 كات:08-20-2019


هه‌لبژاردنی پله‌
  • 1 ده‌نه‌گه‌كان - 5 كۆی گشتی
  • 1
  • 2
  • 3
  • 4
  • 5
سەرەتایەک لەسەر زمانى CSS + کتێب
#1
Smile 
[وینه‌: 5440941c94980.png]
سڵاو هاوڕێیان

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

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

دڵخۆشم، چونکە وێنەکان چیتر هەتا یانە بمێنێ ئەوانیش دەمێنن

بەناوى خودا دەست پێ دەکەین

پێشەکى
css بەزمانى شێوازى پەڕە ناسراوە کە یەکێکە لەو زمانانەى زیاتر بۆ جوانکارى و ڕەونەقدان بە پەڕگەکانى ماڵپەڕ تێدەئاخنرێت تا لەڕێگەیەوە هەرچی کردار و فەرمانەکانى نێو پەڕەکانى شێوازى جوان وەربگرێت، ئەم زمانە لەلایەن Håkon Wium Lieەوە لەساڵى 1994 درووستکرا  کە ئەوکات لە کۆمپانیای Opera کارى دەکرد، پاشان بۆ کاری ئیمەیڵ لەنێو کۆمپانیاى W3C ڕاژەکارى بۆ کراو وەشانى CSS1ى پێوە لکێنرا کە بەناوى (W3C CSS Recommendation (CSS1ەوە لەساڵى 1996دا بەتەواوەتى جێگیر بوو.

[وینه‌: 547d06210c2e9.jpg]
وێنەى هاکێن درووستکەرى زمانى css

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

[وینه‌: 547d06dc1490f.png]

کە لەڕاستیدا ئەو وێنەیە بەچەندین زمانى جوداى بوارى وێب دیزاین داڕێژراوە لەوانە (HTML + CSS + JS + JQ + PHP..etc) وەچەندانى تر کە کاری جودا دەکەن لەسەر پێگەکە، هەرکات ئێمە بمانەوێت سۆرس کۆد (سەرچاوەى کۆد)ەکانى ئەو پێگەیە ببینین، ناتوانین هەموو ئەو کۆد و زمانانەى لە درووستکردنى پەرەکەدا کراوە بەدیار بخەین چونکە بەوکارە ئێمە تەواوى زانیاریەکان دەبینین، ئەوەش کارێکى یاساغ و ڕیگەپێنەدراوە، بەڵام هاوکات دەتوانین کۆد و سکریپت و زمانە سەرەکى و سەرەتاییەکان ببینین بەئاسانى وەک (HTML + CSS + JS + JQ..etc) F12 ئەو کارە دەکات بەجوانى و کرتەى ڕاست پاشان بچۆ سەر View Page Source هەمان کار دەکات.
وێنەکەى سەرەوە CSS تێیدا کارایە، بەڵام ئەگەر ئەو جوانکارى و ڕەونەقە لابەرین واتە زمانى CSS لابەرین بەم شێوەیە گووگڵ بەدیار دەکەوێت:

[وینه‌: 547d076a1b7de.png]

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

پێناسە
CSS: Cascading Style Sheets، زمانى پێکراوى جوانکاریە بۆ جوانکردنى ماڵپەڕەکانى سەر بە ئینتەرنێت درووست کراوە، بەپێی یاسا و ڕێساى خۆى کاردەکات و هەڵە تێ دەپەڕێنێت، وە زمانێکى بازاڕى بەکار دەهێنێت بۆ یاساکانى، بۆ نموونە: background, border, size..etc.

یاسا - Rule
هەموو زمانێک لەجیهاندا یاساى تایبەت بەخۆى هەیە، کە ڕستەسازى بۆ ئەویاسایە داڕێژراوە لەلایەن درووستکەرەکانیەوە بە ئینگلیزى پێی دەگوترێت (Syntax)، لەم نێوەندەکا یاسا (Rule)ى CSS بەم شێوەیە دادەڕێژرێت:

[وینه‌: 547d08157be62.gif]

لێرە زیاتر فێربە: http://www.w3schools.com/css/css_syntax.asp
ئەو وێنەیە لەسایتى w3schools هێنامان، چونکە ئەو پێگەیە فێرکاریەو تایبەتە بە خاوەن کۆمپانیاى وەگەڕخەرى زمانەکەش، واتە css موڵکى W3Cەو لەوێش فێرکاری تێدایە.
ئەوجا دێین بنەماى یاساکان شی دەکەینەوە:
Selector: دەستنیشانکەر، واتە ئیلیمێنتێک کە یاساکەى بەسەردا جێ بەجێ دەبێت، واتە کردارى جونکارى بۆ بکەین، لێرەدا h1 ئیلیمێنتێکى htmlە دەستنیشانکراوە بۆ ئەوەى ڕستەسازیەکى cssى بەسەردا جێ بەجێ بکات، لەخوارەوە باشتر لە selector تێ دەگەین.

Selector
کاتێک دەمانەوێت ڕستەیەکى css بنووسین دەبێت پێش ئەوە کردارێک یاخود فەرمانێکى جێبەجێکارى دەستنیشان بکەین بۆ ئەوەى ئەو ڕستەیەى کە cssەکەى پێ دەناسێنین بناسێت و لەسەر ئەو دەستنیشانکراوە کردارەکان جێ بەجێ بکاتن، وە سەلێکتەرەکانیش دەکرێت بەچەند بەشێکەوە:

+ Element Selector: مەبەست لێێ ئیلیمێنتێکى زمانى htmlە کە ڕستەسازى cssى بەسەردا جێ بەجێ دەکرێتن، بۆ نموونە:
كۆد:
HTML: <span>h4kurd</span>
CSS: span {color:red;}
بەهۆى css ڕەنگى نووسینى ناو ئیلیمێنتەکە دەکات بە سوور – دەستنیشانکراوەکەش spanى htmlە.

+ id Selector: لێرەدا ID مەبەست لێی دەستنیشانکراوەى سەرەکى پێدەرى سەرتۆپە، کە دەتوانین بەهۆى idیەوە ناوەڕۆک بەبەشە لاوەکیان بناسێنین.
Id لە کاتى ڕستەسازیدا بە هاش # دەناسرێتەوە، بۆ نموونە:
كۆد:
#main {text-align: center; color: black;}

+ Class Selector: پۆلەکانى نێوەند کاتێک لەنێو ئیلیمێنتەکانى htmlدا پۆلێک هەبوون کە پەرتەوازە و لاڕێ بوون، دەتوانین بە کڵاس ئەوان کۆ بکەینەوە، بۆ نموونە کڵاسێک پێک دەهێنین بۆ چەند دانە تاگێکى پەرەگراف، یاخود تاکە پەرەگرافێک:
Class بە نوکتە • لەڕستەسازیدا دەناسرێتەوە، بۆ نموونە:
كۆد:
.name {background-color: lightblue;}

+ Grouping Selectors: دەستنیشانکراوەکان لە cssدا ڕیگەپێدراوە کە بۆ چەند دانە فەرمانێک بەشێوەى گرووپ ڕستەسازى و یاساکان ئەنجامبدرێتن، بۆ نموونە دەمانەوێت تاگەکانى (p + h2) هەمان جوانکاریان بۆ بکەین، كە بۆ ئەو مەبەستە بە فاریزە ، جودایان دەکەینەوە:
كۆد:
p, h2 {font-family: verdana; text-align: center;}

+ Universal Selector: هەروەها ئەم دەستنیشانکەرە بەشێوەیەکى گشتى تێکڕای ئیلیمێنتەکان دەگرێتەوە، بە * دەناسرێتەوە:
هەموو پەرەکە ڕەنگى نووسینەکەى ڕەش بێت:
كۆد:
*{color: black;}

ئەوانەى لەسەرەوە باسکران بەشێوەکى گشتى بوو، لێرەش دەتوانى دەستنیشانکەرى دیکە بناسیت: http://www.sitepoint.com/web-foundations/css-selectors

تایبەتمەندى Property
تایبەتمەندى، مەبەست لە تایبەتمەندى پێدەرە، کە لەنێو cssدا ناسرابن، زۆر جۆرو شێوە تایبەتمەندى هەن، لەوانە (color, font, size, border, background, margin, padding..etc) کەلەدواییدا یەکە یەکە باسی زۆربەیان دەکەین.

نرخ Value
نرخ، مەبەست لێی نرخ دان – بەهادانە بەو تایبەتمەندیەى تۆ لەپێشتر ناسێنراوە، نرخەکانیش یان بە نووسین String دەبێت یاخود بە ژمارە بەیانیەکان.
كۆد:
border: none;
{Property: Value;}
border: 1px;
{Property; Value;}

ڕەنگەکان Colors
لە cssدا رەنگەکان بەچەند شیوەیەک دەناسرێنەوە، لەوانە:
+ Hexadecimal colors: بەشێوەى HEX ڕەنگ دەناسێتەوە لەسەر وێبگەڕەکە و بێگومان ئەویش دەچێتە ناو کاش و لەوێشەوە بۆ CPU و لەوێشەوە بۆ گرافیک کارتەکان و لەوێشەوە بۆ مۆنیتەر، بۆ نموونە:
Green سەوز:
كۆد:
p {color: #060}
p {color: #00FF00}

+ ر.ج.ب: r: red - g: green - b: blue، ئەم پێکهاتەیە بۆ ڕەنگەکان کەدەتوانین زۆرینەى ڕەنگەکانى دیکەى لێ دروست بکەینەوە، بەسێ خانەی یاسایی دادەڕیژرێت:
تێبینى/ ڕ.ج.ب = RGB
كۆد:
p {color: rgb(0, 255, 0);}

وەکۆمەڵێ جۆر رەنگى دیکەش هەیە، لەوانە (HSL)ەکان، وە لەتەک ڕەنگەکانیش تایبەتمەندى opacityهەیە کە دەتوانین ڕەنگەکانى پێ کاڵ و تۆخ بکەینەوە:
كۆد:
p {opacity: 0.5;}

هەرەوەها بۆ ڕاددەى ڕوونى و تۆخى ڕەنگەکان جۆرى (HSLA)ش دەتوانین بەکار بخەینەوە. لێرە زیاتر فێربە: http://www.w3schools.com/cssref/css_colors_legal.asp
خودا یاربێت، لەداهاتوودا لەسەر ڕەنگەکان بابەتێک بەتێرو تەسەلی دەنووسین.

لێدوانەکان Comments
لێدوانەکان بۆ هەموو زمانێک پێویستە هەبێت، چونکە بۆ مەبەستى (بیرخستنەوە، فێرکارى..هتد) زۆر گرنگە، چونکە لێدوانەکان تەنها کاریان ئەوەیە شتێک بڵێن و شتێک دەربخەن کە تەنها لەنێوەندى داڕشتەکارى زمانەکە بەدیار دەکەوێت، واتە لەدەرەوەى زمانەکە کار ناکات و تەنها بۆ مەبەستى دەرخستنى شتێکە. لە cssدا لێدوانەکان بەدوو جۆر دەنووسرێت:
+ تەنها هێڵێک: بۆ تەنها هێڵێک دەتوانین ئەم هێمایە بەکار بهێنین:
كۆد:
/* Comment */
لەدەرەوەى یاساکەش دەتوانین بۆ تەنها هێلێک ئەم فەرمانە جێ بەجێ بکەین:
كۆد:
// Comment

+ چەند دێڕێک: بۆ چەند دێڕێک بەهەمان شێوە دەتوانین:
كۆد:
/*
Comments a
Comments b
Comments c
*/
کە وەک پێشتر ئاماژەمان پێدا لێدوانەکان تەنها لەناو زمانەکە دەبینرێن و لەدەرەوەى زمانەکە هەرچی نووسراوە بەدیار ناکەوێت لەسەر ماڵپەڕ.

جۆرەکان Types
css چەند جۆرێکى هەیە، مەبەست لەجۆرێتى ئەوە نیە لەناو خودى زمانەکە پۆلێنبەندى بکەین بۆ جۆرێتى لەیاساکانیدا، بەڵکو مەبەستمان بەستنەوە و گرێدانى cssە بە فایلى سەرەکى، جا ئەوانیش چەند جۆرێکن:
+ Inline: مەبەست لەناو هێڵى تاگەکانى HTMLە کە تێیدا لەتەک ئیلیمێنتێکى HTMLدا یاساکان دەنووسرێتەوە كە style دەیناسێنێت، بۆ نموونە:
كۆد:
<div style="text-align: center;">
HELLO CSS
</div>

+ Internal: ناوەکى، مەبەست لەوەیە لەناو خودى زمانى htmlدا زمانى cssیش لەسەرى دەناسێنێت، لەناو تاگى <head>دا ئەم جۆرە دەنووسرێتەوە، وە بەم شێوەیە دادەڕێژرێت:
كۆد:
<head>
<style typ=”text/css”>
#content{
    Font-family: arial;
    Color: blue;
}
</style>
</head>

+ External: دەرەکى، فایلێک بەپاشگرى .css درووست دەکەین و هەرچی یاسایەک هەبوو تێیدا دەنووسین، بۆ نموونە name.css ، سوودى ئەم جۆرە ئەوەیە کە بۆ فایلێکى css دەتوانین لەچەندین پەڕگەى htmlدا بانگى بکەینەوە بەڕستەیەک کەلەناو فایلى html لە تاگى <head> دەنووسرێت:
كۆد:
<head>
<link rel="stylesheet" type="text/css" href="name.css" />
</head>

[وینه‌: 547d127ca6e70.jpg]

نەوەکانى CSS
تاکو هەنوکە CSS سێ نەوەى لێ دەرچووە، کەهەریەکەیان تایبەتمەندى گرنگى پێدراوە.
+ نەوەى (CSS1): پشكى وه‌گه‌رِخستنى CSS1 له‌لایه‌ن كۆمپانیاى به‌رهه‌م هێنان و گواستنه‌وه‌ى شه‌به‌كه‌ جیهانیه‌كان (W3) بوو كه‌ بۆ یه‌كه‌مجار توانى ئه‌و زمانه‌ كه‌مه‌نده‌كێش بكات بۆ خۆى كه‌تایبه‌تمه‌ندى پێده‌ره‌كه‌ى له‌م بوارانه‌دا خۆى ده‌بینیه‌وه‌:
- نووسین (font) بۆ ووێنه‌ (جۆرى نووسین)
- رِه‌نگ (Color) بۆ ووێنه‌ (شێوه‌دان به‌رِه‌نگى پشته‌وه‌ى نووسینه‌كان –Background-color-)
- ده‌ق (Text). لێره‌دا ده‌ق توناى گواستنه‌وه‌ى ده‌بێت له‌نێوه‌ندى په‌رِگه‌كه‌دا له‌وانه‌ (ناوه‌رِاست و سه‌ره‌وه‌ و خواره‌ و رِاست و چه‌پ)
- border, padding , چوار چێوه‌ و شوێنى تاگه‌كان دیارى ده‌كه‌ن.
- تایبه‌تمه‌ندیه‌كى ترى CSS1 به‌گروپكردنى تاگه‌كانه‌. واته‌ به‌كاربه‌ر ده‌توانێت هه‌رچی تاگه‌كانى ناو HTMLهه‌یه‌ بیكات به‌ یه‌ك گروپ و یه‌ك تایبه‌تمه‌ندى پێ بدات. بۆ ووێنه‌: h1,h2,h3,h4.
+ نه‌وه‌ى (CSS2) : ئاستى دووه‌مى زمانه‌كه‌ له‌ساڵى 1998 له‌مانگى 5دا له‌لایه‌ن كۆمپانیاى (W3)ه‌وه‌. زیادكراوه‌كانى بریتین له‌ (absolute, relative, and fixed positioning of elements and z-index) و چه‌ندانى تر.
+ وەشانى (CSS3) له‌ساڵى (1999)دا له‌لایه‌ن هه‌مان كۆمپانیاى پێشتر خرایه‌ رِوو (W3) له‌مانگى 7دا. له‌سه‌ره‌تاوه‌ گۆرِانكاریه‌كان به‌باشی نه‌برابوون به‌رِێوه‌ هه‌تا له‌ساڵى 2011دا دووبار دارِشتنه‌وه‌ بۆ ئه‌م نه‌وه‌یه‌ كرا به‌ زیادكردنى 40 تایبه‌تمه‌ندى گه‌وره‌ و گرنگ. له‌وانه‌: (Opacity, transparent, ئالوگۆرِى رِه‌نگه‌كان, ناسینه‌وه‌ى براوزه‌ره‌كان و تایبه‌تمه‌ندى به‌هه‌ریه‌كه‌یان)

Browser Support
زۆرێک تایبەتمەندى css هەن کە لەبراوزەکاندا واتە وێبگەڕەکان ناکۆکیان هەیە، واتە لە وێبگەڕیکدا کاردەکات و لە یەکى دی کار ناکات، یاخود لەهەموو وێبگەڕێکدا کار دەکات، وەک نەوەکانى css1 و css2، بەڵام ئەم گرفتە تا سەر نیەو بەهۆى وەشانى نوێی وێبگەڕەوە تایبەتمەندیە نوێکەش چالاک دەکرێتن، پێشکەشکردنى هەندێک لەتایبەتمەندیەکان بۆخۆى گرنگى هەیە لەلایەن وێبگەڕەکانەوە دەبێت بەو جۆرەى کە خۆى دەیەوێت بناسرێتەوە، بۆ ووێنە:
كۆد:
-ms {IE 9}
-webkit {Chrome, Safari, Opera}
-moz {firefox}

پێویستیەکانى css
بۆ ئه‌وه‌ى بتوانین هه‌موو كۆده‌كانى CSS بنووسرێن وه‌ به‌كاربه‌ر له‌رِێیه‌وه‌ بتوانێت زانیاریه‌كان ببینێت و ده‌سكارى و گۆرِانى تێدا بكات ده‌بێت ئه‌م پێداویستیه‌ سه‌ره‌تایی و بنچینه‌یانه‌ى هه‌بێت:
1. نه‌رمه‌واڵایەك Software بۆ نووسینى كۆده‌كان وه‌كو له‌ وویندۆزدا notepad.exe وە به‌رنامه‌ى تر زۆرن كه‌پێیان ده‌وترێت (TextEditors)ه‌كان وه‌كو (Notepad++, Bluefish, VIM, Textpad, WordPad..etc) كه‌هه‌مان كارى نه‌رمه‌واڵاكان ده‌كه‌ن ئه‌وانه‌ى له‌ناو وویندۆزه‌كان به‌شێوه‌ى خودكارى وه‌گه‌رِخراون.
2. ئیدایته‌رێك بۆ رِێگه‌ خۆشكردنى نووسینى هه‌رچی كۆدێكى css وه‌ك Adobe Dreamweaver
3. وێبگەڕ یاخود ئیشپێكه‌رێكى كۆده‌كانى HTML و CSS وه‌ك:
Internet Explorer له‌وویندۆزدا و  Safari له‌ ماكه‌كاندا.

css  لەکوێ دەنووسرێت؟
هەرچەندە پێشتریش ئاماژەم پێدا بەڵام لێرە بەخێرایی پێت دەڵێم، ئێمە بۆ هەموو نموونەکان css بەجۆرى internal دەنووسین، واتە لەنیو تاگى <head> و ڕاستەوخۆ پەیوەند بە زمانى html بەهاوبەشی ئەو زمانە، بۆ ئەوەى هەموو کۆدەکان بەجوانى و بەتەواوەتى ببینین و لێی تێ بگەین، ئەمەش میتۆدى ئەو جۆرەیە:
كۆد:
<html>
<head>
    <style type="text/css">
        +CSS Rules
    </style>
</head>
<body>
    HTML Tags
</body>
</html>

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


تایبەتمەندیەکان بەشێوەى ئەلفابێتیکاڵ (A - Z)

Background
تایبەتمەندیەکى تەنها نیە و لەدەوریدا دەبێت پێوەلکاوێکى هەبێت وەک (attachment, color, image..etc)، لەکاتێکدا دەتوانین بەهۆى وەشانە نوێیەکانەوە ڕێگە بدەین بەتەنها کارى ئەوانە هەموو بکاتن، واتە دەتوانین نـرخ Valueى جوداوازى پێ بدەین ئەگەر تەنهاش بێت، بۆ نموونە:
كۆد:
<html>
<head>
<style type="text/css">
body {
background: #444 url(azhal.jpg) no-repeat center;
}
</style>
</head>
<body>
<p align="center">H4kurd {background} Property Example</p>
</body>
</html>

تێبینى/ لەبەر ئەوەى یەکەم نموونەیە هەموو کۆدەکان دەنووسینەوە، بەڵام لەمەبەدوا چیتر کۆدى html نانوسین و تۆ دەبێت تێ بگەیت لەوەى css لەکوێڕا دەنووسرێت، وە دەمانەوێت لەسەر ئەم نموونەیە با بدوێین، بۆ ئەوەى ئەوانى دیکەش زۆر بەباشی لێک بدەینەوە، بۆیە بەباشی لەم نموونەیە بڕوانە.

ئەنجامى نموونەکە:
[وینه‌: 547d17b97cfb1.png]

لە نموونەکەدا تایبەتمەندى background بەتەنها خۆیەتى و لەپاش ئەو نرخەکانى دێت، کە زۆرێک لەنرخەکانمان تێ کردووە وەک (color , image, repeat, position) ، کە بۆ کەسێک سەرەتای بێت لەزمانەکە دڵنیام ئەو هەموو تایبەتمەندیە قورس دەکەوێت لەسەرى، بەڵام ناچارین کەبەو شێوەیە نموونەکە دابڕێژین.
ئەوجا دێین نموونەکە شی دەکەینەوە:
كۆد:
body {
background: #444 url(azhal.jpg) no-repeat center;
}

body: تاگێکى htmlە و بە بۆدى (جەستە، پەیکەر) ناسراوە، کە لەناویدا زۆرینەى فەرمانەکانى جێ بەجێ دەکرێت، ئێمە بۆ ئەوەى bodyبکەین بە سەلێکتەر یاخود دەستنیشانکراوێکى css لەسەرەتاى یاساکەوە نووسیومانەتەوە، واتە ئەو یاسایە، یاخود تایبەتمەندیەکان هەموو بەسەر تاگى bodyدا جێ بەجێ دەبێت، بەمەرجێ ئەوانەى لەنێو ئەو براکێتانەدا بن {} ئەو براکێتانەش دەتوانى بەهەر جۆرێک بێت بنووسیت:
كۆد:
{
css
}
{css}
{ c s s }
css{}
css {   css}
css{css    }
..etc

پاشان background دێت کە تایبەتمەندیەکى cssەو لەسەرى دەتوانین زۆرێک نرخى جوان و ڕەونەقدار دابنێین، پێشتر لەسەرى دواین.
پاشان (نرخ، نرخەکان) دێت. ئەوەى گرنگە (url (azhal.jpg کە url مەبەست لەدیاریکردنى ئەو ڕێڕەوەیە کە وێنەکەى تێدایە، ئیمە ڕاستەوخۆ لەتەک پەڕەکەوە وێنەکەمان هەیە لەگەڵ پاشگرەکەى.
لەدوایدا سیمیکۆڵۆن دێن ; ئەمە بۆ ئەوەیە ڕاى بگەیەنین بە css و پێی بڵێین ئەم ڕستەیە هەتاکو ئێرە تەواوە و لەدواى ئەوە بۆ ئەو تایبەتمەندیە هیچ شتێکى دیکە نایەت، واتە ڕاگەیاندنى خاڵى کۆتایی ڕستەسازیەک Syntaxێــــک، لێرەدا بۆ تایبەتمەندى background کۆتا نرخ center بوو دواى ئەو هیچی دیکە نەهات و ئێمە ڕامان گەیاند کە تەواو بوو ; ، پاشان دەتوانین تایبەتەمەندیەکى دیکەشی بۆ زیادە بکەین.
لە cssدا دەتوانین چەند تایبەتمەندیەک بدەین بەسەر دەستنیشانکراوێک بۆ نموونە ئێمە چەند تایبەتمەندیەک دەنووسین بۆ پەرەگرافێک:
كۆد:
<style type="text/css">
p{
background-color: #fff;
text-align: center;
font-family: “verdana”, arial;
}
</style>
لەو نموونەیەدا ســێ تایبەتمەندیمان دانا بۆ پەرەگرافێک.

background-attachment
تایبەتمەندیەکى دیکەى cssە بۆ بەستنەوە و گرێدانى باکگراوند دەبێت، بۆ نموونە باکگراوندەکە چۆن لەگەڵ کارسەر (ماوس)ەکەدا یەک بگرێت؟ یاخود چۆن باکگراوندەکە دەچەقەێنیت و جوڵەى لێ دەبڕیت؟..هتد
كۆد:
Syntax: background-attachment: { scroll | fixed | inherit }

بەشێوەیەکى خودکارانە باکگراون ئەتاچمێنت fixedە، واتە نەگۆڕە، کاتێک نووسینێکى زۆرمان دەبێت لەناو پەڕەى ماڵپەڕەکەدا و باکگرواندێک بە css دادەنێین بۆ پشتەوەى ئەوکات ئەگەر بە ماوسەکە بێینەخوارەوەى پەڕەکە باکگراوندەکە تێ دەپەڕێنێت، واتە دیار نامێنێت.
بەڵام ئەگەر باکگراوند ئەتاچمێنت بکەین بە scroll ئەوکات لەگەڵ سکرۆڵى ماوسەکە یاخود سکرۆڵ باڕەکەدا دێت و دەچێت:
كۆد:
background-attachment: scroll;

تێبینى/ چەند نرخێک valueى دیکەش هەن بۆ باکگراوند ئەتاچمێنت وە بۆ هەموو ئەو نموونانەى لەپاشدا باسیان دەکەین، بەڵام ئێمە هەموو نرخەکان نانووسین، تەنها ئەوانە دەنووسین کە زۆر کارمان پێی دەبێت و لە ماڵپەڕەکانیشدا زۆر کاری پێ دەکەن، چونکە ئەگەر هەموو ئەو نرخ و تایبەتمەندیانە بنووسینەوە، ئەوا پێویستمان بەکاتێکى زۆر دەبێت، ئەمە ماناى ئەوە نیە کەلێی نازانین یان هەر شتێک لەو بابەتە، بەڵکو نامانەوێت بابەتەکە زۆر قورس بکەین و ئێمە لێرەدا تەنها دەرگاکە دەکەینەوە و خۆت دەتوانى پاش ئەوەى دەرگاى فێربوونت کردەوە لەهەمبەر cssدا بگەڕێیت بەدواى بابەتى زێدەتر لەسەرى و خۆت فێربکەیت، باوەڕکە ئەگەر خوێنم بووە بەئاو من 7ساڵە لەگەڵ cssو بوارى وێب دەژیم.

background-color
ووتمان ڕەنگەکان چەند داڕێژراوێکیان هەیە، لێرەدا ڕەنگى باکگراوند مەبەست تەنها ئەوەنیە تۆ پشتەوەى پەڕەکەت ڕەنگ بکەیت، مەبەست لە باکگراوند بەگشتى باکگراوندى بەشێک – شتێکە، جا ئیتر گشت بێت یان تاکە ئیلیمێنێک گرنگ نیە، گرنگ ئەوەیە تۆ سەلەێکتەرێک تایبەتمەند بکەیت، بۆ وێنە باکگراوندى وشەیەک، دێڕێک، هەموو پەڕەکە..هتد.
نموونە:
كۆد:
p{background-color: #129911;}
body{background-color: orange;}

[وینه‌: 547d1b4454935.png]

background-image
بۆ دانانى وێنە بۆ پشتەوەى بەشێک یاخود (پەڕگەکە – پەڕگەکان)ى ماڵپەڕ دەبێت، بە url شوێنى وێنەکە و پاشگرەکەى دەستنیشان دەکەیت.
نموونە:
كۆد:
<html>
<head>
<style type="text/css">
#main{
background-image: url('bg.jpg');
padding: 50px;
}
</style>
</head>
<body>
<div id="main">
<p align="center">
H4kurd {background} Property Example
</p>
</div>
</body>
</html>

نموونەکەم هەمووى نووسى بۆ ئەوەى ئاسانتربێت. وە تایبەتمەندى padding لەئێستادا لەیاد بکەن.

[وینه‌: 547d1ba839e35.png]

background-position
پۆزیشن یاخود شوێن، مەبەست لێی شوێنى دەرکەوتنى باکگراوندەکەیە، بۆ وێنە (لاکان، سەرو خوار، ناوەڕاست..هتد).
لەم نموونەیەدا وێنەیەک دەخەینە بەشى سەرەوە لاى دەستە چەپی پەڕەکەمان:
كۆد:
background-image: url(‘azhal.jpg’);
background-position: top left;

[وینه‌: 547d1c49cce8b.png]

بێگومان دەبینى چەندین وێنەى چونیەک دێتە سەر پەڕەکە، هۆکارى ئەوەش ئەوەیە کە ڕیپێت یاخود دووبارە دەبنەوە وێنەکان، چونکە قەبارەکەیان لەقەبارەى شاشەى وێبگەڕەکە کەمترە، بەڵام وێنەى سەرەکى دەچێتە بەشی سەرەوە لاى دەستەچەپ بەجوانى خۆى بەدیار دەخات، بۆ چارەسەرکردنى کێشەى دووبارەبوونەوە، سەیرى background-repeat بکە.
وە تۆ دەتوانى نرخ Valueى دیکەى پێ بدەیت بەئارەزووى خۆت بۆ ووێنە:
كۆد:
left bottom
right top
right center
right bottom
center top
..etc

background-repeat
بۆ نموونە وێنەیەک چۆن و بەچ شێوەیەک ببێت بە باکگراوند بۆ پەڕەیەکى ماڵپەڕەکەمان؟، ئایا یەک وێنەبێت لەناوەڕاستدا؟ یەک وێنە بێت بێ دووبارە بوونەوە؟ یەک وێنەى دووبارە بوو بێت بەڵام بەدایرێکتەرى x و y یان ..هتد، دووبارەبوونەوەى (وێنە – وێنەکان) گرنگە لەمەڕ گونجاندنى ئەو وێنەیەى بۆ (بەشێک – هەموو) پەڕگەکەى دادەنێین، با نموونەکەى سەرەوە تەواو بکەین:
كۆد:
background-image: url(‘azhal.jpg’);
background-position: top left;
background-repeat: no-repeat;

ئەم نرخە (no-repeat) واتە دووبارە نەبێتەوە.

[وینه‌: 547d1d9406f45.png]

ئەمەش چەند نرخێکى دیکەیە بۆ دووبارەبوونەوە:
ئاسۆیی:
repeat-x
ستوونى:
repeat-y

background-size
قەبارەى باکگراوندەکەیە، بێگومان قەبارەش بەشێکى گرنگە لە css کە بەچەندین یەکەى جودا دەپێورێت، لەوانە (point, pixel..etc)، بۆ نموونە:
كۆد:
background-size: 400px 200px;

[وینه‌: 547d1e42d6015.png]

Border
تایبەتمەندیەکى دیکەى css بریتیە لە بۆردەر کە بەچەندشێتوەیەک دەناسرێتەوە، بۆردەر واتە (سنوور، لێوار، قەراخ)، جا ئەوانە بۆ هەر شتێکى (پەڕگە-پەڕگەکان) بێت یاخود بەشێک ئیلیمێنتێکى پەڕگەکە بێت، دەبێت و کارى خۆى دەکاتن.
بۆردەر چەند لقبەندێکى دیکەى لێ دەبێتەوە، گرنگترینیان ئەوانەى لاى خوارەوەن.
border-style
شێوازى دەرکەوتنى قەراخەکان چۆن و بەچ شێوەیەک بن؟
نرخەکان (none - dotted - dashed - solid) وە هەتا دوایی. ئەو شێوانە برییتن لە (شێوەى سادە، خەت، خاڵ، هیچ) :

[وینه‌: 547d1f19418cd.png]

نموونە:
كۆد:
border-style: solid;
border-style: dotted;

[وینه‌: 547d1f554da8f.png]

دەبینى دوو جۆرە شێوازمان بەکارهێناوە، شێوازى گشتى بۆ تەواوى پەرەگرافەکە (solid)ە و ئەوەى ناو براکێتەکەش border ئەویش شێوازى (dotted)ە، کە بەم شێوەیە دادەڕێژرێت لەناو css:
كۆد:
p{
border-style: solid;
}
.b{
border-style: dotted;
}

دۆت b - .b  بەماناى Classى پیتى b دێت کە ئێمە بەو پیتە ناساندومانە وەک پۆلێکى جودا لە پەرەگرافەکە p ، بەم شێوەیە لەناو htmlدا:
كۆد:
<p align="center">
H4kurd <span class="b">{border}</span> Property Example
</p>

لاکان
بۆ لاکان دەتوانین بۆردەر بگونجێنین بۆ هەموو لایەک یاخود تەنها لایەک، یاخود چەند لایەک بەیەکەوە، بۆ نموونە بۆردەر بۆ پەرەگرافێک دەگونجێنین بۆ تەنها بەشی سەرەوە، ئەویش بەتەنها ڕەنگ کردنى ئەو بەشە:
كۆد:
border-top-color: blue;

بەشەکانى دیکە:
كۆد:
border-left
border-right
border-bottom

بۆ جیبەجیکردنى نرخێک لەسەر لاکان، دەتوانین هەموو چەشنە سینتاکسێک بەکار بهێنین، بۆ نموونە:
كۆد:
border-top-style: none;

ئەمە واتاى ئەوەیە بەشی سەرەوەى بۆردەرەکە هیچ نەبێت، واتە قەراخى نەبێت..هتد.

border-color
بێگومان ڕەنگى (قەراخێک – چەند قەراخێک – قەراخەکان) دەگرێتەوە، نموونەکانى خوارەوە سەیر بکەن:

قەراخێک:
كۆد:
border-top-color: blue;

چەند قەراخێک:
كۆد:
border-top-color: blue;
border-bottom-color: green;

قەراخەکان:
كۆد:
border-color: yellow;

نموونەى قەراخەکان:
كۆد:
p{
border-style: solid;
border-color: yellow;
}

[وینه‌: 547d216776ee0.png]

border-radius
مەبەست لەدانانى نیوەتیرەیە، واتە چەمانەوەى قەراخەکان هەتا دەگاتە نیوەتیرەى بازنە، ئەمەش کارێکى جوان و نایابە لە css3دا زیادەکراوە، نرخەکەى بە یەکەکەکان دەپێورێت بۆ نموونە پێکسڵ:
كۆد:
border-radius: 18px;

[وینه‌: 547d21c95e50d.png]

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

border-width
قەبارەى پانى قەراخەکان دیاریدەکات، یاخود لایەکى قەراخێک یاخود چەند لایەک، بۆ نموونە هەموو لاکان:
كۆد:
border-width: 10px;
p{
border-style: solid;
border-width: 10px;
}

P سەلێکتەرێکە بۆ تاگى <p> پەرەگراف، ئێمە بۆ نموونەکان زۆرکات ئەوە باکاردێنینەوە، تۆ دەتوانى هەرچی دیکەت ویست بەکارى بهێنیت بۆى.

[وینه‌: 547d222202084.png]

box-shadow
سێبەر دانان بۆ چوارچێوەى شتێک، دەتوانین بەهۆى ئەم تایبەتمەندیەوە سێبەر دابنێین بۆ ئیلیمێنتەکانى html، بەم شێوەیە:
كۆد:
box-shadow: {Horizontal} {Vertical} {Blur} {Color}

نموونە:
كۆد:
p{
box-shadow: 12px 8px 6px lightgray;
}

[وینه‌: 547d229903971.png]

cursor
شێوازى ماوسەکە چۆن دەربکەوێت کاتێک دەچینە سەر بەشێک؟

[وینه‌: 547d22d645292.gif]

كۆد:
cursor: wait;

هەندێک لە جۆرەکانى کارسەر:
auto
crosshair
default
e-resize
grab
help
move
n-resize
ne-resize
nw-resize
pointer
زياتر: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

direction
ئاڕاستەى دەرکەوتنى نووسینەکان چۆن بێت، لەڕاستەوە بۆ چەپ، یاخود لە چەپەوە بۆ ڕاست؟ ، ئەمە زۆر گرنگە بۆ زمانى کوردى و عەرەبی، چونکە دەتوانى ئاڕاستەکەى بگۆڕیت بۆ لاى ڕاست.
rtl: Right to Left
ltr: Left to Right

نموونە:
كۆد:
<html>
<head>
<style type="text/css">
.ltr{direction: ltr;}
.rtl{direction: rtl;}
</style>
</head>
<body>
<p class ="ltr">H4kurd {cursor} Property Example</p>
<p class="rtl">هاک بۆ کورد تایبەتمەندى نموونەى ئاڕاستە</p>
</body>
</html>

[وینه‌: 547d23d09f675.png]

display
پیشاندان، واتە چۆن (بەشێک – چەند بەشێک) بەدیار بکەون لەناو (پەڕگە – پەڕگەکان)دا؟، لێرەدا چەند تایبەتمەندیەک بۆ ڕستەسازى display دیاریدەکرێت بەپێی پیویستى، بۆ نموونە:
لەناو هێڵێکدا:
Inline
لەسەر ڕیڕەوى خۆى:
Block
وەک خانەى ناو خشتە:
table-cell
پێشان نادرێت:
None

کە بێگومان چەندین شێوەى دیکەى پیشاندان هەیە، ئەوەى سەرەوە تەنها بۆ تێگەیشتن و بەکارهێنانەوە بوو، وە ئەوانە زۆر بەکاردەهێنرێت لەناو پێگەکاندا...
با نموونەیەک وەربگرین:
كۆد:
p{
display: table-cell;
}

لەم نموونەیەدا، بەشیوەى خانەى ناو خشتە، هەرچی نووسراوێک هەبوو نیشان دەدات:

[وینه‌: 547d248d00f21.png]

float
واتە ڕاگواستن، بەشێک یاخود چەندبەشێک پێکەوە ڕادەگوازێتەوە بۆ لایەکى پەڕەکە، ئەمەش زۆر سوودى هەیە بۆ داڕێژەرانى ماڵپەڕ، چونکە جارى واهەیە، تۆ سایتەکەت لەچەند بەشێک پێک دێت، یاخود دەتانەوێ هەموو بابەتەکان لەماڵپەڕەکەتدا بکەونە لایەکى پەڕگەکە، ئەوکات دەبێت تایبەتمەندى ڕاگواستن float بەکاربهێنى لە css.
لەبنەڕەتدا ڕاگواستن ئەم تایبەتمەندیانەى هەیە:
left
right
initial
none

وە بۆ نموونە بەم چەشنە بەشێک یاخود چەند بەشێک دەخەینە لاى چەپی پەڕگەکە:
كۆد:
float: left;

لێرەش دەتوانى تاقی بکەیتەوە: http://www.w3schools.com/cssref/playit.asp?filename=playcss_float&preval=right
بەڵام گەر بمانەوێت ئەو (بەش – چەندین بەش – هەموو) بخەینە ناوەڕاستەوە، دەبێت تایبەتمەندى margin بەکاربهێنین، لەدوایدا باسی دەکەین.

font
بەتەنها فۆنت جۆرى نووسین و قەبارە دیاری دەکات بەهۆى نرخەکانیەوە، بۆ نموونە:
كۆد:
font: 12pt arial;

واتە 12 پۆینت قەبارەکەی بێت و پاشان جۆرى arial بێت.

font-family
جۆری نووسین دیارى دەکات یاخود خێزانى فۆنت، بەپێی ئەو تایبەتمەندیانەى خۆمان بۆى دەڕەخسێنین، بەو مەرجەى ئەو جۆرە فۆنتەى ئێمە دیارى دەکەین لەسەر کۆمپیوتەرى بەرامبەر (ئەو کەسەى ماڵپەڕەکە دەکاتەوە) هەبێت، بەڵام ئەگەر ئەو فۆنتەى ئێمە دیاریمان کردووە ئەو مەرجەى تێدا نەبوو، ئەوکات دەتوانین (هەمەچەشنەى جۆرى فۆنت) دیاری بکەین، بۆ ئەوەى ئەگەر یەکەم یاخود فۆنتى سەرەکى تێدا نەبوو، ئەوکات بێتە سەر جۆرى دووەم و بەهەمان شێوە ئەگەر جۆرى دووەمیش نەبوو بێتە سەر سێهەم وە هەتا دوایی.

تەنها جۆرێک:
كۆد:
font-family: arial;

چەند جۆرێک:
كۆد:
font-family: tahoma, arial, verdana;

جۆرێک دەکەیت بە سەرەکى:
كۆد:
font-family: "tahoma", arial, verdana;

font-size
قەبارەى فۆنت یاخود نووسین بە تیکڕا نرخەکەى بەیەکەى جودا دەپێورێت وەک (پۆینت، پانى، ئیلیمێنت، پێکسڵ،..هتد)، بۆ نموونە:

Point:
كۆد:
font-size: 12pt;

Element: 4em
Pixel: 20px
Percent-width: 200%
..etc

font-style & font-weight
شێواز و کێش قورسایی فۆنتەکان چۆن و بەچ شیوەیەک دەربکەون، بۆ وێنە (لار italic، زۆر قەڵەو).

كۆد:
font-style: normal;
font-style: italic;
font-weight: bold;
font-weight: 900;

تێکڕاى نموونەیەک لەسەر font:
كۆد:
<html>
<head>
<style type="text/css">
#main{
font-family: "tahoma", arial, verdana;
font-size: 100%;
}
#main .sa{
font-style: normal;
}
#main .sb{
font-style: italic;
}
#main .wa{
font-weight: bold;
}
#main .wb{
font-weight: 900;
}
</style>
</head>
<body>
<div id="main">
<p class="sa" align="center">H4kurd {font-style-normal} Property Example</p>
<p class="sb" align="center">H4kurd {font-style-italic} Property Example</p>
<p class="wa" align="center">H4kurd {font-style-bold} Property Example</p>
<p class="wb" align="center">H4kurd {font-style-900} Property Example</p>
</div>
</body>
</html>

[وینه‌: 547d27bca1f19.png]

height & width
بەرزى و پانى بەشێک دیارى دەکات کە تاچەندێک دوور بێت لە بەشێکى دیکەى ماڵپەڕەکە، یاخود بەرزى و پانى بۆ وێنەکان، بەهەمان شێوە ئەمیش نرخەکەى بە قەبارە دەپێورێت و دیارى دەکرێت، بۆ نموونە:
كۆد:
height: 150px;
width: 200px;

margin
سنوور، لێوار، کارى لە cssدا ئەوەیە کە بەهۆى پێدانى یەکەکانەوە دوور دەکەوێت لەو (شوێن –ئاڕاستە)یەی بۆى دیاری دەکەیت، بۆ وێنە چەندێک لە بەشی سەرەوە top دوور بکەوێتەوە؟ ، یاخود چەندێک بەهەموو لایەکانى خۆیدا دوور بکەوێتەوە؟..هتد
Margin بۆخۆى دەتوانین بەهەموو ئاڕاستەکانی بناسێنین، بۆ نموونە:
كۆد:
margin: 2cm 8cm 3cm 6cm;

ئەوەش ئەم واتایە دەگەیەنێت:
(بەشی سەرەوە 2 سانتیمەترە، بەشی لاى ڕاست 8 سانتى مەترە، بەشی خوارەوە 3 سانتیمەترە، بەشی لاى چەپ 6سانتیمەترە)
بۆ نموونە ئێمە بە تاگى div سنووربەندى دەکەین بەو چەشنەى نموونەکە.

ئەمەش تێکڕاى نموونەکەیە:
كۆد:
<html>
<head>
<style type="text/css">
body{
background-color: orange;
}
#main{
background-color: lightblue;
margin: 2cm 8cm 3cm 6cm;
}
</style>
</head>
<body>
<div id="main">
<p align="center">H4kurd {margin} Property Example</p>
</div>
</body>
</html>

[وینه‌: 547d29255a30c.png]

وە دەتوانین بەتێکڕا ئاڕاستەکان دیاری بکەین، واتە پێکەوە سەرەوە و خوارەوە و ڕاست و چەپ، بکەینە یەک نرخ:
كۆد:
margin: 200px;

نموونەیەکى دیکە ئەوەیە کە (content) واتە تەواوى سایتەکە – ماڵپەڕەکە، بخەینە ناوەڕاستەوە، ئەویش بە هۆى تایبەتمەندى margin لەگەڵ widthەوە دەبێتن، بەم شێوەیە:
كۆد:
margin: 0px auto;
width: 90%;

پاشان دەتوانین تایبەتمەندى margin لەگەڵ تەنها لایەک یاخود چەند لایەک پێکەوە دیاری بکەین، بۆ نموونە:
margin-bottom
margin-left
margin-right
margin-top

كۆد:
margin-left: 10px;
margin-right: 10px;

opacity
ڕاددەى ڕوونگۆیی، ڕوونى، بۆ شتێک دیارى دەکات، واتە تا چەندە کاڵ و تۆخ بێت، بە ژمارە نرخەکەى دیاری دەکەین:
كۆد:
#main{
background-color: lightblue;
opacity: 0.7;
}

[وینه‌: 547d2a4bb8f77.png]

تێبینى/ #main ، ئایدی ID ناسێنەرى تاگى divە کە لەناو htmlدا دیاریمان کردووە بۆى بە id="main"، دەتوانن لە نموونەکاندا سەیرى بکەنەوە.

Padding
بەهەمان شیوەى margin کە ئەمیش دوورى لێوارەکان دیارى دەکات، بەڵام دەبێت ڕەچاوى ئەوە بکەین لە paddingدا لێوارەکان لە ئایتم واتە شتەکەوە دوور دەکەوێتەوە وەک (فـەرش) بەچواردەوریدا یاخود بەلایەک و چەند لایەکیدا دەچێنێت، padding ئاڕاستەکان بەهۆى ئیلیمێنتەکەوە دوور دەخاتەوە، واتە قەبارەى ئیلیمێنتەکە زیاد و کەم دەکات، بەڵام margin بەهۆى قەبارەوە دوور دەکەوێتەوە لە ئیلیمێنتێکى دیکە، بۆ نموونە:
كۆد:
p{
padding: 20px 10px 20px 10px;
}

[وینه‌: 547d2ae63cfa1.png]

هەروەک margin بەهەمان شێوە دەتوانین قەبارە بۆ لایەک چەندلایەک هەموو لایەک بەیەکەوە دابنێن:
padding-bottom
padding-left
padding-right
padding-top
كۆد:
padding: 100px;
padding-left: 10px;
padding-right: 10px;

text
تایبەتمەندى نووسین، دەق، لێرەدا css چەندین تایبەتمەندى بۆ جوانکارى نووسین داناوە، کە گرنگترینیان ئەمانەى لاى خوارەوەن:

text-align
ئاڕاستەى نووسینەکە دیارى دەکات (ناوەڕاست، چەپ، ڕاست، پڕبەپڕ) :
كۆد:
text-align: center;
text-align: left;
text-align:right;
text-align: justify;

text-decoration
بەواتاى دیکۆر دێت، واتە دیکۆرى نووسینەکە چۆن و بەچ شێوەیەک دەربکەوێت لەڕووى (هێڵ-خەت)؟، بۆ ووێنە:

خەت لەسەرەوەى نووسنەکە بێت:
كۆد:
text-decoration: overline;

خەت لەناوەندى نووسینەکە بێت:
كۆد:
text-decoration: line-through;

خەت لەژێر نووسینەکە بێت:
كۆد:
text-decoration: underline;

خەتى نەبێت:
كۆد:
text-decoration: none;

text-shadow
هەروەک box-shadow ، بەڵام ئەم تایبەتمەندیە بۆ خودى نووسین دەبێتن، واتە سێبەر دەدات بە نووسینەکان:
كۆد:
text-shadow: 5px 3px 8px gray;

(ئاسۆیی 5، ستوونى 3، شەوق 8، ڕەنگ ڕەساسی)، ئەوەش تایبەتمەندى ئەو سێبەرە بوو کەلەنموونەکە بەکارمان هێنا، بۆ زانیارى زیاتر سەیرى box-shadow بکە.

text-transform
گۆڕینى شێوازى دەرکەوتنى نووسیەنەکان، لێرەدا دەتوانین بە (سمۆڵ-کاپیتاڵ،..هتد) بنووسین، بۆ نموونە:
كۆد:
text-transform: lowercase;
text-transform: uppercase;
text-transform: capitalize;

ئەوجا با نموونەبەک بەگشتى لەسەر تایبەتمەندى text وەربگرین:
كۆد:
<html>
<head>
<style type="text/css">
p.a{text-align: center;}
p.b{text-decoration: overline;}
p a.c{text-decoration: none;}
p.d{text-shadow: 5px 3px 8px gray;}
p.e{text-transform: lowercase;}
</style>
</head>
<body>
<p class="a">H4kurd {text-align-center} Property Example</p>
<p class="b">H4kurd {text-decoration-overline} Property Example</p>
<p><a class="c" href="#">H4kurd {text-decoration-none} Property Example</a></p>
<p class="d">H4kurd {text-shadow} Property Example</p>
<p class="e">H4kurd {text-transform-lowercase} Property Example</p>
</body>
</html>

[وینه‌: 547d2d69ab9cd.png]

نموونەیەکى گرنگە لەمە text و لە ووێنەکە سەیرى ناو براکێتەکان {} بکەن تایبەتمەندیەکان بەدیار دەخات لەسەر نووسینەکان. پاشان ئەو نووسینە شینە ئەوە بەستەرە، بێگومان کاتێک تۆ لەناو html تاگى <a> دادەنێیت بۆخۆى بەشێوەیەکى خودکارانە هێڵێکى بەژێردا دەهێنێت، بەڵام وەک لەنموونەکەڕا دیارە ئەو هێڵەمان بە css لابردووە.

hover selector
کاتێک دەچینە سەر بەشێک بەهۆى hoverەوە دەتوانین تایبەتمەندى جوداى پێ بدەین، ئەمەش بۆ بەستەرەکان باشن، واتە کە تۆ ماوسەکە دەبەیتە سەر بەستەرێک یاخود هەر شتێکى دیکە بێت، تایبەتمەندیەک یاخود چەند تایبەتمەندیەکى بگۆڕێت، بۆ وێنە ڕەنگى بانکگراوندەکە بگۆڕێت. Hover بەم شێوەیە دادەڕیژرێت:
كۆد:
Selector:hover{
Property: values;
}

نموونە:
كۆد:
a:hover{background-color: red;}

کاتێک ماوسەکە دەبەینە سەر تاگى a: anchor باکگراوندى ئەو نووسنەى کەکراوە بە بەستەر دەبێتە سوور.
وە هەروەها چەند سەلێکتەرێکى دیکە هەن بۆ بەستەرەکان:

بەستەرى ئاسایی:
a:link
کاتێک کارى کرتەکردن کراوە:
a:visited
کاتێک ماوسەکە هەنوکە لەسەرى لەبارى پەنجەپێداندا بێت:
a:active

لێرە نموونەکە وەربگرە: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_link_more1

کۆتایی تایبەتمەندیەکان
ئەوەندە بەسە کە ئێمە بتوانین لەڕێگەیەوە ماڵپەڕێکى جوان و نایاب بەهۆى css و html درووست بکەین، بەڵام تایبەتمەندیەکانى css هەر ئەوەندە نیە کە ئیمە ئاماژەمان پێکرد، بەڵکو گەلێک زیاترن، ئەوەى کە باسکران، تەنها ئەوانە بوون کە ڕۆژانە ئەوانەى لە بوارى داڕشتنى وێب کاردەکەن یان ئەوانەى حەز بەو بوارە دەکەن خۆیان لێی فێربکەن و چاویان لەزمانەکەدا بکرێتەوە، تۆ دەتوانى لەڕێگەى ئەو پێگانەى خوارەوە زیاتر تایبەتمەندى ببینیت، ئەگەر پێویستت بوو:

لەسەر ئەم نموونەیە ڕاهێنان بکە – پاشان سۆرس کۆدەکەى لە وەڵامدا بنووسەرەوە:

[وینه‌: 547d2f261b925.png]



بەستەرەکانى ئەم بابەتە

ڕێزم قبوڵ بکەن SfD
دواین 10 بابه‌ته‌كان

­
به‌ڕێزه‌كان هاك ناكه‌ن، به‌ڵكو خۆیان فێری هاك ده‌كه‌ن


تکایە وەڵام بدەرەوە
بەم زووانە ماڵپەڕەكەم
وه‌ڵام
#2
زۆر جوانت شیكردیته‌وه‌ هه‌ست به‌ ماندوون ناكه‌ی چه‌ندییخوێنیه‌وه‌
دواین 10 بابه‌ته‌كان

   
وه‌ڵام
#3
زۆر جوانت رون کردۆتەوە

دواین 10 بابه‌ته‌كان
وه‌ڵام
#4
زۆر جوانت شیكردیته‌وه‌ هه‌ست به‌ ماندوون ناكه‌ی چه‌ندییخوێنیه‌وه‌
دواین 10 بابه‌ته‌كان

PHP, JAVA,  HTML 

وه‌ڵام
#5
زۆر جوانه‌ عافه‌رین تاقه‌تم نه‌بوو هه‌مووی بخوینمه‌وه‌ دوایێ هه‌مووی ده‌خوینمه‌وه‌
دواین 10 بابه‌ته‌كان

گرنـگ ئـەوە نـیە بیـر لەهـەزار شــت بکەیــتەوە،ئـەوە گرنــگە هـەزار جـار بیــر لـە یەک شــت بکەیتــەوە

"!"
وه‌ڵام
#6
دەستخۆش کاک SfD بەڕێز. بەڕاستی جوانت باس کردووە. سی ئێس ئێسیش زمانێکی تا بڵێی ئاسان و خۆشە بەڕای من، بۆ ئێستا زۆر پێویست بوو کە ئەندامان هەمووی بەولاوبەولایا چووینە و وازیان لە زانست هێناوە و خەریکی شتی حازرن.
دواین 10 بابه‌ته‌كان

پێ بزانێ، یا نەزانێ، من بە دڵ یادی دەکەم! "مەحوی"

وه‌ڵام
#7
ده‌ست خۆش برام
زه‌خیره‌م كرد له‌ كاتێكدا ده‌یخوێنمه‌وه‌
دووباره‌ ده‌ست خۆش
دواین 10 بابه‌ته‌كان

وه‌ڵام
#8
دةستة كانت خؤشبيت بةراستي بابة تيكي جوانة زؤر جوانيش ديارة هيلاك بويتة بيوة
دواین 10 بابه‌ته‌كان

وه‌ڵام
#9
دەست خۆش بێت ماندوو نەبی بەردەوام بە
دواین 10 بابه‌ته‌كان

جگە لە هاك بۆ کورد لەهیچ یانەیك و فەیسبوك،کەناڵ تر بەرپرس نیم
تەنها بەرپرسم لەم کەناڵە
وه‌ڵام
#10
سوپاستان دەکەم هاوڕێیان چاوى هەمووتان ماچ دەکەم ئیشەڵا بابەنێک دەبێ جێگەى خۆى دەکاتەوە.
بەڵێ کاک گەنجێکی پیر ئەو قسەیەت زۆر ڕاستە، کاک ABAS گیان ئەرەبەخودا زۆر زۆر هیلاک بووم، باوەڕ ناکەن ئێوارەیەک هەتا بانگى بەیانى تەنها خەریکى ڕازانەوە و درووستکردنى بابەتەکە بووم، کە پێشتر بە سێ-چوار ڕۆژ بابەتەکەم نووسی.

وه‌ڵام


برۆ بۆ :


ئه‌ندامه‌كانی ئه‌م بابه‌ته‌یان کردۆته‌وه‌: 1 مێوان