CSS - in xassələri

Mövzu: CSS - in xassələri C. Okt. 13, 2006 12:47 pm

CSS - in xassələri

Font xassəsi

font-family
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')

font-style
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

font-variant
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

font-weight
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

font-size
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

font
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

word-spacing
Mümkün qiymətləri:

[1] uzunluq(+)
[2] normal - dəyişikliksiz

*İstifadəsi: Bütün elementlər üçün

Təsviri: Söslər arasındakı məsafə. Netscape və MSIE-də istifadə olunmur.

NÜMUNƏ:

word-spacing: 0.4em

text-decoration
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

letter-spacing
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

vertical-align
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övqesinin təyin edilməsi. Netscape-də işləmir.

NÜMUNƏ:

vertical-align:top-text

text-transform
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

text-align
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

text-indent
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

line-height
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

color
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

background-color
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

background-image
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)

background-repeat
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

background-atachment
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

background-position
Mümkün qiymətləri:
[1] enindən faizlər+ hündürlükdən faizlər(+)
[2] top, middle, bottor - qiymətlarində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%

background
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

margin-top
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

margin-right
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%

margin-bottom
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

margin-left
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

margin
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

padding-top
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

padding-right
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%

padding-bottom
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

padding-left
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

padding
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

border-top-width
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

border-right-width
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

border-bottom-width
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

border-left-width
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

border-width
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

border-color
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

border-style
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

border-top
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

border-right
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

border-left
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

border-bottom
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

border
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: yuxarıda qeyd olunmuş xassələri ümumiləşdirir.

NÜMUNƏ:

border: thik black double

width
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%

height
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

float
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

clear
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

display
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

while-space
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

list-style-type
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

list-style-image
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)

list-style-position
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

list-style
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