سی ئێس ئێس

زمانی شێوازی پەڕە

سی ئێس ئێس (بە ئینگلیزی: Cascading Style Sheets؛ کورت دەکرێتەوە بۆ CSS) زمانێکی شێوازی پەڕەیە کە بۆ وەسفکردنی دەرخستنی دۆکیومێنتێکی نووسراو بە زمانێکی مارکئەپ وەک ئەیچ تی ئێم ئێڵ بەکارهاتووە.[١] سی ئێس ئێس لەپاڵ ئەیچ تی ئێم ئێڵ و جاڤاسکریپت، بەردێکی بناغەی تەکنۆلۆژیای وێبە.[٢]

Cascading Style Sheets (CSS)
CSS3 logo and wordmark.svg
پێوەکراوەی ناوی پەڕگە.css
Internet media typetext/css
Uniform Type Identifier (UTI)public.css
گەشەی پێ دراوە لەلایەن
وەشانی سەرەتا١٧ی کانوونی یەکەمی ١٩٩٦؛ ٢٣ ساڵ لەمەوبەر (١٩٩٦-١٢-17)
چەشنی فۆڕماتزمانی شێوازی پەڕە
ستانداردەکان
وێبگەwww.w3.org/Style/CSS/

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

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

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

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

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

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

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

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

سێلێکتەردەستکاری

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

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

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

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

کڵاسەکانی سوودۆو لە سێلێکتەرەکانی سی ئێس ئێس بەکارھاتوون بۆ ڕێگەدان بە فۆڕماتکردن بەپێی ئەو زانیارییەی کە لە درەختی دۆکیومێنتەکە نییە. نموونەیەکی کڵاسی سوودۆو کە بەزۆری بەکاردێت :hoverە، کە تەنیا کاتێک ناوەڕۆکەکە دیاری دەکات کە بەکارھێنەرەکە «ئاماژە بە ئێلیمنتە بینراوەکە دەکات»، کە عادەتەن بە ڕاگرتنی تیری ماوسەکە لەسەری دەکرێت. پاشکۆی سێلێکتەرێکە وەک لە a:hover یان #elementid:hover دیارە. کڵاسی سوودۆو ئێلیمنتەکانی دۆکیومێنت پۆلێن دەکات. وەک :link یان :visited، لەکاتێکدا ئێلیمنتی سوودۆو ھەڵبژاردەیەک دروست دەکات کە لە بەشە ئێلیمنتەکان پێک بێت، وەک ::first-line یان ::first-letter.[٦]

دەشێت سێلێکتەرەکان بە زۆر ڕێگە تێکەڵ بکرێن تا نەرمی و تایبەتێتییەکی گەورە بەدەست بھێندرێت.[٧] Multiple selectors may be joined in a spaced list to specify elements by location, element type, id, class, or any combination thereof. The order of the selectors is important. بۆ نموونە، div .myClass {color: red;} بەسەر ھەموو ئێلیمنتەکانی کڵاسی myClass کە لەناو ئێلیمنتەکانی divن جێبەجێ دەبێت، لەکاتێکدا .myClass div {color: red;} بەسەر ھەموو ئێلیمنتەکانی div کە لەناو ئێلیمنتەکانی کڵاسی myClassن جێبەجێ دەبێت.

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

