سی ئێس ئێس

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

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

جیاکردنەوەی شێواز و ناوەڕۆکیش کردەنی دەکات تا ھەمان پەڕەی مارکئەپەکە بە شێوازە جیاکان بۆ مێتۆدە جیاوازەکانی ڕێندەرکردن پیشان بدات، وەک لەسەر شاشە، لە چاپ، بە دەنگ (لەڕێگەی وێبگەڕی پەیوەست بە قسە یان سکرین ڕیدەر)، و لەسەر ئامێرە ھەستپێکراوەکانی Braille-based. ھەروەھا سی ئێس ئێس یاسای شێوازی جێگرەوەی بۆ ئامێری مۆبایل ھەیە ئەگەر ناوەڕۆکەکە لەسەر ئامێری مۆبایل دەستی پێ گەیەندرا.

ناوی cascading لە پلانی لەپێشینەی دەستنیشانکراوەوە ھاتووە بۆ دیاریکردنی ئەوەی کە کام یاسای شێواز جێبەجێ دەکرێت ئەگەر زیاتر لە یەک یاسا لەگەڵ ئێلیمنتێکی تایبەتمەند بگونجێت. ئەم پلانی لەپێشینەی «cascading»ە چاوەڕوانکراوە.

تایبەتمەندییەکانی سی ئێس ئێس لەلایەن کۆمپانیاکانی وێب (W3C) پاڵپشتی دەکرێ. جۆری میدیای ئینتەرنێت (MIME type) text/css لەلایەن RFC 2318 تۆمارکراوە بۆ بەکارھێنان لەگەڵ سی ئێس ئێس (ئازاری ١٩٩٨). W3C کار بە خزمەتگوزاریی ڕەواییی سی ئێس ئێسی خۆڕایی بۆ بەڵگەنامەکانی سی ئێس ئێس دەکات.

سەرەڕای ئەیچ تی ئێم ئێڵ، زمانەکانی تری مارکئەپ پشتگیریی بەکارھێنانی سی ئێس ئێس دەکەن لەوانەش XHTML، XMLی ئاشکرا، SVG و XUL.

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

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

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

سێلێکتەرەکان دەشێ ئەمانەی خوارەوە جێبەجێ بکەن:

 هەموو ئێلیمنتەکانی چەشنێکی دیاریکراو، بۆ نموونە: سەرپەڕەکانی ئاستی دووەم (h2)
 ئێلیمنتە دەستنیشانکراوەکان بەهۆی  ئاتریبیووت، بەتایبەتی:
 id: ناسێنەرێکی بێهاوتا لەناو دۆکیومێنتەکە، کە بە ھاشێک وەک پێشگر دەناسرێت. نموونە: 
 class: ناسێنەرێک کە دەتوانێت لەسەر چەندین ئێلیمنتی ناو دۆکیومێنتێک بەکاربێت، کە بە خاڵێک وەک پێشگر دەناسرێت. نموونە: 
 ئێلیمنتەکان بە پشتبەستن بە چۆنیەتیی دانانیان بەگوێرەی ئەوانی تر لەناو درەختی دۆکیومێنتەکە.

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

کڵاسەکانی سوودۆو لە سێلێکتەرەکانی سی ئێس ئێس بەکارھاتوون بۆ ڕێگەدان بە فۆڕماتکردن بەپێی ئەو زانیارییەی کە لە درەختی دۆکیومێنتەکە نییە. نموونەیەکی کڵاسی سوودۆو کە بەزۆری بەکاردێت  ە، کە تەنیا کاتێک ناوەڕۆکەکە دیاری دەکات کە بەکارھێنەرەکە «ئاماژە بە ئێلیمنتە بینراوەکە دەکات»، کە عادەتەن بە ڕاگرتنی تیری ماوسەکە لەسەری دەکرێت. پاشکۆی سێلێکتەرێکە وەک لە  یان  دیارە. کڵاسی سوودۆو  ئێلیمنتەکانی دۆکیومێنت پۆلێن دەکات. وەک  یان ، لەکاتێکدا ئێلیمنتی سوودۆو ھەڵبژاردەیەک دروست دەکات کە لە بەشە ئێلیمنتەکان پێک بێت، وەک  یان .

دەشێت سێلێکتەرەکان بە زۆر ڕێگە تێکەڵ بکرێن تا نەرمی و تایبەتێتییەکی گەورە بەدەست بھێندرێت.see the complete definition of selectors at the W3C Web site . دەشێت چەند سێلێکتەرێک لە لیستێکی بۆشاییدار یەک بگرن تا ئێلیمنتەکان بەپێی شوێن، جۆری ئێلیمنت، ئایدی، کڵاس، یان ھەر تێکەڵەیەکی تر دیاری بکەن. ڕیزبەندیی سێلێکتەرەکان گرنگە. بۆ نموونە، div .myClass {color: red;} بەسەر ھەموو ئێلیمنتەکانی کڵاسی myClass کە لەناو ئێلیمنتەکانی divن جێبەجێ دەبێت، لەکاتێکدا .myClass div {color: red;} بەسەر ھەموو ئێلیمنتەکانی div کە لەناو ئێلیمنتەکانی کڵاسی myClassن جێبەجێ دەبێت. بەڵام نابێت ئەمە لەگەڵ ناسێنەرە پێکەوەبەستراوەکان تێکەڵ بکرێن وەک div.myClass {color: red;} کە بەسەر ئێلیمنتەکانی divی کڵاسی myClass جێبەجێ دەبێت.

