فێربوووی زماوی CSSبەکوردی
( CSSضی ئێص ئێص) کە کىرتکراوەی Cascading Style Sheetsـەو زماوێکە بەکاردێت بۆ پێىاضەکردوی ڕووی دەرەوەی هەر پەڕگەیەک کە بە HTMLیان XMLدەوىوضرێت .بەهۆی CSSـەوە دەتىاورێت ڕەووەقێکی جىان بذرێت بە ماڵپەڕ وەکى ڕەوگردن ،فۆوتەکان ،بەضتەرەکان ...هتذ کەدەتىاویت خۆت بڕیار بذەیت بەچ غێىەیەک هەر یەک لەواوە دەربکەون .پەڕەی CSSدرێژکراوەی پەڕگەکەی برێتییە لە .cssو دەتىاورێت ببەضترێتەوە بە بێ پایان پەڕگەوە ،لەهەر پەڕگەیەکذا بەکارببرێت یەوا ڕووی ئەو کاریگەرییاوە پیػان ئەدات کە لەواو پەڕگەی cssـەکەدا پێىاضەکراوەو ورخی پێذراوە.
واوەڕۆک
١چ دەضتکاریکەرێک) (Editor؟ ٢بەضتىەوە یان بەکارهێىاوی لە htmlدا External Style Sheet٢.١ o Internal Style Sheet٢.٢ o Inline Styles٢.٣ o ٣ڕضتەکار- Syntax ٤ڕەوگەکان - Colours ٤.١ oڕەوگی پاغبىەمای وىوضیه ٥دەق - Text ٥.١ oخێساوی جۆرەپیت- font-family ٥.٢ oقەبارەی فۆوت- font-size font-weight٥.٣ o ٥.٤ 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دا
. تاوەکى ئەو تەکىیکە بەدروضتی کاربکاتHTML دەتىاورێت بە ضێ غێىە تێکەڵ بکرێت لەگەڵS
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 - داڕغتىی CSSپێک هاتىوە لە ضێ بەظ.value ،property ،selector : }selector {property: value
:selectorبەغێکی/تاگێکی HTMLـەو کە دەتەوێت پێىاضەی بکەیت. :propertyتایبەتمەوذییەکە کە دەتەوێت ورخەکەی بیگۆڕیت. :valueهەر تایبەتمەوذییەک ( )propertyورخێکی ( )valueهەیە. { body ;font-size: 11px ;color: blue }
ئەگەر لەحاڵەتێکذا ورخەکە لەچەوذ وغەیەک پێک هاتبىو ئەوە باغتر وایە بخرێتە واو دوو دەقەوە: }"serdêrr {font-family: "unikurd Web
ڕەوگەکان Colours - ئاغکرایە کە ڕەوگ بۆ خۆی جىاوی تەواو دەبەخػێت بە پەڕگەکاوی ضەر وێب بەغێىەیەک کە لەگەڵ یەکتردا گىوجاو به. دەتىاورێت ڕەوگەکان بە ٣غێىەی جیاواز بىىوضرێه: .1واو name - red/green/blue - rgb .2یان hex .3 بۆ ومىووە ڕەوگی ضىور دەتىاورێت بەو چەوذ غێىەی خىارەوە بىىوضرێت: 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 - بۆ غێىازی فۆوتەکان ئەوە ٣ورخمان هەیە ئەویع .oblique ،italic ،normal :هەروەها بەم غێىەیە بەکاردێه لەواو پەڕەی 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 }
پێىیطت بەدووبارە کردوەوە واکات چىوکە وەک ووترا کە هەمان غێىەو تایبەتمەوذی دەقەکان دەتىاویت بەکارببەیت بۆ فۆوتەکاویع.
Padding Margins and
تایبەتمەوذی marginبەکاردەبرێت بۆ پێىاضەکردوی بۆغایی لەدەورووبەری تىخمێک ( .)elementدەتىاورێت هەروەها ورخی وێگەتیڤ بەکار بهێىرێت بۆ ورخەکان کە ئەیذرێتێ .چىار جۆر ورخ هەیە بۆ : margin margin-top margin-right margin-bottom margin-left
1. 2. 3. 4.
وە بۆ هەر یەک لەو ورخاوە تەوها ٣ورخی جیاواز هەیە کە بەکاری بهێىیت: 1. auto 2. length 3. %
تایبەتمەوذی paddingبۆ پێىاضەکردوی بۆغایی لەوێىان borderـی تىخمێک ()border elementلەگەڵ واوەڕۆکی تىخمێک ( .)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
-
- auto - length
marker-offset:
چۆویەتی بەکارهێىاویان بەم غێىەیە ئەبێت لەواو پەڕگەیەکی 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
داواوی کەمتریه بەرزی بۆ تىخمەکە
length
max-width
%
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> <link rel="stylesheet" type="text/css" href="style.css" /> </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. 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>
Classification - هاوپۆل هاوپۆلەکان ئەم.)ـذاHTML( هاوپۆل پێمان دەڵێت کە چۆنو لەکىێ هەر تىخمێک دەربکەوێت لە پەڕەیەکەی هتمل :تایبەتماوذییاوە لە خۆ دەگرێت تایبەتمەوذی
ورخەکان
clear
left right both none
cursor
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
display
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
float
left right none
Position
static relative absolute fixed
visibility
visible hidden collapse
Classification - وموووە بۆ هاوپۆل : ـذا ئەمە دابىێcss لە پەڕگەیەکی: display تایبەتمەوذی
p { display: inline; } div { display: none; }
: ـیػذا ئەو کۆداوە ڕەوىوش بکەhtml لە پەڕگەیەکی <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </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>
: ـذاcss لە پەڕگەی: cursor تایبەتمەوذی
{ span ;cursor: help }
لە پەڕگەی htmlـذا: ><html ><head ><link rel="stylesheet" type="text/css" href="style.css" / ></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
overflow
visible hidden scroll auto
Position
static relative absolute fixed
right
auto % length
top
auto % length
vertical-align
baseline sub super top text-top middle bottom text-bottom length %
z-index
auto number
: دەخەیىەڕووPositioning - وەستان/لێرەدا چەوذ ومووەیەک بۆ شێوەی داوان
:۱ ومووەی p { position:absolute; top:10px; width:400px }
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
<body> <p>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, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </body> </html>
:۲ ومووەی p { position:fixed; left:100px; top:10px; }
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>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, but also the leap into electronic typesetting, remaining essentially 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> <link rel="stylesheet" type="text/css" href="style.css" /> </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. 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. </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.
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. </div> </body> </html>
pseudo-classes تاگێکی/ بەغێکی:selector( ـێکselector بەکاردێت بۆ پێذاوی کاریگەرییەک بۆ هەرpseudo-classes .)ـەو کە دەتەوێت پێىاضەی بکەیت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 selector بەکاردێت بۆ پێذاوی کاریگەرییەک بۆ هەرpseudo-classes بەهەمان غێىەیpseudo-elements .ـێک : بریتییە لە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> <link rel="stylesheet" type="text/css" href="style.css" />
</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> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <!-- Dêrrî yekem hemuy be rengî şîn ebêt --> <p>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,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ـذا ،ئەوە دەبێت لەواو selector bodyـذا بیىىضیه بەو غێىەی خىارەوە: { 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 ><link rel="stylesheet" type="text/css" href="style.css" / ></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 }
وموووەیەکو کۆکردوەوەی ۳تایبەتمەوذی لەم ومىووەیەدا ٣تایبەتمەوذی کۆکراوەتەوەو کراوە (،background-repeat ،background-image )background-positionبە ومىووەیەک ،بۆ ئەوەی زیاتر لەو تایبەتمەوذیاوە بگەیت ئەوە ئەبێت گۆڕاوکاری بکەیت تاوەکى بساویت کاریان چییە.
پەڕەیەکی cssدەرووضت بکەو ئەو کۆداوەی تێذا دابىێ و پاغان پاغەکەوتی بکە: body { ;)'background-image:url('wêneke.png ;background-repeat:no-repeat ;background-position:top right ;margin-right:150px
}
: ـذا پاغەکەوت بکەو پاغان ضەیری بکە بساوە چۆن دەردەکەوێتhtml ئەو کۆداوەظ لە پەڕەیەکی
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </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>
Selectors Class and ID بە ویػاوەیClass بەاڵم،) پێع وغەیەک بێت#( بەوە بىاضیىەوە کەID Selector ـذا دەتىاویهCSS لەهەر پەڕەیەکی .) دەواضیىەوە.( : ـذا ئەمە بىىوضەcss لەپەڕەی:بـۆ وـمـوووــە #serder { background-color: #ccc; padding: 1em } .sereta { color: #fff; font-weight: bold; }
: ـذا بىىوضەhtml هەروەها ئەمەظ لە پەڕەی
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </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 : وەرگیراوە لە ضایتی ضامڕەوذ حاجی: چاک کردن