سی ئێس ئێس

لە ئینسایکڵۆپیدیای ئازادی ویکیپیدیاوە
Jump to navigation Jump to search
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/

سی ئێس ئێس (بە ئینگلیزی: Cascading Style Sheets؛ کورت دەکرێتەوە بۆ 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)، ژێرسەردێڕەکان (h2)، ژێرژێرسەردێڕەکان (h3)، ھتد.، بەشێوەیەکی پێکھاتەیییانە بە بەکارھێنانی ئەیچ تی ئێم ئێڵ ناسراون. لە چاپ و سەر شاشەدا، ھەڵبژاردنی فۆنت، قەبارە، ڕەنگ و جەختکردنەوە بۆ ئەم ئێلیمنتانە نیشاندەنییە.

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

بۆ نموونە، لەم نموونەیەی خوارەوەدا، ئێلیمنتێکی سەردێڕ بە دەقی سوور ناسێندرابێت، بەم شێوەیەی خوارەوە دەنووسرێت:

<h1><font color="red">Chapter 1.</font></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">

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

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

دەتواندرێت زانیاریی سی ئێس ئێس لە سەرچاوە جۆراوجۆرەکانەوە دابین بکرێت. دەشێت ئەم سەرچاوانە وێبگەڕەکە، بەکارھێنەرەکە و دروستکەرەکە بن. The information from the author can be further classified into inline, media type, importance, selector specificity, rule order, inheritance and property definition. دەکرێت زانیاریی شێوازی سی ئێس ئێس لە دۆکیومێنتێکی جیا بێت یان چەسپ بکرێتە نێو دۆکیمێنتێکی ئەیچ تی ئێم ئێڵ. دەتواندرێت چەندین پەڕەی شێواز ھاوردە بکرێن. شێوازە جیاوازەکان دەتواندرێت بەپێی ئاوتپووت دیڤایسە بەکارھاتووەکە جێبەجێ بکرێت؛ بۆ نموونە، دەتواندرێت وەشانی شاشەکە لە وەشانە چاپکراوەکە زۆر جیاواز بێت، تا دروستکەران بە شێوەیەکی گونجاو دەرخستنەکە بۆ ھەر ئامرازێک بگونجێنن.

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

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

