CSS ატრიბუტები
Syntax
CSS სინტაქსი
CSS სინტაქსი არის ტექსტურ ფორმატში მოთავსებული html "სტილების" ერთობლიობა, რომლელიც შედგება სელექტორებისა და ატრიბუტებისგან. სელექტორები გამოიყენება ელემენტებზე სტილის გავრცელების ფორმულირებისთვის, ხოლო ატრიბუტები შერჩეულ ელემენტზე შესაბამისი მოქმედების მოსახდენად.
ატრიბუტი
აღწერა
 
css
სინტაქსი: სელეცტორი {ატრიბუტი1:მნიშნველობა1;ატრიბუტი2:მნისვნელობა2;}; /*სელექტორი განსაზღვრავს HTML ელემენტებზე გავრცელების ლოგიკას, ხოლო ატრიბუტები განსაზღვრავს მათ სტილს;*/
 
coment
css ფორმატში კომენტარად გამოიყენება /* კომენტარი */ სინტაქსი
 
attribute
css აღწერისას {} მოთავსებული ატრიბუტი შედგება საელისგან და მნიშნველობისგან, რომლებიც ერთმანეთისგან ":"-ით გამოიყოფა და თვითოეული ჩანაწერის დასასრულს ეთითება ";"
 
Element selector
ელემენტის სელექტორი განსაზღვრავს იმ ელემენტს HTML ელემენტებში რომლის ელემენტის იგივე ტეგის სახელია სელექტორის სახელი.
 
Class selector
კლასის სელექტორი განსაზღვრავს იმ ელემენტს HTML ელემენტებში რომელთა class-შიც მითითებულია ამ სელექტორის სახელი. CSS აღწერისას სახელს წინ უსწრებს სიმბოლო წერტილი "." .
 
ID selector
იდენტიფიკატორის სელექტორი განსაზღვრავს იმ ელემენტს HTML ელემენტებში რომელის ID არის სელექტორის სახელი. CSS_ში ესეთ სახელი იწყება # სიმბოლოთი
 
 
Selector
სელექტორი
სელექტორი, რის მიხედვითაც ხდება ელემენტების შერჩევა CSS სტილის გასავრცელებლად.
სელექტორი
მაგალითი
აღწერა
CSS ვერსია
 
.class
.intro
ყველა ელემენტის არჩევა, რომელთა ატრიბუტში class="intro"
1
 
#id
#firstname
ყველა ელემენტის არჩევა, რომელთა ატრიბუტში id="firstname"
1
 
*
*
CSS სელექტორი * წარმოადგენს ყველა ელემენტზე სტილის გავრცელებას.
2
 
element,element
div,p
ირჩევს ყველა div და p ელემენტს
1
 
element element
div p
ირჩევს ყველა p ელემენტს div ტეგში, ნებისმიერ დონეზე
1
 
element > element
div > p
ირჩევს ყველა p ელემენტს, რომელიც div ტეგს პირდაპირ ექვემდებარება
2
 
element + element
div + p
ირჩევს ყოველ div ელემენტის მომდევნო p ელემენტს.
2
 
element ~ element
p ~ ul
ირჩევს ყველა ul ელემენტს რომელიც p ელემენტის შემდგომ მდებარეობს
3
 
[attribute]
[attribute]
ირჩევს ყველა ელემენტს რომელსააც აქვს ატტრიბუტი "attribute"
2
 
[attribute=value]
[attribute=value]
ირჩევს ყველა ელემენტს რომელსააც ატრიბუტი "attribute" მნიშვნელობაა "value"
2
 
[attribute~=value]
[attribute~=value]
ირჩევს ყველა ელემენტს რომელის ატრიბუტი შეიცავს განცალკევებული სიტყვას "value"
2
 
[attribute|=value]
[attribute|=value]
ირჩევს ყველა ელემენტს რომელიც იწყება განცალკევებული სიტყვით "value";
2
 
[attribute^=value]
[attribute^=value]
ირჩევს ყველა ელემენტს რომელის ატრიბუტი იწყება სიტყვით "value"
3
 
[attribute$=value]
[attribute$=value]
ირჩევს ყველა ელემენტს რომლის ატრიბუტი მნიშნველობა მთავრდება სიტყვით "value"
3
 
