Learn CSS in Kurdish

بەکوردی CSSفێربوووی زماوی

CSS ضی ئێص ئێص( کە کىرتکراوەی(Cascading Style Sheets ـەو زماوێکە بەکاردێت بۆ پێىاضەکردوی ڕووی

ـەوە دەتىاورێت ڕەووەقێکی جىان بذرێت بە CSSدەوىوضرێت. بەهۆی XMLیان HTML دەرەوەی هەر پەڕگەیەک کە بە

ماڵپەڕ وەکى ڕەوگردن، فۆوتەکان، بەضتەرەکان... هتذ کەدەتىاویت خۆت بڕیار بذەیت بەچ غێىەیەک هەر یەک لەواوە

. و دەتىاورێت ببەضترێتەوە بە بێ پایان پەڕگەوە، لەهەر cssژکراوەی پەڕگەکەی برێتییە لە درێ CSSدەربکەون. پەڕەی

ـەکەدا پێىاضەکراوەو ورخی cssپەڕگەیەکذا بەکارببرێت یەوا ڕووی ئەو کاریگەرییاوە پیػان ئەدات کە لەواو پەڕگەی

پێذراوە.

واوەڕۆک

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

بەضتىەوە یان بەکارهێىاوی لە ٢ html دا

o ٢.١ External Style Sheet

o ٢.٢ Internal Style Sheet

o ٢.٣ Inline Styles

ڕضتەکار ٣ - Syntax

ڕەوگەکان ٤ - Colours

o وىوضیه ڕەوگی پاغبىەمای ٤.١

دەق ٥ - Text

o خێساوی جۆرەپیت ٥.١ - font-family

o قەبارەی فۆوت ٥.٢ - font-size

o ٥.٣ font-weight

o غێىازی فۆوت ٥.٤ - font-style

o دیکۆری دەق ٥.٥ - text-decoration

فۆوت ٦ - Font

٧ Margins and Padding

قەراغ ٨ - Border

o غێىازی قەراغ ٨.١ - border-style

http://www.chawg.org/wiki/%D9%BE%DB%95%DA%95%DA%AF%DB%95:Sample-css-code.png

ژێر ئەم تایبەتمەوذییە ورخە گىوجاوەکاوی ٨.١.١

o پاوی قەراغ ٨.٢ - border-width

ژێر ئەم تایبەتمەوذییە ورخە گىوجاوەکاوی ٨.٢.١

o ڕەوگی قەراغ ٨.٣ - border-color

لیطتە ٩ - List

خػتە ١١ - Table

الکان ١١ - Dimension

o ومىووە بۆ الکان ١١.١ - Dimension :

هاوپۆل ١٢ - Classification

o ومىووە بۆ هاوپۆل ١٢.١ - Classification

غێىەی داوان/وەضتان ١٣ - Positioning

o ١ ومىوەی ١٣.١:

o ٢ ومىوەی ١٣.٢:

o ٣ ومىوەی ١٣.٣:

١٤ pseudo-classes

o ١ ومىوەی ١٤.١:

١٥ pseudo-elements

o ١ ومىوەی ١٥.١:

o ٢ ومىوەی ١٥.٢:

پاغبىەما ١٦ - background

o ڕەوگى پاغبىەما ١٦.١ - Background Color

ومىووەیەک ١٦.١.١

o پاغبىەمای وێىەیی ١٦.٢ - Background Image

o تایبەتمەوذی ٣ و کۆکردوەوەی ومىووەیەک ١٦.٣

١٧ Class and ID Selectors

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

تەوها پێىیطتت بە دەضتکاریکەرێک )بۆ وىوضیىی کۆدەکان( و وێبگەڕێک )بۆ بیىیىی ئەوجام( دەبێت. هیچ CSSبۆ فێربىووی

کە ضادەتریه دەضتکاریکەری Notepadئامڕازێکی تر یان وەرمەکااڵیەکت پێىیطت وابێت. دەضتکاریکەر لە ویىذۆز وەک

دەقە، بەاڵم ئەواوەی کە ئامۆژگاریکراون وەک:

NotePad++

Bluefish

Geany

Gedit

Medit

VIM

اد htmlبەستىەوە یان بەکارهێىاوی لە

http://www.chawg.org/wiki/CSS#.D9.87.D8.A7.D9.88.D9.BE.DB.86.D9.84_-_Classification

http://www.chawg.org/w/index.php?title=Notepad&action=edit&redlink=1

S دەتىاورێت بە ضێ غێىە تێکەڵ بکرێت لەگەڵHTML .تاوەکى ئەو تەکىیکە بەدروضتی کاربکات

External Style Sheet

لە relبەغیىەی htmlو ڕاکێػاوی پێىاضەکردوی بۆ واو کۆدی style.cssبۆ ومىوە CSS پەڕگەیەکی تایبەت و لەدەرەوە بە

دا بۆ ومىوە: headکۆدەکاوی

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

Internal Style Sheet

یان هەمان پەڕە و بەم غێىەیە:

<head>

<style type="text/css">

body {

background:#707070 none repeat scroll 0 0;

font-family:"Unikurd Web", Tahoma, "DejaVu Sans", Arial, Verdana;

font-size:10pt;

direction: rtl;

}

p {

position:absolute;

top:10px;

width:400px

}

</style>

</head>

Inline Styles

یەکەدا بەم غێىەیە: HTMLبەتێکەڵکردوی لەگەڵ تاگی

<P style="font-size: x-large; color: #ff9900">

Sillaw em Katetan bash, awha style dexrete ser TAG html _;)

</p>

Syntax -ڕستەکار

. selector ،property ،valueضێ بەظ: پێک هاتىوە لە CSSداڕغتىی

selector {property: value}

selector: بەغێکی/تاگێکیHTML .ـەو کە دەتەوێت پێىاضەی بکەیت

property: .تایبەتمەوذییەکە کە دەتەوێت ورخەکەی بیگۆڕیت

value: ( هەر تایبەتمەوذییەکproperty( ورخێکی )value .هەیە )

body {

font-size: 11px;

color: blue;

}

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

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

Colours -ڕەوگەکان

کە لەگەڵ یەکتردا گىوجاو به. ئاغکرایە کە ڕەوگ بۆ خۆی جىاوی تەواو دەبەخػێت بە پەڕگەکاوی ضەر وێب بەغێىەیەک

غێىەی جیاواز بىىوضرێه: ٣دەتىاورێت ڕەوگەکان بە

name -واو .1

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بىىوضرێت. لە پەڕەی

(. direction(، ئاڕاضتە )justifyواوەڕاضت یان

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

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

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

(. دەتىاورێت هەروەها elementبەکاردەبرێت بۆ پێىاضەکردوی بۆغایی لەدەورووبەری تىخمێک ) marginتایبەتمەوذی

: marginورخی وێگەتیڤ بەکار بهێىرێت بۆ ورخەکان کە ئەیذرێتێ. چىار جۆر ورخ هەیە بۆ

1. margin-top

2. margin-right

3. margin-bottom

4. margin-left

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

1. auto

2. length

3. %

(لەگەڵ واوەڕۆکی تىخمێک element borderـی تىخمێک )borderبۆ پێىاضەکردوی بۆغایی لەوێىان paddingتایبەتمەوذی

(element content بەهەمان غێىە چىار جۆر ورخ هەیە بۆ تایبەتمەوذی .)padding کە هەمان ورخه وەک لەmargin

: ورخ هەیە بۆ هەریەک لەماوە ٢باش کراون بەاڵم ئەم جارە تەوها

1. length

2. %

ـذا: cssبەم غێىەیە بەکاری ئەهێىیه لەواو پەڕگەی

h3 {

font-size: 13px;

background-color: #eee;

margin: 3px;

padding-top: 5%;

}

Border -قەراغ

(، جا ئەو تىخمە وىوضیه، وێىە elementئەوەیە کە قەراغێک درووضت بکەیت بەدەوری تىخمێکذا ) Borderەبەضت لە م

دەضت پێ دەکات. borderـذا ئەوە بە پێػگری css...هتذ بێت. بۆ واضیىەوەی قەراغەکان لە پەڕگەی

ـذا ئەوە قەراغ بەکار cssوىوضیىێک بەاڵم لە ( بەکارئەهێىیه بۆ درووضتکردوی قەراغێک بۆ tableـذا خػتە ) HTMLلە

( لەهەمان 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

}

/*bekarhênanî zyatr le nrxêk*/

table {

border-width: thin medium thick

}

/*pîksl le cyatî nûsînî nrxekan*/

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;

}

List -لیستە

مەبەضتمان لە لطیتە لێرەدا ئەوەیە کە بتىاورێت ژمارە و خاڵ یان بازوەی بچىوک یان چىارگۆغەی بچىوک دابىێیت لەهەر

دەتىاورێت وێىە دابىرێت. پەڕەیەکی ضەر وێب هەروەها لە جیاتی ئەوەظ

ێت بەکاربهێىرێت: تایبەتمەوذیمان هەیەو هەریەک لەواوەظ ورخی جۆراوجۆریان هەیە کە دەتىاور ٤لێرەدا ئێمە

list-style: - list-style

- list-style-position

- list-style-image

list-style-image: - none

- url

list-style-position: - inside

- outside

list-style-type: - none

- disc

- circle

- square

- decimal

- decimal-leading-zero

- lower-roman

- upper-roman

- lower-alpha

- upper-alpha

- lower-greek

- lower-latin

- upper-latin

- hebrew

- armenian

- georgian

- cjk-ideographic

- hiragana

- katakana

- hiragana-iroha

- katakana-iroha

marker-offset: - auto

- length

ـذا: cssچۆویەتی بەکارهێىاویان بەم غێىەیە ئەبێت لەواو پەڕگەیەکی

disc {

list-style-type: disc;

}

circle {

list-style-type: circle;

}

square {

list-style-type: square;

}

none {

list-style-type: none;

}

(ـذا ئەوە بەم غێىەیە دەیىىوضیه: listخۆ ئەگەر بماوەوێت وێىەیەک دابىێیه لەجیاتی بەکارهێىاوی ورخەکان لە لیطتێک )

ol {

list-style-image: url("nawî_wêneke.gif");

}

Table -خشتە

ەیت و بەپێی پێىیطتی کە بەکارهێىەر ئەخىازێت لەوێى ماڵپەڕەکەیذا خػتە ڕێگە ئەدات کە بتىاویت خػتەیەک درووضت بک

بیکات. بەهەمان غێىە تایبەتمەوذی جیاواز هەیەو بۆ هەریەک لەواوە ورخی جیاوازیع هەیە.

تایبەتمەوذی ورخەکان

collapse

separate border-collapse

length length border-spacing

top

bottom

left

right

caption-side

show

hide empty-cells

auto

fixed table-layout

ـذا: CSSهەریەک لەو تایبەتمەوذیاوە بەم غێىەیە بەکاردەهێىرێت لەواو پەڕگەیەکی

xişte.yekem

{

table-layout: auto

}

xişte.dûhem

{

table-layout: fixed

}

xişte.sêhem

{

border-collapse: separate;

empty-cells: show

}

Dimension -الکان

( وە هەروەها elementو پاوی هەر تىخمێک ) مەبەضت لە الکان لێرەدا ئەوەیە کە ڕیگە ئەدات بە کۆوتڕۆڵکردوی بەرزی

دەتىاورێت بۆغایی وێىان دوو هێڵ )بۆ ومىووە وەکى دوو دێڕ لە وىوضیه( پێ زیادو کەم بکرێت.

تایبەتمەوذی ورخەکان ڕوووکردوەوە

auto .دیاریکردوی بەرزی بۆ تىخمەکەlength

%

height

normal داواوی دووری وێىان هێڵەکان

number length

%

line-height

none داواوی ئەوپەڕی بەرزی بۆ تىخمەکە

length %

max-height

none داواوی ئەوپەڕی پاوی بۆ تىخمەکە

length %

max-width

length داواوی کەمتریه بەرزی بۆ تىخمەکە%

min-height

length داواوی کەمتریه پاوی بۆ تىخمەکە%

min-width

none .دیاریکردوی پاوی بۆ تىخمەکە

length %

width

ـذا: CSSچۆویەتی بەکارهێىاوی ئەو تایبەتماوذییاوە لەواو

img {

height : 200px;

}

p.small {

line-height: auto

}

p.big {

line-height: 0.9cm

}

p {

max-height:100px;

}

p {

min-height: 50px;

}

p {

max-width: 500px

}

: Dimension -وموووە بۆ الکان

و بە غێىەی ئێطتا پەڕەیەک بکەرەوە بەهەر یەکێکی لەو پرۆگراماوەی کەوابراوە لەضەرەوەو ئەم کۆداوە بخەرە واوی

style.css :پاغەکەوتی بکە

img.normal {

height : 300px; /* Lêreda berzî wêneke 300px abêt*/

width: 400px; /* Panî wêneke 400px abêt */

}

p.small {

line-height: auto; /* berzî nêwan nûsênekan */

}

p.big {

line-height: 0.7cm;

max-width: 600px; /* her dêrrêk tenha 600px debêt */

}

و بە واوی هەروەها پەڕەیەکی تریع بکەرەوەو ئەو کۆداوەی خىارەوە بخەرە واویindex.html :پاغەکەوتی بکە

<html>

<head>


</head>

<body>

<img class="normal" src="nawî-wêneke.jpg" />

<p class="small">

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since

the 1500s, when an unknown printer took a galley of type and scrambled it

to make a type specimen book.

It has survived not only five centuries,

</p>

<p class="big">

Lorem Ipsum is simply dummy text of the printing and typesetting industry.





but also the leap into electronic typesetting, remaining essentially

unchanged.

</p>

</body>

</html>

Classification -هاوپۆل

(ـذا. هاوپۆلەکان ئەم HTMLو لەکىێ هەر تىخمێک دەربکەوێت لە پەڕەیەکەی هتمل ) هاوپۆل پێمان دەڵێت کە چۆن

تایبەتماوذییاوە لە خۆ دەگرێت:


left

right

both

none

clear

url

auto

crosshair

default

pointer

move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help

cursor

none

inline

block

list-item

run-in

compact

marker

table

inline-table

table-row-group

table-header-group

table-footer-group

table-row

table-column-group

table-column

table-cell

table-caption

display

left

right

none

float

static

relative

absolute

fixed

Position

visible

hidden

collapse

visibility

Classification -وموووە بۆ هاوپۆل

تایبەتمەوذیdisplay لە پەڕگەیەکی :css :ـذا ئەمە دابىێ

p {

display: inline;

}

div {

display: none;

}

ـیػذا ئەو کۆداوە ڕەوىوش بکە: htmlلە پەڕگەیەکی

<html>

<head>


</head>

<body>

<p>Eme tenha pêk hatiwe le tekstêkî bînraw</p>

<p>em dêrreş deçête pal ewey serewe.</p>

<div>Em dêrre behîç şêweyek dernakewêt.</div>

</body>

</html>

تایبەتمەوذیcursor لە پەڕگەی :css :ـذا

span {

cursor: help;

}

ـذا: htmlلە پەڕگەی

<html>

<head>


</head>

<body>

<span>Ger mişkeke bxeyte ser em risteye ewe nîşaneyekî pirsyar

ebînît.</span>

</body>

</html>

بۆ هەریەک لەو تایبەتمەوذییاوەی ضەرەوە کە واویان هێىراوە هیچ جیاوازییەکی ئەوتۆیان وییە لە بەکارهێىاویان لەواو

و تاوەکى زیاتر غارەزایی لەبەکارهێىاویان و تاقیان بکەیتەوە بذەیتـذا، بۆیە دەتىاویت خۆت زیاتر هەوڵ cssپەڕگەیەکی

هەبێت.

Positioning -شێوەی داوان/وەستان

ـذا ڕێگەئەدات بە داواوی هەر تىخمێک کە چۆن دەربکەوێت لەضەر پەڕەیەکی ضەر وێتذا، جا ئایا ئەو cssئەم تایبەتمەوذییە لە

. تىخمە وىوضیه )تێکطت( بێت یاخىود وێىە

ئەم تایبەتمەوذیەظ وەکى هەمىو ئەواوەی پێػىوتر باش کراون لەچەوذ تایبەتمەوذییەک پێکهاتىوە کە هەریەکەیان چەوذ

( جیاوازیان هەیە. valuesورخێکی )


auto

%

length

bottom

shape

auto clip

auto

%

length

left

visible

hidden

scroll

auto

overflow

static

relative

absolute

fixed

Position

auto

%

length

right

auto

%

length

top

baseline

sub

super

top

text-top

middle

bottom

text-bottom

length

%

vertical-align

auto

number z-index

: دەخەیىەڕوو Positioning -لێرەدا چەوذ ومووەیەک بۆ شێوەی داوان/وەستان

:۱ومووەی

p {

position:absolute;

top:10px;

width:400px

}

<html>

<head>


</head>

<body>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting

industry.






unchanged.

</p>

</body>

</html>

:۲ومووەی

p {

position:fixed;

left:100px;

top:10px;

}

<html>

<head>


</head>

<body>


industry.






unchanged.

</p>

</body>

</html>

:۳ ومووەی

div.scroll

{

width:300px;

height:80px;

overflow:scroll;

}

div.hidden

{

background-color:#eee;

width:200px;

height:100px;

overflow:hidden;

}

<html>

<head>


</head>

<body>

<p>Ger lêre seyr bikeyt ewe scroll dirust bwe.</p>

<div class="scroll">Lorem Ipsum is simply dummy text of the printing and

typesetting industry.






unchanged.

</div>

<p>Lêreda scroll şardraweteweê be watay ewey nîşan nadrêt.</p>

<div class="hidden">Lorem Ipsum is simply dummy text of the printing and

typesetting industry.






unchanged.

</div>

</body>

</html>

pseudo-classes

classes-pseudo بەکاردێت بۆ پێذاوی کاریگەرییەک بۆ هەرselector ( ـێکselectorی/تاگێکی : بەغێک

HTML .)ـەو کە دەتەوێت پێىاضەی بکەیت

بریتییە لە: pseudo-classes( بۆ syntaxڕضتەکار )

selector:pseudo-class {property:value}

: بەکارببرێت pseudo-classes( لەگەڵ classدەتىاورێت پۆل )

selector.class:pseudo-class {property:value}

هەر بەضتەرێک دەتىاورێت پیػان بذرێت بەچەوذ غێىازێکی جیاواز لە وێبگەڕێکذا:

a:link {color:#FF0000} /* Besterî serdan nekraw (unvisited link) */

a:visited {color:#00FF00} /* besterî serdan kraw (visited link) */

a:hover {color:#FF00FF} /* Dananî mişkeket leser bestrêk (mouse over link)

*/

a:active {color:#0000FF} /* selected link */

:۱ومووەی

ـذا کە بەڕەوگی ڕەظ دەردەکەوێت وە کاتێک کە بە مػکەکەت دەچیتەضەری htmlلێرەدا بەضتەرێک داوراوە لە پەرگەیەکی

ـذا پێىاضە کردووە وەک لەخىارەوە دیارە. cssەغمان لە پەڕگەیەکی ئەوە ڕەوگی بەضتەرەکە دەگۆڕێت بۆ ضىور، ئەو

a:link {color: #000000}

a:visited {color: #00FF00}

a:hover {color: #FF0000}

a:active {color: #0000FF}

<p><a href="http://chawg.org" target="_blank">Bester bo perrey seretay

Chawg</a></p>

pseudo-elements

elements-pseudo بەهەمان غێىەیclasses-pseudo بەکاردێت بۆ پێذاوی کاریگەرییەک بۆ هەرselector

ـێک.

بریتییە لە: pseudo-elements( بۆ syntaxڕضتەکار )

selector:pseudo-elements {property:value}

: برێتبەکارب pseudo-elements( لەگەڵ classدەتىاورێت پۆل )

selector.class:pseudo-elements {property:value}

:۱ومووەی

p:first-letter {

color:#ff0000;font-size:xx-large

}

<html>

<head>


</head>

<body>

<p>Bibîne ke pîtî yekem be gewreyî u rengî sûre.</p>

</body>

</html>

:۲ومووەی

p:first-letter {

color:#ff0000;font-size:xx-large

}

p:first-line {

color:#0000ff

}

<html>

<head>


</head>

<body>




industry. Lorem Ipsum has been the industry's standard dummy text ever

since the 1500s, when an unknown printer took a galley of type and

scrambled it to make a type specimen book.

It has survived not only five centuries,but also the leap into electronic

typesetting, remaining essentially unchanged.</p>

</body>

</html>

background -پاشبىەما

تىخمێک کە لە پەڕگەکەدا ـذا دەتىاویه پێىاضەی بکەیه بە پێذاوی کاریگەری ڕەوگی لەضەر هەر CSSتایبەتمەوذی پاغبىەما لە

دەکرێت. تایبەتمەوذی پاغبىەما ئەماوە لەخۆ دەگرێت، بەواتای ئەوەی کە بەو چەوذ غێىەیە پێىاضە دەکرێت:

background-color

background-image

background-repeat

background-attachment

background-position

Background Color -ڕەوگى پاشبىەما

ـذا، بەاڵم ئەگەر ڕەوگی بذەیه بە پاغبىەما پەڕەیەکی cssم تایبەتمەوذییە پێىاضەی ڕەوگی پاغبىەما دەکات لە پەڕگەیەکی ئە

HTML ـذا، ئەوە دەبێت لەواوbody selector :ـذا بیىىضیه بەو غێىەی خىارەوە

body {

background-color:#eeeeee

}

و ...هتذ بەکاربهێىرێت: هەروەها دەتىاورێت ڕەوگی پاغبىەما بۆ رەوگکردوی پاغبىەمای تری وەک وىضیه

h1 {

background-color:#cccccc

}

p {

background-color:#e0ffff

}

div {

background-color:#b0c4de

}

کوموووەیە

لە پەڕگەیەکیcss ـذا ئەمە بىىوضەو پاغەکەوتی بکە بە واویstyle.css

body

{

background-color:#dbcb35;

}

ئەم کۆداوەظ لە پەڕگەیەکیhtml :ـذا بىىوضە

<html>

<head>


</head>

<body>

<h1>Serdêrri Babet</h1>

<p>Seyrî pasbnema bike ke rengman dawetê le perrgey css da.</p>

</body>

</html>

Background Image -پاشبىەمای وێىەیی

ئەم تایبەتمەوذییە بەکاردێت بۆ داواوی وێىە وەک پاغبىەمایەک، پاغبىەمای پەڕەیەک بەم غێىەیە پێىاضە دەکرێت:

body {

background-image:url('wêneke.png')

}

یتایبەتمەوذ ۳و کۆکردوەوەی وموووەیەک

، image-background ،repeat-backgroundتایبەتمەوذی کۆکراوەتەوەو کراوە ) ٣لەم ومىووەیەدا

position-background بە ومىووەیەک، بۆ ئەوەی زیاتر لەو تایبەتمەوذیاوە بگەیت ئەوە ئەبێت گۆڕاوکاری بکەیت )

ت کاریان چییە. تاوەکى بساوی

پەڕەیەکیcss :دەرووضت بکەو ئەو کۆداوەی تێذا دابىێ و پاغان پاغەکەوتی بکە

body

{

background-image:url('wêneke.png');

background-repeat:no-repeat;

background-position:top right;

margin-right:150px;

}

ئەو کۆداوەظ لە پەڕەیەکیhtml :ـذا پاغەکەوت بکەو پاغان ضەیری بکە بساوە چۆن دەردەکەوێت

<html>

<head>


</head>

<body>

<h1>Lem Nimuneyeda,</h1>

<p>bekarhênani paşbinema bê dubare kirdnewe (no-repeat) u herweha (set

postion).</p>

<p>Lêreda paşbinemake tenha 1 car derdekewêt wate dubare nabêtewe.</p>

</body>

</html>

Class and ID Selectors

بە ویػاوەی Class( پێع وغەیەک بێت، بەاڵم #بەوە بىاضیىەوە کە ) ID Selectorـذا دەتىاویه CSSلەهەر پەڕەیەکی

( دەواضیىەوە. .)

ـذا ئەمە بىىوضە: cssلەپەڕەی بـۆ وـمـوووــە:

#serder {

background-color: #ccc;

padding: 1em

}

.sereta {

color: #fff;

font-weight: bold;

}

ـذا بىىوضە: htmlهەروەها ئەمەظ لە پەڕەی

<html>

<head>


</head>

<body>

<div id="serder">

<h1>Serdêrrî Babet</h1>

<p class="sereta">Hemû şitêk seretayekî heye, emeş beşêke lew

seretaye!</p>

</div>

</body>

</html>

www.chawg.orgوەرگیراوە لە ضایتی :

ضامڕەوذ حاجیچاک کردن :

http://www.chawg.org/

Documents

Learn CSS in Kurdish