شێواز لەگەڵ...دەگونجێ سەرەتا لە سی ئێس ئێسی
ئاستی...ناسێندرا
E ئێلیمنتی جۆری E ١
E:link an E element is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) ١
E:active ئێلیمنتی E لەماوەی کردەوە تایبەتەکانی بەکارھێنەر ١
E::first-line ھێڵی یەکەمی فۆڕماتکراوی ئێلیمنتی E ١
E::first-letter پیتی یەکەمی فۆڕماتکراوی ئێلیمنتی E ١
.c هەموو ئەو ئێلیمنتانەی کە "class="c ١
#myid ئەو ئێلیمنتەی کە "id="myid ١
E.warning ئێلیمنتی E کە کڵاسەکەی «warning»ە (زمانی دۆکیومێنتەکە ئەوە دیاری دەکات کە چۆن کڵاسەکە دۆزراوەتەوە) ١
E#myid ئێلیمنتی E کە ئایدییەکەی یەکسانە بە «myid» ١
.c#myid ئەو ئێلیمنتەی کە "class="c و ئایدییەکەی یەکسانە بە «myid» ١
E F ئێلیمنتی Fی ناو ئێلیمنتی E ١
* هەر ئێلیمنتێک ٢
E[foo] ئێلیمنتی E بە ئاتربیووتی «foo» ٢
E[foo="bar"] ئێلیمنتی E کە نرخی ئاتربیووتی «foo» بەتەواوی یەکسانە بە «bar» ٢
E[foo~="bar"] ئێلیمنتی E کە نرخی ئاتربیووتی «foo» کۆمەڵێک لە نرخەکانی بۆشایییە جیاکراوەکان، کە یەک لەوان بەتەواوی یەکسانە بە «bar» ٢
E[foo|="en"] ئێلیمنتی E کە ئاتربیووتی «foo" has a hyphen-separated list of values beginning (from the left) with "en" ٢
E:first-child نۆبەرە (مناڵی یەکەم)ی ئێلیمنتی E ٢
E:lang(fr) ئێلیمنتی جۆری E بە زمانی «fr» (زمانی دۆکیومێنتەکە ئەوە دیاری دەکات کە چۆن زمانەکە دۆزراوەتەوە) ٢
E::before ناوەڕۆکی دروستکراو لەپێش ناوەڕۆکی ئێلیمنتی E ٢
E::after ناوەڕۆکی دروستکراو لەدوای ناوەڕۆکی ئێلیمنتی E ٢
E > F ئێلیمنتی F کە دایکوباوکەکەی ئێلیمنتی E بێت ٢
E + F ئێلیمنتی F کە ڕاستەوخۆ لەپێشی ئەم ئێلیمنتی E ھاتبێت ٢
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" ٣
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" ٣
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" ٣
E:root ڕەگ و ڕیشەی دۆکیومێنتەکە، ئێلیمنتی E ٣
E:nth-child(n) مناڵی n-ھەمی ئێلیمنتی E ٣
E:nth-last-child(n) مناڵی n-ھەمی ئێلیمنتی E، بە ژماردن لە کۆتا دانەوە ٣
E:nth-of-type(n) خزمی n-ھەمی ئێلیمنتی E ٣
E:nth-last-of-type(n) خزمی n-ھەمی ئێلیمنتی E، بە ژماردن لە کۆتا دانەوە ٣
E:last-child کۆتا مناڵی ئێلیمنتی E ٣
E:first-of-type an E element, first sibling of its type ٣
E:last-of-type an E element, last sibling of its type ٣
E:only-child an E element, only child of its parent ٣
E:only-of-type an E element, only sibling of its type ٣
E:empty ئێلیمنتی E کە ھیچ مناڵێکی نییە (بە لەخۆگرتنی دەقەکانیشەوە) ٣
E:target ئێلیمنتی E کە دەبێتە ئامانجی ئاڕاستەکردنی URLەکە ٣
E:enabled ڕووکاری بەکارھێنەری ئێلیمنتی E کە چالاک کراوە ٣
E:disabled ڕووکاری بەکارھێنەری ئێلیمنتی E کە ناچالاک کراوە ٣
E:checked ڕووکاری بەکارھێنەری ئێلیمنتی E کە ھەڵبژێردرابێت (بۆ نموونە «radio-button» یان «checkbox») ٣
E:not(s) ئێلیمنتی E کە لەگەڵ سێلێکتەری «s» ناگونجێت ٣
E ~ F ئێلیمنتی F کە لەپێشی ئەم ئێلیمنتی E ھاتبێت ٣

بلۆکی دەربڕیندەستکاری

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

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

