CSS

کورتەیەک دەربارەی CSS

CSS کە کورتکراوەی Cascading Style Sheetsـەو زمانێکە بەکاردێت بۆ پێناسەکردنی ڕووی دەرەوەی هەر پەڕگەیەک کە بە HTML یان XML دەنووسرێت. بەهۆی CSSـەوە دەتوانرێت ڕەونەقێکی جوان بدرێت بە ماڵپەڕ وەکو ڕەنگردن، فۆنتەکان، بەستەرەکان... هتد کەدەتوانیت خۆت بڕیار بدەیت بەچ شێوەیەک هەر یەک لەوانە دەربکەون. هەر پەڕەیەکی CSS بە css. کۆتایی پێ دێت و دەتوانرێت ببەسترێتەوە بە بێ پایان پەڕگەوەو ڕووی ئەو کاریگەرییانە پیشان بدات کەلەناو پەڕگەی css ـەکەدا پێناسەکراوەو نرخی پێدراوە.

چ دەستکاریکەرێک (Editor)؟

چەند دەستکاریکەرێکی پێشنیار کراو:

• NotePad++
• Bluefish
• Geany
• Gedit
• Medit
• VIM

ڕستەکار - Syntax

داڕشتنی CSS پێک هاتووە لە سێ بەش: selector، property، value.

selector {property: value}

• selector: بەشێکی/تاگێکی HTMLـەو کە دەتەوێت پێناسەی بکەیت.
• property: تایبەتمەندییەکە کە دەتەوێت نرخەکەی بیگۆڕیت.
• value: هەر تایبەتمەندییەک (property) نرخێکی (value) هەیە.

body {
font-size: 11px;
color: blue;
}

ئەگەر لەحاڵەتێکدا نرخەکە لەچەند ووشەیەک پێک هاتبوو ئەوە باشتر وایە بخرێتە ناو دوو دەقەوە:

serdêrr {font-family: "unikurd Web"}

ڕەنگەکان - Colours

ئاشکرایە کە ڕەنگ بۆ خۆی جوانی تەواو دەبەخشێت بە پەڕگەکانی سەر وێب بەشێوەیەک کە لەگەڵ یەکتردا گونجاو بن. دەتوانرێت ڕەنگەکان بە ۳ شێوەی جیاواز بنووسرێن:

1. ناو - name یاخود
2. rgb - red/green/blue یان
3. hex

بۆ نموونە ڕەنگی سوور دەتوانرێت بەو چەند شێوەی خوارەوە بنووسرێت:

red

یان

rgb(255,0,0)

کە ئەویش هاوشێوەیە لەگەڵ

rgb(100%,0%,0%)

بەهەمان شێوەش

#ff0000

یان هەروەها

#f00

هەریەک لەو کۆدانەی سەرەوە هاوشێوەن بۆ ڕەنگی سوورو هەرکامێکیان بەکارببەی ئەوە ڕەنگی سوور دەبەخشن.

تاوەکو ئێستا تەنها ۱۷ ناوی ڕەنگ پێناسەکراون تاوەکو بتوانرێت بەکار ببرێت، ئەوانیش بریتین لە:

qua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange,
purple, red, silver, teal, white, and yellow

چۆنیەتی بەکارهێنانی ڕەنگەکان لەناو پەڕەیەکی css‌ ـدا بەم شێوەیە ئەبێت:

h1 {
color: #00ff00
}
h2 {
color: #dda0dd
}
p {
color: rgb(0,0,255)
}

ڕەنگی پاشبنەمای نووسین

بۆ ئەوەی کە پاشبنەما ڕەنگ بکەیت واتە ئەگەر پاشبنەمای نووسینەکە ڕەنگ بکەیت ئەوە دەنووسیت ( ئەو کۆدە بەواتای نووسینێکی سوورو بەپاشبنەمایەکی خۆڵەمێشی):

h1 {
color: red;
background-color: gray;
}

دەق - Text

هەموو ماڵپەڕێک پێکهاتووە لە کەم یان زۆر لە دەق، ئیتر ئەو دەقانە بۆ ڕوونکردنەوە بێت یان بۆ هەر مەبەستێک بنووسرێت. لە پەڕەی css ـدا دەتوانیت جۆری ئەو دەقانە دیاری بکەیت، قەبارەکەی، ڕەنگی، شوێن (ڕاست، چەپ، ناوەڕاست یان justify)، ئاڕاستە (direction).