[attribute*=value]
[attribute*=value]
ირჩევს ყველა ელემენტს რომლის ატრიბუტი მნიშნველობა შეიცავს სიტყვას "value"
3
 
:active
a:active
გააქტიურებული ლინკის არჩევა. (":" მას ასევე უწოდებენ ფსევდოკლასს)
1
 
::after
p::after
კონტენტის დამატება ელემენტის შემდეგ ("::" მას ასევე უწოდებენ ფსევდოელემენტს)
2
 
::before
p::before
კონტენტის ჩამატება ელემენტამდე
2
 
:checked
input:checked
მოპწიჩკული ელემენტის არჩევა
2
 
:disabled
input:disabled
დაბლოკილი ელემენტის არჩევა
2
 
:empty
p:empty
ყველა p ელემენტის მონიშვნა, რომელსაც არ ყავს შვილობილი
2
 
:enabled
input:enabled
ყველა გახსნილი შესაყვანი ელემენტის არჩევა
2
 
:first-child
p:first-child
ყოველი პირველი p ელემენტი მშობელთან მიმართებაში
2
 
::first-letter
p::first-letter
ყოველი p ელემენტოს პირველი ველის არჩევა
2
 
::first-line
p::first-line
ყოველი p ელემენტოს პირველი ხაზის არჩევა
2
 
:first-of-type
p:first-of-type
ყველა p ელემენტი შერჩევა რომლის პირველი ელემენტი არის p მისი მშობლისთვის
2
 
:focus
input:focus
ფოკუსირებული ელემენტის არჩევა
2
 
:hover
input:hover
გააქტიურებული-ბმულის არჩევა
2
 
:in-range
input:in-range
ინპუტ ელემენტის შერჩევა რომლის მნიშნველობა კონკრეტულ საზღვრებში იმყოფება
3
 
:invalid
input:invalid
არასწორად შევსებული ინპუტ ელემენტების არჩევა
3
 
:lang(language code)
p:lang(ka)
ყოველი p ელემენტის არჩევა რომელსაც ენის მხარდაჭერა აქვს ქართული KA
2
 
:last-child
input:last-child
ყოველი p ელემენტის არჩევა რომელიც ბოლო შვილობილია თავის მშობლელი ელემენტის ქვეშ
2
 
:last-of-type
input:last-of-type
ყოველი p
2
 
:link
a:link
გააქტიურებული ლინკის არჩევა
2
 
:not(selector)
not(selector)
ყველა სხვა და ნარჩენი ელემენტის შერჩევა გარდა სელექტორში მითითებული ლოგიკისა
3
 
:nth-child(n)
p:nth-child(n)
შვილობილ ყოველ მე-n-ე ელემენტებზე გავრცელება
3
 
:nth-last-child(n)
p:nth-last-child(n)
შვილობილ ბოლო მე-n-ე ელემენტზე გავრცელება
3
 
:nth-last-of-type(n)
p:nth-last-of-type(n)
3
 
:nth-of-type(n)
p:nth-of-type(n)
არჩევა ყოველი p ელემენტის, რომელიც მე-n ელემენტია თავის მშობლის ქვეშ.
3
 
:only-of-type
p:only-of-type
ყოველი p ელემენტის შესრჩევად, რომელიც მხოლოდ ერთადერთი ელემენტია თავის მშობლის ქვეშ.
3
 
:only-child
p:only-child
ყველა P ელემენტის შერჩევა მის მშობლის ქვეშ.
3
 
:optional
p:optional
არა სავალდებულო ველების გამოსარჩევად
3
 
:out-of-range
p:out-of-range
არა სწორად შეყვანილ მონაცემების გამოსარჩევად. კერძოდ, როდესაც შეყვანილი მონაცემი არ ჯდება წინასწარ განსაზღვრული შესაძლო მონაცემების სიაში, მაშინ სხვა სტილის დასადებად.
3
 
:read-only
p:read-only
მხოლოდ კითხივ რეჟიმში მყოფ ელემენტებზე გავრცელება
3
 
:read-write
p:read-write
კითხვა ჩაწერის რეჟიმში მყოფ ელემენტებზე გავრცელება
3
 
:required
p:required
აუცილებლად შესავსებები ველებზე გავრცელება
3
 
