سی ئێس ئێس
 | |
| پێوەکراوەی ناوی پەڕگە | .css |
|---|---|
| Internet media type | text/css |
| Uniform Type Identifier (UTI) | public.css |
| گەشەی پێ دراوە لەلایەن | |
| وەشانی سەرەتا | ١٧ی کانوونی یەکەمی ١٩٩٦ |
| چەشنی فۆڕمات | زمانی شێوازی پەڕە |
| ستانداردەکان | |
| وێبگە | www |
سی ئێس ئێس (بە ئینگلیزی: Cascading Style Sheets؛ کورت دەکرێتەوە بۆ CSS) زمانێکی شێوازی پەڕەیە کە بۆ وەسفکردنی دەرخستنی دۆکیومێنتێکی نووسراو بە زمانێکی مارکئەپ وەک ئەیچ تی ئێم ئێڵ بەکارهاتووە.[١] سی ئێس ئێس لەپاڵ ئەیچ تی ئێم ئێڵ و جاڤاسکریپت، بەردێکی بناغەی تەکنۆلۆژیای وێبە.[٢]
سی ئێس ئێس وا دیزاین کراوە کە توانای جیاکردنەوەی دەرخستن و ناوەڕۆک، کە بریتین لە ڕێکوپێککردنی پەڕە، ڕەنگەکان، و فۆنتەکانی هەبێت.[٣] ئەم جیاکردنەوەیە دەتوانێت بەئاسانی ناوەڕۆک چاک و باشتر بکات، نەرمیی زیاتر دابین بکات و دەسەڵاتی لە دیاریکردنی تایبەتمەندییەکانی دەرخستن هەیە، دەتوانێت چەندین پەڕەی وێب چالاک بکات تا لەڕێگەی دیاریکردنی سی ئێس ئێسە پەیوەندیدارەکە لەناو پەڕگەیەکی .cssی جیا شێوازەکە ھاوبەشی پێ بکات کە ئاڵۆزی و دووبارەبوونەوەکان لە پێکھاتەی ناوەڕۆکەکە کەم دەکاتەوە ھەروەھا دەتواندرێت چالاککردنی پەڕگەی .cssەکە کاش بکرێت تا خێراییی بارکردنی پەڕەکە لەنێوان ئەو پەڕانەی کە پەڕگەکە و شێوازەکەی ھاوبەشی پێ دەکەن باشتر بکات.
جیاکردنەوەی شێواز و ناوەڕۆکیش کردەنی دەکات تا ھەمان پەڕەی مارکئەپەکە بە شێوازە جیاکان بۆ مێتۆدە جیاوازەکانی ڕێندەرکردن پیشان بدات، وەک لەسەر شاشە، لە چاپ، بە دەنگ (لەڕێگەی وێبگەڕی پەیوەست بە قسە یان سکرین ڕیدەر)، و لەسەر ئامێرە ھەستپێکراوەکانی Braille-based. ھەروەھا سی ئێس ئێس یاسای شێوازی جێگرەوەی بۆ ئامێری مۆبایل ھەیە ئەگەر ناوەڕۆکەکە لەسەر ئامێری مۆبایل دەستی پێ گەیەندرا.[٤]
ناوی cascading لە پلانی لەپێشینەی دەستنیشانکراوەوە ھاتووە بۆ دیاریکردنی ئەوەی کە کام یاسای شێواز جێبەجێ دەکرێت ئەگەر زیاتر لە یەک یاسا لەگەڵ ئێلیمنتێکی تایبەتمەند بگونجێت. ئەم پلانی لەپێشینەی «cascading»ە چاوەڕوانکراوە.
تایبەتمەندییەکانی سی ئێس ئێس لەلایەن کۆمپانیاکانی وێب (W3C) پاڵپشتی دەکرێ. جۆری میدیای ئینتەرنێت (MIME type) text/css لەلایەن RFC 2318 تۆمارکراوە بۆ بەکارھێنان لەگەڵ سی ئێس ئێس (ئازاری ١٩٩٨). W3C کار بە خزمەتگوزاریی ڕەواییی سی ئێس ئێسی خۆڕایی بۆ بەڵگەنامەکانی سی ئێس ئێس دەکات.[٥]
سەرەڕای ئەیچ تی ئێم ئێڵ، زمانەکانی تری مارکئەپ پشتگیریی بەکارھێنانی سی ئێس ئێس دەکەن لەوانەش XHTML، XMLی ئاشکرا، SVG و XUL.
سینتاکس
[دەستکاری]سی ئێس ئێس سینتاکسێکی سادەی هەیە و بۆ دیاریکردنی ناوی پرۆپێرتییە جۆراوجۆرەکان ژمارەیەک کلیلەوشەی ئینگلیزی بەکاردەهێنێت.
شێوازی پەڕە لە پێڕستێک لە یاساکان پێک دێت. هەر یاسا یان کۆمەڵە یاسایەک لە سێلێکتەرێک یان زیاتر، و بلۆکێک دەربڕین پێک دێت.
سێلێکتەر
[دەستکاری]لە سی ئێس ئێس، سێلێکتەرەکان ئەو بەشەی مارکئەپەکە دەردەبڕن کە شێوازێکی بەسەر جێبەجێ دەبێت بە گونجاندنی تاگەکان و ئاتریبیووتەکان لە خودی مارکئەپەکە.
سێلێکتەرەکان دەشێ ئەمانەی خوارەوە جێبەجێ بکەن:
- هەموو ئێلیمنتەکانی چەشنێکی دیاریکراو، بۆ نموونە: سەرپەڕەکانی ئاستی دووەم (h2)
- ئێلیمنتە دەستنیشانکراوەکان بەهۆی ئاتریبیووت، بەتایبەتی:
- id: ناسێنەرێکی بێهاوتا لەناو دۆکیومێنتەکە، کە بە ھاشێک وەک پێشگر دەناسرێت. نموونە:
#id - class: ناسێنەرێک کە دەتوانێت لەسەر چەندین ئێلیمنتی ناو دۆکیومێنتێک بەکاربێت، کە بە خاڵێک وەک پێشگر دەناسرێت. نموونە:
.classname
- id: ناسێنەرێکی بێهاوتا لەناو دۆکیومێنتەکە، کە بە ھاشێک وەک پێشگر دەناسرێت. نموونە:
- ئێلیمنتەکان بە پشتبەستن بە چۆنیەتیی دانانیان بەگوێرەی ئەوانی تر لەناو درەختی دۆکیومێنتەکە.
کڵاسەکان و ئایدییەکان هەستیارن، بە پیتەکان دەست پێ دەکەن، و دەکرێ نووسەکانی ئەلفاژمێرەیی، هایفنەکان و ئەندەرسکۆرەکان بگرنە خۆ. کڵاس لەوانەیە بەسەر هەر ژمارەیەک لە نموونەکانی هەموو ئێلیمنتەکان بگونجێت. ئایدی تەنیا دەتوانێت بەسەر تاکە ئێلیمنتێک بگونجێت.
کڵاسەکانی سوودۆو لە سێلێکتەرەکانی سی ئێس ئێس بەکارھاتوون بۆ ڕێگەدان بە فۆڕماتکردن بەپێی ئەو زانیارییەی کە لە درەختی دۆکیومێنتەکە نییە. نموونەیەکی کڵاسی سوودۆو کە بەزۆری بەکاردێت :hoverە، کە تەنیا کاتێک ناوەڕۆکەکە دیاری دەکات کە بەکارھێنەرەکە «ئاماژە بە ئێلیمنتە بینراوەکە دەکات»، کە عادەتەن بە ڕاگرتنی تیری ماوسەکە لەسەری دەکرێت. پاشکۆی سێلێکتەرێکە وەک لە a:hover یان #elementid:hover دیارە. کڵاسی سوودۆو ئێلیمنتەکانی دۆکیومێنت پۆلێن دەکات. وەک :link یان :visited، لەکاتێکدا ئێلیمنتی سوودۆو ھەڵبژاردەیەک دروست دەکات کە لە بەشە ئێلیمنتەکان پێک بێت، وەک ::first-line یان ::first-letter.[٦]
دەشێت سێلێکتەرەکان بە زۆر ڕێگە تێکەڵ بکرێن تا نەرمی و تایبەتێتییەکی گەورە بەدەست بھێندرێت.[٧] دەشێت چەند سێلێکتەرێک لە لیستێکی بۆشاییدار یەک بگرن تا ئێلیمنتەکان بەپێی شوێن، جۆری ئێلیمنت، ئایدی، کڵاس، یان ھەر تێکەڵەیەکی تر دیاری بکەن. ڕیزبەندیی سێلێکتەرەکان گرنگە. بۆ نموونە، div .myClass {color: red;} بەسەر ھەموو ئێلیمنتەکانی کڵاسی myClass کە لەناو ئێلیمنتەکانی divن جێبەجێ دەبێت، لەکاتێکدا .myClass div {color: red;} بەسەر ھەموو ئێلیمنتەکانی div کە لەناو ئێلیمنتەکانی کڵاسی myClassن جێبەجێ دەبێت. بەڵام نابێت ئەمە لەگەڵ ناسێنەرە پێکەوەبەستراوەکان تێکەڵ بکرێن وەک div.myClass {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»ەکەی لیستێکی بە ھایفن جیاکراوەی ھەیە کە نرخەکانی (لە چەپەوە) بە «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"]
|
ئێلیمنتی E کە نرخی ئاتربیووتی «foo»ەکەی دەقاودەق بە سترینگی «bar» دەست پێ دەکات | ٣ |
E[foo$="bar"]
|
ئێلیمنتی E کە نرخی ئاتربیووتی «foo»ەکەی دەقاودەق بە سترینگی «bar» کۆتاییی پێ دێت | ٣ |
E[foo*="bar"]
|
ئێلیمنتی E کە نرخی ئاتربیووتی «foo»ەکەی سترینگی «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
|
ئێلیمنتی E، کە تاکە مناڵی دایک و باوکییەتی | ٣ |
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(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><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 | ڕوونکردنەوەی «!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>ەکە زاڵ دەبێت چونکە تایبەتمەندیی بەرزتری هەیە، و بەم شێوەیە، پەرەگرافەکە بە ڕەنگی سەوز دەردەکەوێت.
ئینھێرتنس
[دەستکاری]ئینھێرتنس[ئ] تایبەتمەندییەکی سەرەکییە لە سی ئێس ئێس؛ بۆ کارکردن پشت بە پەیوەندیی نێوان باووباپیر و نەوە دەبەستێت. ئینھێرتنس ئەو میکانیزمەیە کە لەلایەن پرۆپێرتییەکان نەک تەنیا بۆ ئێلیمنتێکی دیاریکراو، بەڵکوو بۆ نەوەکانیشی جێبەجێ دەبێت.[١٦] ئینھێرتنس پشت بە درەختی دۆکیومێنتەکە دەبەستێت، کە ھەڕەمی ئێلیمنتەکانی 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»مان بە ئێلیمنتێکی(emphasizing) «em» لەناوەوەی ھەیە:
<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
- بەزەبری ھێز وا لە ئێلیمنتەکە دەکات کە لە بەشی ژێرەوەی ئێلیمنتە فلۆتکراوەکان بۆ لای چەپ (
clear:left)، ڕاست (clear:right) یان ھەردووک لایەکان (clear:both) دەربکەوێت.[٢٠][٢١]
مێژوو
[دەستکاری]
سی ئێس ئێس بۆ یەکەم جار لە ١٠ی تشرینی یەکەمی ١٩٩٤ لەلایەن هاکون ویوم لی پێشنیار کرا.[٢٢] ئەو کاتە، لی لەگەڵ تیم بێرنەرز لی لە سێرن کاری دەکرد.[٢٣] لە دەوروبەری هەمان کاتدا چەندین زمانی تری شێوازی پەڕە بۆ وێب پێشنیارکرابوون، و مشتومڕەکانی سەر خشتەکانی پۆستەی گشتی و ناوەوەی W3C بوونە هۆی پێشنیارکردنی یەکەم سی ئێس ئێس(CSS1)ی W3C [٢٤] کە لە ساڵی ١٩٩٦دا بڵاوکرایەوە. بەتایبەتی، پێشنیارێک لەلایەن بێرت بۆس کاریگەر بوو؛ بووە هاونووسەری سی ئێس ئێسی ١، و بە هاودروستکەری سی ئێس ئێس دادەندرێت.[٢٥]
پەڕەکانی شێواز لە سەرەتاکانی (SGML) Standard Generalized Markup Language لە دەیەی ١٩٨٠ بە یەک شێوە یان دانەیەکی جیاواز بوونیان ھەبووە، و سی ئێس ئێس بۆ دابینکردنی پەڕەکانی شێواز بۆ وێب دروست کرا.[٢٦] یەک لە پێویستییەکانی زمانی پەڕەی شێوازی وێب بۆ ئەوە بوو کە پەڕەکانی شێواز لە سەرچاوە جیاوازەکانەوە بێنە سەر وێب. لەبەر ئەوە، زمانەکانی پەڕەی شێوازە بەردەستەکانی وەک DSSSL و FOSI گونجاو نەبوون. لە لایەکی ترەوە، سی ئێس ئێس، ڕێگە بە شێوازی دۆکیومێنتێک دەدات کە لەلایەن چەندین پەڕەی شێوازەوە بە شێوازەکانی «cascading» کاری تێ بکرێت.[٢٦]
سنووردارییەکان
[دەستکاری]ھەندێک لە سنووردارییە دیارەکانی تواناکانی ئێستای سی ئێس ئێس ئەمانەی خوارەوەن:
- سێلێکتەرەکان توانای سەرکەوتنیان نییە
- لەکاتی ئێستادا سی ئێس ئێس ھیچ ڕێگەیەک بۆ دیاریکردنی دایکوباوک یان باووپابپیری ئێلیمنتێک پێشکەش ناکات کە لەگەڵ پێوانە دیاریکراوەکان دا بگونجێت.[٢٧] سێلێکتەرەکانی ئاستی ٤ی سی ئێس ئێس، کە ھێشتا لە ڕەوشی کارکردنی ڕەشنووس دایە، ھەروەکوو سێلێلکتەرێک پێشنیاز دەکرێت،[٢٨] بەڵام تەنیا وەک بەشێکی پرۆفایلی سێلێکتەری «تەواو»، نەک پرۆفایلی «خێرا» کە لە شێوازپێدانی داینامیکدا بەکارھاتووە.[٢٩] سیستمێکی سێلێکتەری پێشکەوتووتر (ھەروەکوو XPath) شێوازێکی کارامەتر بۆ پەڕەکان چالاک دەکات.
- ناتوانێت نووسینێکی دیاریکراو بەبێ گۆڕانکاریی مارکئەپ نیشان بکات
- سەرەڕای سوودۆو-ئێلیمنتی
:first-letter، ناتوانێت بەبێ پێویستیی بەکارھێنانی ئێلیمنتەکانی place-holder، سنوورە دیاریکراوەکانی دەق نیشان بکات.
سوودەکان
[دەستکاری]- جیاکردنەوەی ناوەڕۆک لە دەرخستن
- سی ئێس ئێس ئاسانکاریی بڵاوکردنەوەی ناوەڕۆک لە چەندین شێوازی دەرخستن بەپێی پارامەترە خاوەنناوەکان دەکات. پارامەترە خاوەنناوەکان ھەڵبژاردە دیارەکانی بەکارھێنەر، وێبگەڕە جیاوازەکان، جۆری ئامێرەکە (کۆمپیوتەری دیسکتۆپ یان ئامێری مۆبایل) کە بۆ بینینی ناوەڕۆکەکە بەکارھاتووە، شوێنی جوگرافیی بەکارھێنەرەکە و چەندین گۆڕاوی تر لەخۆ دەگرێت.
- ڕێکیی تەواوی سایت
- کاتێک سی ئێس ئێس بەکاریگەرییانە بەکارھات، لە ڕوانگەی «inheritance» و «cascading» ەوە، دەتواندرێت پەڕەیەکی شێوازی گشتگیر بەکار بھێندرێت تا ھەم کاریگەری و ھەم شێوازیش بە تەواوی ئێلیمنتەکانی سایتەکە بدات. ئەگەر ڕەوشێک دەرکەوت کە پێویست بکات شێوازپێدانی ئێلیمنتەکان بگۆڕدرێن یان بگونجێندرێن، ئەوا دەتواندرێت گۆڕانکارییەکان لەڕێگەی دەستکاریکردنی یاساکانی پەڕەی شێوازە گشتگیرە بکرێن. پێش سی ئێس ئێس، ئەم جۆرە چاکسازییە دژوارتر، گران و کاتکوژ بوو.
- باندبەرینی
- پەڕەی شێواز (جا ناوەکی یان دەرەکی بێت)، یەک جار شێوازێک بۆ ژمارەیەک لە ئێلیمنتەکانی ئەیچ تی ئێم ئێڵ کە بە
class، چەشن یان ڕیلەیشنشیپ بۆ ئەواتی تر دیاریکراون دیاری دەکات. ئەمە زۆر کاریگەرترە لە دووپاتکردنەوەی زانیاریی شێوازی ئینلاین بۆ ھەریەک لەو ئێلیمنتانەی کە دێن. پەڕەی شێوازی دەرەکی عادەتەن لە کاشی وێبگەڕ ھەڵگیراوە، و لەبەرئەوە دەتوانێت لەسەر چەندین پەڕە و بەبێ ئەوەی دووبارە باربکرێتەوە، کەمکردنەوەی زۆری گواساتنەوەی دراوە لەسەر تۆڕ بەکاربێت.
- شێوازپێدانەوەی پەڕە
- بە گۆڕانێکی سادەی ھێڵێک، دەتوانیت پەڕەیەکی جودا لە شێواز بۆ ھەمان پەڕە بەکاربھێنیت. ئەمە سوودەکانی دەستپێگەیشتنە، و ھەروەھا توانای دەستەبەرکردنی گونجاندنی پەڕە یان سایتی بۆ ئامێرە جیاوازەکان ھەیە. سەرەڕای ئەوەیش، ئامێرەکان توانای تێگەیشتنیان بۆ شێواز نییە کەچی ناوەڕۆکیش پیشان دەدەن.
- دەستپێگەیشتن
- بەبێ سی ئێس ئێس، دیزاینەرانی وێب ئاسایییانە دەبێت، لەیئاوتی پەڕەکانیان بە تەکنیکەکانی وەکوو خشتەکانی ئەیچ تی ئێم ئێڵ بکەن کە دەبێتە کۆسپ و توانای بینین لای بەکارھێنەران لاواز دەکات.
ستانداردکردن
[دەستکاری]چوارچێوەی سی ئێس ئێس
[دەستکاری]چوارچێوەی سی ئێس ئێس کتێبخانەکانی ئامادەکراون کە مەبەستیان ڕێگەدان بە ئاسانترە شێوازی ستانداردی زیاتر بۆ پەڕەی وێب بە بەکارھێنانی زمانی شیتی شێوازی کاسادینگ. چوارچێوەی سی ئێس ئێس بریتین لە: نەخشە، بووتستراپ، چوارچێوەی کاسکاد، دامەزراوە؛ و ماتریالیز وەک بڕگە زمانەوانییەکان و کتێبخانەکانی نووسین، چوارچێوەی سی ئێس ئێس بە گشتی وەک؛ فایلەکان کە لە ئێچ تی ئێم ئێڵ <head>. دا بە شێوەی دەرەکی بەکار دەھێنرێن، لیستکراون ھەڵبژارەک بۆ دیزاین کردن و دانانی لاپەڕەی سایتە کە دابین دەکەن. ھەندێک ھەڵبژاردنی بەردەست دابین بکە بۆ دیزاین کردن و دانانی پەڕەی سایتەکە. ھەرچەندە زۆرێک لەو چوارچێووە یانە بڵاوکراونەتەوە، بەڵام ھەندێک نووسەر زیاتر بۆ نموونەسازی خێرا، یان بۆ فێربوون بەکاری بھێنن و پێیان باشە کە سی ئێس ئێسی دەستکرد کە بۆ ھەر سایتێک بڵاوکراونەتەوە، بەبێ دیزاین کردن و پاراستن و کەمکردنەوەی تایبەتمەندییەکانی سەرەوەی کۆتایی لەگەڵ چەندین تایبەتمەندی بێسوود لە شێوازی سایتەکە گونجاو بێت.[٣٠]
تێبینییەکان
[دەستکاری]سەرچاوەکان
[دەستکاری]- ^ «CSS developer guide». Mozilla Developer Network. لە ٢٤ی ئەیلوولی ٢٠١٥ ھێنراوە.
- ^ JavaScript - The definitive guide (6 ed.). p. 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.
- ^ «What is CSS?». World Wide Web Consortium. لە ١ی کانوونی یەکەمی ٢٠١٠ ھێنراوە.
- ^ «Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript». HTMLGoodies. لە ٢٠ی تشرینی یەکەمی ٢٠١٤ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ١٦ی تشرینی یەکەمی ٢٠١٤ ھێنراوە.
- ^ «W3C CSS validation service». لە ١٤ی شوباتی ٢٠١١ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ٣٠ی حوزەیرانی ٢٠١٢ ھێنراوە.
- ^ «W3C CSS2.1 specification for pseudo-elements and pseudo-classes». World Wide Web Consortium. ٧ی حوزەیرانی ٢٠١١. لە ٣٠ی نیسانی ٢٠١٢ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ٣٠ی نیسانی ٢٠١٢ ھێنراوە.
- ^ see the complete definition of selectors at the W3C Web site 2006-04-23 لە وەیبەک مەشین ئەرشیڤ کراوە..
- ^ «Selectors Level 3». W3.org. لە ٣ی حوزەیرانی ٢٠١٤ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ٣٠ی ئایاری ٢٠١٤ ھێنراوە.
- ^ «W3C CSS2.1 specification for rule sets, declaration blocks, and selectors». World Wide Web Consortium. ٧ی حوزەیرانی ٢٠١١. لە ٢٨ی ئازاری ٢٠٠٨ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ٢٠ی حوزەیرانی ٢٠٠٩ ھێنراوە.
- ^ «Full property table». W3.org. لە ٣٠ی ئایاری ٢٠١٤ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ٣٠ی ئایاری ٢٠١٤ ھێنراوە.
- ^ «Index of CSS properties». www.w3.org. لە ٩ی ئابی ٢٠٢٠ ھێنراوە.
- ^ «CSS Color». Mozilla Developer Network. ٢٨ی حوزەیرانی ٢٠١٦. لە ٢١ی ئەیلوولی ٢٠١٦ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ٢٣ی ئابی ٢٠١٦ ھێنراوە.
- ^ «6.1 Length units». Cascading Style Sheets, level 1. ١٧ی کانوونی یەکەمی ١٩٩٦. لە ١٤ی حوزەیرانی ٢٠١٩ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ٢٠ی حوزەیرانی ٢٠١٩ ھێنراوە.
- ^ «5. Distance Units: the <length> type». CSS Values and Units Module Level 3. ٦ی حوزەیرانی ٢٠١٩. لە ٧ی حوزەیرانی ٢٠١٩ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ٢٠ی حوزەیرانی ٢٠١٩ ھێنراوە.
- ^ W3C HTML Working Group. «HTML 5. A vocabulary and associated APIs for HTML and XHTML». World Wide Web Consortium. لە ١٥ی تەممووزی ٢٠١٤ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ٢٨ی حوزەیرانی ٢٠١٤ ھێنراوە.
{{cite web}}: ڕاگرتنی شێوازی سەرچاوەی ١: ناوە ژمارەیییەکان: authors list (بەستەر) - ^ ئ ا Meyer، Eric A. (2006). Cascading Style Sheets: The Definitive Guide (3rd ed.). O'Reilly Media, Inc. ISBN 0-596-52733-0. لە 2014-02-15 لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە 2014-02-16 ھێنراوە.
- ^ «Assigning property values, Cascading, and Inheritance». لە ١١ی حوزەیرانی ٢٠١٤ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ١٠ی حوزەیرانی ٢٠١٤ ھێنراوە.
- ^ «Can a CSS class inherit one or more other classes?». StackOverflow. لە ١٤ی تشرینی یەکەمی ٢٠١٧ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ١٠ی ئەیلوولی ٢٠١٧ ھێنراوە.
- ^ «Shorthand properties». Tutorial. Mozilla Developers. 2017-12-07. لە 2018-01-30 لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە 2018-01-30 ھێنراوە.
- ^ ئ ا ب Bos، Bert؛ et al. (٧ی کانوونی یەکەمی ٢٠١٠). «9.3 Positioning schemes». Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. لە ١٨ی شوباتی ٢٠١١ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ١٦ی شوباتی ٢٠١١ ھێنراوە.
- ^ Holzschlag، Molly E (2005). Spring into HTML and CSS. Pearson Education, Inc. ISBN 0-13-185586-7.
- ^ Lie، Hakon W (10 Oct 1994). «Cascading HTML style sheets - a proposal» (Proposal) (92). CERN. لە 4 June 2014 لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە 25 May 2014 ھێنراوە.
{{cite journal}}: بیرخستنەوەی journal پێویستی بە|journal=ھەیە (یارمەتی); نرخەکانی ڕێکەوت بپشکنە لە:|accessdate=،|date=، و|archive-date=(یارمەتی) - ^ Cascading Style Sheets, designing for the Web. Addison Wesley. 1999. ISBN 0-201-59625-3. لە 23 June 2010 ھێنراوە.
{{cite book}}: نرخەکانی ڕێکەوت بپشکنە لە:|accessdate=(یارمەتی) - ^ «Cascading Style Sheets, level 1». World Wide Web Consortium. لە ٩ی نیسانی ٢٠١٤ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ٧ی ئازاری ٢٠١٤ ھێنراوە.
- ^ Bos، Bert (١٤ی نیسانی ١٩٩٥). «Simple style sheets for SGML & HTML on the web». World Wide Web Consortium. لە ٢٣ی ئەیلوولی ٢٠٠٩ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ٢٠ی حوزەیرانی ٢٠١٠ ھێنراوە.
- ^ ئ ا «Cascading Style Sheets». University of Oslo. لە ڕەسەنەکە لە ٤ی تشرینی یەکەمی ٢٠١٤ ئەرشیڤ کراوە. لە ٣ی ئەیلوولی ٢٠١٤ ھێنراوە.
- ^ Molly Holzschlag (January 2012). «Seven Things Still Missing from CSS». .net Magazine. لە ٥ی ئازاری ٢٠١٧ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ٤ی ئازاری ٢٠١٧ ھێنراوە.
- ^ «Selectors Level 4 – Determining the Subject of a Selector». W3.org. لە ١٧ی ئابی ٢٠١٣ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ١٣ی ئابی ٢٠١٣ ھێنراوە.
- ^ «Selectors Level 4 – Fast vs Complete Selector Profiles». W3.org. لە ١٧ی ئابی ٢٠١٣ لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە ١٣ی ئابی ٢٠١٣ ھێنراوە.
- ^ Cederholm، Dan (2009). Handcrafted CSS: More Bulletproof Web Design. New Riders. p. 114. ISBN 978-0-321-64338-4. لە 20 December 2012 لە ڕەسەنەکەوە ئەرشیڤ کراوە. لە 19 June 2010 ھێنراوە.
{{cite book}}: نرخەکانی ڕێکەوت بپشکنە لە:|access-date=و|archive-date=(یارمەتی)
خوێندنەوەی زیاتر
[دەستکاری]- سی ئێس ئێس لە چاوگ
بەستەرە دەرەکییەکان
[دەستکاری] |
کۆمنزی ویکیمیدیا، میدیای پەیوەندیدار بە سی ئێس ئێس تێدایە. |
- وێبگەی فەرمی
- CSS لە کێرلی