خشتەکەی خوارەوە ھەڵدەستێت بە پێدانی پوختەیەکی سینتاکسی سێلێکتەر کە ئاماژە بە بەکارھێنان و وەشانی سی ئێس ئێس کە ناساندوونی دەکات.

شێوازلەگەڵ...دەگونجێسەرەتا لە سی ئێس ئێسیئاستی...ناسێندرائێلیمنتی جۆری E١an E element is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)١ئێلیمنتی E لەماوەی کردەوە تایبەتەکانی بەکارھێنەر١ھێڵی یەکەمی فۆڕماتکراوی ئێلیمنتی E١پیتی یەکەمی فۆڕماتکراوی ئێلیمنتی E١هەموو ئەو ئێلیمنتانەی کە "class="c١ئەو ئێلیمنتەی کە "id="myid١ئێلیمنتی E کە کڵاسەکەی «warning»ە (زمانی دۆکیومێنتەکە ئەوە دیاری دەکات کە چۆن کڵاسەکە دۆزراوەتەوە)١ئێلیمنتی E کە ئایدییەکەی یەکسانە بە «myid»١ئەو ئێلیمنتەی کە "class="c و ئایدییەکەی یەکسانە بە «myid»١ئێلیمنتی Fی ناو ئێلیمنتی E١هەر ئێلیمنتێک٢ئێلیمنتی E بە ئاتربیووتی «foo»٢ئێلیمنتی E کە نرخی ئاتربیووتی «foo» بەتەواوی یەکسانە بە «bar»٢ئێلیمنتی E کە نرخی ئاتربیووتی «foo» کۆمەڵێک لە نرخەکانی بۆشایییە جیاکراوەکان، کە یەک لەوان بەتەواوی یەکسانە بە «bar»٢ئێلیمنتی E کە ئاتربیووتی «foo»ەکەی لیستێکی بە ھایفن جیاکراوەی ھەیە کە نرخەکانی (لە چەپەوە) بە «en» دەست پێ دەکات٢نۆبەرە (مناڵی یەکەم)ی ئێلیمنتی E٢ئێلیمنتی جۆری E بە زمانی «fr» (زمانی دۆکیومێنتەکە ئەوە دیاری دەکات کە چۆن زمانەکە دۆزراوەتەوە)٢ناوەڕۆکی دروستکراو لەپێش ناوەڕۆکی ئێلیمنتی E٢ناوەڕۆکی دروستکراو لەدوای ناوەڕۆکی ئێلیمنتی E٢ئێلیمنتی F کە دایکوباوکەکەی ئێلیمنتی E بێت٢ئێلیمنتی F کە ڕاستەوخۆ لەپێشی ئەم ئێلیمنتی E ھاتبێت٢ئێلیمنتی E کە نرخی ئاتربیووتی «foo»ەکەی دەقاودەق بە سترینگی «bar» دەست پێ دەکات٣ئێلیمنتی E کە نرخی ئاتربیووتی «foo»ەکەی دەقاودەق بە سترینگی «bar» کۆتاییی پێ دێت٣ئێلیمنتی E کە نرخی ئاتربیووتی «foo»ەکەی سترینگی «bar»ی تێدایە٣ڕەگ و ڕیشەی دۆکیومێنتەکە، ئێلیمنتی E٣مناڵی n-ھەمی ئێلیمنتی E٣مناڵی n-ھەمی ئێلیمنتی E، بە ژماردن لە کۆتا دانەوە٣خزمی n-ھەمی ئێلیمنتی E٣خزمی n-ھەمی ئێلیمنتی E، بە ژماردن لە کۆتا دانەوە٣کۆتا مناڵی ئێلیمنتی E٣an E element, first sibling of its type٣an E element, last sibling of its type٣ئێلیمنتی E، کە تاکە مناڵی دایک و باوکییەتی٣an E element, only sibling of its type٣ئێلیمنتی E کە ھیچ مناڵێکی نییە (بە لەخۆگرتنی دەقەکانیشەوە)٣ئێلیمنتی E کە دەبێتە ئامانجی ئاڕاستەکردنی URLەکە٣ڕووکاری بەکارھێنەری ئێلیمنتی E کە چالاک کراوە٣ڕووکاری بەکارھێنەری ئێلیمنتی E کە ناچالاک کراوە٣	ڕووکاری بەکارھێنەری ئێلیمنتی E کە ھەڵبژێردرابێت (بۆ نموونە «radio-button» یان «checkbox»)٣ئێلیمنتی E کە لەگەڵ سێلێکتەری «s» ناگونجێت٣ئێلیمنتی F کە لەپێشی ئەم ئێلیمنتی E ھاتبێت٣

 بلۆکی دەربڕین 
