ناوی نادیار

گۆڕانکارییەکان

لە چاوگ
٤٬٧٨١ بایت زیاد کرا ،  ‏١٠:٥١، ١٧ی ئازاری ٢٠١٠
بەبێ کورتەی دەستکاری
ھێڵی ١: ھێڵی ١: −
[[Image:Css_logo.png|left|thumb|80px]]
+
[[Image:Sample-css-code.png|left|thumb|380px]]
CSS کە کورتکراوەی Cascading Style Sheetsـەو زمانێکە بەکاردێت بۆ پێناسەکردنی ڕووی دەرەوەی هەر پەڕگەیەک کە بە [[HTML]] یان XML دەنووسرێت. بەهۆی CSSـەوە دەتوانرێت ڕەونەقێکی جوان بدرێت بە ماڵپەڕ وەکو ڕەنگردن، فۆنتەکان، بەستەرەکان... هتد کەدەتوانیت خۆت بڕیار بدەیت بەچ شێوەیەک هەر یەک لەوانە دەربکەون. هەر پەڕەیەکی CSS بە css. کۆتایی پێ دێت و دەتوانرێت ببەسترێتەوە بە بێ پایان پەڕگەوەو ڕووی ئەو کاریگەرییانە پیشان بدات کەلەناو پەڕگەی css ـەکەدا پێناسەکراوەو نرخی پێدراوە.
+
'''CSS''' (سی ئێس ئێس) کە کورتکراوەی Cascading Style Sheetsـەو زمانێکە بەکاردێت بۆ پێناسەکردنی ڕووی دەرەوەی هەر پەڕگەیەک کە بە [[HTML]] یان XML دەنووسرێت. بەهۆی CSSـەوە دەتوانرێت ڕەونەقێکی جوان بدرێت بە ماڵپەڕ وەکو ڕەنگردن، فۆنتەکان، بەستەرەکان... هتد کەدەتوانیت خۆت بڕیار بدەیت بەچ شێوەیەک هەر یەک لەوانە دەربکەون. پەڕەی CSS درێژکراوەی پەڕگەکەی برێتییە لە css. و دەتوانرێت ببەسترێتەوە بە بێ پایان پەڕگەوە، لەهەر پەڕگەیەکدا بەکارببرێت یەوا ڕووی ئەو کاریگەرییانە پیشان ئەدات کە لەناو پەڕگەی css ـەکەدا پێناسەکراوەو نرخی پێدراوە.
    
= چ دەستکاریکەرێک (Editor)؟ =
 
= چ دەستکاریکەرێک (Editor)؟ =
چەند دەستکاریکەرێکی پێشنیار کراو:
+
بۆ فێربوونی <tt>CSS</tt> تەنها پێویستت بە دەستکاریکەرێک (بۆ نووسینی کۆدەکان) و وێبگەڕێک (بۆ بینینی ئەنجام) دەبێت. هیچ ئامڕازێکی تر یان نەرمەکاڵایەکت پێویست نابێت. دەستکاریکەر لە ویندۆز وەک [[Notepad]] کە سادەترین دەستکاریکەری دەقە، بەڵام ئەوانەی کە ئامۆژگاریکراون وەک:  
 +
 
 
