سی ئێس ئێس
![]() | |
پێوەکراوەی ناوی پەڕگە | .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 لە پێوەری ٠ بۆ ٢٥٥ (بۆ نموونە:
)، نرخەکانی RGBA کە ھەردووک ڕەنگ و ڕۆشنیی ئەلفا دیاری دەکات (بۆ نموونە: 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
) دەربکەوێت.[٢٠][٢١]
مێژوو
[دەستکاری]![](http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/H%C3%A5kon_Wium_Lie.jpg/220px-H%C3%A5kon_Wium_Lie.jpg)
سی ئێس ئێس بۆ یەکەم جار لە ١٠ی تشرینی یەکەمی ١٩٩٤ لەلایەن هاکون ویوم لی پێشنیار کرا.[٢٢] ئەو کاتە، لی لەگەڵ تیم بێرنەرز لی لە سێرن کاری دەکرد.[٢٣] لە دەوروبەری هەمان کاتدا چەندین زمانی تری شێوازی پەڕە بۆ وێب پێشنیارکرابوون، و مشتومڕەکانی سەر خشتەکانی پۆستەی گشتی و ناوەوەی 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. Retrieved 2015-09-24.
- ^ Flanagan, David. 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. Retrieved 2010-12-01.
- ^ "Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript". HTMLGoodies. Archived from the original on 2014-10-20. Retrieved 2014-10-16.
- ^ "W3C CSS validation service". Archived from the original on 2011-02-14. Retrieved 2012-06-30.
- ^ "W3C CSS2.1 specification for pseudo-elements and pseudo-classes". World Wide Web Consortium. 7 June 2011. Archived from the original on 30 April 2012. Retrieved 30 April 2012.
- ^ see the complete definition of selectors at the W3C Web site 2006-04-23 لە وەیبەک مەشین ئەرشیڤ کراوە..
- ^ "Selectors Level 3". W3.org. Archived from the original on 2014-06-03. Retrieved 2014-05-30.
- ^ "W3C CSS2.1 specification for rule sets, declaration blocks, and selectors". World Wide Web Consortium. 7 June 2011. Archived from the original on 28 March 2008. Retrieved 2009-06-20.
- ^ "Full property table". W3.org. Archived from the original on 2014-05-30. Retrieved 2014-05-30.
- ^ "Index of CSS properties". www.w3.org. Retrieved 2020-08-09.
- ^ "CSS Color". Mozilla Developer Network. 2016-06-28. Archived from the original on 2016-09-21. Retrieved 2016-08-23.
- ^ "6.1 Length units". Cascading Style Sheets, level 1. 17 December 1996. Archived from the original on 14 June 2019. Retrieved 20 June 2019.
- ^ "5. Distance Units: the <length> type". CSS Values and Units Module Level 3. 6 June 2019. Archived from the original on 7 June 2019. Retrieved 20 June 2019.
- ^ W3C HTML Working Group. "HTML 5. A vocabulary and associated APIs for HTML and XHTML". World Wide Web Consortium. Archived from the original on 15 July 2014. Retrieved 28 June 2014.
- ^ ئ ا Meyer, Eric A. (2006). Cascading Style Sheets: The Definitive Guide (3rd ed.). O'Reilly Media, Inc. ISBN 0-596-52733-0. Archived from the original on 2014-02-15. Retrieved 2014-02-16.
- ^ "Assigning property values, Cascading, and Inheritance". Archived from the original on 2014-06-11. Retrieved 2014-06-10.
- ^ "Can a CSS class inherit one or more other classes?". StackOverflow. Archived from the original on 2017-10-14. Retrieved 2017-09-10.
- ^ "Shorthand properties". Tutorial. Mozilla Developers. 2017-12-07. Archived from the original on 2018-01-30. Retrieved 2018-01-30.
- ^ ئ ا ب Bos, Bert; et al. (7 December 2010). "9.3 Positioning schemes". Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. Archived from the original on 18 February 2011. Retrieved 16 February 2011.
- ^ 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. Archived from the original on 4 June 2014. Retrieved 25 May 2014.
{{cite journal}}
: Cite journal requires|journal=
(help) - ^ Lie, Håkon Wium; Bos, Bert (1999). Cascading Style Sheets, designing for the Web. Addison Wesley. ISBN 0-201-59625-3. Retrieved 23 June 2010.
- ^ "Cascading Style Sheets, level 1". World Wide Web Consortium. Archived from the original on 2014-04-09. Retrieved 2014-03-07.
- ^ Bos, Bert (14 April 1995). "Simple style sheets for SGML & HTML on the web". World Wide Web Consortium. Archived from the original on 23 September 2009. Retrieved 20 June 2010.
- ^ ئ ا "Cascading Style Sheets". University of Oslo. Archived from the original on 2006-09-06. Retrieved 3 September 2014.
- ^ Molly Holzschlag (January 2012). "Seven Things Still Missing from CSS". .net Magazine. Archived from the original on 2017-03-05. Retrieved 2017-03-04.
- ^ "Selectors Level 4 – Determining the Subject of a Selector". W3.org. Archived from the original on 2013-08-17. Retrieved 2013-08-13.
- ^ "Selectors Level 4 – Fast vs Complete Selector Profiles". W3.org. Archived from the original on 2013-08-17. Retrieved 2013-08-13.
- ^ Cederholm, Dan; Ethan Marcotte (2009). Handcrafted CSS: More Bulletproof Web Design. New Riders. p. 114. ISBN 978-0-321-64338-4. Archived from the original on 20 December 2012. Retrieved 19 June 2010.
خوێندنەوەی زیاتر
[دەستکاری]- سی ئێس ئێس لە چاوگ
بەستەرە دەرەکییەکان
[دەستکاری]![]() |
کۆمنزی ویکیمیدیا، میدیای پەیوەندیدار بە سی ئێس ئێس تێدایە. |
- وێبگەی فەرمی
- CSS لە کێرلی