بلۆکێکی دەربڕین لە پێڕستێک لە دەربڕینەکانی ناو جووتە کەوانە لوولەکان پێک دێت. ھەر دەربڕینێک لە پرۆپێرتییەک، جووتخاڵێک (:) و نرخێک پێک دێت. ئەگەر لە دەربڕینێک زیاتر لەناو بلۆکێک ھەبوو، ئەوا دەبێت خاڵبۆرێک (;) بۆ جیاکردنەوەی ھەر دەربڕینێک دانرێت.

پرۆپێرتییەکان لە ستانداردی سی ئێس ئێس دیاری کراون. ھەر پرۆپێرتییەک کۆمەڵێک نرخی گونجاوی ھەیە. ھەندێک پرۆپێرتی دەتوانن کاریگەری لەسەر ھەر جۆرە ئێلیمنتێک بکەن، و ھەندێکی تر تەنیا بەسەر گرووپە تایبەتەکانی ئێلیمنتەکان جێبەجێ دەکرێت.

نرخەکان دەشێت کلیلەوشەکان بن، وەک «center» یان «inherit»، یان بەھا ژمارەیییەکان بن، وەک  (٢٠٠ پیکسڵ)،  (لە سەدا ٥٠ی پانیی ڤیوپۆرتەکە) یان  (لە سەدا ٨٠ی پانیی ئێلیمنتە دایکوباوکەکە). بەھای ڕەنگەکان دەتواندرێت بە کلیلەوشەکان (بۆ نموونە: "")، نرخەکانی ھێکسادیسیمڵ (بۆ نموونە: ، ھەروەھا کورتکراوە وەک )، نرخەکانی RGB لە پێوەری ٠ بۆ ٢٥٥ (بۆ نموونە: )، نرخەکانی RGBA کە ھەردووک ڕەنگ و ڕۆشنیی ئەلفا دیاری دەکات (بۆ نموونە: )، یان نرخەکانی HSL یان HSLA (بۆ نموونە:  ،) دیاری بکرێت.

 یەکەکانی درێژی 
نرخە ژمارەیییە ناسفرەکان پێوانە ھێڵییەکان نیشان دەدات؛ دەبێت یەکەی درێژی لەخۆ بگرێت کە یان کۆدی ئەلفبێیە یانیش کورتکراوەیە، وەک لە 200px یان 50vw دیارە؛ یان ھێمای ڕێژەی سەدی، وەک لە 80% دیارە. ھەندێک یەکە – cm (سانتیمەتر)؛ in (ئینچ)؛ mm (میلیمەتر)؛ pc (پیکا)؛ و pt (پۆینت) – ئابسلیووتن، ئەمە ئەوە دەگەیەنێت کە ڕەھەندی ڕێندەرکراو پشت بە پێکھاتەی پەڕەکە نابەستێت؛ ئەوانی تر – em؛ ex و px (پیکسڵ) – ڕیلەیتیڤن، کە ئەمیش ئەوە دەگەیەنێت کە ھۆکارەکانی وەک قەبارەی فۆنتی ئێلیمنتی دایکوباوک دەتوانن  کار لە پێوانە ڕێندەرکراوەکە بکەن. ئەم ھەشت یەکە تایبەتمەندییەکی CSS 1 بوون و لە گشت پێداچوونەوەکانی دواتریشدا پارێزراون. یەکە و بەھا پێشنیارکراوەکانی سی ئێس ئێسی مۆدیوولی ئاستی ٣، ئەگەر وەک سپاردەی W3C مایەوە، ئەوا حەوت یەکەی درێژیی تر دابین دەکات کە ئەمانەن: ch؛ Q؛ rem؛ vh؛ vmax؛ vmin؛ و vw.

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

بۆ نموونە، سەردێڕەکان (ئێلیمنتەکانی h1)، ژێرسەردێڕەکان (h2)، ژێرژێرسەردێڕەکان (h3)، ھتد.، بەشێوەیەکی پێکھاتەیییانە بە بەکارھێنانی ئەیچ تی ئێم ئێڵ ناسراون. لە چاپ و سەر شاشەدا، ھەڵبژاردنی فۆنت، قەبارە، ڕەنگ و جەختکردنەوە بۆ ئەم ئێلیمنتانە نیشاندەنییە.

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

بۆ نموونە، لەم نموونەیەی خوارەوەدا، ئێلیمنتێکی سەردێڕ بە دەقی سوور ناسێندرابێت، بەم شێوەیەی خوارەوە دەنووسرێت:
<h1><span style="color:red;">Chapter 1.</span></h1>

بە بەکارھێنانی سی ئێس ئێس، دەتواندرێت ھەمان ئێلیمنت کۆد بکرێتەوە بە بەکارھێنانی پرۆپێرتییەکانی شێواز بەجێگەی ئاتربیووتە نیشاندەنییەکانی ئەیچ تی ئێم ئێڵ:
<h1 style="color: red;">Chapter 1.</h1>

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

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