:root
p:root
მთავარ root ელემენტზე გავრცელება. (body-ის მშობელი)
3
 
::selection
p::selection
მომხმარებლის მიერ არჩეულ ელემენზე გავრცელება
3
 
:target
#news:target
URL მისამართით შიდა ელემენტზე მითითების შემთხვევაში (#), ფოკუსირებულ ელემენტზე გავრცელება
3
 
:valid
input:valid
შწორად და არასწორად შევსებული ველების გასარჩევად
3
 
:visited
p:visited
გამოყენებული ბმულის გასარჩევად
1
 
 
BoxBaseProperties
CSS ელემენტის ყუთისთვის ზოგადი მახასიათებლები
CSS ელემენტის ყუთისთვის ზოგადი მახასიათებლები.
ატრიბუტი
აღწერა
ვერსია
მაგალითი
გამოსახულება
 
display:none
ელემენტის გამოსახულების გარეშე
1
<span style="display:none">1</span><span style="display:none">2</span><span style="display:none">3</span>
123
 
display:inline
ელემენტის გამოსახულების პირდაპირ-ჩასმული ნიშნავს, როდესაც ითვალისწინებს მხოლოდ მარჯვენა და მარცხენა საზღვრებს და მინდორს, და სწორდება მარჯვენა და მარცხენა მხარეების მიხედვით. არ აქვს სიგანე და სიმაღლე, ნებას აძლევს სხვა ელემენტს რომ იყოს მის მარცხნივ ან მარჯვნივ.
1
<span style="display:inline">1</span><span style="display:inline">2</span><span style="display:inline">3</span>
123
 
display:block
ელემენტის გამოსახულების ბლოკი, რომელის დაბოლოებისა მკაცრად არის განსაზღვრული ახალ ხაზზე გადასვლა
1
<span style="display:block">1</span><span style="display:block">2</span><span style="display:block">3</span>
123
 
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>
123
 
display:flex
ელემენტის გამოსახულების ტიპი
1
<span style="display:flex">1</span><span style="display:flex">2</span><span style="display:flex">3</span>
123
 
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>
123
 
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>
123
 
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>
123
 
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>
123
 
display:table
ელემენტის გამოსახულების ტიპი
1
<span style="display:table">1</span><span style="display:table">2</span><span style="display:table">3</span>
123
 
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>
123
 
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>
123
 
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>
123
 
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>
123
 
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>
123
 
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>
123
 
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>
123
 
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>
123
 
display:initial
გაჩუმებითი პარამეტრის მინიჭება
1
<span style="display:initial">1</span><span style="display:initial">2</span><span style="display:initial">3</span>
123
 
display:inherit
ელემენტის გამოსახულების მშობლის გამოსახულებსი ტიპის მიხედვით.
1
123
 
float:left
ელემენტების მარცხნივ გასწორება, ერთი მეორეზე გვერდზე მიდგმა მარცხნიდან მარჯვნივ.
1
123
 
float:right
ელემენტების მარჯვნივ გასწორება, ერთი მეორეზე მიდგმა მარჯვნიდან მარცხნივ.
1
123
 
float:none
ელემენტის რიგის მიხედვით დგომა.
1
123
 
clear:left
ელემენტის მარცხნივ გასწორების აკრძალვა.
1
1234
 
clear:right
ელემენტის მარჯვნივ გასწორების აკრძალვა.
1
123
 
clear:both
ელემენტის ორივე მხარეს გასწორების აკრძალვა.
1
123
 
clear:none
არ გაითვალისწინებს.
1
123
 
clip:rect(0px,60px,30px,0px)
ელემენტის რეგიონიდ ამოჭრა (CROP). ელემენტის პოზიცია უნდა იყოს აფსოლიუტირი.
1
text text text text text text text
text text text text text text text
text text text text text text text
 
visibility:hidden
ელემენტი გამოაჩინოს თუ არა. მისი მნიშნველობებია: hidden დამალვა, visible გამოჩენა, collapse იგივე hidden გამოიყენება ცხრილების სვეტების დასამალად.
1
text text text text text text text
text text text text text text text
text text text text text text text
 
position:static
ელემენტის პოზიცია სტატიკური (გაჩუმებით ლემენტი ყოველთვის სტატიკურია), ნიშნავს რომ მისი კოორდინატები აითვლება მის წინ მდგომი ბოლო კოორდინატიდან და მშობელი ელემენტის საწყისი კოორდინატიდან. ტექსტური და მიმდევრობითი ელემენტები ძირითადად სტატიკური უნდა იყოს.
1
text text text text text text text
text text text text text text text
text text text text text text text
 
position:relative
ელემენტის პოზიცია (relative) ფარდობითი, ნიშნავს რომ მისი კოორდინატები აითვლება მშობლის კოორდინატიდან და მისი გადაადგილება შესაზლებელია ნებისმიერი მიმართულებით, და მის ქვეშ არსებული ელემენტებისთვის დასვავს ახალ კოორდინატებს. ხოლო მისი ზომა განისაზღვრება მის ქვეშ არსებული ელემენტების ზომით, როგორც სტატიკურ შემთხვევაში. (layout) განლაგეები ძირითადად ფარდობითობით უნდა იყოს განსაზღვრული.
1
text text text text text text text
text text text text text text text
text text text text text text text
 
position:absolute
ელემენტის პოზიცია აფსოლიტური, ნიშნავს რომ მისი კოორდინატები აითვლება ფარდობითი ელემენეტის კოორდინატების მიხედვით და შესაძლებელია ნებისმიერი მოძრაობა და ტრანფორმაცია განიცადოს ისე, რომ არ დაარღვევს საიტის სტრუქტურას. ზირითადად გამოიყენება მოძრავი ელემენტების პოზიციისთვის.
1
text text text text text text text
text text text text text text text
text text text text text text text
 
position:fixed
ფიქსირებული პოზიცია, რომელზეც სქროლი არ იმოქმედებს და შეინარჩუნებს ბრაუზერის ფანჯრის მიმართებაში ერთდაიმავე პოზიციას.
1
text text text text text text text
text text text text text text text
text text text text text text text
 
 
PositionAndDimension
CSS პოზიციები და ზომები
CSS ელემენტის საკოორდინატორო პოზიციების მართვა და ზომების განსაზღვრა.
ატრიბუტი
აღწერა
ვერსია
მაგალითი
გამოსახულება
 
საზომი_ერთეული
წერტილი: 1px; პროცენტული: 1%; სანტიმეტრი: 1cm; მილიმეტრი: 1mm; ინჩი: 1in; ფონტის ზომა: em; ფონტის სიმაღლე: ex; პროცენტული სიგანე : 1vw;პროცენტული სიმაღლე : 1vh; და სხვა. ძირითადად ვებ-დიზაინში ვიყენებთ წერტილებს px და პროცენტებს %.
1
left:10px;top:20%;
 
left:10px
ელემენტის მარცხენა პოზიცია წერტილებით.
1
1
 
top:10px
ელემენტის ზედა პოზიცია წერტილებით.
1
1
 
right:10px
ელემენტის მარჯვენა პოზიცია წერტილებით.
1
1
 
bottom:10px
ელემენტის ქვედა პოზიცია წერტილებით.
1
1
 
width:50px
ელემენტის სიგანე პოზიცია წერტილებით.
1
1
 
height:30px
ელემენტის სიმაღლე პოზიცია წერტილებით.
1
1
 
max-width:50px
ელემენტის მინიმალური სიგანე.
1
1
 
max-height:30px
ელემენტის მინიმალური სიმაღლე.
1
1
 
min-width:50px
ელემენტის მინიმალური სიგანე.
1
1
 
min-height:30px
ელემენტის მინიმალური სიმაღლე.
1
1
 
z-index:20
ელემენტის სიღრმე მთელი (integer) რიცხვი. მოქმედებს მხოლოდ absolute, relative, fixed პოციზიებისთვის
1
 
1
 
 
Background
CSS ფონების მართვა
CSS ფონის მართვა, ფერები, სურათები, ფონის გამეორებები და ფონის პოზიციები.
ატრიბუტი
აღწერა
ვერსია
მაგალითი
გამოსახულება
 
colors
ფერები HTML/CSS-ში მოცემულია როგორც დასახელებებით: red, green... ასევე ბიტებით თექსვმეტობით სისტემაში #rrggbb, ასევე შემოკლებით #rgb და ასევე უბრალოდ რიცხვის გადაცემით, რომელიც შეესაბამება ფერის კოდს.
1
1
 
background:#aabbee;
ელემენტზე ფონად 1 ფერის განსაზღვრა. იგივე background-color:#aabbee; background ატრიბუტში შესაძლოა მოთავსდეს სხვა ნებისმიერი ფონური მნიშნველობახოლო,რის დამუშავებასაც ავტომატურად ხდენს ბრაუზერი;
1
1
 
background-color:#aabbee;
ელემენტზე ფონად 1 ფერის განსაზღვრა. იგივე background-color:#aabbee; ხოლო გამჭვირვალე ფერად უთითებთ background-color:transparent;
1
1
 
background-image:URL(...);
ელემენტზე ფონად სურათის დადება. გადამრავლებით.
1
1
 
background:transparent URL(...) no-repeat;
ელემენტზე ფონად სურათის დადება. ერთჯერადად. ასევე შესაძლებელია no-repeat-ის მაგივრად იყოს, repeat-x ან repeat-y.
1
1
 
background-clip;
ფონის გავრცელების საზღვრები: border-box(default), padding-box, content-box
1
1
 
background-origin;
რომელი საზღვრიდან დაიწყოს წონის დდადების კოორდინატები. გაჩუმებით padding-box
1
1
 
background-position
ფონის პოზიცია საიდან დაიწყოს: რომლის მნიშნველობებია: x% y% ან xpos(px,in..) ypos(px,in..) ან [left|right|center] [top|center|bottom]რომელი საზღვრიდან დაიწყოს წონის დდადების კოორდინატები. გაჩუმებით padding-box
1
1
 
background-size
ფონის ზომა: რომლის მნიშნველობებია: [ImgSize% | [x% y%]] ან cover ან contain
1
1
 
 
BorderAndOutline
CSS ჩარჩოები და საზღვრები
CSS ჩარჩოები და საზღრვები გამოიყენება ელემენტის შემოწირულობის დიზაინისთვის და სამართავად.
ატრიბუტი
აღწერა
ვერსია
მაგალითი
გამოსახულება
 
line-types
ჩარჩოს ხაზის ტიპები: solid, dotted
1
1
 
border:1px solid green;
1px სისქიანი საზღვარი
1
1
 
border-radius:15px 15px 15px 15px;
საზღვრების და ჩარჩოების კუთხეების მომრგვალებისთვის. border-radius:top-left top-right bottom-right bottom-left.
1
1
 
 
TextAndFont
CSS ზოგადი მახასიათებლები
CSS ზოგადი მახასიათებლები.
მახასიათებელი
მაგალითი
აღწერა
CSS ვერსია
 
font
sel {font:15px arial;}
სინტაქსი: font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
1
 
 
List
CSS ზოგადი მახასიათებლები
CSS ზოგადი მახასიათებლები.
მახასიათებელი
მაგალითი
აღწერა
CSS ვერსია
 
list-style
.sel {list-style:none;}
სინტაქსი: list-style: list-style-type list-style-position list-style-image|initial|inherit;
1
 
 
Tables
CSS ზოგადი მახასიათებლები
CSS ზოგადი მახასიათებლები.
მახასიათებელი
მაგალითი
აღწერა
CSS ვერსია
 
.class
.intro
ყველა ელემენტის არჩევა, რომელთა ატრიბუტში class="intro"
1
 
 
MarginAndPadding
CSS ზოგადი მახასიათებლები
CSS ზოგადი მახასიათებლები.
მახასიათებელი
მაგალითი
აღწერა
CSS ვერსია
 
.class
.intro
ყველა ელემენტის არჩევა, რომელთა ატრიბუტში class="intro"
1
 
 
Alignment
CSS ზოგადი მახასიათებლები
CSS ზოგადი მახასიათებლები.
მახასიათებელი
მაგალითი
აღწერა
CSS ვერსია
 
.class
.intro
ყველა ელემენტის არჩევა, რომელთა ატრიბუტში class="intro"
1
 
 
Filter
CSS ზოგადი მახასიათებლები
CSS ზოგადი მახასიათებლები.
მახასიათებელი
მაგალითი
აღწერა
CSS ვერსია
 
.class
.intro
ყველა ელემენტის არჩევა, რომელთა ატრიბუტში class="intro"
1