Changes

لە چاوگ

CSS

٤٬٧٨١ بایت زیاد کرا, ‏٠٩:٥١، ١٧ی ئازاری ٢٠١٠
بەبێ کورتەی دەستکاری
[[Image:Css_logoSample-css-code.png|left|thumb|80px380px]]'''CSS ''' (سی ئێس ئێس) کە کورتکراوەی Cascading Style Sheetsـەو زمانێکە بەکاردێت بۆ پێناسەکردنی ڕووی دەرەوەی هەر پەڕگەیەک کە بە [[HTML]] یان XML دەنووسرێت. بەهۆی CSSـەوە دەتوانرێت ڕەونەقێکی جوان بدرێت بە ماڵپەڕ وەکو ڕەنگردن، فۆنتەکان، بەستەرەکان... هتد کەدەتوانیت خۆت بڕیار بدەیت بەچ شێوەیەک هەر یەک لەوانە دەربکەون. هەر پەڕەیەکی پەڕەی CSS بە درێژکراوەی پەڕگەکەی برێتییە لە css. کۆتایی پێ دێت و دەتوانرێت ببەسترێتەوە بە بێ پایان پەڕگەوەو پەڕگەوە، لەهەر پەڕگەیەکدا بەکارببرێت یەوا ڕووی ئەو کاریگەرییانە پیشان بدات کەلەناو ئەدات کە لەناو پەڕگەی css ـەکەدا پێناسەکراوەو نرخی پێدراوە.
= چ دەستکاریکەرێک (Editor)؟ =
چەند دەستکاریکەرێکی پێشنیار کراوبۆ فێربوونی <tt>CSS</tt> تەنها پێویستت بە دەستکاریکەرێک (بۆ نووسینی کۆدەکان) و وێبگەڕێک (بۆ بینینی ئەنجام) دەبێت. هیچ ئامڕازێکی تر یان نەرمەکاڵایەکت پێویست نابێت. دەستکاریکەر لە ویندۆز وەک [[Notepad]] کە سادەترین دەستکاریکەری دەقە، بەڵام ئەوانەی کە ئامۆژگاریکراون وەک
*[http://www.notepad-plus.sourceforge.net NotePad++]
*[http://bluefish.openoffice.nl/ Bluefish]
*[http://mooedit.sourceforge.net/ Medit]
*[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 =
}</source>
ئەگەر لەحاڵەتێکدا نرخەکە لەچەند ووشەیەک وشەیەک پێک هاتبوو ئەوە باشتر وایە بخرێتە ناو دوو دەقەوە:
<source lang='css'>serdêrr {font-family: "unikurd Web"}</source>
=ڕەنگەکان - Colours=
ئاشکرایە کە ڕەنگ بۆ خۆی جوانی تەواو دەبەخشێت بە پەڕگەکانی سەر وێب بەشێوەیەک کە لەگەڵ یەکتردا گونجاو بن. دەتوانرێت ڕەنگەکان بە ۳ شێوەی جیاواز بنووسرێن:
# '''ناو - name''' یاخود
# '''rgb''' - red/green/blue یان
# '''hex'''
یان هەروەها
<source lang='css'>#f00</source>
 
هەریەک لەو کۆدانەی سەرەوە هاوشێوەن بۆ ڕەنگی سوورو هەرکامێکیان بەکارببەی ئەوە ڕەنگی سوور دەبەخشن.
 
<p>تاوەکو ئێستا تەنها ۱۷ ناوی ڕەنگ پێناسەکراون تاوەکو بتوانرێت بەکار ببرێت، ئەوانیش بریتین لە:
<pre>
=خشتە - Table=
خشتە ڕێگە ئەدات کە بتوانیت خشتەیەک درووست بکەیت و بەپێی پێویستی کە بەکارهێنەر ئەخوازێت لەنێو ماڵپەڕەکەیدا بیکات. بەهەمان شێوە تایبەتمەندی جیاواز هەیەو بۆ هەریەک لەوانە نرخی جیاوازیش هەیە.
<pre>
border-collapse: - collapse
- separate
{| 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=276 BGCOLOR="#e6e6ff" | <P ALIGN=CENTER><FONT FACE="DejaVu Sans"><FONT SIZE=2><SPAN LANG="zxx"><B>تایبەتمەندی</B></SPAN></FONT></FONT></P>|- VALIGN=TOP| WIDTH=254 | <P ALIGN=CENTER><FONT SIZE=2>collapse<BR>separate</FONT></P>| WIDTH=276 | <P ALIGN=CENTER><FONT SIZE=2>border-spacing: collapse</FONT></P>|- VALIGN=TOP| WIDTH=254 | <P ALIGN=CENTER><FONT SIZE=2>length length</FONT></P>| WIDTH=276 | <P ALIGN=CENTER><FONT SIZE=2>border-spacing</FONT></P>caption-side: |- VALIGN=TOP| WIDTH=254 | <P ALIGN=CENTER><FONT SIZE=2>top - <BR>bottom<BR>left<BR>right</FONT></P> | WIDTH=276 | <P ALIGN=CENTER><FONT SIZE=2>caption- leftside</FONT></P> |- right 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: - show</FONT></P> |- hide 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: - auto - fixed</preFONT></P>|}
هەریەک لەو تایبەتمەندیانە بەم شێوەیە بەکاردەهێنرێت لەناو پەڕگەیەکی CSS ـدا:
هاوپۆل پێمان دەڵێت کە چۆن‌و لەکوێ هەر توخمێک دەربکەوێت لە پەڕەیەکەی هتمل ([[HTML]])ـدا. هاوپۆلەکان ئەم تایبەتماندییانە لە خۆ دەگرێت:
{| WIDTH=552 BORDER=1 BORDERCOLOR="#000000" CELLPADDING=5 CELLSPACING=0<COL WIDTH=254><COL WIDTH=276> VALIGN=TOP
| 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>
|- VALIGN=TOP
</body>
</html></source>
 
=وێنە - Image=
=پاشبنەما - background=
background-image:url('wêneke.png')
}</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=
-------لەهەر پەڕەیەکی 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>