ھەموو ئێلیمنتەکانی h1ی ناو دۆکیومێنتەکە بەشێوەیەکی ئۆتۆماتیکی سوور دەبن بەبێ ئەوەی پێویستیان بە ھیچ کۆدێکی ڕوون بێت. ئەگەر دواتر دروستکەرەکە ویستی وا لە ئێلیمنتەکانی h1 بکات کە بەجێگەی سوور شین بن، دەشێت ئەمە بە گۆڕینی ئێلیمنتی styleەکەی بکرێت:

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

لەجیاتیی ئەوەی کە بەشێوەیەکی زۆر بەنێو دۆکیومێنتەکەدا بچیت و ڕەنگەکە بۆ ھەر تاکە ئێلیمنتێکی h1 بگۆڕیت.

ھەروەھا دەتواندرێت شێوازەکان وەک لەخوارەوە باس کراوە، لەنێو پەڕگەیەکی سی ئێس ئێسی دەرەکی دابنرێن، و بە بەکارھێنانی سینتاکسی ھاوشێوەی ئەمەی خوارەوە باردەکرێت:

<link href="path/to/file.css" rel="stylesheet" type="text/css">

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

 سەرچاوەکان 
دەتواندرێت زانیاریی سی ئێس ئێس لە سەرچاوە جۆراوجۆرەکانەوە دابین بکرێت. دەشێت ئەم سەرچاوانە وێبگەڕەکە، بەکارھێنەرەکە و دروستکەرەکە بن. زانیاریی دروستکەرەکە دەشێت زیاتر پۆڵێن کرابێتە ناو ئینڵاین، جۆری میدیا، ئیمپۆرتانت، وردیی سێلێکتەر، ڕیزبەندیی یاسا, ئینھێرتنس و پێناسەکردنی پرۆپێرتی. دەکرێت زانیاریی شێوازی سی ئێس ئێس لە دۆکیومێنتێکی جیا بێت یان چەسپ بکرێتە نێو دۆکیمێنتێکی ئەیچ تی ئێم ئێڵ. دەتواندرێت چەندین پەڕەی شێواز ھاوردە بکرێن. شێوازە جیاوازەکان دەتواندرێت بەپێی ئاوتپووت دیڤایسە بەکارھاتووەکە جێبەجێ بکرێت؛ بۆ نموونە، دەتواندرێت وەشانی شاشەکە لە وەشانە چاپکراوەکە زۆر جیاواز بێت، تا دروستکەران بە شێوەیەکی گونجاو دەرخستنەکە بۆ ھەر ئامرازێک بگونجێنن.

پەڕەی شێوازەکە بە بەرزترین لەپێشینە کۆنتڕۆڵی پیشاندانی ناوەڕۆکەکە دەکات. ئەو دەربڕینانەی کە لە بەرزترین سەرچاوەی لەپێشینە دانەندراون، بەسەر سەرچاوەیەکی لەپێشینەی خوارتر تێدەپەڕن، وەک شێوازە نوێنەرەکەی بەکارھێنەر. پرۆسەکە پێی دەوترێت cascading.

یەک لە ئامانجەکانی سی ئێس ئێس ئەوەیە کە ڕێگە بە بەکارھێنەران دەدات تا باشتر کۆنتڕۆڵی دەرخستن بکەن. کەسێک کە بەزەحمەت سەردێڕە لارە سوورەکان دەدۆزێتەوە تا بیان خوێنێتەوە، لەوانەیە پەڕەیەکی شێوازی جیا جێبەجێ بکات. بە پشتبەستن بە وێبگەڕ و وێبسایتەکە، دەشێت بەکارھێنەرێک پەڕە شێواز جۆراوجۆرەکان کە لەلایەن دیزاینەرەکانەوە دابین کراوە ھەڵبژێرێت، یان دەشێت ھەموو شێوازە زیادکراوەکان بسڕێتەوە و بە بەکارھێنانی شێوازە دیفاڵتەکەی وێبگەڕەکە سەیری سایتەکە بکات، یان دەشێت تەنیا ئەڤەرڕایدی شێوازی سەردێڕە لارە سوورەکان بەبێ گۆڕینی ئاتربیووتەکانی تر بکات.

+ سیستمی لەپێشینەی سی ئێس ئێس (بەرزترین بۆ نزمترین) لەپێشینە  جۆری سەرچاوەی سی ئێس ئێس  وەسفکردن ١  Importance  ڕوونکردنەوەی «» ئەڤەرڕایتی جۆرە لەپێشینەکانی پێشتر دەکات ٢  Inline  شێوازێکە کە لەڕێگەی ئاتربیووتی «style»ی ئەیچ تی ئێم ئێڵ بەسەر ئێلیمنتێکی ئەیچ تی ئێم ئێڵ جێبەجێ دەبێت ٣  Media Type  A property definition applies to all media types, unless a media specific CSS is defined ٤  User defined  Most browsers have the accessibility feature: a user defined CSS ٥  Selector specificity  A specific contextual selector () overwrites generic definition ٦  Rule order  دەربڕینی کۆتا یاسا لەپێشینەیەکی بەرزتری ھەیە ٧  Parent inheritance  ئەگەر پرۆپێرتییەک دیاری نەکرابوو، ئەوا لە دایکوباوکەکەی بۆی دەمێنێتەوە ٨  CSS property definition in HTML document  یاسای سی ئێس ئێس یان شێوازی ئینلاینی سی ئێس ئێس  ئەڤەرڕایتی نرخی دیفاڵتی وێبگەڕ دەکات ٩  Browser default  نزمترین لەپێشینە: نرخی دیفاڵتی وێبگەڕ لەلایەن تایبەتمەندییەکانی نرخی سەرەتاییی W3C دیاری کراوە

 تایبەتمەندێتی 
