ھێڵی ١٢٤: | ھێڵی ١٢٤: | ||
/* yan */ | /* yan */ | ||
text-decoration: underline; </source> | text-decoration: underline; </source> | ||
'''هەروەک نموونەیەک بۆ زانیاری زیاتر ئەوانەی لەسەرەوە باسکران بەم نمونەیە ئەیخەینەڕوو کە چۆن بەکاردێن لەناو پەڕەی css ـدا:''' | '''هەروەک نموونەیەک بۆ زانیاری زیاتر ئەوانەی لەسەرەوە باسکران بەم نمونەیە ئەیخەینەڕوو کە چۆن بەکاردێن لەناو پەڕەی css ـدا:''' |
وەک پێداچوونەوەی ٠٠:٢٤، ١١ی شوباتی ٢٠٠٩
کورتەیەک دەربارەی CSS
CSS کە کورتکراوەی Cascading Style Sheetsـەو زمانێکە بەکاردێت بۆ پێناسەکردنی ڕووی دەرەوەی هەر پەڕگەیەک کە بە HTML یان XML دەنووسرێت. بەهۆی CSSـەوە دەتوانرێت ڕەونەقێکی جوان بدرێت بە ماڵپەڕ وەکو ڕەنگردن، فۆنتەکان، بەستەرەکان... هتد کەدەتوانیت خۆت بڕیار بدەیت بەچ شێوەیەک هەر یەک لەوانە دەربکەون. هەر پەڕەیەکی CSS بە css. کۆتایی پێ دێت و دەتوانرێت ببەسترێتەوە بە بێ پایان پەڕگەوەو ڕووی ئەو کاریگەرییانە پیشان بدات کەلەناو پەڕگەی css ـەکەدا پێناسەکراوەو نرخی پێدراوە.
چ دەستکاریکەرێک (Editor)؟
چەند دەستکاریکەرێکی پێشنیار کراو:
ڕستەکار - 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
ئاشکرایە کە ڕەنگ بۆ خۆی جوانی تەواو دەبەخشێت بە پەڕگەکانی سەر وێب بەشێوەیەک کە لەگەڵ یەکتردا گونجاو بن. دەتوانرێت ڕەنگەکان بە ۳ شێوەی جیاواز بنووسرێن:
- ناو - name یاخود
- rgb - red/green/blue یان
- 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
Margins and Padding
قەراغ - Border
لیستە - List
خشتە - Table
لێرە کۆتایی پێ دێت.