بۆ نووسینی کۆدەکانی CSS پێویست بە پرۆگرامێک دەکات کە بتوانرێت دەقی ئاسایی تێدا بنووسرێت، ئاسانترین و سادەترین پرۆگرام لە ویندۆز Notepad ـە. لە ئەم بابەتەدا کۆدەکانمان لە نێو پرۆگرامی Notepad++ دەنووسین کە توانای ڕەنگکردن و باشتر پیشاندانی مەرجەکانی هەیە. جگە لە Notepad++ پرۆگرامی دیکەش هەیە کە هاوکاریت دەکات و زۆرێک لە کۆدەکانت بۆ دەنووسێت وەک Adobe DreamWeaver یان Microsoft Expression Web.

داگرتنی Notepad++،
http://notepad-plus-plus.org

شێوازەکانی بەکاربردنی CSS لە نێو پەڕەیەکی وێب
بە ٣ شێواز دەتوانرێت کۆدەکانی CSS بەکار ببرێت

شێوازی یەکەم: CSS ی تێکەڵاو بە کۆد Inline CSS
بەکاربردنی ئەم شێوازە لە وێبی مۆدێڕن دا زۆر کەمە، بەڵام زۆر جارێک کە پرۆگرامی کۆد نووسین وەک Dreamweaver، Microsoft Expression و هتد لەگەڵ وەشانێکی کۆنی HTML بەکار دەبرێت ئەم شێوازە درووست دەبێت و بەکار دەبرێت.
بۆ گۆڕینی ڕەنگی نووسینەکانی نێو پەڕەکەمان بۆ ڕەنگی سوور و بەکاربردنی Inline CSS ڕاستەخۆ لەگەڵ کۆدەکانی HTML، تاگی p دەستکاری دەکەین بە شێوازی خوارەوە.

<p style=color: #F00>هیلاکی ڕه‌نجێکم که‌ ڕه‌نجی من نییه‌<br />

دانیشتووی خاکێکم که‌ خاکی من نییه‌<br />

ناسراوی ناوێکم که‌ ناوی من نییه‌<br />

گریاوی ژانێکم که‌ ژانی من نییه‌<br />

زاده‌ی له‌ززه‌تێکم، له‌ززه‌تی من نییه‌<br />

به‌ مه‌رگێکیش ده‌مرم که‌ مه‌رگی من نیی

</p>

کۆدەکانی گۆڕینی ڕەنگ لەگەڵ/لە نێو تاگی p نووسراون. 

Inline CSS لە هیچ بوارێکدا درووست نییە بەکار ببرێت، زۆرینەی وێبداڕێژان کە لەسەر ئەو شێوازە کۆد دەنووسن تەنیا دەگەڕێتەوە بۆ ڕاهاتن و هەوڵ نەدان بۆ باشتر کردنی شێوازی کۆد نووسینیان. هۆکارە خراپەکانی بەکاربردنی Inline CSS زۆر زۆرن، لە هەمان کاتدا هۆکاری درووستی نییە.  سەرەڕای ئەوەش نووسینی CSS لە نێو تاگەکانی HTML بە پێی ستانداردەکانی وێبداڕشتن هەڵە نییە.

شێوازی دووەم: CSS ی نێوخۆ Internal CSS
شێوازێکی دیکەی نووسینی CSS لە نێو هەمان پەڕگەی HTML بەڵام لە دەرەوەی تاگەکان. بە شێوەیەکی ئاسایی لە نێو بەشی head دەنووسرێت و بە تاگی کردنەوەی <style> پێناس دەکرێت.
جێبەجێکردنی هەمان ڕەنگ گۆڕینی سەرەوە بەڵام بە Internal CSS.

<!doctype html>

<html>

<head>

<meta charset=“utf-8”>

<title>پەڕەیەکی HTML</title>

<style type=“text/css”>

p {

color: #F00;

}

</style>

</head>

<body>

<p>هیلاکی ڕه‌نجێکم که‌ ڕه‌نجی من نییه‌<br />

دانیشتووی خاکێکم که‌ خاکی من نییه‌<br />

ناسراوی ناوێکم که‌ ناوی من نییه‌<br />

گریاوی ژانێکم که‌ ژانی من نییه‌<br />

زاده‌ی له‌ززه‌تێکم، له‌ززه‌تی من نییه‌<br />

به‌ مه‌رگێکیش ده‌مرم که‌ مه‌رگی من نیی

</p>

</body>

</html>

بە کردنەوەی تاگی <style> کە تاگی پێناسەرە، پەڕەی سەرەوە فرمانی سەپاندنی فرمانی CSS دەنێرێت بۆ وێبگەڕ کە دواتر بە نۆرەی خۆی Render  ی دەکات لەگەڵ کۆدەکانی HTML.