تایبەتمەندێتی ئاماژە بە کێشە ڕیلەیتیڤەکانی یاسا جۆراوجۆرەکان دەکات. ئەمە ئەوە دیاری دەکات کە کام شێواز بۆ ئێلیمنتێک جێبەجێ دەبێت کاتێک زیاد لە یەک یاسا دەتوانێت جێبەجێی بکات. بەپێی تایبەتمەندی، سێلێکتەرێکی سادە (بۆ نموونە H1) تایبەتمەندییەکی ١ی ھەیە، سێلێکتەرەکانی کڵاس تایبەتمەندییەکی ١,٠، و سێلێکتەرەکانی ئایدی تایبەتمەندیی ١,٠,٠یان ھەیە. لەبەرئەوەی نرخەکانی تایبەتمەندێتی وەک سیستمی دیسیمڵ ھەڵناگیرێن، بۆیە کۆماکان بۆ جیاکردنەوەی «ژمارەکان» بەکاردەھێندرێن. (یاسایەکی سی ئێس ئێس کە ١١ ئێلیمنت و ١١ کڵاسی ھەبێت، ئەوا تایبەتمەنیی ١١,١١ی دەبێت، نەک ١٢١).

بەم شێوەیە یاساکانی سێلێکتەرەکانی خوارەوە تایبەتمەندێتیی دیاریکراو ئەنجام دەدەن:
 سێلێکتەرەکان  تایبەتمەندێتی H1 {color: white;}  0, 0, 0, 1 P EM {color: green;}  0, 0, 0, 2 .grape {color: red;}  0, 0, 1, 0 P.bright {color: blue;}  0, 0, 1, 1 P.bright EM.dark {color: yellow;}  0, 0, 2, 2 #id218 {color: brown;}  0, 1, 0, 0 style=" "  1, 0, 0, 0

 نموونەکان 
سەرنجی ئەم پارچە بچووکە ئەیچ تی ئێم ئێڵەی خوارەوە بدە:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #xyz { color: blue; }
        </style>
    </head>
    <body>
        <p id="xyz" style="color: green;">To demonstrate specificity</p>
    </body>
</html>
لە نموونەکەی سەرەوەدا، دەربڕینەکەی ناو ئاتریبیووتی styleەکە بەسەر ئێلیمنتی <style>ەکە زاڵ دەبێت چونکە تایبەتمەندیی بەرزتری هەیە، و بەم شێوەیە، پەرەگرافەکە بە ڕەنگی سەوز دەردەکەوێت.

 ئینھێرتنس 
ئینھێرتنس تایبەتمەندییەکی سەرەکییە لە سی ئێس ئێس؛ بۆ کارکردن پشت بە پەیوەندیی نێوان باووباپیر و نەوە دەبەستێت. ئینھێرتنس ئەو میکانیزمەیە کە لەلایەن پرۆپێرتییەکان نەک تەنیا بۆ ئێلیمنتێکی دیاریکراو، بەڵکوو بۆ نەوەکانیشی جێبەجێ دەبێت. ئینھێرتنس پشت بە درەختی دۆکیومێنتەکە دەبەستێت، کە ھەڕەمی ئێلیمنتەکانی XHTMLە لەنێو پەڕەیەک بەپێی نێستینگ (nesting) بێت. دەشێت ئێلیمنتە وەچەکان ئینھێرتی نرخەکانی پرۆپێرتیی سی ئێس ئێس لە ھەر ئێلمینتێکی باووباپیریانەوە کە دەوریان داون بکەن.
بەگشتی، ئێلیمنتە وەچەکان ئینھێرتی پرۆپێرتییە پەیوەندیدارەکان بە دەق دەکەن، بەڵام پرۆپێرتییە پەیوەندیدارەکان بە سندووقەکانیانەوە ئینھێرت نەکراون. ئەو پرۆپێرتییانەی کە دەتواندرێت ئینھێرت بکرێن ئەمانەن: color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space و word-spacing. ئەو پرۆپێرتییانەی کە ناتواندرێت ئینھێرت بکرێن ئەمانەن: background, border, display, float and clear, height, و width, margin, min- and max-height و -width, outline, overflow, padding, position, text-decoration, vertical-align و z-index.

دەکرێت ئینھێرتنس بۆ خۆلادان لە دووبارە و دووبارە نووسینەوەی پرۆپێرتییە دیاریکراوەکانی نێو پەڕەی شێواز بەکاربێت، و ڕەچاوی سی ئێس ئێسێکی کورتتر دەکات.

