display:none

ელემენტის გამოსახულების გარეშე

1

<span style="display:none">1</span><span style="display:none">2</span><span style="display:none">3</span>

display:inline

ელემენტის გამოსახულების პირდაპირ-ჩასმული ნიშნავს, როდესაც ითვალისწინებს მხოლოდ მარჯვენა და მარცხენა საზღვრებს და მინდორს, და სწორდება მარჯვენა და მარცხენა მხარეების მიხედვით. არ აქვს სიგანე და სიმაღლე, ნებას აძლევს სხვა ელემენტს რომ იყოს მის მარცხნივ ან მარჯვნივ.

1

<span style="display:inline">1</span><span style="display:inline">2</span><span style="display:inline">3</span>

display:block

ელემენტის გამოსახულების ბლოკი, რომელის დაბოლოებისა მკაცრად არის განსაზღვრული ახალ ხაზზე გადასვლა

1

<span style="display:block">1</span><span style="display:block">2</span><span style="display:block">3</span>

display:inline-block

ელემენტის გამოსახულების პირდაპირი-ბლოკი, ნებას რთავს სხვა ლემენეტებს იყოს მის მარჯვნივ ან მარცხნივ, გაითვალისწინოს ზედა და ქვედა საზღვრები და მინდვრები, გაითვალისწინოს სიგანე და სიმაღლე.

1

<span style="display:inline-block">1</span><span style="display:inline-block">2</span><span style="display:inline-block">3</span>

display:flex

ელემენტის გამოსახულების ტიპი

1

<span style="display:flex">1</span><span style="display:flex">2</span><span style="display:flex">3</span>

display:inline-flex

ელემენტის გამოსახულების ტიპი

1

<span style="display:inline-flex">1</span><span style="display:inline-flex">2</span><span style="display:inline-flex">3</span>

display:inline-table

ელემენტის გამოსახულების ტიპი

1

<span style="display:inline-table">1</span><span style="display:inline-table">2</span><span style="display:inline-table">3</span>

display:list-item

ელემენტის გამოსახულების ტიპი

1

<span style="display:list-item">1</span><span style="display:list-item">2</span><span style="display:list-item">3</span>

display:run-in

ელემენტის გამოსახულების ტიპი

1

<span style="display:run-in">1</span><span style="display:run-in">2</span><span style="display:run-in">3</span>

display:table

ელემენტის გამოსახულების ტიპი

1

<span style="display:table">1</span><span style="display:table">2</span><span style="display:table">3</span>

display:table-caption

ელემენტის გამოსახულების ტიპი

1

<span style="display:table-caption">1</span><span style="display:table-caption">2</span><span style="display:table-caption">3</span>

display:table-column-group

ელემენტის გამოსახულების ტიპი

1

<span style="display:table-column-group">1</span><span style="display:table-column-group">2</span><span style="display:table-column-group">3</span>

display:table-header-group

ელემენტის გამოსახულების ტიპი

1

<span style="display:table-header-group">1</span><span style="display:table-header-group">2</span><span style="display:table-header-group">3</span>

display:table-footer-group

ელემენტის გამოსახულების ტიპი

1

<span style="display:table-footer-group">1</span><span style="display:table-footer-group">2</span><span style="display:table-footer-group">3</span>

display:table-row-group

ელემენტის გამოსახულების ტიპი

1

<span style="display:table-row-group">1</span><span style="display:table-row-group">2</span><span style="display:table-row-group">3</span>

display:table-cell

ელემენტის გამოსახულების ტიპი

1

<span style="display:table-cell">1</span><span style="display:table-cell">2</span><span style="display:table-cell">3</span>

display:table-column

ელემენტის გამოსახულების ტიპი

1

<span style="display:table-column">1</span><span style="display:table-column">2</span><span style="display:table-column">3</span>

display:table-row

ელემენტის გამოსახულების ტიპი

1

<span style="display:table-row">1</span><span style="display:table-row">2</span><span style="display:table-row">3</span>

display:initial

გაჩუმებითი პარამეტრის მინიჭება

1

<span style="display:initial">1</span><span style="display:initial">2</span><span style="display:initial">3</span>

display:inherit

ელემენტის გამოსახულების მშობლის გამოსახულებსი ტიპის მიხედვით.

1

float:left

ელემენტების მარცხნივ გასწორება, ერთი მეორეზე გვერდზე მიდგმა მარცხნიდან მარჯვნივ.

1

float:right

ელემენტების მარჯვნივ გასწორება, ერთი მეორეზე მიდგმა მარჯვნიდან მარცხნივ.

1

float:none

ელემენტის რიგის მიხედვით დგომა.

1

clear:left

ელემენტის მარცხნივ გასწორების აკრძალვა.

1

clear:right

ელემენტის მარჯვნივ გასწორების აკრძალვა.

1

clear:both

ელემენტის ორივე მხარეს გასწორების აკრძალვა.

1

clear:none

არ გაითვალისწინებს.

1

clip:rect(0px,60px,30px,0px)

ელემენტის რეგიონიდ ამოჭრა (CROP). ელემენტის პოზიცია უნდა იყოს აფსოლიუტირი.

1

visibility:hidden

ელემენტი გამოაჩინოს თუ არა. მისი მნიშნველობებია: hidden დამალვა, visible გამოჩენა, collapse იგივე hidden გამოიყენება ცხრილების სვეტების დასამალად.

1

position:static