تێبینی: لە HTML5 نووسینی تاگی پێناسەری <style> ئاسانتر کراوەتەوە و مەرج نییە وەک شێوازی سەرەوە بنووسرێت، بەڵکوو دەتوانرێت تەنیا بە <style> بکرێتەوە و بە </style> دابخرێت.

شێوازی سێیەم: CSS ی دەرەکی External CSS
نووسینی کۆدەکانی CSS لە پەڕگەیەکی سەربەخۆ کە بە پاشگری .css دەبێت، پاش درووستکردنی بەستەر Link دەکرێت بە پەڕەی HTML ـەوە. بۆ نموونە، هەمان کۆدی گۆڕینی ڕەنگ لە نێو پەڕگەیەکی سەربەخۆی CSS دەنووسینەوە و بە ناوی style.css پاشەکەوتی دەکەین.

p {

color: #F00;

}

کاتێک پەڕگەی سەربەخۆ بۆ CSS درووست دەکرێت، تاگی پێناسەری لەگەڵ نانووسرێت، تەنیا فرمانەکانی CSS لە خۆ دەگرێت. پاشگری .css بە وێبگەڕ ڕادەگەیەنێت کە پەڕگەی ناوبراو CSS ـە.
پاشان بۆ بەستنەوەی style.css بە index.html کۆدی خوارەوە بەکار دەبرێت لە بەشی head،

<link href="style.css" rel="stylesheet" type="text/css">

ئەنجامی کۆتایی index.html بە بەستەرکراویی بۆ style.css،

<!doctype html>

<html>

<head>

<meta charset=“utf-8”>

<title>پەڕەیەکی HTML</title>

<link href=“style.css” rel=“stylesheet” type=“text/css”>

</head>

<body>

<p>هیلاکی ڕه‌نجێکم که‌ ڕه‌نجی من نییه‌<br />

دانیشتووی خاکێکم که‌ خاکی من نییه‌<br />

ناسراوی ناوێکم که‌ ناوی من نییه‌<br />

گریاوی ژانێکم که‌ ژانی من نییه‌<br />

زاده‌ی له‌ززه‌تێکم، له‌ززه‌تی من نییه‌<br />

به‌ مه‌رگێکیش ده‌مرم که‌ مه‌رگی من نیی

</p>

</body>

</html>

هەر ٣ شێوازی سەرەوە هەمان ئەنجام درووست دەکەن کاتێک لە وێبگەڕدا دەبینرێن، بەڵام لە بواری داڕشتن و بەڕێوەبردندا جیاوازی زۆریان هەیە. لە سەرەوە ئاماژەمان بە Inline CSS داوە و بۆچی بەکار نەبرێت.

کاتێک Internal CSS بەکار دەبرێت کۆدەکانی CSS کاریگەر دەبن تەنیا لە نێو ئەو پەڕەی کە تێیدا نووسراون، لە ئەم کاتەدا تەنیا index.html ڕەنگی سوور دەدات بە دەقە نووسراوەکان، ئەگەر پەڕەیەکی دیکە درووست بکەین ئەو کات هەمان ڕەنگ لە خۆ ناگرێت، پێویست دەکات هەمان کۆدی CSS لە پەڕەی نوێدا بنووسرێنەوە. لە خۆیدا کاتی زۆری پێویست دەبێت بۆ دووبارە و سێبارە نووسینەوەی هەمان کۆد، جگە لەوەش بەڕێوەبردنی داهاتوویی زۆر دژوار دەکات.

ئەگەر لە ماڵپەڕەکەت ١٠٠ پەڕەی جیاوازت هەبێت و بتەوێت ڕەنگی نووسینێک لە نێو هەموو ١٠٠ پەڕە بگۆڕیت و Internal CSS ـت بەکار بردبێت، پێویست دەکات دەستکاری هەموو پەڕەکان یەک بە یەک بکەیت.

شێوازی باشتر و درووست تر لە هەردوو شێوازی Inline  و Internal، دەمێنێتەوە سەر External CSS. کە هەموو کێشەکانی شێوازی یەکەم و دووەم چارەسەر دەکات، لەوەش زۆرتر دەتوانرێت پەیوەست بکرێت بە پەڕگەی دیکەی CSS بەبێ پێویست کردن بە دەستکاریکردنی پەڕەکانی HTML. لە درێژەی ئەم بابەتە زۆرتر ئاماژەی پێدراوە.

نووسەری بابەت: ئاسۆ نادری-وێبچن

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

دەربارەی نوسەر

ماڵپەری تێك ئای ، یەكەمین و گەورەترین ماڵپەری تەكنەلۆژیە لە كوردستان و عێراق ، تیایدا چەند شارەزایەكی بواری تەكنەلۆژی خزمەتگوزاریە تەكنەلۆژیەكان وەكو هەواڵ و وانە و فێركاری بە زمانی كوردی و بە شێوەی خۆڕایی پێشكەش بە ئارەزوومەندانی تەكنەلۆژی دەكەن .

Comments are closed.