ئینھێرتنسی سی ئێس ئێس ھەمان ئینھێرتنسی ئەو زمانە پرۆگرامسازییانەی کە لەسەر بنەمای کڵاسن نییە، کە ئاسایییە کڵاسی B وەک کڵاسی A، بەڵام بە گۆڕانکارییەوە پێناسە بکرێت. لە سی ئێس ئێسدا، ئاسایییە شێواز بدەیتە ئێلیمنتێک کە کڵاسی Aی ھەیە، بەڵام بە گۆڕانکارییەوە. بەڵام ناکرێت پێناسەی کڵاسی B بەو شێوەیە بکرێت، کە دەکرێت دواتر بۆ شێوازپێدانی چەند ئێلیمنتێک بەبێ ئەوەی پێویست بە دووبارەکردنەوەی گۆڕانکارییەکان بکات بەکاربھێندرێت.

 نموونە 
بە وەرگرتنی ئەم پەڕەی شێوازەی خوارەوە:
h1 {
   color: pink;
}
وادانێ ئێلیمنتێکی «h1»مان بە ئێلیمنتێکی لەناوەوەی ھەیە:
<h1>
   This is to <em>illustrate</em> inheritance
</h1>
ئەگەر ھیچ ڕەنگێک بۆ ئێلیمنتی «em»ەکە دیاری نەکرابوو، ئەوا وشە تۆخکراوەکە(illustrate) ھەمان ڕەنگی ئێلیمنتی دایکوباوکەکەی، «h1»ی بۆ دەمێنێتەوە. h1ی پەڕەی شێوازەکە ڕەنگی پەمەیییە، لەبەرئەوە، بەھەمان شێوە ئێلیمنتی «em»ەکە پەمەیییە.

 بۆشایی 