خێزانی جۆرەپیت - font-family

ئەمەش جۆری فۆنتەکە ئەگرێتەوە واتا ناوی فۆنتەکە, ئەگەر لە جۆرەپیتێک (فۆنت) زیاتر بوون ئەوە بەهۆی کۆماوە (،) لێک جیادەکرێنەوە.

nawerok {
font-family: "Unikurd Web", tahoma, arial, helvetica;
}

تێبینی: ئەگەر لە حاڵەتێکدا ناوی فۆنتەکە لە ووشەیەک زیاتر بوو ئەوە پێویستە بکرێتە نێوان دوو کۆماوە، بەم شێوەیە: "Unikurd Web".

قەبارەی فۆنت - font-size

لێرەدا قەبارەی فۆنتەکە دیاری دەکرێت و ئەو تیکستەی کە هەیە بەو قەبارەیە دەردەکەوێت کە لێرەدا نرخی بۆ دادەنرێت.

body
{
font-size: 13px
}

بێجگەلە ژمارە دەتوانین بەم نرخانەش قەبارەی فۆنتەکان دیاری بکەین:

x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%

font-weight

لێرەدا دەریدەخەین کە فۆنتەکە / دەقەکان ئاسایی (normal)، ئەستور (bold) بن. بۆ نموونە:

font-weight: bold;

یان

font-weight: normal;

شێوازی فۆنت - font-style

بۆ شێوازی فۆنتەکان ئەوە ۳ نرخمان هەیە ئەویش : normal، italic، oblique. هەروەها بەم شێوەیە بەکاردێن لەناو پەڕەی css ـدا:

font-style: italic;

دیکۆری دەق - text-decoration

لێرەدا ئەو تێکستەی (دەق) کە هەیە دەتوانرێت بە ۳ نرخی جیاواز پیشان بدرێن :

• overline : هێڵ بەسەرووی دەقەکەوە بێت.
• line-through : هێڵ بەناو دەقەکەدا بڕوات.
• underline : هێڵ بەژێردا هاتوو.

 text-decoration: overline;
/* yan */
 text-decoration: line-through;  
/* yan */
 text-decoration: underline;

هەروەک نموونەیەک بۆ زانیاری زیاتر ئەوانەی لەسەرەوە باسکران بەم نمونەیە ئەیخەینەڕوو کە چۆن بەکاردێن لەناو پەڕەی css‌ ـدا:

body {
	font-family: "Unikurd Web", Tahoma, arial, helvetica;
	font-size: 11pt;
	text-decoration: none;
	font-style: italic;
	text-align: right;
}

فۆنت - Font

فۆنتیش بەهەمان شێوەی دەقەکان وایە. بەواتای ئەوەی هەمان تایبەتمەندی و نرخ کەبەکاری دەهێنین بۆ دەقەکان دەتوانین بۆ فۆنتەکانیش بەکاری ببەین. نموونەیەک:

h5 {
font-family: "Unikurd Web", tahoma, arial;
font-size:13px;
font-weight:bold;
text-decoration: underline;
}

پێویست بەدووبارە کردنەوە ناکات چونکە وەک ووترا کە هەمان شێوەو تایبەتمەندی دەقەکان دەتوانیت بەکارببەیت بۆ فۆنتەکانیش.

Margins and Padding

تایبەتمەندی margin نەکاردەبرێت بۆ پێناسەکردنی بۆشایی لەدەورووبەری توخمێک (element). دەتوانرێت هەروەها نرخی نێگەتیڤ بەکار بهێنرێت بۆ نرخەکان کە ئەیدرێتێ. چوار جۆر نرخ هەیە بۆ margin :

1. margin-top
2. margin-right
3. margin-bottom
4. margin-left

وە بۆ هەر یەک لەو نرخانە تەنها ۳ نرخی جیاواز هەیە کە بەکاری بهێنیت:

1. auto
2. length
3. %

