چۆنیەتی کارکردن و بەکارهێنانی زمانی CSS

چۆنیەتی کارکردن و بەکارهێنانی زمانی CSS

بۆ کارپێکردنی زمانی سی ئێس ئێس لە ناو وێب سایتەکان دەتوانین بەسێ شێواز کاری پی بکەین و بەکاری بهێنین :

شێوازی یەکەم :
دەتوانین ئەم زمانە بەکاربهێنین لە ناو تاگەکانی زمانی HTML وە کام تاگەکان مەبەست بێت کۆدەکانی ئەم زمانەی لەسەر جێبەجێ دەکەین ئەوە لەو شوێنە بەکاری دەهێنین
بۆ نموونە من دەمەوێت نووسینێک بنووسم لەناو تاگی پەرەگراف بەم شێوازە :

<html>
<head>
</head>
<body>
<p/>کوردستان<p style=”color:red;”>
</body>
</html>

لە نموونەی سەرەوە سەرەتا ئەو تاگەمان کردەوە کە تایبەتە بە نووسینی پەرەگراف دواتر فرمانی ستایلمان نووسی کە ئەم فرمانە وا دەکات تۆ بتووانی کۆدەکانی زمانی سی ئێس ئێس CSS لەسەر ئەم نووسینە جێبەجێ بکەیت .

سەیری ئەنجامی کارەکەی سەرەوە بکە

Capture 1

 
ئەگەر سەیری ئەنجامەکەی بکەن دەبینین کە ڕەنگی نووسینەکەمان بووە بە ڕەنگی سۆر وە ئەگەر تۆ ئەم شێوازە بەکاربهێنی ئەوا دەبێت فایلەکان بە فۆرمانتی( .htm یان .html )پاشەکەوت بکەین چونکە ئێمە کۆدەکانمان لە ناو HTML بەکاردەهێنین .
شێوازی دووەم :
زمانی سی ئێس ئێس دەتوانین بەشێوازێکی تر بەکاری بهێنین . دەتوانین ئەم زمانە بەکاربهێنین لەناو بەشی سەرەکی زمانی ‌HTML بۆ نموونە :

<html>
<head>
لێرە ئەو تاگە دەنووسین کە تایبەتە بە بەکارهێنانی زمانی CSS
</head>
<body>
</body>
</html>

دواتر دەبێت ئەو تاگە بنووسین کە بە هۆیەوە دەتوانین کاریگەریەکانی زمانی CSS لەسەر جێبەجێ بکەین وە دەبێت تاگەکە دابخەین
بۆ نموونە :
<html>
<head>
<style type=”text/css”>
</style>
</head>
<body>
</body>
</html>

وەک لە نموونەکە بەدیار دەکەوێت ئەو تاگەمان کردەوە و دامانخست کە تایبەتە بە بەکارهێنانی زمانی CSS .

بۆ نموونە دەمانەوێت تاقی پەرەگراف ڕەنگی نووسینەکە بکەین بە شین

<html>
<head>
<style type=”text/css”>
p
{
color:blue;
}
</style>
</head>
<body>

<p> کوردستان </p>

</body>
</html>

سەیری ئەنجامەکە بکەن :
Capture 2

 
شێوازی سێیەم :
دەتوانین زمانی سی ئێس ئێس CSS بە شێوەی فایلێکی سەربەخۆ پاشەکەوت بکەین و دواتر لەبەشی سەرەکی زمانی HTML بانگی ئەو فایلە بکەین کە تایبەتە بە سی ئێس ئێس و کاریگەریەکان لەسەر تاگەکانی زمانی HTML جێبەجێ بکەین .
دەبێت ئەو فایلەی بۆ زمانی سی ئێس ئێس CSS پاشەکەوتی دەکەین پاشگرەکەی یاخو فۆرماتەکەی بەم شێوەیە (.css) بێت و دەبێت فایلی HTML و ئەو فایلەی کە تایبەتە بە کۆدەکانی سی ئێس ئێس هەردووکیان لەناو یەک فۆڵدەر بن .

بۆ نموونە سەرەتا فۆڵدەرێک دروست دەکەین لەسەر شاشەی کۆمپیوتەرەکە واتە دیسکتۆپ
دواتر دەمانەوێت کارێک بکەین بۆ نموونە نووسینێک دەنووسین واتە بەهۆی پەرەگراف ئەو نووسینە دەنوسین کە دەمانەوێت ڕەنگەکەی بکەین بە شین لەناو فایلی سی ئێس ئێس و تاگی پەرەگراف دیاری دەکەین بەم شیوازە :

P
}
color:pink;
{

دواتر ئەم فایلە پاشەکەت دەکەین لە ناو ئەو فۆلدەرەی کە دروستمان کردووە و فایلەکە بە CSS پاشەکەوت دەکەین
Capture 3

 
دوای ئەوەی ئەو فایلەمان پاشەکەوت کرد کە تایبەت بوو بە زمانی CSS ئەوجارە لەناو HTML تاگێک بەکاردەهێنین بۆ ئەوەی کاریگەریەکانی CSS لەسەر جێبەجێ بکەین بەم شێوازە :

<html>
<head>
<linkrel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<link rel=”stylesheet” type=”text/css” href=”style.css/>
</head>
<body>
<p>کوردستان</p>
</body>
</html>

ئەو کۆدەی کە لەبەشی سەرەکیمان نووسی تایبەت بوو بە هێنانی فایلی CSS بۆ ناو فایلی HTML .

سەیری ئەم وێنەیە بکەن ئێستا هەردوو فایلەکە لە ناو یەک فۆلدەر دان .
چۆنیەتی کارکردن و بەکارهێنانی زمانی CSS

 

 

 

ئێستا ئەو فایلە بکەوە کە تایبەتە بە HTML دەبینین کەوا ڕەنگی پەرەگرافەکە بووە بەو ڕەنگەی کە ئێمە لە فایلەکەی CSS دیاریمان کردبوو .

لەم بابەتەدا شێوازەکانی بەکارهێنانی زمانی CSS بوو لە نێو زمانی HTML . بە ڕای من شێوازی سێیەم لە هەموو شێوازەکانی تر باشترە و سەرکەوتوترە .


چۆنیەتی کارکردن و بەکارهێنانی زمانی CSS

چۆنیەتی کارکردن و بەکارهێنانی زمانی CSS

 _________________________________

له‌وانه‌یه‌ ئاره‌زووی سه‌ردانی ئه‌م بابه‌تانه‌ش بكه‌ی!