بۆشاییی نێوان پرۆپێرتی و سێلێکتەرەکان فەرامۆش کراوە. ئەم پارچە کۆدە:
body{overflow:hidden;background:#000000;background-image:url(images/bg.gif);background-repeat:no-repeat;background-position:left top;}
لەڕووی کارکردنەوە ھاوتای ئەمەیە:
body {
   overflow: hidden;
   background-color: #000000;
   background-image: url(images/bg.gif);
   background-repeat: no-repeat;
   background-position: left top;
}
ڕێگەیەکی باوی فۆڕماتکردنی سی ئێس ئێس تا باشتر بخوێندرێتەوە تەرخانکردنی ھێڵێک و بەجێھێشتنی بۆشایییە بۆ ھەر پرۆپێرتییەک (نموونەکەی سەرەوە). سەرەڕای فۆڕماتکردنی سی ئێس ئێس تا باشتر بخوێندرێتەوە، دەتواندرێت کەمکردنەوەی نووسینی پرۆپێرتییەکان بۆ خێراتر نووسینی کۆدەکە بەکاربھێندرێت، کە ئەمەش وا دەکات کردارەکە زۆر خێراتر جێبەجێ بکرێت کە ڕێندەر کرا:

body {
   overflow: hidden;
   background: #000 url(images/bg.gif) no-repeat left top;
}

 پزیشن 
CSS 2.1 سێ سیستمی پزیشن پێناسە دەکات:
نۆرمال فلۆو ماددە ئینڵاینەکان بەھەمان ڕێگەی پیتەکانی نێو وشەکانی نێو دەق، یەک لەدوای یەک بەدرێژاییی مەجالەکە تا ھیچ مەجالێک نامێنێت دادەندرێت، پاشان لەخوارەوە دەست بە ھێڵێکی نوێ دەکرێت. ماددە بلۆکەکان بە ستوونی ڕیز دەکرێن، وەک پەرەگرافەکان، و وەک بڕگەکانی نێو پێڕستێکی خاڵبەندکراو. نۆرمال فلۆو ماددەکانی پزیشنی ئینڵاین یان بلۆکیش لەخۆدەگرێت، و run-in boxes.
فلۆتەکان ماددەیەکی فلۆتکراو لە نۆرمال فلۆو دەردەچێت و ئەوەندەی کە مەجال ھەبێت بۆ چەپ یان ڕاست دەگوازرێتەوە. پاشان ناوەڕۆکەکەی تر لەتەنیشت ماددە فلۆتکراوەکە دادەندرێت.
پزیشنی ئابسلیووت ماددەیەکی پزیشنی ئابسلیووتکراو ھیچ شوێنێک، و ھیچ کاریگەرییەکی بەسەر نۆرمال فلۆوی ماددەکانی ترەوە نییە. شوێنە دیاریکراوەکەی خۆی لەنێو کۆنتەینەرەکەی خۆی بەسەربەخۆیی ماددەکانی تر داگیر دەکات.

 پرۆپێرتیی پزیشن 
چوار بەھای گونجاوی پرۆپێرتیی position ھەن. ئەگەر ماددەیەک بە ھەر شێوەیەک جگە لە static دانرا، ئەوا پرۆپێرتییەکانی top، bottom، left، و right بۆ دیارکردنی ئۆفسێتەکان و پزیشنەکان بەکاردەھێندرێن.
Static نرخی دیفاڵتە کە ماددەکە لە نۆرمال فلۆو دادەنێت.
Relative ماددەکە لە نۆرمال فلۆو دادەنرێت، و پاشان لەو شوێنەوە دەگوێزرێتەوە یان ئۆفسێت دەکرێت. ماددەکانی دواتری ڕیزبەندییەکە دەردەھێندرێن وەک بڵێی ماددەکە نەگوێزرابێتەوە.
Absolute پزیشنی ئابسلیووت دیاری دەکات. ئێلیمنتەکە لە پەیوەندی بە نزیکترین باووباپیری ناستاتیکەوە دادەنێت.
Fixed ماددەکە بەتەواوی لە شوێنێکی جێگیرکراو لەسەر شاشەکە دادەنێت. ھەتا وەک بەشێک لە دۆکیومێنتەکەش ڕادەکێشرێت.

 Float و clear 
دەشێ پرۆپێرتیی float یەک لە سێ نرخەکەی هەبێت. ناتواندرێت ماددەکانی پزیشنی Absolute یان fixed فلۆت بکرێن. ئاسایی ئێلیمنتەکانی تر لەدەوری ماددە فلۆتکراوەکان دەبن، مەگەر لەڕێگەی پرۆپێرتیی clearەوە ڕێگە لە کردنی ئەو کارە بگرن.

left ماددەکە بۆ چەپی ھێڵەکە کە دەرکەوتووە فلۆت دەکات؛ دەشێ ماددەکانی تر لەلای ڕاست دەرکەون.
right ماددەکە بۆ ڕاستی ھێڵەکە کە دەرکەوتووە فلۆت دەکات؛ دەشێ ماددەکانی تر لەلای چەپ دەرکەون.
clear بەزەبری ھێز وا لە ئێلیمنتەکە دەکات کە لە بەشی ژێرەوەی ئێلیمنتە فلۆتکراوەکان بۆ لای چەپ ()، ڕاست () یان ھەردووک لایەکان () دەربکەوێت.

 مێژوو 
وێنۆک|چەپ|هاکون ویوم لی، بەڕێوەبەری سەرەکیی هونەریی کۆمپانیای ئۆپێرا سۆفتوێر و ھاودروستکەری ستانداردەکانی وێبی سی ئێس ئێس

سی ئێس ئێس بۆ یەکەم جار لە ١٠ی تشرینی یەکەمی ١٩٩٤ لەلایەن هاکون ویوم لی پێشنیار کرا. ئەو کاتە، لی لەگەڵ تیم بێرنەرز لی لە سێرن کاری دەکرد. لە دەوروبەری هەمان کاتدا چەندین زمانی تری شێوازی پەڕە بۆ وێب پێشنیارکرابوون، و مشتومڕەکانی سەر خشتەکانی پۆستەی گشتی و ناوەوەی W3C بوونە هۆی پێشنیارکردنی یەکەم سی ئێس ئێس(CSS1)ی W3C  کە لە ساڵی ١٩٩٦دا بڵاوکرایەوە. بەتایبەتی، پێشنیارێک لەلایەن بێرت بۆس کاریگەر بوو؛ بووە هاونووسەری سی ئێس ئێسی ١، و بە هاودروستکەری سی ئێس ئێس دادەندرێت.

پەڕەکانی شێواز لە سەرەتاکانی  لە دەیەی ١٩٨٠ بە یەک شێوە یان دانەیەکی جیاواز بوونیان ھەبووە، و سی ئێس ئێس بۆ دابینکردنی پەڕەکانی شێواز بۆ وێب دروست کرا. یەک لە پێویستییەکانی زمانی پەڕەی شێوازی وێب بۆ ئەوە بوو کە پەڕەکانی شێواز لە سەرچاوە جیاوازەکانەوە بێنە سەر وێب. لەبەر ئەوە، زمانەکانی پەڕەی شێوازە بەردەستەکانی وەک DSSSL و FOSI گونجاو نەبوون. لە لایەکی ترەوە، سی ئێس ئێس، ڕێگە بە شێوازی دۆکیومێنتێک دەدات کە لەلایەن چەندین پەڕەی شێوازەوە بە شێوازەکانی «cascading» کاری تێ بکرێت.

 سنووردارییەکان 
ھەندێک لە سنووردارییە دیارەکانی تواناکانی ئێستای سی ئێس ئێس ئەمانەی خوارەوەن:

سێلێکتەرەکان توانای سەرکەوتنیان نییە لەکاتی ئێستادا سی ئێس ئێس ھیچ ڕێگەیەک بۆ دیاریکردنی دایکوباوک یان باووپابپیری ئێلیمنتێک پێشکەش ناکات کە لەگەڵ پێوانە دیاریکراوەکان دا بگونجێت. سێلێکتەرەکانی ئاستی ٤ی سی ئێس ئێس، کە ھێشتا لە ڕەوشی کارکردنی ڕەشنووس دایە، ھەروەکوو سێلێلکتەرێک پێشنیاز دەکرێت، بەڵام تەنیا وەک بەشێکی پرۆفایلی سێلێکتەری «تەواو»، نەک پرۆفایلی «خێرا» کە لە شێوازپێدانی داینامیکدا بەکارھاتووە. سیستمێکی سێلێکتەری پێشکەوتووتر (ھەروەکوو XPath) شێوازێکی کارامەتر بۆ پەڕەکان چالاک دەکات. 
 ناتوانێت نووسینێکی دیاریکراو بەبێ گۆڕانکاریی مارکئەپ نیشان بکات سەرەڕای سوودۆو-ئێلیمنتی ، ناتوانێت بەبێ پێویستیی بەکارھێنانی ئێلیمنتەکانی place-holder، سنوورە دیاریکراوەکانی دەق نیشان بکات.

 سوودەکان 
جیاکردنەوەی ناوەڕۆک لە دەرخستن
سی ئێس ئێس ئاسانکاریی بڵاوکردنەوەی ناوەڕۆک لە چەندین شێوازی دەرخستن بەپێی پارامەترە خاوەنناوەکان دەکات. پارامەترە خاوەنناوەکان ھەڵبژاردە دیارەکانی بەکارھێنەر، وێبگەڕە جیاوازەکان، جۆری ئامێرەکە (کۆمپیوتەری دیسکتۆپ یان ئامێری مۆبایل) کە بۆ بینینی ناوەڕۆکەکە بەکارھاتووە، شوێنی جوگرافیی بەکارھێنەرەکە و چەندین گۆڕاوی تر لەخۆ دەگرێت.
ڕێکیی تەواوی سایت
کاتێک سی ئێس ئێس بەکاریگەرییانە بەکارھات، لە ڕوانگەی «inheritance» و «cascading» ەوە، دەتواندرێت پەڕەیەکی شێوازی گشتگیر بەکار بھێندرێت تا ھەم کاریگەری و ھەم شێوازیش بە تەواوی ئێلیمنتەکانی سایتەکە بدات. ئەگەر ڕەوشێک دەرکەوت کە پێویست بکات شێوازپێدانی ئێلیمنتەکان بگۆڕدرێن یان بگونجێندرێن، ئەوا دەتواندرێت گۆڕانکارییەکان لەڕێگەی دەستکاریکردنی یاساکانی پەڕەی شێوازە گشتگیرە بکرێن. پێش سی ئێس ئێس، ئەم جۆرە چاکسازییە دژوارتر، گران و کاتکوژ بوو.
باندبەرینی
پەڕەی شێواز (جا ناوەکی یان دەرەکی بێت)، یەک جار شێوازێک بۆ ژمارەیەک لە ئێلیمنتەکانی ئەیچ تی ئێم ئێڵ کە بە class، چەشن یان ڕیلەیشنشیپ بۆ ئەواتی تر دیاریکراون دیاری دەکات. ئەمە زۆر کاریگەرترە لە دووپاتکردنەوەی زانیاریی شێوازی ئینلاین بۆ ھەریەک لەو ئێلیمنتانەی کە دێن. پەڕەی شێوازی دەرەکی عادەتەن لە کاشی وێبگەڕ ھەڵگیراوە، و لەبەرئەوە دەتوانێت لەسەر چەندین پەڕە و بەبێ ئەوەی دووبارە باربکرێتەوە، کەمکردنەوەی زۆری گواساتنەوەی دراوە لەسەر تۆڕ بەکاربێت.

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

 ستانداردکردن 
 چوارچێوەی سی ئێس ئێس 
چوارچێوەی سی ئێس ئێس کتێبخانەکانی ئامادەکراون کە مەبەستیان ڕێگەدان بە ئاسانترە شێوازی ستانداردی زیاتر بۆ پەڕەی وێب بە بەکارھێنانی زمانی شیتی شێوازی کاسادینگ. چوارچێوەی سی ئێس ئێس بریتین لە: نەخشە، بووتستراپ، چوارچێوەی کاسکاد، دامەزراوە؛ و ماتریالیز وەک بڕگە زمانەوانییەکان و کتێبخانەکانی نووسین، چوارچێوەی سی ئێس ئێس بە گشتی وەک؛ فایلەکان کە لە ئێچ تی ئێم ئێڵ . دا بە شێوەی دەرەکی بەکار دەھێنرێن، لیستکراون ھەڵبژارەک بۆ دیزاین کردن و دانانی لاپەڕەی سایتە کە دابین دەکەن. ھەندێک ھەڵبژاردنی بەردەست دابین بکە بۆ دیزاین کردن و دانانی پەڕەی سایتەکە. ھەرچەندە زۆرێک لەو چوارچێووە یانە بڵاوکراونەتەوە، بەڵام ھەندێک نووسەر زیاتر بۆ نموونەسازی خێرا، یان بۆ فێربوون بەکاری بھێنن و پێیان باشە کە سی ئێس ئێسی دەستکرد کە بۆ ھەر سایتێک بڵاوکراونەتەوە، بەبێ دیزاین کردن و پاراستن و کەمکردنەوەی تایبەتمەندییەکانی سەرەوەی کۆتایی لەگەڵ چەندین تایبەتمەندی بێسوود لە شێوازی سایتەکە گونجاو بێت.

 تێبینییەکان 

 سەرچاوەکان 

 خوێندنەوەی زیاتر 

 سی ئێس ئێس  لە چاوگ

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




پۆل:داڕشتنی وێب