*[http://www.notepad-plus.sourceforge.net NotePad++]
 
*[http://www.notepad-plus.sourceforge.net NotePad++]
 
*[http://bluefish.openoffice.nl/ Bluefish]
 
*[http://bluefish.openoffice.nl/ Bluefish]
ھێڵی ١٠: ھێڵی ١١:  
*[http://mooedit.sourceforge.net/ Medit]
 
*[http://mooedit.sourceforge.net/ Medit]
 
*[http://vim.org VIM]
 
*[http://vim.org VIM]
 +
= بەستنەوە یان بەکارهێنانی لە html دا=
 +
S
 +
دەتوانرێت بە سێ شێوە تێکەڵ بکرێت لەگەڵ HTML تاوەکو ئەو تەکنیکە بەدروستی کاربکات.
 +
 +
== External Style Sheet ==
 +
پەڕگەیەکی تایبەت و لەدەرەوە بە CSS بۆ نمونە style.css و ڕاکێشانی پێناسەکردنی بۆ ناو کۆدی html بەشیوەی rel لە کۆدەکانی head دا بۆ نمونە:
 +
 +
  <source lang='html4strict'> <link rel="stylesheet" type="text/css" href="style.css" />
 +
</source>
 +
 +
 +
== Internal Style Sheet ==
 +
یان هەمان پەڕە و بەم شێوەیە:
 +
<source lang='html4strict'>
 +
    <head>
 +
    <style type="text/css">
 +
    body {
 +
    background:#707070 none repeat scroll 0 0;
 +
    font-family:"Unikurd Web", Tahoma, "DejaVu Sans", Arial, Verdana;
 +
    font-size:10pt;
 +
    direction: rtl;
 +
    }
 +
    p {
 +
    position:absolute;
 +
    top:10px;
 +
    width:400px
 +
    }
 +
    </style>
 +
    </head>
 +
</source>
 +
 +
== Inline Styles ==
 +
 +
بەتێکەڵکردنی لەگەڵ تاگی HTML یەکەدا بەم شێوەیە:
 +
<source lang='html4strict'>
 +
    <P style="font-size: x-large; color: #ff9900">
 +
      Sillaw em Katetan bash, awha style dexrete ser TAG html _;)
 +
    </p>
 +
 +
</source>
    
= ڕستەکار - Syntax =
 
= ڕستەکار - Syntax =
ھێڵی ٢٤: ھێڵی ٦٥:  
}</source>
 
}</source>
   −
ئەگەر لەحاڵەتێکدا نرخەکە لەچەند ووشەیەک پێک هاتبوو ئەوە باشتر وایە بخرێتە ناو دوو دەقەوە:
+
ئەگەر لەحاڵەتێکدا نرخەکە لەچەند وشەیەک پێک هاتبوو ئەوە باشتر وایە بخرێتە ناو دوو دەقەوە:
    
<source lang='css'>serdêrr {font-family: "unikurd Web"}</source>
 
<source lang='css'>serdêrr {font-family: "unikurd Web"}</source>
ھێڵی ٣٠: ھێڵی ٧١:  
=ڕەنگەکان - Colours=
 
=ڕەنگەکان - Colours=
 
ئاشکرایە کە ڕەنگ بۆ خۆی جوانی تەواو دەبەخشێت بە پەڕگەکانی سەر وێب بەشێوەیەک کە لەگەڵ یەکتردا گونجاو بن. دەتوانرێت ڕەنگەکان بە ۳ شێوەی جیاواز بنووسرێن:
 
ئاشکرایە کە ڕەنگ بۆ خۆی جوانی تەواو دەبەخشێت بە پەڕگەکانی سەر وێب بەشێوەیەک کە لەگەڵ یەکتردا گونجاو بن. دەتوانرێت ڕەنگەکان بە ۳ شێوەی جیاواز بنووسرێن:
# '''ناو - name''' یاخود
+
# '''ناو - name'''  
 
# '''rgb''' - red/green/blue یان
 
# '''rgb''' - red/green/blue یان
 
# '''hex'''
 
# '''hex'''
ھێڵی ٤٤: ھێڵی ٨٥:  
یان هەروەها
 
یان هەروەها
 
<source lang='css'>#f00</source>
 
<source lang='css'>#f00</source>
 +
 
هەریەک لەو کۆدانەی سەرەوە هاوشێوەن بۆ ڕەنگی سوورو هەرکامێکیان بەکارببەی ئەوە ڕەنگی سوور دەبەخشن.
 
هەریەک لەو کۆدانەی سەرەوە هاوشێوەن بۆ ڕەنگی سوورو هەرکامێکیان بەکارببەی ئەوە ڕەنگی سوور دەبەخشن.
 +
 
<p>تاوەکو ئێستا تەنها ۱۷ ناوی ڕەنگ پێناسەکراون تاوەکو بتوانرێت بەکار ببرێت، ئەوانیش بریتین لە:
 
<p>تاوەکو ئێستا تەنها ۱۷ ناوی ڕەنگ پێناسەکراون تاوەکو بتوانرێت بەکار ببرێت، ئەوانیش بریتین لە:
 
<pre>
 
<pre>
ھێڵی ٣١٩: ھێڵی ٣٦٢:  
=خشتە - Table=
 
=خشتە - Table=
 
خشتە ڕێگە ئەدات کە بتوانیت خشتەیەک درووست بکەیت و بەپێی پێویستی کە بەکارهێنەر ئەخوازێت لەنێو ماڵپەڕەکەیدا بیکات. بەهەمان شێوە تایبەتمەندی جیاواز هەیەو بۆ هەریەک لەوانە نرخی جیاوازیش هەیە.
 
خشتە ڕێگە ئەدات کە بتوانیت خشتەیەک درووست بکەیت و بەپێی پێویستی کە بەکارهێنەر ئەخوازێت لەنێو ماڵپەڕەکەیدا بیکات. بەهەمان شێوە تایبەتمەندی جیاواز هەیەو بۆ هەریەک لەوانە نرخی جیاوازیش هەیە.
<pre>
  −
border-collapse: - collapse
  −
- separate
     −
border-spacing: - length length
+
{|  WIDTH=552 BORDER=1 BORDERCOLOR="#000000" CELLPADDING=5 CELLSPACING=0<COL WIDTH=254><COL WIDTH=276>  VALIGN=TOP
 
+
|  WIDTH=254 BGCOLOR="#e6e6ff" | <FONT FACE="DejaVu Sans"><FONT SIZE=2><SPAN LANG="zxx"><B>نرخەکان</B></SPAN></FONT></FONT></P>
caption-side: - top
+
|  WIDTH=276 BGCOLOR="#e6e6ff" | <P ALIGN=CENTER><FONT FACE="DejaVu Sans"><FONT SIZE=2><SPAN LANG="zxx"><B>تایبەتمەندی</B></SPAN></FONT></FONT></P>
- bottom
+
|-  VALIGN=TOP
- left
+
|  WIDTH=254 | <P ALIGN=CENTER><FONT SIZE=2>collapse<BR>separate</FONT></P>
- right
+
|  WIDTH=276 | <P ALIGN=CENTER><FONT SIZE=2>border-collapse</FONT></P>
 
+
|- VALIGN=TOP
empty-cells: - show
+
|  WIDTH=254 | <P ALIGN=CENTER><FONT SIZE=2>length length</FONT></P>
- hide
+
|  WIDTH=276 | <P ALIGN=CENTER><FONT SIZE=2>border-spacing</FONT></P>
 
+
|- VALIGN=TOP
table-layout: - auto
+
|  WIDTH=254 | <P ALIGN=CENTER><FONT SIZE=2>top<BR>bottom<BR>left<BR>right</FONT></P>
- fixed
+
|  WIDTH=276 | <P ALIGN=CENTER><FONT SIZE=2>caption-side</FONT></P>
</pre>
+
|- VALIGN=TOP
 +
|  WIDTH=254 | <P ALIGN=CENTER><FONT SIZE=2>show<BR>hide</FONT></P>
 +
|  WIDTH=276 | <P ALIGN=CENTER><FONT SIZE=2>empty-cells</FONT></P>
 +
|- VALIGN=TOP
 +
|  WIDTH=254 | <P ALIGN=CENTER><FONT SIZE=2>auto<BR>fixed</FONT></P>
 +
|  WIDTH=276 | <P ALIGN=CENTER><FONT SIZE=2>table-layout</FONT></P>
 +
|}
    
هەریەک لەو تایبەتمەندیانە بەم شێوەیە بەکاردەهێنرێت لەناو پەڕگەیەکی CSS ـدا:
 
هەریەک لەو تایبەتمەندیانە بەم شێوەیە بەکاردەهێنرێت لەناو پەڕگەیەکی CSS ـدا:
ھێڵی ٥٣٨: ھێڵی ٥٨٤:  
هاوپۆل پێمان دەڵێت کە چۆن‌و لەکوێ هەر توخمێک دەربکەوێت لە پەڕەیەکەی هتمل ([[HTML]])ـدا. هاوپۆلەکان ئەم تایبەتماندییانە لە خۆ دەگرێت:
 
هاوپۆل پێمان دەڵێت کە چۆن‌و لەکوێ هەر توخمێک دەربکەوێت لە پەڕەیەکەی هتمل ([[HTML]])ـدا. هاوپۆلەکان ئەم تایبەتماندییانە لە خۆ دەگرێت:
 
{|  WIDTH=552 BORDER=1 BORDERCOLOR="#000000" CELLPADDING=5 CELLSPACING=0<COL WIDTH=254><COL WIDTH=276>  VALIGN=TOP
 
{|  WIDTH=552 BORDER=1 BORDERCOLOR="#000000" CELLPADDING=5 CELLSPACING=0<COL WIDTH=254><COL WIDTH=276>  VALIGN=TOP
|  WIDTH=254 BGCOLOR="#e6e6ff" | <FONT FACE="DejaVu Sans"><FONT SIZE=2><SPAN LANG="zxx"><B>نرخەکان</B></SPAN></FONT></FONT></P>
+
|  WIDTH=254 BGCOLOR="#e6e6ff" | <P ALIGN=CENTER><FONT FACE="DejaVu Sans"><FONT SIZE=2><SPAN LANG="zxx"><B>نرخەکان</B></SPAN></FONT></FONT></P>
 
|  WIDTH=276 BGCOLOR="#e6e6ff" | <P ALIGN=CENTER><FONT FACE="DejaVu Sans"><FONT SIZE=2><SPAN LANG="zxx"><B>تایبەتمەندی</B></SPAN></FONT></FONT></P>
 
|  WIDTH=276 BGCOLOR="#e6e6ff" | <P ALIGN=CENTER><FONT FACE="DejaVu Sans"><FONT SIZE=2><SPAN LANG="zxx"><B>تایبەتمەندی</B></SPAN></FONT></FONT></P>
 
|-  VALIGN=TOP
 
|-  VALIGN=TOP
ھێڵی ٨٠٤: ھێڵی ٨٥٠:  
</body>
 
</body>
 
</html></source>
 
</html></source>
  −
=وێنە - Image=
      
=پاشبنەما - background=
 
=پاشبنەما - background=
ھێڵی ٨٦٠: ھێڵی ٩٠٤:  
background-image:url('wêneke.png')
 
background-image:url('wêneke.png')
 
}</source>
 
}</source>
 +
 +
 +
== نموونەیەک‌و کۆکردنەوەی ۳ تایبەتمەندی==
 +
لەم نموونەیەدا ۳ تایبەتمەندی کۆکراوەتەوەو کراوە (<tt>background-image</tt>، <tt>background-repeat</tt>، <tt>background-position</tt>) بە نموونەیەک، بۆ ئەوەی زیاتر لەو تایبەتمەندیانە بگەیت ئەوە ئەبێت گۆڕانکاری بکەیت تاوەکو بزانیت کاریان چییە.
 +
* پەڕەیەکی <tt>css</tt> دەرووست بکەو ئەو کۆدانەی تێدا دابنێ و پاشان پاشەکەوتی بکە:
 +
<source lang='CSS'>body
 +
{
 +
background-image:url('wêneke.png');
 +
background-repeat:no-repeat;
 +
background-position:top right;
 +
margin-right:150px;
 +
}
 +
</source>
 +
 +
* ئەو کۆدانەش لە پەڕەیەکی <tt>html</tt> ـدا پاشەکەوت بکەو پاشان سەیری بکە بزانە چۆن دەردەکەوێت:
 +
<source lang='html4strict'><html>
 +
<head>
 +
<link rel="stylesheet" type="text/css" href="style.css" />
 +
</head>
 +
 +
<body>
 +
 +
<h1>Lem Nimuneyeda,</h1>
 +
<p>bekarhênani paşbinema bê dubare kirdnewe (no-repeat) u herweha (set postion).</p>
 +
<p>Lêreda paşbinemake tenha 1 car derdekewêt wate dubare nabêtewe.</p>
 +
 +
</body>
 +
</html></source>
    
=Class and ID Selectors=
 
=Class and ID Selectors=
-------
+
لەهەر پەڕەیەکی CSS ـدا دەتوانین <tt>ID Selector</tt> بەوە بناسینەوە کە ('''#''') پێش وشەیەک بێت، بەڵام  <tt>Class</tt> بە نیشانەی ('''.''') دەناسینەوە.
 
      +
'''بـۆ نـمـوونــە:'''
 +
لەپەڕەی css ـدا ئەمە بنووسە:
 +
<source lang='css'>#serder {
 +
background-color: #ccc;
 +
padding: 1em
 +
}
    +
.sereta {
 +
color: #fff;
 +
font-weight: bold;
 +
}</source>
    +
هەروەها ئەمەش لە پەڕەی html ـدا بنووسە:
 +
<source lang='html4strict'><html>
 +
<head>
 +
<link rel="stylesheet" type="text/css" href="style.css" />
 +
</head>
 +
 +
<body>
 +
<div id="serder">
    +
<h1>Serdêrrî Babet</h1>
    +
<p class="sereta">Hemû şitêk seretayekî heye, emeş beşêke lew seretaye!</p>
    +
</div>
    +
</body>
 +
</html>
 +
</source>