ელემენტის პოზიცია სტატიკური (გაჩუმებით ლემენტი ყოველთვის სტატიკურია), ნიშნავს რომ მისი კოორდინატები აითვლება მის წინ მდგომი ბოლო კოორდინატიდან და მშობელი ელემენტის საწყისი კოორდინატიდან. ტექსტური და მიმდევრობითი ელემენტები ძირითადად სტატიკური უნდა იყოს.

1

position:relative

ელემენტის პოზიცია (relative) ფარდობითი, ნიშნავს რომ მისი კოორდინატები აითვლება მშობლის კოორდინატიდან და მისი გადაადგილება შესაზლებელია ნებისმიერი მიმართულებით, და მის ქვეშ არსებული ელემენტებისთვის დასვავს ახალ კოორდინატებს. ხოლო მისი ზომა განისაზღვრება მის ქვეშ არსებული ელემენტების ზომით, როგორც სტატიკურ შემთხვევაში. (layout) განლაგეები ძირითადად ფარდობითობით უნდა იყოს განსაზღვრული.

1

position:absolute

ელემენტის პოზიცია აფსოლიტური, ნიშნავს რომ მისი კოორდინატები აითვლება ფარდობითი ელემენეტის კოორდინატების მიხედვით და შესაძლებელია ნებისმიერი მოძრაობა და ტრანფორმაცია განიცადოს ისე, რომ არ დაარღვევს საიტის სტრუქტურას. ზირითადად გამოიყენება მოძრავი ელემენტების პოზიციისთვის.

1

position:fixed

ფიქსირებული პოზიცია, რომელზეც სქროლი არ იმოქმედებს და შეინარჩუნებს ბრაუზერის ფანჯრის მიმართებაში ერთდაიმავე პოზიციას.

1

საზომი_ერთეული

წერტილი: 1px; პროცენტული: 1%; სანტიმეტრი: 1cm; მილიმეტრი: 1mm; ინჩი: 1in; ფონტის ზომა: em; ფონტის სიმაღლე: ex; პროცენტული სიგანე : 1vw;პროცენტული სიმაღლე : 1vh; და სხვა. ძირითადად ვებ-დიზაინში ვიყენებთ წერტილებს px და პროცენტებს %.

1

left:10px;top:20%;

left:10px

ელემენტის მარცხენა პოზიცია წერტილებით.

1

top:10px

ელემენტის ზედა პოზიცია წერტილებით.

1

right:10px

ელემენტის მარჯვენა პოზიცია წერტილებით.

1

bottom:10px

ელემენტის ქვედა პოზიცია წერტილებით.

1

width:50px

ელემენტის სიგანე პოზიცია წერტილებით.

1

height:30px

ელემენტის სიმაღლე პოზიცია წერტილებით.

1

max-width:50px

ელემენტის მინიმალური სიგანე.

1

max-height:30px

ელემენტის მინიმალური სიმაღლე.

1

min-width:50px

ელემენტის მინიმალური სიგანე.

1

min-height:30px

ელემენტის მინიმალური სიმაღლე.

1

z-index:20

ელემენტის სიღრმე მთელი (integer) რიცხვი. მოქმედებს მხოლოდ absolute, relative, fixed პოციზიებისთვის

1

colors

ფერები HTML/CSS-ში მოცემულია როგორც დასახელებებით: red, green... ასევე ბიტებით თექსვმეტობით სისტემაში #rrggbb, ასევე შემოკლებით #rgb და ასევე უბრალოდ რიცხვის გადაცემით, რომელიც შეესაბამება ფერის კოდს.

1

background:#aabbee;

ელემენტზე ფონად 1 ფერის განსაზღვრა. იგივე background-color:#aabbee; background ატრიბუტში შესაძლოა მოთავსდეს სხვა ნებისმიერი ფონური მნიშნველობახოლო,რის დამუშავებასაც ავტომატურად ხდენს ბრაუზერი;

1

background-color:#aabbee;

ელემენტზე ფონად 1 ფერის განსაზღვრა. იგივე background-color:#aabbee; ხოლო გამჭვირვალე ფერად უთითებთ background-color:transparent;

1

background-image:URL(...);

ელემენტზე ფონად სურათის დადება. გადამრავლებით.

1

background:transparent URL(...) no-repeat;

ელემენტზე ფონად სურათის დადება. ერთჯერადად. ასევე შესაძლებელია no-repeat-ის მაგივრად იყოს, repeat-x ან repeat-y.

1

background-clip;

ფონის გავრცელების საზღვრები: border-box(default), padding-box, content-box

1

background-origin;

რომელი საზღვრიდან დაიწყოს წონის დდადების კოორდინატები. გაჩუმებით padding-box

1

background-position

ფონის პოზიცია საიდან დაიწყოს: რომლის მნიშნველობებია: x% y% ან xpos(px,in..) ypos(px,in..) ან [left|right|center] [top|center|bottom]რომელი საზღვრიდან დაიწყოს წონის დდადების კოორდინატები. გაჩუმებით padding-box

1

background-size

ფონის ზომა: რომლის მნიშნველობებია: [ImgSize% | [x% y%]] ან cover ან contain

1

line-types

ჩარჩოს ხაზის ტიპები: solid, dotted

1

border:1px solid green;

1px სისქიანი საზღვარი

1

border-radius:15px 15px 15px 15px;

საზღვრების და ჩარჩოების კუთხეების მომრგვალებისთვის. border-radius:top-left top-right bottom-right bottom-left.

1