تایبەتمەندی padding بۆ پێناسەکردنی بۆشایی لەنێوان borderـی توخمێک (element border)لەگەڵ ناوەڕۆکی توخمێک (element content). بەهەمان شێوە چوار جۆر نرخ هەیە بۆ تایبەتمەندی padding کە هەمان نرخن وەک لە margin باس کراون بەڵام ئەم جارە تەنها ۲ نرخ هەیە بۆ هەریەک لەمانە‌ :

1. length
2. %

بەم شێوەیە بەکاری ئەهێنین لەناو پەڕگەی css ـدا:

h3 {
	font-size: 13px;
	background-color: #eee;
	margin: 3px;
	padding-top: 5%;
}

قەراغ - Border

مەبەست لە Border ئەوەیە کە قەراغێک درووست بکەیت بەدەوری توخمێکدا (element)، جا ئەو توخمە نووسین، وێنە ...هتد بێت. بۆ ناسینەوەی قەراغەکان لە پەڕگەی css ـدا ئەوە بە پێشگری border دەست پێ دەکات.
لە HTML ـدا خشتە (table) بەکارئەهێنین بۆ درووستکردنی قەراغێک بۆ نووسینێک بەڵام لە css ـدا ئەوە قەراغ بەکار دێنین و کاریگەری وەکو ڕەنگ دەتوانین بیدەینێ. هەروەها دەتوانرێت بەکاربهێنرێت بۆ چەندەها توخم (element) لەهەمان کاتدا. تایبەتمەندیborder بەم شێوازانەی خوارەوە پێناسە دەکرێت:

شێوازی قەراغ - border-style

border-style : دیاریکردنی هەموو قەراغەکانی هەر توخمێک بە گشتی.

border-top-style : دیاریکردنی شێوازی سەرەوەی توخمەکە (element).

border-right-style : دیاریکردنی شێوازی توخمەکە بەشی لای ڕاست.

border-bottom-style : دیاریکردنی شێوازی توخمەکە بەشی خوارەوەی.

border-left-style : دیاریکردنی شێوازی توخمەکە بەشی لای چەپ.

نرخە گونجاوەکانی ژێر ئەم تایبەتمەندییە

none, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden

بەم شێوەیە بەکاری ئەهێنین لە پەڕگەیەکی css ـدا:

.solid {
border-right-style: solid;
}

هەروەها دەتوانیت لەهەمان کاتدا چەند نرخێک پێکەوە بەکارببرێت، بۆ نموونە :

.table {
border-style: dotted dashed;
}

پانی قەراغ - border-width

• border-width: پانی border‌ ـە کە لەهەموو لایەکەوە.
• border-top-width: پانی قەراغەکە (بەشی سەرەوە - top).
• border-right-width: پانی قەراغەکە (بەشی لای ڕاست - right).
• border-bottom-width: پانی قەراغەکە (بەشی خوارەوە - bottom).
• border-left-width: پانی قەراغەکە (بەشی لای چەپ - left).

نرخە گونجاوەکانی ژێر ئەم تایبەتمەندییە

thin, medium, thick

چەند نموونەیەک (لێرەش بەهەمان شێوە دەتوانرێت زیاتر لە نرخێک بەکار ببرێت):

table {
border-width: thin medium
}

/*بەکارهێنانی زیاتر لە نرخێک*/
table {
border-width: thin medium thick
}

/*پیکسل لە جیاتی نووسینی نرخەکان*/
ttable { 
border-left-width: 2px 4px;
}

ڕەنگی قەراغ - border-color

ئەم تایبەتمەندییەش بریتی دەبێت لە ڕەنگکردنی قەراغ (border)و پێک دێت لە چەند نرخێک بەهەمان شێوەی ئەوانەی لەسەرەوە باس کراون:

border-color
border-top-color
border-right-color
border-bottom-color
border-left-color

چۆنیەتی نووسینی ئەم تایبەبەتمەندییە (بەچەند شێوەیەکی جیاواز)لە پەڕگەی css ـدا:

p.reng1 {
border-right-color: red;
}

p.reng2 {
border-color: #cc3421;
}

p.reng3 {
border-color: #fc0 blue #cf0;
}

خشتە - Table

لێرە کۆتایی پێ دێت.