Css

‫زماوی‬ ‫فێربوووی‬CSS‫بەکوردی‬
CSS‫کىرتکراوەی‬ ‫کە‬ )‫ئێص‬ ‫ئێص‬ ‫(ضی‬Cascading Style Sheets‫ڕووی‬ ‫پێىاضەکردوی‬ ‫بۆ‬ ‫بەکاردێت‬ ‫زماوێکە‬ ‫ـەو‬
‫بە‬ ‫کە‬ ‫پەڕگەیەک‬ ‫هەر‬ ‫دەرەوەی‬HTML‫یان‬XML‫بەهۆی‬ .‫دەوىوضرێت‬CSS‫بە‬ ‫بذرێت‬ ‫جىان‬ ‫ڕەووەقێکی‬ ‫دەتىاورێت‬ ‫ـەوە‬
‫لەواوە‬ ‫یەک‬ ‫هەر‬ ‫غێىەیەک‬ ‫بەچ‬ ‫بذەیت‬ ‫بڕیار‬ ‫خۆت‬ ‫کەدەتىاویت‬ ‫هتذ‬ ...‫بەضتەرەکان‬ ،‫فۆوتەکان‬ ،‫ڕەوگردن‬ ‫وەکى‬ ‫ماڵپەڕ‬
‫پەڕەی‬ .‫دەربکەون‬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

٨.١.١‫گىوجاوەکاوی‬ ‫ورخە‬‫تایبەتمەوذییە‬ ‫ئەم‬ ‫ژێر‬
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‫د‬‫ا‬

S‫لەگەڵ‬ ‫بکرێت‬ ‫تێکەڵ‬ ‫غێىە‬ ‫ضێ‬ ‫بە‬ ‫دەتىاورێت‬HTML.‫کاربکات‬ ‫بەدروضتی‬ ‫تەکىیکە‬ ‫ئەو‬ ‫تاوەکى‬
External Style Sheet
‫بە‬ ‫لەدەرەوە‬ ‫و‬ ‫تایبەت‬ ‫پەڕگەیەکی‬CSS‫ومىوە‬ ‫بۆ‬style.css‫کۆدی‬ ‫واو‬ ‫بۆ‬ ‫پێىاضەکردوی‬ ‫ڕاکێػاوی‬ ‫و‬html‫بەغیىەی‬rel‫لە‬
‫کۆدەکاوی‬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
‫داڕغتىی‬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 andPadding

‫تایبەتمەوذی‬margin( ‫تىخمێک‬ ‫لەدەورووبەری‬ ‫بۆغایی‬ ‫پێىاضەکردوی‬ ‫بۆ‬ ‫بەکاردەبرێت‬element‫هەروەها‬ ‫دەتىاورێت‬ .)
‫بۆ‬ ‫هەیە‬ ‫ورخ‬ ‫جۆر‬ ‫چىار‬ .‫ئەیذرێتێ‬ ‫کە‬ ‫ورخەکان‬ ‫بۆ‬ ‫بهێىرێت‬ ‫بەکار‬ ‫وێگەتیڤ‬ ‫ورخی‬margin:
1. margin-top
2. margin-right
3. margin-bottom
4. margin-left
‫هەر‬ ‫بۆ‬ ‫وە‬‫تەوها‬ ‫ورخاوە‬ ‫لەو‬ ‫یەک‬٣:‫بهێىیت‬ ‫بەکاری‬ ‫کە‬ ‫هەیە‬ ‫جیاواز‬ ‫ورخی‬
1. auto
2. length
3. %
‫تایبەتمەوذی‬padding‫لەوێىان‬ ‫بۆغایی‬ ‫پێىاضەکردوی‬ ‫بۆ‬border( ‫تىخمێک‬ ‫ـی‬elementborder‫تىخمێک‬ ‫واوەڕۆکی‬ ‫)لەگەڵ‬
(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
}
/*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 lengthborder-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.)‫بکەیت‬ ‫پێىاضەی‬ ‫دەتەوێت‬ ‫کە‬ ‫ـەو‬
( ‫ڕضتەکار‬syntax‫بۆ‬ )pseudo-classes:‫لە‬ ‫بریتییە‬
selector:pseudo-class {property:value}
( ‫پۆل‬ ‫دەتىاورێت‬class‫لەگەڵ‬ )pseudo-classes‫بەکارببرێت‬:
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
.‫ـێک‬
( ‫ڕضتەکار‬syntax‫بۆ‬ )pseudo-elements:‫لە‬ ‫بریتییە‬
selector:pseudo-elements {property:value}
( ‫پۆل‬ ‫دەتىاورێت‬class‫لەگەڵ‬ )pseudo-elements‫بەکارب‬‫برێت‬:
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‫لەواو‬ ‫دەبێت‬ ‫ئەوە‬ ،‫ـذا‬bodyselector:‫خىارەوە‬ ‫غێىەی‬ ‫بەو‬ ‫بیىىضیه‬ ‫ـذا‬
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 IDSelectors
‫پەڕەیەکی‬ ‫لەهەر‬CSS‫دەتىاویه‬ ‫ـذا‬ID Selector( ‫کە‬ ‫بىاضیىەوە‬ ‫بەوە‬#‫بەاڵم‬ ،‫بێت‬ ‫وغەیەک‬ ‫پێع‬ )Class‫ویػاوەی‬ ‫بە‬
(..‫دەواضیىەوە‬ )
:‫وـمـوووــە‬ ‫بـۆ‬‫لەپەڕەی‬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
: ‫کردن‬ ‫چاک‬‫حاجی‬ ‫ضامڕەوذ‬

Css

Recommended

Recommended

More Related Content

Featured

Featured (20)

Css