Page 1

‫فێربوووی زماوی ‪ 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 : ‫وەرگیراوە لە ضایتی‬ ‫ ضامڕەوذ حاجی‬: ‫چاک کردن‬

سى ئێس ئێس بە زمانى كوردى CSS By Kurdish Languge  
Read more
Read more
Similar to
Popular now
Just for you