.rengeki–dike {
color: #000000;
}
#reng {
color: #FF9933;
}
کاتێک مەرجەکان دەسەپێندرێن بەسەر دەقەکەدا ڕەنگی تایبەت بە #reng دەردەکەوێت، چوونکە وێبگەڕ نرخی ID بە گرینگتر دەژمێرێت.
تێبینی: بۆ نووسینی Class لە CSS بە نوختە دەست پێدەکات .rengeki-dike و ID بە # دەست پێدەکات #reng.
پێشنیار: Class بەکار ببە بۆ ڕوونەدانی کێشەی دەسەڵاتی مەرجەکان، هیچ هۆکارێکی گرینگ نییە بۆ بەکاربردنی ID ئەگەر بەکاربردنی مەرج و پێویست نەبێت لە پرۆژەکەت.
سنوور Border
دانانی سنوور بۆ پێکهاتەیەک یان بەشێک لە پەڕەیەکی HTML کردارێکی زۆر باوە، لەگەڵ هاتنی CSS3 هەندێک تایبەتمەندیی نوێ بۆ سنوور زۆر کراوە کە کۆمەڵێک کاری پێشووی ئاسان کردوەتەوە. لە نموونەی داهاتوو سنوورێک بۆ پێکهاتەی p درووست دەکەین و لە درێژەی ڕوونکردنەوەکە تایبەتمەندیی وەک چەماوەیی و بۆ درووست دەکەین.
وەک لە ناوی ڕوونە بۆ دانانی سنوور تایبەتمەندی border بەکار دەبەین،
p {color: #F00;
font–weight: bold;
border: 1px solid #999;
}
تایبەتمەندی سەرەوە سنوورێکی یەک ڕەنگ و بەردەوام بە چوارلای p درووست دەکات بە ڕەنگی #999 هەروەها پانیی هێڵی سنوورەکە ١ پیکسڵ دەبێت. لە وێبگەڕدا بە شێوازی خوارەوە دەردەکەوێت.
تایبەتمەندییەک کە لەگەڵ بەربڵاوبوونی CSS3 بۆ سنوور زۆر بەکاردەبرێت، چەماندنەوەی گۆشەکانە کە پێش CSS پێویستی دەکرد بە وێنە درووست کرابا، لە CSS3 دەتوانین تایبەتمەندی border-radius بەکار ببەین بۆ وەدەستهێنانی هەمان کاریگەریی.
لە وێنەی سەرەوە بە padding ١٠ پیسکڵ بۆشاییمان درووست کردووە لە نێوان قەراغی چوارچێوە و دەق کە خوێندنەوەی دەقەکە ئاسانتر دەکاتەوە. لە هەمان کاتدا بە بەکاربردنی border-radius لە هەر گۆشەیەک ١٠ پیسکڵ چەماوەتەوە و گۆشەیەکی نەرمتری درووستکردوە لە باتی گۆشەی تیژ.
تێبینی: بۆ بازنە درووستکردن بە CSS دەتوانرێت هەمان border-radius بەکار ببرێت، بۆ درووستکردنی بازنەیەکی تەواو مەرجە لە چوارگۆشەیەکی یەکسان دەست پێبکرێت، بۆ نموونە ئەگەر چواگۆشەیەکمان هەبێت بە قەبارەی ٢٠٠ پیکسڵ پان و ٢٠٠ پیکسڵ بەزر، نرخی border-radius دەگۆڕین بۆ 50% و بازنەکە پێکدەهێنرێت.
سێبەر Shadow – box-shadow
درووستکردنی سێبەر بە بەکاربردنی CSS3 زۆر ئاسانتر کراوەتەوە و چیتر پێویست بە وێنە ناکات بۆ درووستکردنی کاریگەریی سێبەر، تایبەتمەندی box-shadow کردارەکە جێبەجێ دەکات.
وەک لە وێنەی سەرەوە ڕوونە box-shadow چەند نرخێک لە خۆ دەگرێت، یەکەم نرخی بەهێزیی سێبەرە لەسەر ئاستی x و دووەم نرخی بەهێزی سێبەرە لەسەر ئاستی y. نرخی سێیەم پڕ ڕەنگی سێبەرەکە دەست نیشان دەکات، کەمکردنەوەی نرخی سێیەم سێبەرێکی تیژتر و پڕ ڕەنگتر درووست دەکات و زۆرکردنی سێبەرەکە بڵاوتر دەکاتەوە و بەو شێوەیەش کەم ڕەنگتر دەبێت. نرخی چوارەم هەڵبژاردنی ڕەنگە.
تێبینی: تایبەتمەندی box-shadow نرخی زۆرتری هەیە.
دەق Text
دەق گرینگترین ناوەڕۆک و پێکهاتەی هەر پەڕەیەکە، CSS کۆمەڵێک تایبەتمەندی زۆری هەیە بۆ ڕێکخستن، جێبەجێ کردن و زۆر کرداری دیکەی پەیوەندیدار بە دەق، لە نموونەی داهاتوو بە بەکاربردنی هەندێک لە تایبەتمەندییەکانی دەق نووسراوەی سەرەوەمان دەستکاری دەکەین، قەبارەی نووسراوەکان دەگۆڕین، فۆنت دەگۆڕین، بۆشایی نێوان دێڕەکان زۆرتر دەکەین و نووسینەکان لە نێوەڕاستی چوارچێوەکە جێگیر دەکەین.
p {
box–shadow: 5px 20px 10px #999999;
padding: 10px;
border–radius: 10px;
color: #FF0000;
font–weight: bold;
border: 1px solid #999999;
font–family: Tahoma;
font-size: 10pt;
line-height: 15pt;text–align: center;
}
ئەگەر بمانەوێت ڕەنگی تەنیا یەک دێڕ لە نووسینەکان بگۆڕین بە تاگی <span> دەپێچرێتەوە.
<span class="rengeki-dike"> ناسراوی ناوێکم که ناوی من نییه</span><br />پاشان تاگی <span> بە Class ـێک پەیوەست دەکەین بۆ ئەوەی بتوانین تەنیا ڕەنگی ئەو <span> ـە بگۆڕێن.
تێبینی: دەتوانیت هەمان Class دووبارە بەکار ببەیتەوە بۆ گۆڕینی ڕەنگی دەقی دیکە. دواتر ئەگەر ویستت ڕەنگی هەموو دەقەکان لە هەموو شوێنێک بگۆڕیت بۆ ڕەنگێکی دیکە، تەنیا دەستکاری .rengeki-dike دەکەیت لە نێو پەڕگەی style.css.
نووسەری بابەت: ئاسۆ نادری-وێبچن