سیستمی لەپێشینەی سی ئێس ئێس (بەرزترین بۆ نزمترین)
لەپێشینە جۆری سەرچاوەی سی ئێس ئێس وەسفکردن
١ Importance ڕوونکردنەوەی «!important» ئەڤەرڕایتی جۆرە لەپێشینەکانی پێشتر دەکات
٢ 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 (#heading p) 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>ەکە زاڵ دەبێت چونکە تایبەتمەندیی بەرزتری هەیە، و بەم شێوەیە، پەرەگرافەکە بە ڕەنگی سەوز دەردەکەوێت.

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

ئینهێرتنس[a] تایبەتمەندییەکی سەرەکییە لە سی ئێس ئێس؛ بۆ کارکردن پشت بە پەیوەندیی نێوان باووباپیر و نەوە دەبەستێت. ئینهێرتنس ئەو میکانیزمەیە کە لەلایەن پرۆپێرتییەکان نەک تەنیا بۆ ئێلیمنتێکی دیاریکراو، بەڵکوو بۆ نەوەکانیشی جێبەجێ دەبێت.[١٦] ئینهێرتنس پشت بە درەختی دۆکیومێنتەکە دەبەستێت، کە ھەڕەمی ئێلیمنتەکانی 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.

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

ئینهێرتنسی سی ئێس ئێس ھەمان ئینهێرتنسی ئەو زمانە پرۆگرامسازییانەی کە لەسەر بنەمای کڵاسن نییە، where it is possible to define class B as "like class A, but with modifications".[١٨] With CSS, it is possible to style an element with "class A, but with modifications". However, it is not possible to define a CSS class B like that, which could then be used to style multiple elements without having to repeat the modifications.

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

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

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. ^ W3C HTML Working Group. "HTML 5. A vocabulary and associated APIs for HTML and XHTML". World Wide Web Consortium. لە ڕەسەنەوە ئەرشیڤ کراوە لە 15 July 2014. لە ڕێکەوتی ٢٨ی حوزەیرانی ٢٠١٤ ھێنراوە. 
  16. ^ ی ا Meyer، Eric A. (2006). Cascading Style Sheets: The Definitive Guide (وەشانی 3rd). O'Reilly Media, Inc. ISBN 0-596-52733-0. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2014-02-15. لە ڕێکەوتی 2014-02-16 ھێنراوە. 
  17. ^ "Assigning property values, Cascading, and Inheritance". لە ڕەسەنەوە ئەرشیڤ کراوە لە 2014-06-11. لە ڕێکەوتی 2014-06-10 ھێنراوە. 
  18. ^ "Can a CSS class inherit one or more other classes?". StackOverflow. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2017-10-14. لە ڕێکەوتی 2017-09-10 ھێنراوە. 
  19. ^ "Shorthand properties". Tutorial. Mozilla Developers. 2017-12-07. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2018-01-30. لە ڕێکەوتی 2018-01-30 ھێنراوە. 
  20. ^ ی ا ب Bos، Bert؛ و ھی تر. (7 December 2010). "9.3 Positioning schemes". Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. لە ڕەسەنەوە ئەرشیڤ کراوە لە 18 February 2011. لە ڕێکەوتی ١٦ی شوباتی ٢٠١١ ھێنراوە. 
  21. ^ Holzschlag، Molly E (2005). Spring into HTML and CSS. Pearson Education, Inc. ISBN 0-13-185586-7. 
  22. ^ Lie، Hakon W (10 Oct 1994). "Cascading HTML style sheets - a proposal" (0.92). CERN. لە ڕەسەن (Proposal)ەوە ئەرشیڤ کراوە لە 4 June 2014. لە ڕێکەوتی ٢٥ی ئایاری ٢٠١٤ ھێنراوە. 
  23. ^ Lie، Håkon Wium؛ Bos، Bert (1999). Cascading Style Sheets, designing for the Web. Addison Wesley. ISBN 0-201-59625-3. لە ڕێکەوتی ٢٣ی حوزەیرانی ٢٠١٠ ھێنراوە. 
  24. ^ "Cascading Style Sheets, level 1". World Wide Web Consortium. 
  25. ^ Bos، Bert (14 April 1995). "Simple style sheets for SGML & HTML on the web". World Wide Web Consortium. لە ڕێکەوتی ٢٠ی حوزەیرانی ٢٠١٠ ھێنراوە. 
  26. ^ Lie، Håkon Wium؛ Bos، Bert (1999). Cascading Style Sheets, designing for the Web. Addison Wesley. ISBN 0-201-59625-3. لە ڕێکەوتی ٢٣ی حوزەیرانی ٢٠١٠ ھێنراوە. 
  27. ^ ی ا Molly Holzschlag (January 2012). "Seven Things Still Missing from CSS". .net Magazine. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2017-03-05. لە ڕێکەوتی 2017-03-04 ھێنراوە. 
  28. ^ "Selectors Level 4 – Determining the Subject of a Selector". W3.org. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2013-08-17. لە ڕێکەوتی 2013-08-13 ھێنراوە. 
  29. ^ "Selectors Level 4 – Fast vs Complete Selector Profiles". W3.org. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2013-08-17. لە ڕێکەوتی 2013-08-13 ھێنراوە. 
  30. ^ Snook، Jonathan (October 2010). "Why we don't have a parent selector". snook.ca. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2012-01-18. لە ڕێکەوتی 2012-01-26 ھێنراوە. 
  31. ^ "Pure CSS Popups". meyerweb.com. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2009-12-09. لە ڕێکەوتی 2009-11-19 ھێنراوە. 
  32. ^ Tab Atkins Jr. "CSS apply rule". GitHub. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2016-02-22. لە ڕێکەوتی 2016-02-27 ھێنراوە. 
  33. ^ "CSS Flexible Box Layout Module". Can I use... Support tables for HTML5, CSS3, etc. CanIUse.com. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2016-02-23. 
  34. ^ "Internet Explorer End of Support". Microsoft. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2019-06-02. لە ڕێکەوتی 2016-02-27 ھێنراوە. 
  35. ^ ی ا "About Dynamic Properties". Msdn.microsoft.com. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2017-10-14. لە ڕێکەوتی 2009-06-20 ھێنراوە. 
  36. ^ "CSS Values and Units Module Level 3". W3.org. 6 June 2019. لە ڕەسەنەوە ئەرشیڤ کراوە لە 23 April 2008. 
  37. ^ "calc() as CSS unit value". Can I use... Support tables for HTML5, CSS3, etc. CanIUse.com. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2016-03-04. 
  38. ^ "CSS Multi-column Layout Module". World Wide Web Consortium. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2011-04-29. لە ڕێکەوتی 2011-05-01 ھێنراوە. 
  39. ^ "Can I use... Support tables for HTML5, CSS3, etc.". CanIUse.com. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2010-08-21. لە ڕێکەوتی 2016-02-27 ھێنراوە. 
  40. ^ Cederholm، Dan؛ Ethan Marcotte (2009). Handcrafted CSS: More Bulletproof Web Design. New Riders. پەڕە 114. ISBN 978-0-321-64338-4. لە ڕەسەنەوە ئەرشیڤ کراوە لە 20 December 2012. لە ڕێکەوتی ١٩ی حوزەیرانی ٢٠١٠ ھێنراوە. 
  41. ^ Antti، Hiljá. "OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?". clubmate.fi. Hiljá. لە ڕەسەنەوە ئەرشیڤ کراوە لە 2 June 2015. لە ڕێکەوتی ٠٢ی حوزەیرانی ٢٠١٥ ھێنراوە. 

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

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


ھەڵەی ژێدەرەکان: <ref> tags exist for a group named "lower-alpha", but no corresponding <references group="lower-alpha"/> tag was found