نرخەکان دەشێت کلیلەوشەکان بن، وەک «center» یان «inherit»، یان بەھا ژمارەیییەکان بن، وەک 200px (٢٠٠ پیکسڵ)، 50vw (لە سەدا ٥٠ی پانیی ڤیوپۆرتەکە) یان 80% (لە سەدا ٨٠ی پانیی ئێلیمنتە دایکوباوکەکە). بەھای ڕەنگەکان دەتواندرێت بە کلیلەوشەکان (بۆ نموونە: "red")، نرخەکانی ھێکسادیسیمڵ (بۆ نموونە: #FF0000، ھەروەھا کورتکراوە وەک #F00)، نرخەکانی RGB لە پێوەری ٠ بۆ ٢٥٥ (بۆ نموونە: rgb(255, 0, 0))، نرخەکانی RGBA کە ھەردووک ڕەنگ و ڕۆشنیی ئەلفا دیاری دەکات (بۆ نموونە: rgba(255, 0, 0, 0.8))، یان نرخەکانی HSL یان HSLA (بۆ نموونە: hsla(000, 100%, 50%, 80%) ،hsl(000, 100%, 50%)) دیاری بکرێت.[١٢]

یەکەکانی درێژیدەستکاری

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

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

h1 {
   color: pink;
}
<link href="path/to/file.css" rel="stylesheet" type="text/css">
سێلێکتەرەکان Specificity
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> ەکەی تر زاڵ دەبێت لەبەرئەوەی تایبەتمەندیی بەرزتری هەیە، و بەم شێوەیە، پەرەگرافەکە بە ڕەنگی سەوز دەردەکەوێت.

ئینهێرتنسدەستکاری

نموونەدەستکاری

بە وەرگرتنی ئەم پەڕەی شێوازەی خوارەوە:

h1 {
   color: pink;
}

وادانێ ئێلیمنتێکی «h1»مان بە ئێلیمنتێکی(emphasizing) «em» لەناوەوەی ھەیە:

<h1>
   This is to <em>illustrate</em> inheritance
</h1>

ئەگەر ھیچ ڕەنگێک بۆ ئێلیمنتی «em»ەکە دیاری نەکرابوو، ئەوا وشە تۆخکراوەکە(illustrate) ھەمان ڕەنگی ئێلیمنتی دایکوباوکەکەی، «h1»ی بۆ دەمێنێتەوە. h1ی پەڕەی شێوازەکە ڕەنگی پەمەیییە، لەبەرئەوە، بەھەمان شێوە ئێلیمنتی «em»ەکە پەمەیییە.

Whitespaceدەستکاری

بۆشاییی نێوان پرۆپێرتی و سێلێکتەرەکان فەرامۆش کراوە. ئەم پارچە کۆدە:

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 defines three positioning schemes:

نۆرمال فلۆو
Inline items are laid out in the same way as the letters in words in text, one after the other across the available space until there is no more room, then starting a new line below. Block items stack vertically, like paragraphs and like the items in a bulleted list. Normal flow also includes relative positioning of block or inline items, and run-in boxes.
فلۆتەکان
A floated item is taken out of the normal flow and shifted to the left or right as far as possible in the space available. Other content then flows alongside the floated item.
پزیشنی ئابسلیووت
An absolutely positioned item has no place in, and no effect on, the normal flow of other items. It occupies its assigned position in its container independently of other items.[١٦]

پرۆپێرتیی پزیشندەستکاری

There are four possible values of the position property. If an item is positioned in any way other than static, then the further properties top, bottom, left, and right are used to specify offsets and positions.

Static
نرخە بنەڕەتییەکەیە کە ماددەکە لە نۆرمال فلۆو دادەنێت
Relative
The item is placed in the normal flow, and then shifted or offset from that position. Subsequent flow items are laid out as if the item had not been moved.
Absolute
Specifies absolute positioning. The element is positioned in relation to its nearest non-static ancestor.
Fixed
ماددەکە لە شوێنێکی چەسپاو لەسەر شاشەکە بەتەواوی دادەنێت ھەتا ئەگەر ماوەی دۆکیومێنتەکەیش بەسکڕۆڵ بوو[١٦]

Float و clearدەستکاری

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

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

مێژوودەستکاری

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

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

CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was working with Tim Berners-Lee at CERN.[٢٢] Several other style sheet languages for the web were proposed around the same time, and discussions on public mailing lists and inside World Wide Web Consortium resulted in the first W3C CSS Recommendation (CSS1) being released in 1996. In particular, a proposal by Bert Bos was influential; he became co-author of CSS1, and is regarded as co-creator of CSS.


Style sheets have existed in one form or another since the beginnings of Standard Generalized Markup Language (SGML) in the 1980s, and CSS was developed to provide style sheets for the web. One requirement for a web style sheet language was for style sheets to come from different sources on the web. Therefore, existing style sheet languages like DSSSL and FOSI were not suitable. CSS, on the other hand, let a document's style be influenced by multiple style sheets by way of "cascading" styles.

CSS 1دەستکاری

CSS 2دەستکاری

CSS 2.1دەستکاری

Summary of main module-specifications
مۆدیوول Specification title دۆخ ڕێکەوت
css3-background CSS Backgrounds and Borders Module Level 3  Candidate Rec. Oct 2017
css3-box CSS basic box model Working Draft Jul 2018
css-cascade-3 CSS Cascading and Inheritance Level 3  Candidate Rec. May 2016
css3-color CSS Color Module Level 3 Recommendation Jun 2018
css3-content CSS3 Generated and Replaced Content Module  Working Draft Jun 2016
css-fonts-3 CSS Fonts Module Level 3 Recommendation Sep 2018
css3-gcpm CSS Generated Content for Paged Media Module Working Draft May 2014
css3-layout CSS Template Layout Module Note Mar 2015
css3-mediaqueries  Media Queries Recommendation Jun 2012
mediaqueries-4  Media Queries Level 4 Candidate Rec. Sep 2017
css3-multicol  Multi-column Layout Module Level 1 Working Draft May 2018
css3-page CSS Paged Media Module Level 3 Working Draft Mar 2013
selectors-3 Selectors Level 3 Recommendation Nov 2018
selectors-4 Selectors Level 4 Working Draft Feb 2018
css3-ui CSS Basic User Interface Module Level 3 (CSS3 UI) Recommendation Jun 2018

CSS 4دەستکاری

پشتگیریی وێبگەڕدەستکاری

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

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

سێلێکتەرەکان توانای سەرکەوتنیان نییە
لەکاتی ئێستادا سی ئێس ئێس ھیچ ڕێگەیەک بۆ دیاریکردنی دایکوباوک یان باووپابپیری ئێلیمنتێک پێشکەش ناکات کە لەگەڵ پێوانە دیاریکراوەکان دا بگونجێت.[٢٣] سێلێکتەرەکانی ئاستی ٤ی سی ئێس ئێس، کە ھێشتا لە ڕەوشی کارکردنی ڕەشنووس دایە، ھەروەکوو سێلێلکتەرێک پێشنیاز دەکرێت،[٢٤] بەڵام تەنیا وەک بەشێکی پرۆفایلی سێلێکتەری «تەواو»، نەک پرۆفایلی «خێرا» کە لە شێوازپێدانی داینامیکدا بەکارھاتووە.[٢٥] سیستمێکی سێلێکتەری پێشکەوتووتر (ھەروەکوو XPath) شێوازێکی کارامەتر بۆ پەڕەکان چالاک دەکات. The major reasons for the CSS Working Group previously rejecting proposals for parent selectors are related to browser performance and incremental rendering issues.[٢٦]
Cannot explicitly declare new scope independently of position
Scoping rules for properties such as z-index look for the closest parent element with a position:absolute or position:relative attribute. This odd coupling has undesired effects. For example, it is impossible to avoid declaring a new scope when one is forced to adjust an element's position, preventing one from using the desired scope of a parent element.
Pseudo-class dynamic behavior not controllable
CSS implements pseudo-classes that allow a degree of user feedback by conditional application of alternate styles. One CSS pseudo-class, ":hover", is dynamic (equivalent of JavaScript "onmouseover") and has potential for abuse (e.g., implementing cursor-proximity popups),[٢٧] but CSS has no ability for a client to disable it (no "disable"-like property) or limit its effects (no "nochange"-like values for each property).
ناتوانێت ناو لە یاساکان بنێت
ھیچ ڕێگایەک نییە تا ناو لە یاسایەکی سی ئێس ئێس بنێت، کە بیەوێت ڕێگا بە (بۆ نموونە) سکریپتەکانی کڵاینت-سایدێک بدات تا ئاماژە بە یاسایەک بدات ھەتا ئەگەر سێلێکتەرەکەیشی بگۆڕدرێت.
ناتوانێت شێوازەکان لە یاسایەکەوە بۆناو یاسایەکی تر لەخۆگرێ
CSS styles often must be duplicated in several rules to achieve a desired effect, causing additional maintenance and requiring more thorough testing. Some new CSS features were proposed to solve this, but (as of February, 2016) are not yet implemented anywhere.[٢٨]
ناتوانێت نووسینێکی دیاریکراو بەبێ گۆڕانکاریی مارکئەپ نیشان بکات
سەرەڕای سوودۆو-ئێلیمنتی :first-letter، ناتوانێت بەبێ پێویستیی بەکارھێنانی ئێلیمنتەکانی place-holder، سنوورە دیاریکراوەکانی دەق نیشان بکات.

کێشەکانی پێشوودەستکاری

Additionally, several more issues were present in prior versions of the CSS standard, but have been alleviated:

Vertical control limitations
Though horizontal placement of elements was always generally easy to control, vertical placement was frequently unintuitive, convoluted, or outright impossible. Simple tasks, such as centering an element vertically or placing a footer no higher than bottom of the viewport required either complicated and unintuitive style rules, or simple but widely unsupported rules.[٢٣] The Flexible Box Module improved the situation considerably and vertical control is much more straightforward and supported in all of the modern browsers.[٢٩] Older browsers still have those issues, but most of those (mainly Internet Explorer 9 and below) are no longer supported by their vendors.[٣٠]
Absence of expressions
There was no standard ability to specify property values as simple expressions (such as margin-left: 10% 3em + 4px;). This would be useful in a variety of cases, such as calculating the size of columns subject to a constraint on the sum of all columns. Internet Explorer versions 5 to 7 support a proprietary expression() statement,[٣١] with similar functionality. This proprietary expression() statement is no longer supported from Internet Explorer 8 onwards, except in compatibility modes. This decision was taken for "standards compliance, browser performance, and security reasons".[٣١] However, a candidate recommendation with a calc() value to address this limitation has been published by the CSS WG[٣٢] and has since been supported in all of the modern browsers.[٣٣]
Lack of column declaration
Although possible in current CSS 3 (using the column-count module),[٣٤] layouts with multiple columns can be complex to implement in CSS 2.1. With CSS 2.1, the process is often done using floating elements, which are often rendered differently by different browsers, different computer screen shapes, and different screen ratios set on standard monitors. All of the modern browsers support this CSS 3 feature in one form or another.[٣٥]

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

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

کردنە پێوانەییدەستکاری

چوارچێوەکاندەستکاری

چوارچێوەکانی سی ئێس ئێس پێشتر لایبرارییەکانیان ئامادەکردوون کە مانای ڕێگەپێدانی ئاسانتر، دەگەیەنن are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language. CSS frameworks include Foundation, Blueprint, Bootstrap, Cascade Framework and Materialize. Like programming and scripting language libraries, CSS frameworks are usually incorporated as external .css sheets referenced in the HTML <head>. They provide a number of ready-made options for designing and laying out the web page. Although many of these frameworks have been published, some authors use them mostly for rapid prototyping, or for learning from, and prefer to 'handcraft' CSS that is appropriate to each published site without the design, maintenance and download overhead of having many unused features in the site's styling.[٣٦]

مێتۆدۆلۆجییەکانی دیزاییندەستکاری

As the size of CSS resources used in a project increases, a development team often needs to decide on a common design methodology to keep them organized. The goals are ease of development, ease of collaboration during development and performance of the deployed stylesheets in the browser. Popular methodologies include OOCSS (object oriented CSS), ACSS (atomic CSS), oCSS (organic Cascade Style Sheet), SMACSS (scalable and modular architecture for CSS), and BEM (block, element, modifier).[٣٧]

سەرچاوەکاندەستکاری

  1. ^ "CSS developer guide". Mozilla Developer Network. لە ڕێکەوتی 2015-09-24 ھێنراوە. 
  2. ^ Flanagan، David. JavaScript - The definitive guide (وەشانی 6). پەڕە 1. JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages. 
  3. ^ "What is CSS?". World Wide Web Consortium. لە ڕێکەوتی 2010-12-01 ھێنراوە. 
  4. ^ "Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript". HTMLGoodies. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2014-10-20. لە ڕێکەوتی 2014-10-16 ھێنراوە. 
  5. ^ "W3C CSS validation service". لە ڕەسەنەوە ئەرشیڤ کراوە لە 2011-02-14. لە ڕێکەوتی 2012-06-30 ھێنراوە. 
  6. ^ "W3C CSS2.1 specification for pseudo-elements and pseudo-classes". World Wide Web Consortium. 7 June 2011. لە ڕەسەنەوە ئەرشیڤ کراوە لە 30 April 2012. لە ڕێکەوتی ٣٠ی نیسانی ٢٠١٢ ھێنراوە. 
  7. ^ see the complete definition of selectors at the W3C Web site Archived 2006-04-23 لە وەیبەک مەشین..
  8. ^ "Selectors Level 3". W3.org. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2014-06-03. لە ڕێکەوتی 2014-05-30 ھێنراوە. 
  9. ^ "W3C CSS2.1 specification for rule sets, declaration blocks, and selectors". World Wide Web Consortium. 7 June 2011. لە ڕەسەنەوە ئەرشیڤ کراوە لە 28 March 2008. لە ڕێکەوتی 2009-06-20 ھێنراوە. 
  10. ^ "Full property table". W3.org. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2014-05-30. لە ڕێکەوتی 2014-05-30 ھێنراوە. 
  11. ^ "Index of CSS properties". www.w3.org. لە ڕێکەوتی 2020-08-09 ھێنراوە. 
  12. ^ "CSS Color". Mozilla Developer Network. 2016-06-28. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2016-09-21. لە ڕێکەوتی 2016-08-23 ھێنراوە. 
  13. ^ "6.1 Length units". Cascading Style Sheets, level 1. 17 December 1996. لە ڕەسەنەوە ئەرشیڤ کراوە لە 14 June 2019. لە ڕێکەوتی ٢٠ی حوزەیرانی ٢٠١٩ ھێنراوە. 
  14. ^ "5. Distance Units: the <length> type". CSS Values and Units Module Level 3. 6 June 2019. لە ڕەسەنەوە ئەرشیڤ کراوە لە 7 June 2019. لە ڕێکەوتی ٢٠ی حوزەیرانی ٢٠١٩ ھێنراوە. 
  15. ^ "Shorthand properties". Tutorial. Mozilla Developers. 2017-12-07. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2018-01-30. لە ڕێکەوتی 2018-01-30 ھێنراوە. 
  16. ^ ی ا ب Bos، Bert؛ و ھی تر. (7 December 2010). "9.3 Positioning schemes". Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. لە ڕەسەنەوە ئەرشیڤ کراوە لە 18 February 2011. لە ڕێکەوتی ١٦ی شوباتی ٢٠١١ ھێنراوە. 
  17. ^ Holzschlag، Molly E (2005). Spring into HTML and CSS. Pearson Education, Inc. ISBN 0-13-185586-7. 
  18. ^ Lie، Hakon W (10 Oct 1994). "Cascading HTML style sheets - a proposal" (0.92). CERN. لە ڕەسەن (Proposal)ەوە ئەرشیڤ کراوە لە 4 June 2014. لە ڕێکەوتی ٢٥ی ئایاری ٢٠١٤ ھێنراوە. 
  19. ^ Lie، Håkon Wium؛ Bos، Bert (1999). Cascading Style Sheets, designing for the Web. Addison Wesley. ISBN 0-201-59625-3. لە ڕێکەوتی ٢٣ی حوزەیرانی ٢٠١٠ ھێنراوە. 
  20. ^ "Cascading Style Sheets, level 1". World Wide Web Consortium. 
  21. ^ Bos، Bert (14 April 1995). "Simple style sheets for SGML & HTML on the web". World Wide Web Consortium. لە ڕێکەوتی ٢٠ی حوزەیرانی ٢٠١٠ ھێنراوە. 
  22. ^ Lie، Håkon Wium؛ Bos، Bert (1999). Cascading Style Sheets, designing for the Web. Addison Wesley. ISBN 0-201-59625-3. لە ڕێکەوتی ٢٣ی حوزەیرانی ٢٠١٠ ھێنراوە. 
  23. ^ ی ا Molly Holzschlag (January 2012). "Seven Things Still Missing from CSS". .net Magazine. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2017-03-05. لە ڕێکەوتی 2017-03-04 ھێنراوە. 
  24. ^ "Selectors Level 4 – Determining the Subject of a Selector". W3.org. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2013-08-17. لە ڕێکەوتی 2013-08-13 ھێنراوە. 
  25. ^ "Selectors Level 4 – Fast vs Complete Selector Profiles". W3.org. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2013-08-17. لە ڕێکەوتی 2013-08-13 ھێنراوە. 
  26. ^ Snook، Jonathan (October 2010). "Why we don't have a parent selector". snook.ca. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2012-01-18. لە ڕێکەوتی 2012-01-26 ھێنراوە. 
  27. ^ "Pure CSS Popups". meyerweb.com. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2009-12-09. لە ڕێکەوتی 2009-11-19 ھێنراوە. 
  28. ^ Tab Atkins Jr. "CSS apply rule". GitHub. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2016-02-22. لە ڕێکەوتی 2016-02-27 ھێنراوە. 
  29. ^ "CSS Flexible Box Layout Module". Can I use... Support tables for HTML5, CSS3, etc. CanIUse.com. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2016-02-23. 
  30. ^ "Internet Explorer End of Support". Microsoft. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2019-06-02. لە ڕێکەوتی 2016-02-27 ھێنراوە. 
  31. ^ ی ا "About Dynamic Properties". Msdn.microsoft.com. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2017-10-14. لە ڕێکەوتی 2009-06-20 ھێنراوە. 
  32. ^ "CSS Values and Units Module Level 3". W3.org. 6 June 2019. لە ڕەسەنەوە ئەرشیڤ کراوە لە 23 April 2008. 
  33. ^ "calc() as CSS unit value". Can I use... Support tables for HTML5, CSS3, etc. CanIUse.com. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2016-03-04. 
  34. ^ "CSS Multi-column Layout Module". World Wide Web Consortium. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2011-04-29. لە ڕێکەوتی 2011-05-01 ھێنراوە. 
  35. ^ "Can I use... Support tables for HTML5, CSS3, etc.". CanIUse.com. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2010-08-21. لە ڕێکەوتی 2016-02-27 ھێنراوە. 
  36. ^ Cederholm، Dan؛ Ethan Marcotte (2009). Handcrafted CSS: More Bulletproof Web Design. New Riders. پەڕە 114. ISBN 978-0-321-64338-4. لە ڕەسەنەوە ئەرشیڤ کراوە لە 20 December 2012. لە ڕێکەوتی ١٩ی حوزەیرانی ٢٠١٠ ھێنراوە. 
  37. ^ Antti، Hiljá. "OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?". clubmate.fi. Hiljá. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2 June 2015. لە ڕێکەوتی ٠٢ی حوزەیرانی ٢٠١٥ ھێنراوە. 

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

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