تاگی img کە بەکار دەبرێت بۆ دانانی وێنە لە نێو پەڕەیەکی وێب تاگێکی بنەڕەتییە کە CSS دەتوانێت ڕاستەوخۆ کاریگەری لەسەر دابنێت.
وێنەیەک لە نێو پەڕگەی index.html بە ناوی webchin-icon.png،
<img src="webchin-icon.png" alt="ئایکۆنی وێبچن" />وێنەی سەرەوە گەورەیە و لەگەڵ پێکهاتەکانی دیکەی پەڕەکە درووست دەرناکەوێت.
چەند گۆڕانکارییەک لەسەر وێنەی سەرەوە جێبەجێ دەکەین بۆ باشتر گونجاندنی، بچووک کردنەوە، دانانی لە بەشی چەپی پەڕە بەڵام لە نێو هەمان چوارچێوە کە دەقەکەی لێ نووسراوە. گۆشەکانی نەرم دەکەین کە لەگەڵ چوارچێوەی دەوروبەری بگونجێت، border-radius بەکار دەبەین.
img{
float: left;
border–radius: 10px;
width: 100px;
height: 100px;
}
تاگی گشتیی img بەکار دەبەین کە هەموو وێنەکانی نێو پەڕە دەگرێتەوە.
float بۆ دانانی وێنە لە چەپ یان ڕاست. border-radius بۆ نەرمکردنی گۆشەکانی. هەروەها دیاریکردنی پانی بە width و بەرزیی بە height، تێبینی ئەوە بکە دەبێت نرخی پانی و بەرزی بە ژمارە بنووسرێت و لە پاش ژمارەکە بە px کۆتایی پێ بهێنرێت چوونکە وێنە بە پیکسڵ پێوانە دەکرێت.
بۆ بچووکردنەوەی تەنیا وێنەی سەرەوە، پێویست دەکات بە ID یان Class هەڵببژێردرێت و دواتر بە CSS مەرج بۆ ئەو Class یان ID ـە دەنووسیت.
تێبینی: بچووک کردنەوەی وێنە بە CSS شێوازێکی باش نییە بۆ بچووک کردنەوە، CSS تەنیا وێنەکە بۆ دەرخستن بچووک دەکاتەوە، قەبارەی بنەڕەیی وەک خۆی دەمێنێتەوە و بە بچووک کردنەوەی پانی و بەرزیی بە CSS قەبارەی بنەڕەتیی وێنەکە بە هیچ شێوەیەک گۆڕانکاری بەسەر ناهێنرێت. تا دەتوانیت وەشانی جیاواز بۆ قەبارە جیاوازەکانی وێنەکانت درووست بکە کە پێویست نەکات بە CSS قەبارەیان بگۆڕیت.
بەستەر Link
بە هەمان شێوازی دەق و وێنە بەستەر کۆمەڵێک تایبەتمەندی هەیە لە CSS کە زۆر کارێکی دیکە ئاسان دەکەنەوە، بەتایبەت بە بەکاربردنی هەندێک تایبەتمەندی پێشکەوتوو.
<a href="https://www.webchin.org" title="وێبچن"><h1>وێبچن</h1></a><a href=“https://www.webchin.org/meko” title=“مەکۆکانی وێبچن”><h1>مەکۆکانی وێبچن</h1></a>
کۆدەکانی سەرەوە دوو بەستەر درووست دەکەن، لە هەنگاوەکانی داهاتوو چەند گۆرانکارییەک جێبەجێ دەکەین، گۆڕینی ڕەنگی بەستەرەکان، گۆڕینی ڕەنگی بەستەر کاتێک دەستنیشانکەری مشکی کۆمپیوتەر ببرێتە سەریان و هەروەها ڕەنگێکی دیکەیان هەبێت پاش ئەوەی سەردان کران. وەک تاگی img تاگی a بۆ درووستکردنی بەستەر دەتوانرێت ڕاستەوخۆ بە CSS کۆنترۆڵ بکرێت.
a {color: #FF9900;
text–decoration: none;
}
تاگی a بە تەنیا بۆ گۆڕینی ڕەنگی ناوی بەستەر و هەروەها سڕینەوەی هێڵی ژێر بەستەر.
a:hover {
color: #800000;
text–decoration: underline;
}
a:hover بۆ گۆڕینی تایبەتمەندییەکانی بەستەر لە کاتی هەبوونی دەستنیشانکەری مشکی کۆمپیوتەر لەسەر بەستەر.
بۆ گۆڕینی ڕەنگی بەستەر پاش ئەوەی بەکارهێنەر کرتەی لێکرد، ئاستی a:visited بەکار دەبرێت،
a:visited {
color: #0000FF;
text–decoration: none;
}
جگە لە گۆڕینی ڕەنگ و تایبەتمەندی بنەڕەتیی بەستەر، دەتوانرێت هەندێک گۆڕانکاری دیکەی وردتر جێبەجێ بکرێت، بۆ نموونە لە هەر شوێنێک کە بەستەر کراوە بۆ www.webchin.org/meko ڕەنگی ناوی بەستەرەکە بگۆڕدرێت بۆ ڕەنگێکی دیکە.
a[href*=“www.webchin.org/meko”] {
color: #339933;
}
بە بەکاربردنی تاگی a و دواتر پێناسکردنی شێوازی بەستەر کرداری سەرەوە جێبەجێ دەکرێت بەبێ ئەوەی Class یان ID بەکار ببرێت.
زانیاری زۆرتر: http://www.w3.org/TR/CSS2/selector.html#matching-attrs
ستوون Column
درووستکردنی ستوون لە وەشانی سێیەمی CSS زۆر ئاسان کراوەتەوە، بۆ دابەشکردنی دەقی نموونە بۆ ٢ ستوون دەتوانین تایبەتمەندی column بەکار ببەین، بۆ تایبەتمەندی ناوبراو دەتوانرێت ٢ نرخ بنووسرێت، نرخێک بۆ دەستنیشان کردنی ژمارەی ستوونەکان count کە درووست بکرێت، نرخی دیکە بۆ دەستنیشان کردنی پانیی ستوونەکان width.
column-count:2;فرمانی سەرەوە دەقی نێو p دابەش دەکات بە دوو ستوون.
تێبینی: بۆ بەکاربردنی تایبەتمەندی column و درووست دەرکەوتنی لە وێبگەڕەکانی وەک Google Chrome و Mozilla FireFox پێویست بە نووسینی پێشناوی هەردوو webkit و moz دەکات، جوونکە بە شێوەیەکی کۆتایی لە وێبگەڕەکاندا پاڵپشتی لێنەکراوە. تا کاتی نووسینی ئەم بابەتە وێبگەڕەکانی Opera و Internet Explorer 10 پاڵپشتی دەکەن بەبێ بەکاربردنی پێشناو. (لە بەشی داهاتوو سەبارەت بە Prefix ـەکانی CSS بخوێنەوە)
واتە بۆ ئەوەی لە هەموو وێبگەڕەکاندا کار بکات، دەبێت کۆدی خوارەوە وەک کۆدی کۆتایی لە نێو پرۆژەکەت بەکار ببەیت.
–webkit–column–count:2;
–moz–column–count:2;
column–count:2;
پێشناو Prefix
مەبەست لە وشەی پێشناو ئەو وشەیە کە پێش ناوی مەرجی CSS دەنووسرێت، لە نموونەی سەرەوە -webkit- پێشناوێکە بۆ مەرجەکە. لە پەیوەندی لەگەڵ CSS3 پێشناوەکان بەکار دەبرێن بۆ پێناسکردنی تایبەتمەندییەک بۆ وێبگەڕێکی دیاریکراو.
نموونە: تا کاتی نووسینی ئەم بابەت وێبگەڕی Google Chrome تایبەتمەندی column ناناسێتەوە و تەنیا بە نووسینی colmn-count هیچ گۆڕانکارییەک لە وێبگەڕدا بەدی ناکرێت، هۆکاری ئەوەیە کە Google Chrome بۆ تاقیکردنەوەی column پێشناوی –webkit- ـیان بەکار بردووە بۆ ئەوەی وێبداڕێژان بزان کە تایبەتمەندی ناوبراو لەوانەیە کێشەی هەبێت لە وێبگەڕدا. کاتێک هەموو لایەنەکانی بە تەواوی پاڵپشتی کران و لە وێبگەڕەکەدا بە درووستی و بێ کێشە دەرکەوت، لە کۆتاییدا پێشناو دەسڕنەوە و تەنیا ناوی بنەڕەتیی بەکار دەبەن.
لە ماڵپەڕی Can I Use It دەتوانیت ببینیت چ تایبەتمەندییەک پێویستی بە بەکاربردنی پێشناو هەیە و لە چ وەشانێکی وێبگەڕەکان.
http://caniuse.com/#search=column-count
ئەگەر تایبەتمەندییەکی وەک column هەیە کە پێویستی بە نووسینی پێشناوەکان هەیە، دەتوانیت بە بەکاربردنی ماڵپەڕێکی وەک Prefixr یان پێوەکراوەکەیان بۆ پرۆگرامەکانی وەک Notepad++ ئەو پێشناوانە بە شێوەیەکی خۆکارانە درووست بکەیت.
http://prefixr.com
@font-face
تایبەتمەندییەکی دیکەی CSS3 کە کۆمەڵێک کێشەی گەورە و چەند ساڵانەی چارەسەر کردووە @font-face ـە.
نووسەری بابەت: ئاسۆ نادری-وێبچن
