Box xassəsi
II Hissə: CSS - in xassələri
Mümkün qiymətləri:
[1] istənilən font
*İstifadəsi: Bütün elementlər üçün
Təsviri: Bu xassə element tərəfindən istifadə olunan fontu təyin edir. Əgər URL təyin olunarsa onda həmin font avtomatik istifadəçinin kompüterə yüklənəcək.
NÜMUNƏ:
font-family: Arial Black URL ('arialblack.ttf')
Mümkün qiymətləri:
[1] normal - dəyişikliksiz
[2] italic - yanakı
*İstifadəsi: Bütün elementlər üçün
Təsviri: Elementin stili. Yanakı və ya sadə.
NÜMUNƏ:
font-style: italic
Mümkün qiymətləri:
[1] normal - dəyişikliksiz
[2] small-caps - Bütün kiçik hərfləri böyüklərə dəyişir
*İstifadəsi: Bütün elementlər üçün
Təsviri: Fontun görünüş variantı. Bu xassəni Netscape dətəkləmir.
NÜMUNƏ:
font-variant: small-caps
Mümkün qiymətləri:
[1] normal - dəyişikliksiz
[2] bold - yağlı
[3] bolder - çox yağlı (MSIE - də bolddan, Netscape -də isə normaldan fərqlənmir)
[4] lighter - incə (normaldan fərqlənmir)
[5] 100 dən 900-a dək ixtiyari qiymət
*İstifadəsi: Bütün elementlər üçün
Təsviri: Elementin seçilməsi (yağlılığı).
NÜMUNƏ:
font-weight: bold
Mümkün qiymətləri:
[1] ölçü(+)
[2] xx-small, x-small, medium, large, x-large, xx-large - bu qiymətlərdən ixtiyarısı
[3] smaller, larger - bu qiymətlərdən ixtiyarısı
*İstifadəsi: Bütün elementlər üçün
Təsviri: Fontun ölçüsü.
NÜMUNƏ:
font-size: 30pt
Mümkün qiymətləri:
[1] font-family
[2] font-style
[3] font-variant
[4] font-weight
[5] font-size
*İstifadəsi: Bütün elementlər üçün
Təsviri: Yuxarıda qeyd olunmuş xassələri istifadə edir..
NÜMUNƏ:
font: italic bolder Arial 12pt
Yuxarı
Text xassəsi
Mümkün qiymətləri:
[1] uzunluq(+)
[2] normal - dəyişikliksiz
*İstifadəsi: Bütün elementlər üçün
Təsviri: Sözlər arasındakı məsafə. Netscape və MSIE-də istifadə olunmur.
NÜMUNƏ:
word-spacing: 0.4em
Mümkün qiymətləri:
[1] none - yox
[2] underline - altı xətli
[3] overline - üzəri xətli (Netscape dəstəkləmir)
[4] line-through - pozulmuş
[5] blink - parıldayan (IE dəstəkləmir)
*İstifadəsi: Bütün elementlər üçün
Təsviri: Mətnin bəzənməsi.
NÜMUNƏ:
text-decoration:line-through
Mümkün qiymətləri:
[1] uzunluq(+)
[2] normal - dəyişikliksiz
*İstifadəsi: Bütün elementlər üçün
Təsviri: Həriflər arasında məsafə. Netscape-də işləmir.
NÜMUNƏ:
letter-spacing: 100
Mümkün qiymətləri:
[1] baseline
[2] sub
[3] super
[4] top-text
[5] top
[6] middle
[7] bottom
[8] bottom-text
[9] faiz
*İstifadəsi: inline elementlər üçün
Təsviri: Bir cərgədə dayanmış elementlərin digər elementlərlə münasibətdə mövqeyini təyin edilməsi. Netscape-də işləmir.
NÜMUNƏ:
vertical-align:top-text
Mümkün qiymətləri:
[1] none - yox
[2] Capitalize - Hər söz iri hərflə başlayır
[3] UPPERCASE - mətnin bütün hərfləri iri olur
[4] lowercase - mətnin bütün hərfləri kiçik olur
*İstifadəsi: inline elementlər üçün
Təsviri: Mətnin dəyişməsi. Netscape-də işləmir.
NÜMUNƏ:
text-transform:capitalize
Mümkün qiymətləri:
[1] left - mətn solda
[2] right - mətn sağda
[3] center - mətn mərkəzdə
[4] justify - dartılmış mətn
*İstifadəsi: block-level elementlər üçün
Təsviri: Mətnin vəziyyəti.
NÜMUNƏ:
text-align:right
Mümkün qiymətləri:
[1] uzunluq(+)
[4] faiz(+)
*İstifadəsi: block-level elementlər üçün
Təsviri: boşluq.
NÜMUNƏ:
text-indent:30 em
Mümkün qiymətləri:
[1] normal - dəyişikliksiz
[2] uzunluq(+)
[3] faiz
*İstifadəsi: Bütün elementlər üçün
Təsviri: Yuxarıdan boşluq.
NÜMUNƏ:
line-height:100%
Yuxarı
Color və Background xassələri
Mümkün qiymətləri:
[1] rəng(+)
*İstifadəsi: Bütün elementlər üçün
Təsviri: rəng.
NÜMUNƏ:
color:#f00000
Mümkün qiymətləri:
[1] rəng(+)
*İstifadəsi: Bütün elementlər üçün
Təsviri: Elementin fonunun rəngi.
NÜMUNƏ:
background-color:#f00000
Mümkün qiymətləri:
[1] none - yox
[2] URL(+)
*İstifadəsi: Bütün elementlər üçün
Təsviri: Fon şəkilləri.
NÜMUNƏ:
background-image:URL(cool.gif)
Mümkün qiymətləri:
[1] repeat - fon şəkillərini bütün istiqamətlərdə çoxaldır
[2] repeat-x - fon şəkillərini horizontal istiqamətlərdə çoxaldır
[3] repeat-y - fon şəkillərini vertikal istiqamətlərdə çoxaldır
[4] no-repeat - təkrar olunmayan şəkillər
*İstifadəsi: Bütün elementlər üçün
Təsviri: fonun şəklinin təkrarlanması.
NÜMUNƏ:
background-repeat:no-repeat
Mümkün qiymətləri:
[1] scrool - fon şəkli sənə ilə birlikdə fırlanır
[2] fixed - Fırlanmır. Bir yerdə dayanır. Netscape-də işləmir.
*İstifadəsi: Bütün elementlər üçün
Təsviri:fon şəklinin fırlanma imkanları .
NÜMUNƏ:
background-attachment:fixed
Mümkün qiymətləri:
[1] enindən faizlər+ hündürlükdən faizlər(+)
[2] top, middle, bottor - qiymətlərindən biri
[3] left, center, right - qiymətlərindən biri
[4] sol tərəfdən məsafə + başdan məsafə
*İstifadəsi: block-level və replased elementlər üçün
Təsviri: fon şəklinin mövqesi (background-repeat repeat-x, repeat-y və ya no-repeat - a bərabər olanda işləyir).
NÜMUNƏ:
background-position:50%0%
Mümkün qiymətləri:
[1] background-color
[2] background-image
[3] background-position
[4] background-attachment
[5] background-repeat
*İstifadəsi: Bütün elementlər üçün
Təsviri: yuxarıda qeyd olunmuş xassələrin ümumiləşməsi.
NÜMUNƏ:
background:no-repeat black fixed 50%0%
Yuxarı
Box xassəsi
Mümkün qiymətləri:
[1] uzunluq(+)
[2] faiz(+)
[3] auto - avtomatik
*İstifadəsi: Bütün elementlər üçün
Təsviri: yuxarıdan boşluq təyin edir.
NÜMUNƏ:
margin-top:100
Mümkün qiymətləri:
[1] uzunluq(+)
[2] faiz(+)
[3] auto - avtomatik
*İstifadəsi: Bütün elementlər üçün
Təsviri: sağdan boşluq təyin edir.
NÜMUNƏ:
margin-right:100%
Mümkün qiymətləri:
[1] uzunluq(+)
[2] faiz(+)
[3] auto - avtomatik
*İstifadəsi: Bütün elementlər üçün
Təsviri: aşağıdan boşluq təyin edir.
NÜMUNƏ:
margin-bottom:100em
Mümkün qiymətləri:
[1] uzunluq(+)
[2] faiz(+)
[3] auto - avtomatik
*İstifadəsi: Bütün elementlər üçün
Təsviri: soldan boşluq təyin edir.
NÜMUNƏ:
margin-left:100pt
Mümkün qiymətləri:
[1] margin-top
[2] margin-right
[3] margin-left
[4] margin-bottom
*İstifadəsi: Bütün elementlər üçün
Təsviri: yuxarıda qeyd olunmuş xassələrin ümumiləşdirir.
NÜMUNƏ:
margin:100pt
Mümkün qiymətləri:
[1] uzunluq(+)
[2] faiz(+)
*İstifadəsi: Bütün elementlər üçün
Təsviri: yuxarı borderdən boşluq.
NÜMUNƏ:
padding-top:100pt
Mümkün qiymətləri:
[1] uzunluq(+)
[2] faiz(+)
*İstifadəsi: Bütün elementlər üçün
Təsviri: sağ borderdən boşluq.
NÜMUNƏ:
padding-right:100%
Mümkün qiymətləri:
[1] uzunluq(+)
[2] faiz(+)
*İstifadəsi: Bütün elementlər üçün
Təsviri: aşağı borderdən boşluq.
NÜMUNƏ:
padding-bottom:100em
Mümkün qiymətləri:
[1] uzunluq(+)
[2] faiz(+)
*İstifadəsi: Bütün elementlər üçün
Təsviri: sol borderdən boşluq.
NÜMUNƏ:
padding-left:100
Mümkün qiymətləri:
[1] padding-top
[2] padding-right
[3] padding-left
[4] padding-bottom
*İstifadəsi: Bütün elementlər üçün
Təsviri: Yuxarıda qeyd olunmuş xassələri ümumiləşdirir. Eyni vaxtda müxtəlif istiqamətlər üçün bir neçə qiymət (dördə qədər) təyin etmək olar. Əgər bir qiymət təyin olunubsa - onda bütün istiqamətlər üçün eyni bir boşluq olur, əgər ikidirsə - onda bitişik olan tərəflər üçün müxtəlif boşluqlar olur, və əgər dörd qiymətdirsə - onda bütün tərəflər üçün ayrı-ayrı boşluqlar təyin olunur.
NÜMUNƏ:
padding:100px
Mümkün qiymətləri:
[1] uzunluq(+)
[2] thin, medium və ya thick
*İstifadəsi: Bütün elementlər üçün
Təsviri: yuxarı borderin qalınlığı.
NÜMUNƏ:
border-top-width:100pt
Mümkün qiymətləri:
[1] uzunluq(+)
[2] thin, medium və ya thick
*İstifadəsi: Bütün elementlər üçün
Təsviri: sağ borderin qalınlığı.
NÜMUNƏ:
border-right-width:thick
Mümkün qiymətləri:
[1] uzunluq(+)
[2] thin, medium və ya thick
*İstifadəsi: Bütün elementlər üçün
Təsviri: aşağı borderin qalınlığı.
NÜMUNƏ:
border-bottom-width:100em
Mümkün qiymətləri:
[1] uzunluq(+)
[2] thin, medium və ya thick
*İstifadəsi: Bütün elementlər üçün
Təsviri: sol borderin qalınlığı.
NÜMUNƏ:
border-left-width:medium
Mümkün qiymətləri:
[1] border-top-width
[2] border-right-width
[3] border-left-width
[4] border-bottom-width
*İstifadəsi: Bütün elementlər üçün
Təsviri: borderlərin qalınlıqları. Eyni vaxtda müxtəlif borderlər üçün bir neçə qiymət (dördə qədər) təyin etmək olar. Əgər bir qiymət təyin olunubsa - onda bütün istiqamətlər üçün bir qalınlıq olur, əgər ikidirsə - onda bitişik olan tərəflər üçün müxtəlif qalınlıqlar olur, və əgər dörd qiymətdirsə - onda bütün tərəflər üçün ayrı-ayrı qalınlıqlar təyin olunur.
NÜMUNƏ:
border-width:15pt
Mümkün qiymətləri:
[1] rəng(+)
*İstifadəsi: Bütün elementlər üçün
Təsviri: borderin rəngi. Netscape-də işləmir.
NÜMUNƏ:
border-color:green
Mümkün qiymətləri:
[1] none
[2] dotted, dashed, solid, double, groove, ridge, inset, outset
*İstifadəsi: Bütün elementlər üçün
Təsviri: borderlərin stilləri. Eyni vaxtda müxtəlif borderlər üçün bir neçə qiymət (dördə qədər) təyin etmək olar. Əgər bir qiymət təyin olunubsa - onda bütün istiqamətlər üçün eyni bir stil verilir, əgər ikidirsə - onda bitişik olan tərəflər üçün müxtəlif stillər olur, və əgər dörd qiymətdirsə - onda bütün tərəflər üçün ayrı-ayrı stillər təyin olunur.
NÜMUNƏ:
border-style:dotted groove
Mümkün qiymətləri:
[1] border-top-width
[2] border-style
[3] border-color
*İstifadəsi: Bütün elementlər üçün
Təsviri: yuxarıda qeyd olunmuş xassələri yuyxarı border üçün ümumiləşdirir.
NÜMUNƏ:
border-top: 100em red groove
Mümkün qiymətləri:
[1] border-right-width
[2] border-style
[3] border-color
*İstifadəsi: Bütün elementlər üçün
Təsviri: yuxarıda qeyd olunmuş xassələri sağ border üçün ümumiləşdirir.
NÜMUNƏ:
border-right: 5pt magenta solid
Mümkün qiymətləri:
[1] border-left-width
[2] border-style
[3] border-color
*İstifadəsi: Bütün elementlər üçün
Təsviri: yuxarıda qeyd olunmuş xassələri sol border üçün ümumiləşdirir.
NÜMUNƏ:
border-left: 15pc coral inset
Mümkün qiymətləri:
[1] border-bottom-width
[2] border-style
[3] border-color
*İstifadəsi: Bütün elementlər üçün
Təsviri: yuxarıda qeyd olunmuş xassələri aşağı border üçün ümumiləşdirir.
NÜMUNƏ:
border-bottom: 30 orange outset
Mümkün qiymətləri:
[1] border-width
[2] border-style
[3] border-color
*İstifadəsi: Bütün elementlər üçün
Təsviri: yuxarlda qeyd olunmuş xassələri ümumiləşdirir.
NÜMUNƏ:
border: thik black double
Mümkün qiymətləri:
[1] uzunluq(+)
[2] faiz(+)
*İstifadəsi: block-level və replased elementlər üçün
Təsviri: elementin eni.
NÜMUNƏ:
width: 10%
Mümkün qiymətləri:
[1] uzunluq(+)
[2] faiz(+)
*İstifadəsi: block-level və replased elementlər üçün
Təsviri: elementin hündürlüyü.
NÜMUNƏ:
height: 100pt
Mümkün qiymətləri:
[1] left - soldan
[2] right - sağdan
[3] none - susmaya görə
*İstifadəsi: Bütün elementlər üçün
Təsviri: elementin yerləşməsi.
NÜMUNƏ:
float:right
Mümkün qiymətləri:
[1] left - soldan
[2] right - sağdan
[3] both - iki tərəfdən
[4] none - susmaya görə
*İstifadəsi: Bütün elementlər üçün
Təsviri: elementlərin ətrafında yerləşməsi.
NÜMUNƏ:
clear:both
Yuxarı
Təsnifat
Mümkün qiymətləri:
[1] none - görsənmir
[2] block - sətiri elementdən qabaq və sonra bölür (yəni, element eyni xətdə olan digər elementlərlə bir xətdə ola bilməz)
[3] inline - sətiri bölmür
[4] list-item - sətiri elementdən qabaq və sonra bölür + list-item elementlərdəki kimi maker əlavə edir
*İstifadəsi: Bütün elementlər üçün
Təsviri: elementin necə görünəcəyini təyin edir.
NÜMUNƏ:
display:none
Mümkün qiymətləri:
[1] normal - yanakı gedən bir-neçə məsafəni sıxır
[2] pre - yanakı gedən məsafələrin görsənməsinə icazə verir
[3] nowrap - <BR> sətirlərindən keçidə icazə vermir
*İstifadəsi: block-level elementlər üçün
Təsviri: elementlər arasındakı məsafələrin necə görünəcəyini təyin edir.
NÜMUNƏ:
while-space:nowrap
Mümkün qiymətləri:
[1] disc, circle, square, decimal, lower-alpha və ya upper-alpha
[2] none - heç bir
*İstifadəsi: display-a bərabər olan list-item elementlər üçün
Təsviri: list-item in makerinin görünüşünü təyin edir. Əgər list-style-image dəyişəni none-yə bərabərdirsə və ya təyin olunmubsa
NÜMUNƏ:
list-style-type:lower-alpha
Mümkün qiymətləri:
[1] none - yox
[2] URL (+)
*İstifadəsi: display-a bərabər olan list-item elementlər üçün
Təsviri: list-item makerinin görünüşünü şəkil kimi təyin edir.
NÜMUNƏ:
list-style-image:URL(cool.gif)
Mümkün qiymətləri:
[1] inside - növbəti sətirə keçəndə boşluqsuz görünəcək.
[2] outside - susmaya görə
*İstifadəsi: display-a bərabər olan list-item elementlər üçün
Təsviri: list-item elementdə aslı olan elementin makerinin duruşunu təyin edir.
NÜMUNƏ:
list-style-position:inside
Mümkün qiymətləri:
[1] list-style-type
[2] list-style-position
[3] list-style-image
*İstifadəsi: display-a bərabər olan list-item elementlər üçün
Təsviri: yuxarıda qeyd olunmuş xassələri ümumiləşdirir
NÜMUNƏ:
list-style:inside
Yuxarı