1. რა არის CSS ?
CSS (Cascading Style Sheets) არის ტექნოლოგია რომელიც გამოიყენება HTML დოკუმენტის გარე იერსახის აღწერისათვის, მისი საშუალებით შეგვიძლია განვსაზღვროთ ნებისმიერი HTML ელემენტის სიგრძე, სიგანე, ფონის ფერი, მდებარეობა სხვა ელემენტებთან მიმართებაში და ა.შ.

CSS პირველად 1994 წელს წარმოადგინა ერთ-ერთმა პიონერმა ვებ-ტექნოლოგიებში - ჰაკონ ვიემ ლაიმ (ნორვეგია). W3C-ის (World Wide Web Consortium ანუ მსოფლიო ქსელის კონსორციუმი) მიერ რეკომენდებული პირველი ოფიციალური ვერსიის (CSS 1) პრეზენტაცია კი შედგა 1996 წელს, ამ ვერსიაზე, ჰაკონთან ერთად მუშაობდა ბერტ ბოსი - ჰოლანდიელი სწავლული კომპიუტერულ მეცნიერებათა დარგში.

CSS-თან დაკავშირება

CSS-თან მუშაობა საკმაოდ მოსახერხებელია რადგან ერთი CSS დოკუმენტით შესაძლებელია რამდენიმე HTML დოკუმენტის გაკონტროლება. სტილების განსაზღვრა, როგორც წესი, ხდება ხოლმე ცალკე - '.css' გაფართოების მქონე ფაილში.

როდესაც ბრაუზერის კითხულობს CSS ჩანაწერებს, იგი HTML დოკუმენტს აფორმატებს ამ სტილების შესაბამისად. არსებობს CSS სტილების HTML დოკუმენტთან დაკავშირების სამი ხერხი:
  • გარე სტილები
  • შიდა სტილები
  • ხაზსშიდა სტილები, ჩაშენებული სტილები

გარე სტილები

გარე სტილების გამოყენებისას მხოლოდ ერთი CSS ფაილის დარედაქტირებით შეიძლება რამოდენიმე HTML დოკუმენტის ვიზუალის შეცვლა. ყველა ეს დოკუმენტი უნდა შეიცავდეს ზემოთხსენებულ გარე CSS ფაილთან დამაკავშირებელ ბმულს, ბმული თავსდება დოკუმენტის <head> სექციაში <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

შიდა სტილები

შიდა სტილების გამოყენება შესაძლებელია მაშინ როდესაც ყველა გვერდს აქვს თავისი უნიკალური სტილები. მათი აღწერა უნდა მოხდეს <style> ელემენტში, ხოლო თავად <style> ელემენტი უნდა მოთავსდეს <head> სექციაში 
<head>
    <style>
        body {
            background-color: linen;

        }

        h1 {
            color: maroon;

            margin-left: 40px;

        } 
    </style>
</head>

ხაზსშიდა სტილები

ჩაშენებული სტილები ანუ ხაზსშიდა სტილები შესაძლებელია გამოვიყენოთ მაშინ, როდესაც გვინდა რომ ცალ-ცალკე ელემენტებს მივანიჭოთ სხვადასხვა სტილები, მაგალითად გვაქვს სამი ცალი <h1> ელემენტი და გვინდა რომ სამივეს სვადასხვა ფერი ჰქონდეს <h1 style="color:blue;">სათაური</h1>
<h1 style="color:red;">სათაური</h1>
<h1 style="color:green;">სათაური</h1>

CSS სინტაქსი

სტილების აღწერის სინტაქსი ასეთია



ობიექტი ანუ სელექთორი განსაზღვრავს HTML ელემენტს რომლის სტილსაც ვქმნით - ამ შემთხვევაში h1. CSS ბლოკი შედგება ერთი ან რამოდენიმე, ერთმანეთისაგან წერტილ-მძიმით გამოყოფილი ჩანაწერისაგან, თავად ჩანაწერი კი შედგება ერთმანეთისაგან ორწერტილებით გამოყოფილი "თვისება:მნიშვნელობა" წყვილებისაგან. CSS ჩანაწერი უნდა მოექცეს ფიგურულ ფრჩხილებში.

CSS სელექთორები

CSS სელექთორები გამოიყენება HTML ელემენტების ამოსარჩევად, ამორჩევა შეიძლება მოხდეს ელემენტის დასახელების, id-ის, class-ის, რომელიმე ატრიბუტის და ა.შ მეშვეობით.

ელემენტის სახელის მიხედვით ამორჩევა ხდება ასე p {
    text-align: center;
    color: red;
}

id ატრიბუტის მიხედვით ამორჩევა ხდება ასე #para1 {
    text-align: center;
    color: red;
} განსაზღვრუოლი id ატრიბუტის მქონე ელემენტის ამოსარჩევად id-ის მნიშვნელობის წინ იწერება "#" სიმბოლო.

class ატრიბუტის მიხედვით ამორჩევა ხდება ასე .para1 {
    text-align: center;
    color: red;
} განსაზღვრუოლი class ატრიბუტის მქონე ელემენტის ამოსარჩევად class-ის მნიშვნელობის წინ იწერება "." სიმბოლო.

HTML ელემენტს შეიძლება მივმართოთ რამოდენიმე კლასის საშუალებით <p class="center large">This paragraph refers to two classes.</p> კლასის დასახელება არ შეიძლება დაიწყოს ციფრით.

შესაძლებელია მოხდეს ისე, რომ სხვადასხვა დასახელების მქონე ელემენტებს გააჩნდეთ ერთნაირი სტილები, ასეთ შემთხვევაში შეიძლება მოვახდინოთ ელემენტების დაჯგუფება h1, h2, p {
    text-align: center;
    color: red;
}

კომენტარები CSS-ში შესაძლებელია იყოს როგორც ერთხაზიანი, აგრეთვე მრავალხაზიანი p {
    color: red;
    /* ერთხაზიანი კომენტარი */
    text-align: center;
}

/* მრავალზახიანი
კომენტარი */
2. ფერები
CSS-ში ფერების განსაზღვრა ხდება შემდეგნაირად :
  • ფერთა დასაშვები დასახელებებით მაგალითად "red"
  • RGB მნიშვნელობით მაგალითად "rgb(255, 0, 0)"
  • HEX ანუ თექვსმეტობითი მნიშვნელობებით მაგალითად "#ff0000"

ფერთა დასახელებები

ფერთა დასახელებების ჩაწერისას ასოთა რეგისტრს მნიშვნელობა არ აქვს ანუ "Red" იგივეა რაც "red" ან "RED". HTML და CSS-ში შესაძლებელია 140-მდე სტანდარტული ფერის გამოყენება დასახელებებით (Red, Green, Blue და ა.შ).

RGB (Red, Green, Blue)

RGB ფერთა მნიშვნელობები შესაძლებელია განისაზღროს შემდეგი ფორმულის მიხედვით: rgb(red, green, blue). თითოეული პარამეტრი (წითელი, მწვანე, ლურჯი) ფერის ინტენსივობას 0-დან 255-მდე. ნაცრისფერის მონათესავე ფერები მიიღება მაშინ როდესაც სამივე ფერის პარამეტრები ერთმანეთის ტოლია (მაგ: rgb(128,128,128)).

თექვსმეტობითი ფერები

RGB ფერთა მნიშვნელობები შეიძლება გამოისახოს თექვსმეტობით სისტემაშიც შემდეგი სახით #RRGGBB, სადაც RR (red), GG (green) და BB (blue) არის თექვსმეტობითი მნიშვნელობები 00-სა და FF-ს შორის (იგივე რაც ათობით სისტემაში 0-255). მაგალითად #FF0000 იქნება წითელი რადგან წითელზე მითითებულია უდიდესი მნიშვნელობა (FF) დანარჩენ ფერებზე კი მითითებულია 00 ანუ ნოლი.
3. ფონები
CSS ფონის თვისებები გამოიყენება html ელემენტების ფონური ეფექტების განსაზღვრისათვის.
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

background-color

background-color თვისება განსაზღვრავს ელემენტის ფონის ფერს, მაგალითად გვერდის ფონის მითითება მოხდება ასე body {
    background-color: lightblue;
}

background-image

background-image თვისება განსაზღვრავს სურათს, რომელიც იქნება ელემენტის ფონი, ნაგულისხმეობის პრინციპით სურათი მანამ განმეორდება სანამ მთლიანი ელემენტი არ დაიფარება. body {
    background-image: url("paper.gif");
} სურათის ფონად მითითებისას სასურველია სურათის url იყოს ადვილად წაკითხვადი მაგალითად paper.gif და არა bgdesert.jpg. როგორც აღვნიშნეთ ფონის სურათი მეორდება მთლიანი ელემენტის სრულ დაფარვამდე, სურათი მეორდება როგორც ჰორიზონტალურად ისე ვერტიკალურად. თუ გვსურს, რომ სურათი განმეორდეს მხოლოდ ჰორიზონტალურად ან მხოლოდ ვერტიკალურად, უნდა გამოვიყენოთ background-repeat თვისება body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

ფონის სურათის პოზიციის მითითება და no-repeat

იმისათვის რათა ფონის სურათი არ განმეორდეს უნდა background-repeat თვისებას უნდა მივუთითოთ no-repeat მნიშვნელობა body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
} ფონის სურათის პოზიციის მისათითებლად კი გამოიყენება background-position თვისება body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

ფონის სურათის ფიქსირებული პოზიცია

ფონის სურათისათვის ფიქსირებული პოზიციის მისანიჭებლად გამოიყენება background-attachment თვისება, როდესაც გვერდს ჩავსქროლავთ სურათი ადგილზე დარჩება და არ გადაადგილდება გვერდის დანარჩენ შიგთავსთან ერთად body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}
4. ჩარჩოები
ელემენტის ჩარჩოების სტილის განსაზღვრისათვის გამოიყენება border-style თვისება, მან შეიძლება მიიღოს შემდეგი მნიშვნელობები
  • dotted - განსაზღვრავს წერტილოვან ჩარჩოს.
  • dashed - განსაზღვრავს წყვეტილ ჩარჩოს.
  • solid - განსაზღვრავს მუქ ჩარჩოს.
  • double - განსაზღვრავს ორმაგ ჩარჩოს.
  • groove - განსაზღვრავს 3D ჩარჩოს
  • ridge - განსაზღვრავს 3D ჩარჩოს
  • inset - განსაზღვრავს 3D ჩარჩოს
  • outset - განსაზღვრავს 3D ჩარჩოს
  • none - მიუთითებს რომ ელემენტს ჩარჩო არ უნდა ჰქონდეს.
  • hidden - განსაზღვრავს დამალულ ჩარჩოს

ჩარჩოს სიგანე

ჩარჩოს სიგანეს განსაზღვრავს border-width თვისება. ჩარჩოს სიგანე შეიძლება მითითებულ იქნას საზომი ერთეულებით (in px, pt, cm, em) ან წინასწარ განსაზღვრული მნიშვნელობებით: thin, medium, ან thick (თხელი საშუალო ან სქელი). border-width თვისებას შეიძლება ნიეთითოს 1-დან 4-მდე მნიშვნელობა, (ზედა ჩარჩო, მარჯვება ჩარჩო, ქვედა ჩარჩო და მარცხენა ჩარჩო, border-top, border-right, border-bottom, border-left). p {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

ჩარჩოს ფერი

ჩარჩოს ფერის მისათითებლად გამნოიყენება border-color თვისება. p {
    border: 2px solid red;     border-radius: 5px; } იმისათვის რათა ელემენტს მივცეთ მომრგვალებული ჩარჩოები გამოიყენება border-radius თვისება. p.three {
    border-style: solid;
    border-color: red green blue yellow;
}
5. თვისება margin

ინგ: margin - „მინდორი“, კიდე, ზღვარი, მიჯნა.

margin თვისება განსაზღვრავს ელემენტის ირგვლივ სივრცეს ანუ დაშორებას მის ირგვლივ არსებულ ელემენტებთან.



ელემენტს მიჯნა შეიძლება მიეთითოს ოთხივე მიმართულებით margin-top, margin-right, margin-bottom და margin-left (ზედა, მარჯვენა, ქვედა და მარცხენა), თითოეულმა მათგანმა მნიშვნელობები შეიძლება მიიღოს შემდეგნაირად :
  • auto - მიჯნას თვლის ბრაუზერი
  • კონკრეტული მნიშვნელობა - მიჯნა განისაზღვრება px, pt, cm და ა.შ
  • % - მიჯნა განისაზღვრება ელემენტის სიგანის კონკრეტული %-ით
  • inherit ანუ მემკვიდრეობით - მიუთითებს რომ მიჯნა უნდა გადმოეცეს მშობელი ელემენტიდან
დასაშვებია აგრეთვე უარყოფითი მიჯნების მითითებაც (მაგ: margin-top: -30px;). p {
    margin-top: 100px;
    margin-right: 150px;
    margin-bottom: 100px;
    margin-left: 80px;
} ეს ჩანაწერი შემოკლებით შეიძლება ჩაიწეროს ასე p {
    margin: 100px 150px 100px 80px;
}

მნიშვნელობა auto

იმისათვის რათა ელემენტი მოთავსდეს კონტეინერის ჰორიზონტალურ ცენტრში გამოიყენება margin თვისების auto მნიშვნელობა. ამ შემთხვევაში ელემენტი დაიკავებს width მეთოდით განსაზღვრულ სიგანეს, შემდეგ მშობელი კონტეინერის სიგანეს გამოაკლდება აღნიშნული ელემენტის სიგანე, მიღებული სხვაობა გაიყოფა ორზე და ეს შედეგი იქნება ელემენტის მარჯვენა და მარცხენა მიჯნის მნიშვნელობა. div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}

მნიშვნელობა inherit

როგორც აღვნიშნეთ inherit მნიშვნელობა განსაზღვრავს, რომ ელემენტმა მიჯნა უნდა მიიღოს მშობელი ელემენტიდან მემკვიდრეობით div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}
6. თვისება padding
თვისება padding გამოიყენება ელემენტის შიგთავსის ირგვლივ არსებული ცარიელი სივრცის სიდიდის განსასაზღვრავად, ანუ padding განსაზღვრავს ელემენტის ჩარჩოებიდან, საზღვრებიდან მის შიგთავსამდე მანძილს.



ელემენტს padding თვისება შეიძლება მიეთითოს ოთხივე მიმართულებით padding-top, padding-right, padding-bottom და padding-left (ზედა, მარჯვენა, ქვედა და მარცხენა), თითოეულმა მათგანმა მნიშვნელობები შეიძლება მიიღოს შემდეგნაირად :
  • კონკრეტული მნიშვნელობა - მიჯნა განისაზღვრება px, pt, cm და ა.შ
  • % - მიჯნა განისაზღვრება ელემენტის სიგანის კონკრეტული %-ით
  • inherit ანუ მემკვიდრეობით - მიუთითებს რომ მიჯნა უნდა გადმოეცეს მშობელი ელემენტიდან
p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
} ეს ჩანაწერი შემოკლებით შეიძლება ჩაიწეროს ასე p {
    padding: 50px 30px 50px 80px;
}
7. თვისებები height და width
ელემენტის სიმაღლისა და სიგანის მისათითებლად გამოიყენება height და width თვისებები. მათი განსაზღვრა შეიძლება მოხდეს ავტომატურად (auto, ეს ნიშნავს რომ ბრაუზერი თავად დათვლის ორივე მათგანს) ან მიეთითოს კონკრეტული მნიშვნელობები px, cm ან პროცენტებში (ეს ნიშნავს რომ ელემენტს ექნება იმ ელემენტის დავუშვათ 60% სიგანე რომელშიც მოთავსებულია იგი). div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
} height და width არ შეიცავენ padding, margin და ჩარჩოებს. როდესაც ეკრანის სიგანე ნაკლებია ელემენტის მითიტებულ სიგანეზე (500px) ბრაუზერი გვერდს ამატებს ჰორიზონტალურ სქროლბარს.

max-width

ელემენტის მაქსიმალური სიგანის მისათითებლად გამოიყენება max-width თვისება, იგი შეიძლება განისაზღვროს კონკრეტული მნიშვნელობებით px, cm ან პროცენტებში, ან მიეთითოს მნიშვნელობა none (ეს ნიშნავს რომ მაქსიმალური სიგანე არაა მითითებული) div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
}
8. HTML ელემენტის სრული მოდელი CSS-ში
ნებისმიერი HTML ელემენტი შეიძლება წარმოვიდგინოთ როგორც მართკუთხედის სახით გადმოცემული მოდელი, ეს მოდელი შეიცავს გარე და შიდა მიჯნებს, ჩარჩოებს და უშუალოდ შიგთავსს.



  • შიგთავსი - ელემენტის, მოდელის შიგთავსი: ტექსტი სურათები და ა.შ
  • padding - შიდა მიჯნა ასუფთავებს სივრცეს შიგთავსის ირგვლივ (გამჭვირვალე და უფონოა)
  • border - ჩარჩო რომელიც აკრავს შიდა მიჯნასა და შიგთავსს
  • margin - გარე მიჯნა ასუფთავებს სივრცეს ელემენტის, მოდელის ირგვლივ (გამჭვირვალე და უფონოა)
ელემენტების ეს მარტკუთხა მოდელი საშუალებას გვაძლევს ელემენტებს გავუკეთოთ ჩარჩო და აგრეთვე განვსაზღროთ დაშორება ელემენტებს შორის div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
} როდესაც ელემენტს ვუთითებთ სიგანესა და სიმაღლეს ეს ნიშნავს რომ ჩვენ მივუთითეთ მხოლოდ შიგთავსის სიგანე და სიმაღლე, ელემენტის მთლიანი სიგანე/სიმაღლის დასათვლელად აგრეთვე უნდა დავამატოთ გარე და შიგა მიჯნები და ჩარჩო. წარმოვიდგინოთ, რომ ელემენტის მთლიანი სიგანე უნდა იყოს 350px. div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
} ამ css ჩანაწერიდან სიგანე დაითვლება ასე: 320px (სიგანე)+ 20px (მარცხენა + მარჯვენა შიდამიჯნა)+ 10px (მარცხენა + მარჯვენა ჩარჩო)+ 0px (მარცხენა + მარჯვენა გარემიჯნა) = 350px. IE 8 და უფრო ძველ ვერსიებში შიდა მიჯნა და ჩარჩო შედის ელემენტის სიგანეში, ამ პრობლემის მოსაგვარებლად html გვერდს უნდა დავურთოთ < !DOCTYPE html> ჩანაწერი.
9. ტექსტი

ტექსტის ფერი

ტექსტის ფერის განსაზღვრისათვის გამოიყენება color თვისება. უშუალოდ ფერების მიღებაზე უკვე ვისაუბრეთ და აქ აღარ მოვიყვანთ მაგალითებს. body {
    color: blue;
}

h1 {
    color: green;
}

ტექსტის განთავსება

ელემენტში ტესქტის ჰორიზონტალურად განთავსების დასარეგულირებლად გამოიყენება text-align თვისება. ტექსტი ელემენტში ჰორიზონტალურად შეიძლება განლაგდეს მარცხნივ, მარჯვნივ შუაში ან თანაბრად ელემენტის მთელ სიგანეზე. h1 {
    text-align: center;
} როდესაც text-align თვისებას მინიჭებული აქვს მნიშვნელობა justify ყველა სტრიქონი ნაწილდება ისე რომ მათ ჰქონდეთ ერთი და იგივე სიგანე. და აბზაცების მარცხენა და მარჯვენა კიდეები ერთ ვერტიკალურ ხაზზე იწყება და ერთ ვერტიკალურ ხაზზე მთავრდება (როგორც ეს მაგალითად გაზეთებშია).

ტექსტის დეკორაცია

ტექსტის დეკორაციების მისათითებლად ან წასაშლელად გამოიყენება text-decoration თვისება. მაგალითად ბმულს რომ ქვედა ხაზი წავუშალოთ უნდა მოვიქცეთ ასე a {
    text-decoration: none;
} h1 {
    /*ხაზი ტექსტის თავზე*/
    text-decoration: overline;
}

h2 {
    /*გადახაზული ტექსტი*/
    text-decoration: line-through;
}

h2 {
    /*გახაზული ტექსტი*/
    text-decoration: underline;
}

ტექსტის გარდაქმნა

ტექსტში ასოთა რეგისტრის მისათითებლად გამოიყენება text-transform თვისება. h1 {
    /*დიდი ასოებით ჩაწერა*/
    text-transform: uppercase;
}

h2 {
    /*პატარა ასოებით ჩაწერა*/
    text-transform: lowercase;
}

h2 {
    /*სიტყვების პირველი ასოები დიდ რეგისტრში*/
    text-transform: capitalize;
}

აბზაცი

აბზაცის პირველი ხაზის შესაწევად გამოიყენება text-indent თვისება p {
    text-indent: 50px;
}

დაშორება ასოებს შორის

ტექსტში ასოთა დაშორების მისათითებლად გამოიყენება letter-spacing თვისება p {
    letter-spacing: 3px;
}

ხაზის სიმაღლე

ტექსტში ხაზებს შორის მანძილის ანუ ხაზთა სიმაღლის მისათიტებლად გამოიყენება line-height თვისება p {
    line-height: 1.8;
}

დაშორება სიტყვებს შორის

ტექსტში სიტყვათა დაშორების მისათითებლად გამოიყენება word-spacing თვისება p {
    word-spacing: 10px;
}
10. ფონტი
CSS-ში შრიფტის მახასიათებლებია font family (ანუ შრიფტის ოჯახი, კლასი), სიმუქე, ზომა, ტექსტის სტილი.

შრიფტის კლასი, ოჯახი

ტექსტის ანუ შრიფტის ოჯახს, კლასს განსაზღვრავს font-family თვისება. font-family უნდა შეიცავდეს შრიფტის რამოდენიმე დასახელებას, თუ ბრაუზერი ვერ გაიგებს პირველ მათგანს მაშინ რეზერვში იქნება მეორე და ა.შ. ჩაწერა უნდა დავიწყოთ იმ შრიფტიდან, რომელიც პირველ რიგში გვსურს რომ მივანიჭოთ ტექსტს, font-family თვისების რამოდენიმე სიტყვიანი მნიშვნელობა უნდა მოთავსდეს ბრჭყალებში "Times New Roman". p {
    font-family: "Times New Roman", Times, serif;
}

შრიფტის სტილი

შრიფტის სტილის განსასაზღვრავად გამოიყენება font-style თვისება. მან შეიძლება მიიღოს შემდეგი სამი მნიშვნელობიდან ერთ-ერთი
  • normal - ტექსტი გამოისახება ჩვეულებრივად
  • italic - ტექსტი გამოჩნდება კურსივის შრფტით
  • oblique - დაწვენილი ტექსტი (oblique ძალიან წააგავს italic-ს უბრალოდ ამ უკანასკნელს ბრაუზერების უფრო მეტი მხარდაჭერა აქვს)
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

შრიფტის ზომა

შრიფტის ზომას განსაზღვრავს font-size თვისება. შრიფტის ზომის მითითება საკმაოდ მნიშვნელოვანი რამაა თუმცა საჭიროა ამის სწორად გაკეთება, არაკორექტული იქნება თუ აბზაცს მივუთითებთ ისეთ font-size-ს რომ დაემგვანოს სათაურს, ან პირიქით, ასეთ შემთხვევაში font-size თვისების გამოყენება ზედმეტი და არამიზანშეწონილია რადგან html-ში არსებობს მზა ტეგები საამისოდ (h1-h6, p). font-size თვისებამ შეიძლება მიიღოს ორი სახის მნიშვნელობა:
აბსოლიტური ზომა
  • ტექსტს ანიჭებს განსაზღვრულ ზომას
  • მომხმარებელს არ ეძლევა საშუალება შეცვალოს ტექსტის ზომა ყველა ბრაუზერში.
  • აბსოლიტური ზომის გამოყენება მოსახერხებელია მაშინ, როდესაც ცნობილია გამოსატანი ტექსტის ფიზიკური ზომა
ფარდობითი ზომა
  • ტექსტს ანიჭებს ზომას ირგვლივ არსებული ელემენტების მიხედვით, მათზე დამოკიდებულებით
  • მომხმარებელს ეძლევა საშუალება შეცვალოს ტექსტის ზომა ყველა ბრაუზერში.
თუ არ განვსაზღვრავთ ფონტის ზომას მაშინ სტანდარტული ტექსტის შრიფტის ზომა იქნება 16px (16px=1em).

შრიფტის ზომა Em-ში

Em არის, W3C-ს მიერ რეკომენდებული შრიფტის ზომის საზომი ერთეული. 1em არის ტექსტის მიმდინარე ზომის ტოლი, ბრაუზერებში ეს 16px-ია ასე რომ 16px=1em. h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

შრიფტის სიმუქე

შრიფტის სიმუქის განსასაზღვრავად გამოიყენება font-weight თვისება p.normal {
    font-weight: normal; /* ჩვეულებრივი */
}

p.thick {
    font-weight: bold; /* მუქი, სქელი */
}
11. ბმულები
css-ის საშუალებით შესაძლებელია ნებისმიერი html ელემენტის სტილების მართვა და მათ შორის ბმულებისაც, უფრო მეტიც, შესაძლებელია ბმულს მიენიჭოს სტილები მისი სტატუსიდან გამომდინარე, სტატუსი კი შეიძლება იყოს
  • a:link - ჩვეულებრივი, გაუხსნელი ბმული
  • a:visited - ბმული რომელზედაც უკვე გადავიდა მომხმარებელი
  • a:hover - მდგომარეობა როდესაც მომხმარებელი მიიტანს მაუსს ბმულთან
  • a:active - მდგომარეობა როდესაც მომხმარებელი დააჭერს მაუსს ბმულს
/* გაუხსნელი ბმული */
a:link {
    color: red;
}

/* გახსნილი ბმული */
a:visited {
    color: green;
}

/* მაუსმიტანილ მდგომარეობაში */
a:hover {
    color: hotpink;
}

/* აქტიური ბმული */
a:active {
    color: blue;
} როგორც წესი html ბმული ქვევით გახაზულია ხოლმე, ქვედახაზის მოსაშორებლად გამოიყენება text-decoration თვისება a:link {
    text-decoration: none;
} ბმულის ფონის ფერის ნანსაზღვრა ხდება background-color თვისებით a:link {
    background-color: yellow;
}

ბმული როგორტც ღილაკი

ქვემოთ მოყვანილი მაგალითის მიხედვით ჩვეულებრივი ბმული გამოჩნდება როგორც ღილაკი a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}
12. ცხრილები

ცხრილის ჩარჩოები

ცხრილის ჩარჩოების სტილის განსასაზღვრავად გამოიყენება border თვისება. table, th, td {
    border: 1px solid black;
} ზემოთ მოყვანილ მაგალითში ცხრილს ექნება ორმაგი ჩარჩოები რადგან table, <th> და <td> ელემენტებს ცალ-ცალკე აქვთ მითითებული ჩარჩოები. იმისათვის რათა ეს ასე არ მოხდეს და ცხრილს ერთი ჩარჩო ჰქონდეს გამოიყენება border-collapse თვისება. table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

ცხრილის სიგანე და სიმაღლე

ცხრილის სიგანე და სიმაღლე განისაზღვრება width და height თვისებებით. ქვემოთ მოყვანილ მაგალითში ცხრილს ექნება 100% სიგანე, <th> ელემენტს კი 50px სიმაღლე table {
    width: 100%;
}

th {
    height: 50px;
}

ჰორიზონტალური რეგულირება

text-align თვისება განსაზღვრავს თუ ჰორიზონტალურად რომელ მხარეს უნდა განთავსდეს <th> და <td> ელემენტების შიგთავსი (left, right, ან center). ნაგულისხმეობის პრიონციპით <th> ელემენტებისათვის ამ თვისების მნიშვნელობა არის center, ხოლო <td> ელემენტისათვის left. th {
    text-align: left;
}

ჰორიზონტალური რეგულირება

vertical-align თვისება განსაზღვრავს თუ ვერტიკალურად რომელ მხარეს უნდა განთავსდეს <th> და <td> ელემენტების შიგთავსი (top, bottom, ან middle). ნაგულისხმეობის პრიონციპით <th> და <td> ელემენტებისათვის ამ თვისების მნიშვნელობა არის middle.

ცხრილის შიდა მიჯნა

ცხრილის ჩარჩოსა და შიგთავსს შორის მანძილის განსასაზღვრავად <td> და <th> ელემენტებსუნდა მიეთითიოთ შიდა მიჯნა ანუ padding th, td {
    padding: 15px;
    text-align: left;
}
13. თვისება display
display თვისება განსაზღვრავს თუ როგორ უნდა გამოჩნდეს ელემენტი (ინგ: display - ჩვენება, გამოფენა). ნაგულისხმეობის პრინციპით ელემენტთა უმრავლესობისათვის ამ თვისების მნიშვნელობა არის block ან inline.

ბლოკური ტიპის ელემენტები display:block

ბლოკური ტიპის ელემენტი ყოველთვის იწყება ახალი ხაზიდან და იკავებს მთლიან ხელმისაწვდომ სიგანეს, იჭიმება მარცხნივ და მარჯვნივ რამდენადაც ეს შესაძლებელია. ბლოკური ტიპის ელემენტების მაგალითებია <div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section> ..

ერთ ხაზში განთავსებული ელემენტები display:inline

ასეთი ტიპის ელემენტი არ იწყება ახალი ხაზიდან და სიგანითაც იკავებს იმდენს რამდენიც საჭიროა. მაგ: <span>, <a>, <img>

Display: none;

display: none თვისება როგორც წესი გამოიყენება JavaScript - თან ერთად, ელემენტების წაშლისა და თავიდან შექმნის გარეშე მათ დასამალად, შესაძლებელია ნაგულისმეობის პრინციპით განსაზღვრული display თვისების მნიშვნელობის შეცვლაც, შესაძლებელია რომ ბლოკური ტიპის ელემენტი გადავაქციოთერთ ხაზსშიდა ელემენტად ან პირიქით, ამის ყველაზე ხშირად გამოყენებადი მაგალითია ჰორიზონტალურ მენიუებში <li> ელემენტის ხმარება li {
    display: inline;
}
 შენიშნვა : display თვისების მნიშვნელობის შეცვლა გულისხმობს რომ შეიცვალა მხცოლოდ ის თუ როგორ უნდა გამოჩნდეს ელემენტი, და არა იმას რომ თავად ერლემენტმა შეიცვალა ტიპი.

ელემენტის დამალვა display:none თუ visibility:hidden ?

როგორც აღვნიშნეთ ელემენტის გასაქრობად გამოიყენება Display თვისების მნიშვნელობა none. გვერდი ისე აგრძელებს ჩატვვირთვას და მუშაობას თითქოს ეს ელემენტი არც არსებობდა. ელემენტს აქრობს visibility:hidden; თვისება:მნიშვნელობა წყვილიც მაგრამ იმ განსხავავებით რომ ელემენტი უბრალოდ ქრება, მისთვის განკუთვნილი ადგილი კი ისევ ისე რჩება თითქოს ელემენტი არც წაშლილიყოს. h1.hidden {
    visibility: hidden;
}
14. თვისება position, z-index
თვისება position განსაზღვრავს ელემენტის პოზიციონირების ტიპს, მისი შესაძლო მნიშვნელობებია static, relative, fixed და absolute. მხოლოდ position თვისების მითითების შემდეგაა შესაძლებელი ელემენტის მდებარეობა ვმართოთ top, bottom, left და right თვისებების საშუალებით.

position: static;

პოზიციონირების თვალსაზრისით, ნაგულისმეობის პრინციპით html ელემენტების position თვისების მნიშვნელობა არის static. (position: static ელემენტებთან top, bottom, left და right მეთოდებს ვერ გამოვიყენებთ).

position: relative;

წარმოვიდგინოთ რომ რომელიმე html ელემენტი მაგალითად img მოთავსდა გვერდის რომელიღაც ადგილას, თუ ამ ელემენტს მიენიჭება position: relative და შემდეგ გამოვიყენებთ top, right, bottom და left მეთოდებს მაშინ ელემენტი მდებარეობას შეიცვლის საწყის პოზიციასთან ანუ მდებარეობასთან მიმართებაში ხოლო დოკუმენტის დანარჩენი ელემენტების განლაგება იგივე დარჩება ისინი ადგილს არ შეიცვლიან.

position: fixed;

position: fixed; ელემენტები ყოველთვის რჩებიან თვალთახედვის არეში მიუხედავად იმისა მოხდება თუ არა გვერდის ე.წ "ჩამოსქროლვა". ასეთი ელემენტების პოზიციის ზუსტი განსაზღვრისათვის გამოიყენება top, right, bottom და left თვისებები.

position: absolute;

განვიხილოთ ასეთი შემთხვევა <style>
    div.parent {
       width: 400px;
       height: 200px;
       border: 3px solid blue
       margin: 100px auto;
    }

    div.child {
       width: 200px;
       height: 100px;
       border: 3px solid orange;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div> ანუ html div ელემენტში მოთავსებული მეორე html div ელემენტი, ეს ყველაფერი მოგვცემს ასეთ სურათს



ახლა შვილობილ ელემენტს მივცეთ position: absolute; ეს ცვლილება არაფერს შეცვლის საერთო სურათში მაგრამ თუ ახლა შვილობილ ელემენტს top და left თვისებებს მივუთიებთ მივიღებთ ასეთ სურათს <style>
    div.parent {
       width: 400px;
       height: 200px;
       border: 3px solid blue
       margin: 100px auto;
    }

    div.child {
       width: 200px;
       height: 100px;
       border: 3px solid orange;
       position: absolute;
       top: 10px;
       left: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>



ანუ position: absolute; შვილობილმა ელემენტმა პოზიციონირება მოახდინა არა მშობელი ელემენტის, არამედ ბრაუზერის ფანჯარასთან მიმართებაში. ყველაფერი შეიცვლება თუ მშობელ ელემენტს მივანიჭებთ position: relative; - ს. ამ შემთხვევაში მივიღებთ ასეთ სურათს <style>
    div.parent {
       width: 400px;
       height: 200px;
       border: 3px solid blue
       margin: 100px auto;
       position: relative;     }

    div.child {
       width: 200px;
       height: 100px;
       border: 3px solid orange;
       position: absolute;
       top: 10px;
       left: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>



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

ელემენტების გადაფარვა

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



ელემენტს შეიძლება მიენიჭოს დადებითი ან უარყოფითი z-index. ელემენტი მეტი z-index-ით გამოჩნდება უფრო წინ ვიდრე ნაკლები z-index-ის მქონე ელემენტი.
15. თვისება overflow
CSS overflow თვისება განსაზღვრავს ამოჭრას ელემენტის შიგთავსი თუ დააფიქსიროს ვერტიკალური "სქროლბარი" მაშინ როდესაც ელემენტი მისი სიგრძე-სიგანიდან გამომდინარე, სრულად ვერ იტევს შიგთავსს.



overflow თვისებამ შეიძლება მიიღოს შემდეგი მნიშვნელობები
  • visible -მნიშვნელობა ნაგულისმეობის პრინციპით. ელემენტში არჩატეული შიგთავსი არ ამოიჭრება, ის გაცდება ელემენტის ჩარჩოებს.
  • hidden - ელემენტში არჩატეული შიგთავსი ამოიჭრება და აღარ გამოჩნდება
  • scroll - ელემენტში არჩატეული შიგთავსი ამოიჭრება მაგრამ ელემენტს გაუჩნდება "სქროლბარი" და შესაძლებელი იქნებნა ამ არჩატეული შიგთავსის ნახვა (როგორც ეს ზედა სურათზეა). "სქროლბარი" გამოჩნდება იმ შემთხვევაშიც თუ შიგთავსი ეტევა ელემენტში.
  • auto - ელემენტში არჩატეული შიგთავსი ამოიჭრება მაგრამ ელემენტს გაუჩნდება "სქროლბარი" და შესაძლებელი იქნებნა ამ არჩატეული შიგთავსის ნახვა (როგორც ეს ზედა სურათზეა). "სქროლბარი" გამოჩნდება მხოლოდ იმ შემთხვევაში თუ შიგთავსი არ ეტევა ელემენტში.
თვისება overflow მუშაობს მხოლოდ ბლოკურ ელემენტებთან რომელთა სიმაღლეც განსაზღვრულია.

overflow-x და overflow-y

overflow-x და overflow-y თვისებები განსაზღვრავენ დაემატოს თუ არა "სქროლბარი" ელემენტს მხოლოდ ვერტიკალურად ან ჰორიზონტალურად ან ორივენაირად, იმის და მიხედვით თუ რომელ მათგანს როგორ მივუთითებთ. overflow-x განსაზღვრავს თუ როგორ გამოისახოს ელემენტის მარცხენა და მარჯვენა კიდეები, ხოლო overflow-y განსაზღვრავს თუ როგორ გამოისახოს ელემენტის ზედა და ქვედა კიდეები.
16. თვისება float, clear

float

როგორც ადრე აღვნიშნეთ html ელემენტი შეიძლება იყოს ბლოკური ან ხაზსშიდა, ბლოკური ელემენტი იკავებს დოკუმენტის მთლიან სიგანეს და მის გვერდით ვეღარ ხერხდება სხვა ელემენტის მოთავსება, ამ პრობლემის მოსაგვარებლად შესაძლებელია გამოვიყენოთ float თვისება, მისი მეშვეობით შესაძლებელი ხდება html ელემენტების საჭირო ადგილზე გადატანა, გაცურება (float ინგლისურად ნიშნავს ცურვას, ტივტივს). float თვისების გამოყენების უმარტივესი შემთხვევაა მაგალითად თუ გვსურს რომ ტექსტი განთავსდეს სურათის ირგვლივ, როგორც ცნობილია სურათიც და აბზაციც ბლოკური ტიპის ელემენტებია. img {
    float: left;
    margin: 0 10px 10px 10px;
}

clear

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

მცურავი ელემენტები და overflow

როდესაც A ელემენტი უფრო მაღალია თავის მშობელ B ელემენტზე და A ელემენტს განვუსაზღვრავთ float თვისებას, მაშინ იგი გაცდება B ელემენტის საზღვრებს და გვექნება ამდაგვარი სურათი



ეს პრობლემა მოგვარდება თუ მშობელ B ელემენტს განვუსაზღვრავთ overflow: auto; თვისებას. .clearfix {
    overflow: auto;
}



17. inline-block მნიშვნელობა
float თვისების საშუალებით დიდი ხნის განმავლობაში შესაძლებელი იყო ბლოკური ელემენტების ისე განლაგება რომ ისინი ბრაუზერის მთლიან სიგანეზე გადანაწილებულიყვნენ. <style>
.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.after-box {
    clear: left;
    border: 3px solid red;
}
</style>

<h2>ძველი გზა - float თვისების გამოყენებით</h2>

<div class="floating-box"> მცურავი ელემენტი </div>
<div class="floating-box"> მცურავი ელემენტი </div>
<div class="floating-box"> მცურავი ელემენტი </div>
<div class="floating-box"> მცურავი ელემენტი </div>
<div class="floating-box"> მცურავი ელემენტი </div>
<div class="floating-box"> მცურავი ელემენტი </div>
<div class="floating-box"> მცურავი ელემენტი </div>
<div class="floating-box"> მცურავი ელემენტი </div>
<div class="after-box"> მცურავი ელემენტების შემდეგ არსებული ელემენტი </div>



უნდა აღინიშნოს რომ ამ შემთხვევაში მცურავი ელემენტების შემდეგ არსებულ "after-box" ელემენტს ჭირდება clear თვისების განსაზღვრა. ეს ყველაფერი გაცილებით მარტივი იქნება display თვისების inline-block მნიშვნელობის გამოყენებით .floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
} და აღარც clear თვისების განსაზღვრაა საჭირო "after-box" ელემენტებისათვის.
18. ელემენტებისა და მათი შიგთავსის განლაგება - Align

ელემენტების სწორება ბრაუზერის ჰორიზონტალური ცენტრისაკენ

ბლოკური ეწლემენტის (მაგ: <div>) ჰორიზონტალური სწორებისათვის გამოიყენება margin: auto; თვისება:მნიშვნელობის წყვილი. ელემენტისათვის სიგანის მითითება თავიდან აგვაცილებს ამ ელემენტის გადაჭიმვას კონტეინერის მთლიან სიგანეზე. ასეთ შემთხვევაში ელემენტი დაიჭერს განსაზღვრულ სიგანეს და განთავსდება ბრაუზერის ცენტრში ჰორიზონტალური თვასლაზრისით. .center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
} უნდა აღინიშნოს რომ width თვისების განსაზღვრის გარეშე margin: auto; მნიშვნელობას ეფექტი არ ექნება.

ელემენტების შიგთავსის სწორება ელემენტის ჰორიზონტალური ცენტრისაკენ

ელემენტის შიგთავსის ცენტრში მოსათავსებლად გამოიყენება text-align: center; თვისება:წყვილი; .center {
    text-align: center;
    border: 3px solid green;
}

სურათების სწორება ჰორიზონტალური ცენტრისაკენ

სურათის ბრაუზერის ცენტრში მოსათავსებლად გამოიყენება margin: auto; თვისება:წყვილი; მაგრამ ამავე დროს საჭიროა dislpay:blok; თვისების მითითებაც img {
    display: block;
    margin: auto;
    width: 40%;
}

სწორება მარცხნივ და მარჯვნივ position თვისების გამოყენებით

ელემენტების სწორების ერთ-ერთი მეთოდი არის position: absolute; .right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
} position: absolute; ელემენტები იშლება ნორმალური html ნაკადიდან და ფარავენ სხვა ელემენტებს.

სწორება მარცხნივ და მარჯვნივ float თვისების გამოყენებით

ელემენტების სწორება შესაძლებელია float თვისების გამოყენებითაც. .right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

ელემენტის შიგთავსის სწორება ვერიკალური ცენტრისაკენ padding თვისების გამოყენებით

ელემენტის შიგთავსის სწორების მრავალნაირი ხერხი არსებობს, ერთ-ერთია ქვედა და ზედა შიდა მიჯნების ანუ padding-bottom და padding-top მეთოდების გამოყენება. .center {
    padding: 70px 0;
    border: 3px solid green;
} იმისათვის რათა მოხდეს შიგთავსის ერთდროულად სწორება ჰორიზონტალური და ვერტიკალური ცენტრებისაკენ padding და text-align მეთოდები უნდა გამოვიყენოთ ერთად. .center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

ელემენტის შიგთავსის სწორება ვერიკალური ცენტრისაკენ line-height თვისების გამოყენებით

კიდევ ერთი გზა ელემენტის შიგთავსის ვერიკალური ცენტრისაკენ სწორებისათვის არის ელემენტის line-height და height თვისებებისათვის ერთი და იგივე მნიშვნელობების მინიჭება .center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
19. სელექთორები

id-ის მიხედვით ელემენტის ამორჩევა

id-ის მიხედვით ელემენტების ამოსარჩევად სელექთორში კლასის დასახელების წინ უნდა დავსვათ დიეზი - "#" , მაგალითად ამოვარჩიოთ ყველა ელემენტი რომელთა id არის "intro" #intro {
    background-color: yellow;
}

კლასის მიხედვით ელემენტის ამორჩევა

კლასის მიხედვით ელემენტების ამოსარჩევად სელექთორში კლასის დასახელების წინ უნდა დავსვათ წერტილი - "." , მაგალითად ამოვარჩიოთ ყველა ელემენტი რომელთა კლასია "intro" .intro {
    background-color: yellow;
}

ყველა ელემენტის ამორჩევა

ყველა ელემენტის ამოსარჩევი სელექთორია ფიფქი - "*" , ამოვარჩიოთ დოკუმენტის ყველა ელემენტი * {
    background-color: yellow;
}

ელემენტის ამორჩევა დასახელების მიხედვით

ელემენტის დასახელების მიხედვით ამოსარჩევად სელექთორში უნდა მივუთითოთ უბრალოდ ამ ელემწენტის დასახელება, მაგალითად ამოვარჩიოთ ყველა p ელემენტი p {
    background-color: yellow;
}
 აგრეთვე შესაძლებელია რამოდენიმე დასახელების ელემენთა ამორჩევა, მათი დასახელებების გამოყოფა ხდება მძიმითმაგალითად ამოვარჩიოთ ყველა div და ყველა p ელემენტი div ,p {
    background-color: yellow;
}

სელექთორების კომბინაციები

კომბინატორები

კომბინატორები გამოიყენება სელექთორებს შორის ურთიერთკავშირის განსასაზღვრავად. სელექთორი შეიძლება შეიცავდეს ერთ ან რამოდენიმე მარტივ სელექთორს. კომბინატორების ჩასმა ხდება სწორედ ამ მარტივ სელექთორებს შორის. CSS3-ში არის კომბინატორების შემდეგი სახეები
  • შთამომავლობითი ( ცარიელი ადგილი )
  • შვილობილი (>)
  • მოსაზღვრე მოძმე (+)
  • მოძმე (~)

შთამომავლობითი სელექთორები

შთამომავლობითი სელექთორი არჩევს მითითებული ელემენტის ყველა შამომავალ ელემენტს. მოყვანილი მაგალითი ამოარჩევს ყველა <<p> ელემენტს <div> ელემენტში. div p {
    background-color: yellow;
}

<div>
    <p>Paragraph 1 in the div.</p>
    <p>Paragraph 2 in the div.</p>
    <span><p>Paragraph 3 in the div.</p></span>
</div> ყურადღება უნდა მიექცეს იმას რომ ბოლო p ელემენტი არის div ელემენტის შთამომავალი და არა უშუალო შვილობილი რადგან იგი span ელემენტძშია მოთავდსსებული.

შვილობილის სელექთორები

შვილობილის სელექთორი არჩევს მითითებული ელემენტის ყველა უშუალო შვილობილ ელემენტს. div > p {
    background-color: yellow;
}

მოსაზღვრე მოძმის სელექთორები

მოსაზღვრე მეზობელის სელექთორები არჩევენ მითითებული ელემენტის მოსაზღვრე მოძმე ელემენტებს. მოძმე ელემენტებს უნდა გააჩნდეთ ერთი და იგივე მშობელი ელემენტი , "მოსაზღვრე მეზობელის" უკან კი იგულისმება "პირველივე შემხვედრი" ანუ შემდეგი ელემენტი. div + p {
    background-color: yellow;
}
20. სელექთორები ფსევდოკლასებით
ფსევდოკლასი გამოიყენება ელემენტის სპეციალური მდგომარეობის განსასაზღვრავად. ის შეიძლება გამოვიყენოთ მაგალითად მაშინ როდესაც გვინდა აღვწეროთ ელემენტის სტილები როცა მასთან მაუსს მიიტანენ, აღვწეროთ გახსნილი და გაუხსნელი ბმულების სტილები, აღვწეროთ ელემენტის სტილი როდესაც ის მიიღებს ფოკუსს და ა.შ. ფსევდოკლასის გამოყენების სინტაქსი ასეთია selector:pseudo-class {
    property:value;
} კონკრეტული მაგალითი კი შემდეგია a.highlight:hover {
    color: #ff0000;
}

:first-child ფსევდოკლასი

:first-child ფსევდოკლასი არჩევს ელემენტს რომელიც არის რომელიმე ელემენტის პირველი შვილობილი. p:first-child {
    color: blue;
} ახლა ამოვარჩიოთ მაგალითად ყველა p ელემენტის პირველი შვილობილი i ელემენტები p i:first-child {
    color: blue;
}

ყველა CSS ფსევდოკლასი

სელექთორი მაგალითი აღწერა
:active a:active აქტიური ბმულის არჩევა
:checked input:checked ყველა მონიშნული <input> ელემენტის არჩევა
:disabled input:disabled ყველა გამორთული <input> ელემენტის არჩევა
:empty p:empty ყველა ისეთი <p> ელემენტის არჩევა რომელსაც არ ყავს შვილობილი ელემენტები
:enabled input:enabled ყველა ჩართული <input> ელემენტის არჩევა
:first-child p:first-child ყველა ისეთი <p> ელემენტის არჩევა რომელიც არის თავისი მშობლის პირველი შვილობილი
:first-of-type p:first-of-type ყველა ისეთი <p> ელემენტის არჩევა რომელიც არის პირველი <p> ელემენტი თავის მშობელ ელემენტში
:focus input:focus ისეთი <input> ელემენტის ამორჩევა რომელსაც აქვს ფოკუსი
:hover a:hover ბმულების ამორჩევა იმ მომენტში როდესაც მაუსს მიიტანენ მათთან
:in-range input:in-range არჩევს ისეთ <input> ელემენტებს რომლებსაც მითითებული აქვთ მნიშვნელობის დიაპაზონი
:invalid input:invalid არჩევს ისეთ <input> ელემენტებს რომლებშიც ჩაწერილია არასწორი ტიპის ინფორმაცია, მაგალითად არასწორი ელ_ფოსტა
:last-child p:last-child ყველა ისეთი <p> ელემენტის ამორჩევა რომელიც არის თავისი მშობლის ბოლო შვილობილი
:last-of-type p:last-of-type ყველა ისეთი <p> ელემენტის ამორჩევა რომელიც არის მშობელი ელემენტის ბოლო <p> შვილობილი ელემენტი
:link a:link ყველა გაუხსნელი ბმულის ამორჩევა
:not(სელექთორი) :not(p) ყველა ელემენტის ამორჩევა გარდა <p> ელემენტებისა
:nth-child(n) p:nth-child(2) ყველა ისეთი <p> ელემენტის არჩევა რომელიც არის თავისი მშობლის მეორე შვილობილი
:nth-last-child(n) p:nth-last-child(2) ყველა ისეთი <p> ელემენტის არჩევა რომელიც არის თავისი მშობლის მეორე შვილობილი, ათვლა იწყება ბოლო შვილობილიდან
:only-of-type p:only-of-type ყველა ისეთი <p> ელემენტი რომელიც არის ერთადერთი <p> შვილობილი ელემენტი თავის მშობლისათვის
:only-child p:only-child ყველა ისეთი <p> რომელიც არის თავისი მშობლის ერთადერთი შვილი
:optional input:optional ყველა ისეთი <input> ელემენტი რომლებსაც არ აქვთ "required" ატრიბუტი
:out-of-range input:out-of-range ყველა ისეთი <input> ელემენტი რომელთა მნიშვნელობაც მითითებულ დიაპაზონს გარეთაა
:read-only input:read-only ყველა ისეთი <input> ელემენტის ამორჩევა რომელსაც აქვს ატრიბუტი "readonly"
:read-write input:read-write ყველა ისეთი <input> ელემენტის ამორჩევა რომელსაც არ აქვს ატრიბუტი "readonly"
:required input:required ყველა ისეთი <input> ელემენტის ამორჩევა რომელსაც მითითებული აქვს ატრიბუტი "required"
:root root დოკუმენტის ძირი ელემენტის ამორჩევა
:valid input:valid ყველა ისეთი <input> ელემენტის ამორჩევა სადაც სწორი ინფორმაციაა შეტანილი
:visited a:visited ყველა გახსნილი ბმულის ამორჩევა

CSS ფსევდო ელემენტები

სელექთორი მაგალითი აღწერა
::after p::after შიგთავსის დამატება ყველა <p> ელემენტის შიგთავსის ბოლოში
::before p::before შიგთავსის დამატება ყველა <p> ელემენტის შიგთავსის თავში
::first-letter p::first-letter ყველა <p> ელემენტის პირველი ასო
::first-line p::first-line ყველა <p> ელემენტის პირველი ხაზი
::selection p::selection მომხმარებლის მიერ მონიშნული შიგთავსის ამორტჩევა, მაგალითად როდესაც ტექსტზე მაუსს გადავატარებთ და ტექსტი გალურჯდება
21. სელექთორები ატრიბუტებით

CSS [attribute] სელექთორი

[attribute] სელექთორი გამოიყენება განსაზღვული ატრიბუტის საშუალებით ელემენტის ამოსარჩევად. მოყვანილი მნაგალითი ამოარჩევს ყველა <a> ელემენტს რომლებსაც გააჩნიათ target ატრიბუტი a[target] {
    background-color: yellow;
}

CSS [attribute="value"] სელექთორი

[attribute="value"] სელექთორი გამოიყენება იმ ელემენტების ამოსარჩევად რომლებსაც აქვთ განსაზღვრული ატრიბუტი და ამ ატრიბუტის მნიშვნელობა . მოყვანილი მაგალითი ამოარჩევს ყველა <a> ელემენტს რომლებსაც გააჩნიათ target ატრიბუტი და ამ ატრიბუტის მნიშვნელობა არის _blank a[target="_blank"] {
    background-color: yellow;
}

CSS [attribute~="value"] სელექთორი

[attribute~="value"] სელექთორი გამოიყენება იმ ელემენტების ამოსარჩევად რომლებსაც აქვთ განსაზღვრული ატრიბუტი და ეს ატრიბუტი შეიცავს კონკრეტულ სიტყვას, მოყვანილი მაგალითი ამოარჩევს ყველა იმ ელემნენტს რომლებსაც აქვთ title ატრიბუტი და ეს ატრიბუტი შეიცავს სიტყვას - flower [title~="flower"] {
    border: 5px solid yellow;
} ზემოთ მოყვანილი მაგალითი ამოარჩევს title="flower", title="summer flower", და title="flower new" ელემენტებს მაგრამ არა title="my-flower" ან title="flowers" ელემენტებს, ანუ სელექთორში მითითებული სიტყვა უნდა იყოს ცალკე სიტყვად title ატრიბუტში.

CSS [attribute|="value"] სელექთორი

[attribute|="value"] სელექთორი გამოიყენება იმ ელემენტების ამოსარჩევად რომლებსაც აქვთ განსაზღვრული ატრიბუტი და ეს ატრიბუტი იწყება განსაზღვრული მნიშვნელობით, ეს მნიშვნელობა უნდა იყოს ცალკე სიტყვა ან ტირით გამოყოფილი, მაგალითად: class="top" ან class="top-text"). მოყვანილი მაგალითი ამოარჩევს ყველა იმ ელემენტს რომელთა კლასიც იწყება სიტყვით top. [class|="top"] {
    background: yellow;
}

CSS [attribute^="value"] სელექთორი

[attribute^="value"] სელექთორი გამოიყენება იმ ელემენტების ამოსარჩევად რომლებსაც აქვთ განსაზღვრული ატრიბუტი და ეს ატრიბუტი იწყება განსაზღვრული მნიშვნელობით, წინა სელექთორისაგან განსხვავებით ამ შემთხვევაში არ არის აუცილებელი რომ ეს მნიშვნელობა იყოს ცალკე სიტყვა ან ტირით გამოყოფილი. მოყვანილი მაგალითი ამოარჩევს ყველა იმ ელემენტს რომელთა კლასიც იწყება სიტყვით top. [class^="top"] {
    background: yellow;
}

CSS [attribute$="value"] სელექთორი

[attribute$="value"] სელექთორი გამოიყენება იმ ელემენტების ამოსარჩევად რომლებსაც აქვთ განსაზღვრული ატრიბუტი და ეს ატრიბუტი მთავრდება განსაზღვრული მნიშვნელობით, ეს მაგალითი ამოარჩევს ყველა იმ ელემენტს რომელთა კლასიც მთავრდება სიტყვით test [class$="test"] {
    background: yellow;
}

CSS [attribute*="value"] სელექთორი

[attribute*="value"] სელექთორი გამოიყენება იმ ელემენტების ამოსარჩევად რომლებსაც აქვთ განსაზღვრული ატრიბუტი და ეს ატრიბუტი შეიცავს განსაზღვრული მნიშვნელობას, არ არის აუცილებელი რომ ეს მნიშვნელობა იყოს ცალკე სიტყვა ან ტირით გამოყოფილი. ეს მაგალითი ამოარჩევს ყველა იმ ელემენტს რომელთა კლასიც შეიცავს მარცვალს te [class*="te"] {
    background: yellow;
}
22. გაუმჭვირვალეობა - Opacity

CSS გამჭვირვალება / გაუმჭვირვალეობას

opacity თვისება განსაზღვრავს ელემენტის გამჭვირვალება / გაუმჭვირვალეობას.

გამჭვირვალე სურათი

თვისება opacity-მ შეიძლება მიიღოს მნიშვნელობა 0.0 - 1.0 დიაპაზონში. რაც უფრო ნაკლებია მნიშვნელობა მით უფრო გამჭვირვალეა ელემენტი img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* IE 8 და უფრო ძველი */
}

გამჭვირვალე ბლოკი

როდესაც ელემენტს ვუთითებთ opacity თვისებას, იგივე გამჭვირვალეობა მემკვიდრეობით გადაეცემათ მის შვილობილ ელემენტებსაც, ამან შეიძლება გაართულოს ელემენტის შიგთავსის წაკითხვა



RGBA გამჭვირვალეობა

იმისათვის რათა ელემენტის გამჭვირვალეობის შეცვლასთან ერთად არ შეიცვალოს ელემენტის შიგთავსის გამჭვირვალეობაც, უნდა გამოვიყენოთ RGBA ფერთა მნიშვნელობები. RGBA ფერთა მნიშვნელობა განისაზღვრება შემდეგნაირად rgba(red, green, blue, alpha) alpha პარამეტრი არის რიცხვი 0.0 - 1.0 შუალედში. div {
    background: rgba(76, 175, 80, 0.3) /* მწვანე ფონი 30% გაუმჭვირვალეობით */
}



23. "Sprite" სურათები
"Sprite" სურათი არის ერთ სურათში გაერთიანებული რამოდენიმე სურათი. ბევრი სურათების შემცველი ვებ-გვერდის ჩატვირთვას შეიძლება დიდი დრო დაჭირდეს. "Sprite" სურათების დახმარებით მცირდება სერვერზე გაგზავნილი მოთხოვნების რაოდენობა აქედან გამომდინარე მცირდება გვერდის ჩატვირთვის დროც. სამი სხვადასხვა სურათის ნაცვლად გამოვიყენოთ სურათი "img_navsprites.gif:



CSS-ის საშუალებით შეგვიძლია გამოვაჩინოთ ამ სურათის მხოლოდ ის ნაწილი რომელიც გვჭირდება. #home {     width: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}

#next {
    width: 43px;
    height: 44px;
    background: url(img_navsprites.gif) -91px 0;
}

<p id="home"></p>
< p id="next"></p> შედეგი იქნება:



background: url(img_navsprites.gif) 0 0; - ჩანაწერი განსაზღვრავს ფონის სურათს და მის პოზიციას (მარცხნიდან 0px, ზემოდან 0px)
24. ფორმები

შესაყვანი ველების სტილები

შესაყვანი ველების სიგრძის განსაზაზღვრავად გამოიყენება width მეთოდი. შესაყვანი ველები შეიძლება გაიფილტროს ატრიბუტების დახმარებით
  • input[type=text] - მხოლოდ ტექსტური ველები
  • input[type=password] - პაროლის ველები
  • input[type=number] - ნუმერაციული ველები
  • ...
შესაყვანი ველების შიდა და გარე მიჯნების განსაზაზღვრავად გამოიყენება padding და margin მეთოდები.

ფოკუსირებული შესაყვანი ველების სტილები

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



მისი წაშლა შესაძლებელია შემდეგნაირად: outline: none; იმისათვის რათა ფოკუსმიღებული შესაყვანი ველის სტილები განვსაზღვროთ ელემენტის სელექთორს უნდა დავუმატოთ :focus ფსევდოკლასი.

შესაყვანი ველები და სურათები

თუ გვსურს რომ შესაყვან ველში მოვათავსოთ რაიმე იკონი ან სურათი, უნდა გამოვიყენოთ background-image თვისება და მივუთითოთ background-position თვისებაც. input[type=text] {
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
}
25. საზომი ერთეულები
CSS-ში საზომი ერთეული შეიძლება იყოს ორგვარი: აბსოლიტური ან დამოკიდებულებითი.

დამოკიდებულებითი ერთეულები

დამოკიდებულებითი ერთეულები ამა თუ იმ თვისების მნიშვნელობას ზომავენ სხვა თვისებიდან გამომდინარე, სხვა თვისების სიდიდეზე დამოკიდებულებით
ერთეული აღწერა
em დამოკიდებულია ელემენტის font-size თვისებაზე (2em ნიშნავს მიმდინარე შრიფტის ზომაზე 2-ჯერ მეტს)
ex დამოკიდებულია მიმდინარე შრიფტის x-height თვისებაზე (გამოიყენება იშვიათად)
rem დამოკიდებულია ძრილი ელემენტის font-size თვისებაზე
vw დამოკიდებულია ხედვის არის სიგანის 1%-ზე
vh დამოკიდებულია ხედვის არის სიმაღლის 1%-ზე
%  

აბსოლიტური ერთეულები

აბსოლიტური ერთეულებით გამსაზღვრული ზომები ფიქსირებულია და არ იცვლება ხედვის პირობების შეცვლისას (მაგალითად ხედვის არის ზომების შემცირებისას).
ერთეული აღწერა
cm სანტიმეტრი
mm მილიმეტრი
in ინჩი (1in = 96px = 2.54cm)
px * პიქსელი (1px = 1/96 in)
pt წერტილი (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
26. მოქნილი დიზაინი (display: flex)
ინგ: flex - მოქნილი დრეკადი.

flexbox-ის გვაძლევს საშუალებას შაბლონი გავხადოთ უფრო მოქნილი float და position თვისებების გამოყენების გარეშე. flexbox-მდე ვიყენებდით შაბლონის პროექტირების შემდეგ მეთოდებს
  • display: block;
  • display: inline-block;
  • display: table;
  • position: absolute;
  • position: relative;
  • position: fixed;
იმისათვის რათა გამოვიყენოთ Flexbox მოდელი, პირველ რიგში უნდა შევქმნათ flex კონტეინერი : 
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

მშობელი ელემენტი

იმისათვის რათა flex-container გახდეს მოქნილი მას display თვისების მნიშვნელობად უნდა განვუსაზღვროთ flex 
.flex-container {
  display: flex;
}
flex კონტეინერის თვისებებია
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction თვისება

flex-direction თვისება განსაზღვრავს რომელი მიმართულებით სურს კონტეინერს განალაგოს 'flex', ანუ მოქნილი ელემენტები. ამ თვისებამ შეიძლება მიიღოს შემდეგი მნიშვნელობები: column, column-reverse, row, row-reverse.

flex-direction: column;

flex-direction თვისების column მნიშვნელობა ელემენტებს ალაგებს ვერტიკალურად (ზემოდან ქვემოთ) 
.flex-container {
  display: flex;
  flex-direction: column;
}




flex-direction: column-reverse;

flex-direction თვისების column-reverse მნიშვნელობა ელემენტებს ალაგებს ვერტიკალურად (ქვემოდან ზემოთ) 
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}




flex-direction: row;

flex-direction თვისების row მნიშვნელობა ელემენტებს ალაგებს ჰორიზონტალურად (მარცხნიდან მარჯვნივ) 
.flex-container {
  display: flex;
  flex-direction: row;
}




flex-direction: row-reverse;

flex-direction თვისების row-reverse მნიშვნელობა ელემენტებს ალაგებს ჰორიზონტალურად (მარჯვნიდან მარცხნივ) 
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}




flex-wrap თვისება

flex-wrap თვისება განსაზღვრავს უნდა გადავიდეს თუ არა ახალ ხაზზე 'flex', ანუ მოქნილი ელემენტები. ამ თვისებამ შეიძლება მიიღოს შემდეგი მნიშვნელობები: wrap, nowrap, wrap-reverse.

flex-wrap: wrap;

flex-wrap თვისების wrap მნიშვნელობა ელემენტებს გადაიტანს ახალ ხაზზე საჭიროების შემთხვევაში 
.flex-container {
  display: flex;
  flex-wrap: wrap;
}




flex-wrap: nowrap;

flex-wrap თვისების nowrap მნიშვნელობა ელემენტებს დაალაგებს ერთ მწკრივში (ნაგულისხმები მნიშვნელობა) 
.flex-container {
  display: flex;
  flex-wrap: nowrap;
}




flex-wrap: wrap-reverse;

flex-wrap თვისების wrap-reverse მნიშვნელობა საჭიროების შემთხვევაში ელემენტებს დაალაგებს სხვადასხვა ხაზებზე უკუთანმიმდევრობით 
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}




flex-flow თვისება

flex-flow თვისება საშუალებას გვაძლევს ერთდროულად განვსაზღვროთ flex-direction და flex-wrap თვისებები. 
.flex-container {
  display: flex;
  flex-flow: row wrap;
}

justify-content თვისება

justify-content თვისება განსაზღვრავს თუ როგორ უნდა განლაგდეს 'flex', ანუ მოქნილი ელემენტები. ამ თვისებამ შეიძლება მიიღოს შემდეგი მნიშვნელობები: center, flex-start, flex-end, space-around, space-between.

justify-content: center;

justify-content თვისების center მნიშვნელობა ელემენტებს ალაგებს კონტეინერის ცენტრში. 
.flex-container {
  display: flex;
  justify-content: center;
}




justify-content: flex-start;

justify-content თვისების flex-start მნიშვნელობა ელემენტების განლაგებას იწყებს კონტეინერის დასაწყისიდან, ეს არის ამ თვისების ნაგულისხმები მნიშვნელობა. 
.flex-container {
  display: flex;
  justify-content: flex-start;
}




justify-content: flex-end;

justify-content თვისების flex-end მნიშვნელობა ელემენტების განლაგებას იწყებს კონტეინერის დასასრულიდან. 
.flex-container {
  display: flex;
  justify-content: flex-end;
}




justify-content: space-around;

justify-content თვისების space-around მნიშვნელობა ამატებს ცარიელ ადგილებს ხაზების წინ, შუაში და შემდეგ 
.flex-container {
  display: flex;
  justify-content: space-around;
}




justify-content: space-between;

justify-content თვისების space-between მნიშვნელობა ამატებს ცარიელ ადგილებს ხაზებს შორის 
.flex-container {
  display: flex;
  justify-content: space-between;
}




align-items თვისება

align-items თვისება განსაზღვრავს თუ როგორ უნდა განლაგდეს 'flex', ანუ მოქნილი ელემენტები კონტეინერში ვერტიკალური თვალსაზრისით. ამ თვისებამ შეიძლება მიიღოს შემდეგი მნიშვნელობები: center, flex-start, flex-end, stretch, baseline. იმისათვის რათა უფრო თვალსაჩინო გახდეს ამ თვისების ეფექტი, კონტეინერს მივცეთ 200px სიმაღლე.

align-items: center;

align-items თვისების center მნიშვნელობა ელემენტებს ალაგებს კონტეინერის ცენტრში ვერტიკალური თვალსაზრისით. 
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}




align-items: flex-start;

align-items თვისების flex-start მნიშვნელობა ელემენტებს ალაგებს კონტეინერის დასაწყისში ვერტიკალური თვალსაზრისით. 
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}




align-items: flex-end;

align-items თვისების flex-end მნიშვნელობა ელემენტებს ალაგებს კონტეინერის დასასრულში ვერტიკალური თვალსაზრისით. 
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}




align-items: stretch;

align-items თვისების stretch მნიშვნელობა ელემენტებს ჭიმავს, წელავს ( :) ) კონტეინერის მთელ სიმაღლეზე ვერტიკალური თვალსაზრისით (ინგ: stretch - გაჭიმვა). 
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}




align-items: baseline;

align-items თვისების baseline მნიშვნელობა ელემენტებს კონტეინერში ვერტიკალური თვალსაზრისით ალაგებს ამ ელემენტების ძირითადი ხაზის მიხედვით 
.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}




align-content თვისება

align-content თვისება განსაზღვრავს თუ როგორ უნდა განლაგდეს 'flex', ანუ მოქნილი რიგები (და არა ელემენტები) კონტეინერში ვერტიკალური თვალსაზრისით. ამ თვისებამ შეიძლება მიიღოს შემდეგი მნიშვნელობები: space-between, space-around, stretch, center, flex-start, flex-end.

align-content: space-between;

align-content თვისების space-between მნიშვნელობა 'flex', ანუ მოქნილ რიგებს (და არა ელემენტებს) შორის ამატებს ერთი და იგივე ზომის ცარიელ სივრცეებს. 
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}




align-content: space-around;

align-content თვისების space-around მნიშვნელობა 'flex', ანუ მოქნილ რიგებს (და არა ელემენტებს) წინ, შორის და შემდეგ ამატებს ერთი და იგივე ზომის ცარიელ სივრცეებს. 
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}




align-content: stretch;

align-content თვისების stretch მნიშვნელობა 'flex', ანუ მოქნილ რიგებს (და არა ელემენტებს) ჭიმავს კონტეინერის მთლიან სიმაღლეზე. 
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}




align-content: center;

align-content თვისების center მნიშვნელობა 'flex', ანუ მოქნილ რიგებს (და არა ელემენტებს) ალაგებს კონტეინერის შუაში ვერიკალური თვალსაზრისით. 
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}




align-content: flex-start;

align-content თვისების flex-start მნიშვნელობა 'flex', ანუ მოქნილ რიგებს (და არა ელემენტებს) ალაგებს კონტეინერის დასაწყისში ვერიკალური თვალსაზრისით. 
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}




align-content: flex-end;

align-content თვისების flex-end მნიშვნელობა 'flex', ანუ მოქნილ რიგებს (და არა ელემენტებს) ალაგებს კონტეინერის დასასრულში ვერიკალური თვალსაზრისით. 
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}




იდეალური ცენტრირება

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: #f1f1f1;
  color: white;
  width: 100px;
  height: 100px;
}
შედეგი



შვილობილი ელემენტები

class="flex-container" კონტეინერში მოქცეული უშუალოდ შვილობილი ელემენტები ავტომატურად ხდებიან მოქნილი ანუ flex ელემენტები. ისინი შეიძლება ვმართოთ შემდეგი თვისებებით:
  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order თვისება

ეს თვისება განსაზღვრავს თუ რა თანმიმდევრობით დალაგდება ელემენტები 
<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>




align-self თვისება

ეს თვისება განსაზღვრავს ელემენტის ვერტიკალურ მდებარეობას კონტეინერში, მან შეიძლება მიიღოს შემდეგი მნიშვნელობები: center, flex-start, flex-end 
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>







CSS3




1. შესავალი
CSS3 არის CSS-ის ბოლო სტანდარტი, იგი დაყოფილია ერთგვარ "მოდულებად" და შეიცავს ძველი CSS-ის სპეციფიკაციას, CSS3 ძირითადი მოდულებია
  • სელექთორები
  • ბლოკური მოდელი
  • ფონები და ჩარჩოები
  • ტექსტის ეფექტები
  • 2D/3D ტრანსფორმაციები
  • ანიმაციები
  • მრავალსვეტიანი დოკუმენტები
  • სამომხმარებლო ინტერფეისი/li>
CSS3-ის თვისებების უმრავლესობას აქვს თანამედროვე ბრაუზერების მხარდაჭერა.
2. ფონები

რამდენიმე ფონი ერთდროულად

CSS3 background-image თვისების დახმარებით საშუალებას გვაძლევს ელემენტის ფონად გამოვიყენოთ რამოდენიმე სურათი ერთდროულად, ეს სურათები ელემენტში ლაგდებიან დასტად და ყველაზე ზემოთ ექცევა ის სურათი რომელსაც პირველს მივუთითებთ background-image თვისების აღწერისას. მოყვანილ მაგალითში მითითებულია ორი სურათი ფონად, პირველი არის ყვავილი (განთავსებულია ქვედა მარჯვენა კუთხეში) მეორე სურათი კი არის ფურცლის გამოსახულებით (განთავსებულია მარცხენა ზედა კუთხეში): #example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
} შედეგი იქნება შემდეგი :



CSS3 ფონის ზომა

ფონის სურათების ზომის განსასაზღვრავად გამოიყენება background-size თვისება. CSS3-მდე ფონის სურათის ზომა იყო თავად სურათის ზომა, ფონის სურათის ზომა შეიძლება განისაზღვროს პროცენტებით, პიქსელებით ან ორი სიტყვა გასაღებით contain და cover. პიქსელებით ზომის განსაზღვრის მაგალითია: #div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
} რაც შეეხება background-size თვისების შესაძლო მნიშვნელობებს - contain და cover, contain მნიშვნელობა ახდენს ფონის სურათის მასშტაბირებას იმ მაქსიმალურ ზომამდე სადამდეც ეს შესაძლებელია სურათის პროპორციებიდან გამომდინარე, ამასთანავე სურათი არ უნდა გასცდეს ელემენტის საზღვრებს, აედან გამომდინარე იმისდა მიხედვით თუ როგორია ფონის პოზიციონირება, შესაძლებელია დარჩეს ელემენტის ნაწილი რომელსაც სურათი ფონი არ დაფარავს.



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



CSS3 background-origin თვისება

background-origin თვისება განსაზღვრავს თუ სად უნდა განთავსდეს ფონის სურათი, მისი შესაძლო მნიშვნელობებია
  • border-box - ფონის სურათი იწყება ელემენტის ჩარჩოს მარცხენა ზედა კუთხიდან
  • padding-box - ფონის სურათი იწყება ელემენტის შიდა მიჯნის მარცხენა ზედა კიდიდან
  • content-box - ფონის სურათი იწყება ელემენტის შიგთავსის მარცხენა ზედა კიდიდან

CSS3 background-clip თვისება

CSS3 background-clip თვისება არის background-origin ზუსტი ანალოგია უბრალოდ ამ შემთხვევაში სურათის მაგივრად გამოიყენება ფერი.
3. ფერები

RGBA ფერები

RGBA ფერთა მნიშვნელობა არის RGB ფერთა მნიშვნელობას + ალფა პარამეტრი რომელიც განსაზღვრავს ფერის გამჭვირვალეობას. rgba(red, green, blue, alpha), ალფა პარამეტრი არის რიცხვი 0.0 - 1.0 დიაპაზონიდან. #p1 {background-color: rgba(255, 0, 0, 0.3);} /* წითელი ფერი with opacity 0.3 გაუმჭვირვალეობით */

HSL ფერები

HSL წარმოდგება Hue, Saturation და Lightness სიტყვებისაგან (ელფერი, გაჯერება და სიმსუბუქე). განსაზღვრა ხდება შემდეგი ფორმულით hsl(hue, saturation, lightness).
  1. hue განსაზღვრავს ფერს (0 - 360)
    • 0 არის წითელი (აგრეთვე 360)
    • 120 არის მწვანე
    • 240 არის ლურჯი
  2. Saturation არის პროცენტული მნიშვნელობა: 100% არის მთლიანი ფერი
  3. Lightness აგრეთვე არის პროცენტული მნიშვნელობა 0% არის მუქი (შავი) და 100% არის თეთრი
#p1 {background-color: hsl(120, 100%, 50%);} /* მწვანე */
#p2 {background-color: hsl(120, 100%, 75%);} /* ღია მწვანე */
#p3 {background-color: hsl(120, 100%, 25%);} /* მუქი მწვანე */
#p4 {background-color: hsl(120, 60%, 70%);} /* პასტელური მწვანე green */
 HSL ფერებსაც, RGBA ფერების მსგავსად, შესაძლებელია დაემატოს ალფა პარამეტრი.
4. გრადიენტები
CSS3 გრადიენტები საშუალებას გვაძლევენ გამოვსახოთ ფერების ურთიერთშეხამება, ავსახოთ ერთი ფერიდან მეორე ფერში გადასვლა. გრადიენტი შეიძლება იყოს ორი სახის
  • წრფივი (ქვემოთ/ზემოთ/მარცხნივ/მარჯვნივ/დიაგონალურად)
  • წრიული (განისაზღვრება ცენტრის მიხედვით)

CSS3 წრფივი გრადიენტი

წრფივი გრადიენტის შესაქმნელად უნდა განვსაზღვროთ მინიმუმ ორი ფერი, ანუ ის ფერები რომელთა ერთმანეტში გადასსვლაც გვინდა რომ დავაფიქსიროთ. აგრეთვე შესაძლებელია მივუთითოთ საწყისი წერტილი და მიმართულება გრადიენტისათვის. სინტაქსი ასეთია background: linear-gradient(მიმართულება, ფერი1, ფერი2, ...);

წრფივი გრადიენტი - ზემოდან ქვემოთ (ეს არის ნაგულისმეობის პრინციპით)

#grad {
    background: red; /* იმ ბრაუზერებისათვის რომლებიც ვერ აღიქვამენ გრადიენტს */
    background: -webkit-linear-gradient(red, yellow); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, yellow); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, yellow); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, yellow); /* სტანდარტული სინტაქსი */
} } შედეგი:



წრფივი გრადიენტი - მარცხნიდან მარჯვნივ

#grad {
    background: red; /* იმ ბრაუზერებისათვის რომლებიც ვერ აღიქვამენ გრადიენტს */
    background: -webkit-linear-gradient(left, red, yellow); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, yellow); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 - 15 */
    background: linear-gradient(right, red, yellow); /* სტანდარტული სინტაქსი */
} } შედეგი:



წრფივი გრადიენტი - დიაგონალურად

#grad {
    background: red; /* იმ ბრაუზერებისათვის რომლებიც ვერ აღიქვამენ გრადიენტს */
    background: -webkit-linear-gradient(left top, red, yellow); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, red, yellow); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, red, yellow); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, red, yellow); /* სტანდარტული სინტაქსი */
} } შედეგი:



გრადიენტის გაუმჭვირვალეობა

გრადიენტთან ერთად შესაძლებელია გამოვიყენოთ გაუმჭვირვალეობა/გამჭვირვალეობის თვისებებიც. #grad {
    background: red; /* იმ ბრაუზერებისათვის რომლებიც ვერ აღიქვამენ გრადიენტს */
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*სტანდარტული სინტაქსი*/
}



წრიული გრადიენტი

#grad {     background: red; /* იმ ბრაუზერებისათვის რომლებიც ვერ აღიქვამენ გრადიენტს */
    background: -webkit-radial-gradient(red, yellow, green); /*Safari 5.1-6*/
    background: -o-radial-gradient(red, yellow, green); /*Opera 11.1-12*/
    background: -moz-radial-gradient(red, yellow, green); /*Fx 3.6-15*/
    background: radial-gradient(red, yellow, green); /*სტანდარტული სინტაქსი*/
} შედეგი იქნება :



5. ჩრდილები
ჩრდილების დამატება შესაძლებელია როგორც ელემენტებისათვის ასევე ტექსტისათვის.

ტექსტის ჩრდილები

text-shadow თვისება ტექსტს ამატებს ჩრდილს. ამ უმარტივეს მაგალითში განსაზღვრულია ვერტიკალური (2px) და ჰორიზონტალუირი (2px) ჩრდილები h1 {
    text-shadow: 2px 2px;
} აგრეთვე შესაძლებელია ჩრდილის ფერის განსაზღვრაც h1 {
    text-shadow: 2px 2px red;
} შესაძლებელია ჩრდილის ბუნდოვნების დამატებაც მესამე პარამეტრის დახმარებით h1 {
    text-shadow: 2px 2px 2px red;
}

ელემენტის ჩრდილები

ელემენტის ჩრდილს განსაზღვრავს box-shadow თვისება. ამ მაგალითში განსაზღვრულია ვერტიკალური (10px) და ჰორიზონტალუირი (10px) ჩრდილები, აგრეთვე დამატებულია ჩრდილის ბუნდოვნება და ფერი div {
    box-shadow: 10px 10px 5px grey;
}

ბარათები

box-shadow თვისების დახმარებით შეიძლება მივიღოთ ბარათის, ფურცლის შუქჩრდილების მსგავსი ეფექტი div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}



6. ტექსტი

ტექსის ჩატევა ელემენტში

CSS3 text-overflow თვისება განსაზღვრავს თუ რა უნდა მოხდეს როდესაც შიგთავსი ტექსტი ელემენტში არ ეტევა. ტექსტი შეიძლება გაწყდეს ან არჩტეული შიგთავსი შეიძლება გამოისახოს მრავალწერტილით p.test1 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip;
}

p.test2 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}



გრძელი სიტყვების აბზაცში ჩასატევად გამოიყენება word-wrap თვისება. როდესაც სიტყვა საკმაოდ გრძელია იმისათვის რომ ხელმისაწვდომ არეში ჩაეტიოს, ის ცდება ელემენტის საზღვრებს

ეს აბზაცი შეიცავს ძალიან გრძელ სიტყვას: ძალიანგრძელისიტყვა.

საჭიროა რომ ეს სიტყვა გაწყდეს და გადავიდეს ახალ ხაზზე. ამისათვის გამოიყენება word-wrap: break-word; (ინგ. break: შექყვეტა, გაწყვეტა)

ეს აბზაცი შეიცავს ძალიან გრძელ სიტყვას: ძალიანგრძელისიტყვა.

text-align-last თვისება განსაზღვრავს თუ როგორ უნდა განთავსდეს ტექსტის ბოლო ხაზი, ეს თვისება მუშაობს მხოლოდ იმ ელემენტებთან რომლებსაც text-align თვისების მნიშვნელობად მითითებული აქვთ justify.
7. ჩვენი საკუთარი შრიფტი

@font-face

დეველოპერს საშუალება ეძლევა გამოიყენოს არამარტო კომპიუტერში დაინსტალირებული შრიფტები. როდესაც სასურველ შრიფყს ვიპოვით, შრიფტის ფაილი უბრალოდ უნდა მოვათავსოთ სერვერზე და ის ავტომატურად გადაიწერება მომხმარებელთან როცა ეს საჭირო გახდება. ჩვენი "საკუთარი" შრიფტები CSS3-ში განისაზღრება @font-face წესით. ჯერ უნდა განვსაზღროთ შრიფტის დასახელება მაგალითად myFirstFont შემდეგ კი მივუთითოთ შრიფტის ფაილი (ფონტის URL-ის ჩაწერისას ყოველთვის უნდა გამოვიყენოთ პატარა ასოები, წინააღმდეგ შემთხვევაში შეიძლება შეცდომა დაფიქსირდეს IE-ს მოხმარებისას). @font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}
8. 2D ტრანსფორმაციები
ტრანსფორმაცია ეს არის ეფექტი რომელიც ცვლის ელემენტის ფორმას, ზომას და მდებარეობას, CSS3-ში გვხვდება 2D და 3D ტრანსფორმაციები.

translate() მეთოდი

translate() მეთოდი გადააადგილებს ელემენტს თავისი საწყისი პოზიციიდან მითითებული პარამეტრების შესაბამისად (პარამეტრები X და Y ღერძებისათვის) მოყვანილი მაგალითი გადააადგილებს <div> ელემენტს 50px-ით მარჯვნივ და 100px-ით დაქვემოთ თავისი საწყისი პოზიციიდან div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}

rotate() მეთოდი

rotate() მეთოდი აბრუნებს ელემენტს საათის ისრის მიმართულებით ან მის საწინააღმდეგოდ პარამეტრტად მითითებული რიცხვის ტოლი გრადუსით. მოყვანილი მაგალითი ამოაბრუნებს <div> ელემენტს საათის ისრის მოძრაობის მიმართულებით 20 გრადუსით: div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
} საათის ისრების მოძრაობის საწინააღმდეგო მიმართულებით გადასაბრუნებლად უნდა მივუთითოთ გრადუსის განმსაზღვრელი უარყოფითი პარამეტრი.

scale() მეთოდი

scale() მეთოდი ზრდის ან ამცირებს ელემენტის სიგრძესა და სიგანეს მითითებული პარამეტრების მიხედვით. მოყვანილი მაგალითი გაზრდის <div> ელემენტის სიგანეს 2-ჯერ ხოლო სიმაღლეს 3-ჯერ: div {
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
} ზომების შესამცირებლად უნდა გამოვიყენოთ 1-ზე ნაკლები მნიშვნელობები, მაგ: transform: scale(0.5, 0.5);

skewX() მეთოდი

skewX() მეთოდი ხრის ელემენტს X ღერძის მიმართ მიმართებაში მითითებული კუთხით, მოყვანილი მაგალითი დახრის <div> ელემენტს X ღერძის მიმართ 20 გრადუსით: div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
} ანალოგიურად მუშაობს skewY() მეთოდიც Y ღერძთან მიმართებაში, ხოლო ერთდროულად ორივე ღერძის მიმართ გადასახრელად გამოიყენება skew() მეთოდი. გარდა ამ მეთოდებისა არსებობს კიდევ matrix() მეთოდი რომელიც ყველა ზემნოთ აღწერილ მეთოდს აერთიანებს.
9. 3D ტრანსფორმაციები
<!DOCTYPE html>
<html>
<head>
<style>
    .flip3d{
       width: 240px;
       height: 200px;
       margin: 10px;
       float: left;
    }

    .flip3d > .front{
       position: absolute;
       transform: perspective( 600px ) rotateY( 0deg );
       background: orange;
       width: 240px;
       height: 200px;
       border-radius: 7px;
       backface-visibility: hidden;
       transition: transform .5s linear 0s;
    }

    .flip3d > .back{
       position: absolute;
       transform: perspective( 600px ) rotateY(180deg);
       background: red;
       width: 240px;
       height: 200px;
       border-radius: 7px;
       backface-visibility: hidden;
       transition: transform .5s linear 0s;
    }

    .flip3d:hover > .front{
       transform: perspective( 600px ) rotateY(-180deg);
    }

    .flip3d:hover > .back{
        transform: perspective( 600px ) rotateY(0deg);
    }
</style>
</head>
<body>
    <div class="flip3d">
       <div class="back">ბლოკი 1 - უკანა მხარე</div>
       <div class="front">ბლოკი 1 - წინა მხარე</div>
    </div>
</body>
</html>
ბლოკი 1 - უკანა მხარე
ბლოკი 1 - წინა მხარე
ბლოკი 2 - უკანა მხარე
ბლოკი 2 - წინა მხარე
ბლოკი 3 - უკანა მხარე
ბლოკი 3 - წინა მხარე
10. ელემენტთა გარდაქმნა, transition ეფექტი
CSS3 transition თვისება საშუალებას გვაძლევს შევცვალოთ ელემენტის თვისებები ანიმაციის ეფექტის თანხლებით. იმისათვის რათა გამოვიყენოთ ეს ეფექტი, უნდა განვსაზღროთ ორი რამ
  • CSS თვისება რომელიც გვინდა რომ დავამატოთ ელემენტს
  • ეფექტის ხანგრძლივობა ანუ დრო, თუ ამ პარამეტრს არ განვსაზღრავთ ეფექტს ვერ ვიხილავთ რათგან ნაგულისმეობის პრინციპით ეს დრო არის 0.
მოყვანილი მაგალითი გვაჩვენებს 100px X 100px ზომების წითელ <div> ელემენტს რომელსაც აგრეთვე განსაზღვრული აქვს transition ეფექტი სიგამისათვის, ეფექტის ხანგრძლივობაა 2 წამი: div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
} უნდა აღინიშნოს რომ ელემენტს დაუბრუნდება საწყისი მონაცემები როდესაც მაუსი მოშორდება მას. შესაძლებელია რომ transition ეფეტი მიეთითოს რამოდენიმე თვიდებას ერთად და ამავე დროს ყველა ეფექტს სხვადასხვა ხანგრძლივობა ჰქონდეს: div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

ეფექტის აჩქარების მითითება

ეფექტის აჩქარების მითითება ხდება transition-timing-function მეთოდის დახმარებით, მან შეიძლება მიიღოს შემდეგი მნიშვნელობები
  • ease - ნელი დასაწყისი, შემდეგ სწრაფი, ბოლოს ისევ შენელებული (ნაგულისმეობის პრინციპით)
  • linear - თანაბარი სიჩქარე
  • ease-in - ნელი დასაწყისი
  • ease-out - ნელი დასასრული
  • ease-in-out -ნელი დასაწყისი და დასასრული
  • cubic-bezier(n,n,n,n) - საშუალება გვეძლევა ჩვენ თვითონ განვსაზღვროთ აქარებები
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

გარდაქმნა + ტრანსფორმაცია

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 300px;
    height: 300px;
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
}
11. ანიმაციები
CSS3 საშუალებას გვაძლევს შევქმნათ ანიმაციები HTML ელემენტების საშუალებით JavaScript-ისა და Flash-ის გარეშე.

რა არის CSS3 ანიმაცია ?

ანიმაციის მეშვეობით html ელემენტი სტილს იცვლის ეტაპობრივად, შეგვიძლია შევცვალოთ რამდენი თვისებაც გვინდა იმდენი და რამდენჯერაც გვინდა, თავდაპირველად უნდა შევქმნათ ანიმაციის ნიმუშები (keyframes) და დავარქვათ მათ სახელები , ეს ნიმუშები ინახავენ სტილებს რომლებიც უნდა მიენიჭოთ ელემენტებს დროის განსაზღვრულ მომენტში.

@keyframes

როდესაც @keyframes-ში ვუთითებთ სტილებს ანიმაცია ეტაპობრივად ცვლის ძველ სტილებს ახლით, დროის განსაზღვრულ მონაკვეთში, მოყვანილი მაგალითი ანიმაციას სახელად "example", აკავშირებს <div> ელემენტთან, ანიმაცია გრძელდება 4 წამის განმავლობაში და <div> ელემენტის წითელი ფონი ეტაპობრივად იცვლება - ყვითლით: /* ანიმაციის აღწერა */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* ანიმაცია დაუკავშირდა ელემენტს */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
} animation-duration თვისების მითითება აუცილებელია, ამის გარეშე ეფექტს ვერ მივიღებთ. ზემოთ აღწერილ მაგალითში ჩვენ გამოვიყენეთ სიტყვაგასაღებები "from" და "to" (0% (სტარტი) და 100% (დასასრული)). შესაძლებელია პროცენტების გამოყენებაც, ამ შემთხვევაში შეგვიძლია დავამატოთ შეუზღუდავი რაოდენობა სტილთა ცლილებისა /* ანიმაციის აღწერა */
@keyframes example {
    0% {background-color: red;}
    25% {background-color: yellow;}
    50% {background-color: blue;}
    100% {background-color: green;}
}

/* ანიმაცია დაუკავშირდა ელემენტს */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

ანიმაციის განმეორება

animation-iteration-count მეთოდის მეშვეობით შესაძლებელია მივუთითოთ თუ რამდენჯერ უნდა განმეორდეს ანიმაცია div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
} თუ გვსურს რომ ანიმაცია უსასრულოდ გაგრძელდეს, უნდა მივუთითოთ animation-iteration-count: infinite;

ანიმაციის მიმართულება

ანიმაციის მიმართულებას განსაზღვრავს animation-direction თვისება. საწინააღმდეგო მიმართულებით ანიმირებისათვის უნდა მივუთითოთ animation-direction: reverse; ხოლო თუ გვსურს რომ მიმართულებები შეიცვალოს წინ და უკან - animation-direction: alternate;

რაც შეეხება ანიმაციის აჩქარებების მართვას - ეს ხდება animation-timing-function თვისების დახმარებით, რომელიც ზუსტად ისევე მუშაობს როგორც transition-timing-function, ამიტომ მასზე აქ აღარ ვისაუბრებთ დაწვრილებით.
12. სურათები

filter თვისება

filter თვისება ამატებს სურათს ვიზუალურ ეფექტებს (მაგ. ბუნდოვნება ან ფერთა სიმკვეთრე). მოყვანილი მაგალითი სურათს გახდის შავ-თეთრს (100% რუხი) img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
} სურათის ეფექტების სრული სია კი ასეთია:
  • blur - ბუნდოვნება
  • brightness - სიკაშკაშე
  • contrast - კონტრასრულობა
  • grayscale - შავ-თეთრობა
  • huerotate
  • invert
  • opacity - გაუმჭვირვალეობა
  • saturate - ფერთა სიმკვეთრე
  • sepia
  • shadow - ჩრდილი
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}



13. მრავალსვეტიანი შიგთავსი

column-count

column-count თვისება განსაზღვრავს თუ რამდენ კოლონად, სვეტად უნდა დაიყოს ელემენტი. მოყვანილი მაგალითი <div> ელემენტს დაყოფს 3 სვეტად: div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

column-gap

column-count თვისება განსაზღვრავს კოლონებს შორის მანძილს. .newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 10px;
}

column-rule-style, column-rule-width, column-rule-color

column-rule-style თვისება განსაზღვრავს კოლონებს შორის არსებული მიჯნის სტილს. column-rule-width თვისება განსაზღვრავს მიჯნის სიგანეს, column-rule-color თვისება განსაზღვრავს მიჯნის ფერს, ამ ყველაფრის შემოკლებული და გამაერთიანებელი ვარიანტი კი არის column-rule თვისება .newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
} }

column-span

დავუშვათ ტექსტი დავყავით 3 კოლონად, მაგრამ ტექსტის წინ გვაქვს h2 ელემენტი. column-span თვისება განსაზღვრავს თუ რამდენ ელემენტს უნდა გადაეფაროს (უხეშად რომ ვთქვათ) ეს h2 ელემენტი h2 {
    -webkit-column-span: 1; /* Chrome, Safari, Opera */
    column-span: all;
}

column-width

column-width თვისება განსაზღვრავს კოლონების სიგანეს .newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    -moz-column-width: 100px; /* Firefox */
    column-width: 100px;
}
14. ელემენტთა ზომები, box-sizing
CSS3 box-sizing საშუალებას გვაძლევს ელემენტის შიდა მიჯნები და ჩარჩო მოვაქციოთ ელემენტის ჯამურ სიგანეში და სიმაღლეში.

ელემენტები box-sizing თვისების გარეშე

ნაგულისხმეობის პრინციპით ელემენტის სიგანე და სიმაღლე ითვლება შემდეგნაირად:
სიგანე + შიდა მიჯნა + ჩარჩოს სისქე = ელემენტის სიგანე
სიმაღლე + შიდა მიჯნა + ჩარჩოს სისქე = ელემენტის სიმაღლე

ეს ნიშნავს: როდესაც ელემენტს ვუთითებთ სიგანე/სიმაღლეს, ელემენტის ზომები ხშირად აჭარბებს ჩვენს მიერ მითითებულს (იმიტომ რომ ელემენტის ჩარჩო და შიდა მიჯნები ემატება ჩვენს მიერ მითითებულ სიგანე/სიმაღლეს). ამ ორ ელემენტს მითითებული აქვთ ერთნაირი სიგანე/სიმაღლეები მაგრამ მეორე მათგანი უფრო დიოდია რადან მას მითითებული აქვს შიდა მიჯნებიც - padding:

ეს div ელემენტი პატარაა (სიგანე 300px სიმაღლე 100px).

ეს div ელემენტი წინაზე დიდია (სიგანე 300px სიმაღლე 100px).

ამ პრობლემის მოგვარებაში გვეხმარება box-sizing თვისება.

ელემენტები box-sizing თვისებით

თუ ელემენტს მივუთითებთ box-sizing: border-box; მაშინ მისი ჩარჩოებიც და შიდა მიჯნებიც ჩაეტევა მითიტებულ სიგანე/სიმაღლეში

ორივე ელემენტი თანაბარი ზომისაა

; )))

15. მედია მოთხოვნები, @media
@media წესები დავდაპირველად გაჩნდა CSS2-ში, ამით მოხერხდა სხვადასხვა სტილების განსაზღვრა მედიის სხვადასხვა ტიპებისათვის. ჩვენ შეიძლება გვქონდეს სტილების ერთი ნაკრები კომპიუტერისათვის, მეორე პრინტერისათვის, მესამე მობილური ტელეფონისათვის და ა.შ CSS3-ში მოხდა მედია მოთხოვნების განვრცობა, მოწყობილობის ტიპის გარკვევის მაგივრად აქცენტი გაკეთდა მოწყობილობის შესაძლებლობებზე. მედია მოთხოვნები შეიძლება გამოვიყენოთ ისეთი საკითხების გასარკვევად როგორტებიცაა:
  • თვალთახედვის არის სიგანე და სიმაღლე
  • მოწყობილობის სიგანე და სიმაღლე
  • და ა.შ

მედია მოთხოვნების სინტაქსი

@media not|only mediatype and (expressions) {
    CSS-Code;
} მოთხოვნის შედეგი არის ჭეშმარიტი თუ განსაზღვრული მედიის ტიპი ემთხვევა მოწყობილობის ტიპს. როდესაც მოთხოვნა ჭეშმარიტია მასში აღწერილი სტილები სრულდება ძირითად სტილებთან ერთად. შესაძლებელია აგრეთვე ცალ-ცალკე სტილების განსაზღვრა სხვადასხვა ტრიპის მედიისათვის <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 მედია ტიპები

  • all- ყველანაირი მედია მოწყობილობა.
  • print - პრინტერები
  • screen - კონპიუტერის ეკრანები, სმარტფონები და ა.შ.
  • speech
მოვიყვანოთ მედია მოთხოვნის მარტივი მაგალითი, სასურველია მედია მოთხოვნებს გამოვუყოთ ხოლმე ცაკლკე სექცია css ფაილში, მოყვანილი მაგალითი შეცვლის ფონის ფერს ღია მწვანე ფერით თუ თვალთახედვის არე არის 480 პიქსელი ან მეტი სიგანის (თუ თვალთახედვის არის სიგანე არის 480 პიქსელზე ნაკლები, ფონის ფერი იქნება ვარდისფერი body {     background-color: pink; }

@media screen and (min-width: 480px) {
    body {
       background-color: lightgreen;
    }
}



რეაგირებადი ვებ-დიზაინი (Responsive Web Design)




1. შესავალი

რა არის რეაგირებადი ვებ-დიზაინი ?

რეაგირებადი ვებ-დიზაინის მეშვეობით ვებ-გვერდი სწორად და კორექტულად იხსნება სხვადასხვა ხელსაწყოებში (დიდ, საშუალო პატარა და ა.შ ეკრანებზე), იგი იყენებს მხოლოდ HTML და CSS-ს.

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

ინგლისურად : Responsive - რეაგირებადი; მგრძნობიარე დავუშვათ კონკრეტულ მომენტში ბრაუზერის ფანჯრის სიგანეა 1080 პიქსელი და ვებ-გვერდის შიგთავსი საკმაოდ კარგად და კორექტულად ჩანს მასში. რა მოხდება თუ გავადიდებთ ან შევამცირებთ ბრაუზერის ფანჯრის სიგანეს ? ბრაუზერი შეეცდება მოძებნოს მისი ახალი სიგანის შესაბამისი css სტილები და იმის მიხედვით დააგენერიროს, გადააწყოს გვერდის შიგთავსი. ანუ ეკრანის ზომის ცვლილებაზე დიზაინმაც უნდა მოახდინოს ცვლილება, რეაგირება. მარტივი ენით თუ ვიტყვით : რეაგირებადი დიზაინი ეწოდება დიზაინს, რომელიც რეაგირებს ეკრანის ზომების ცვლილებაზე :))
2. ხედვის არე, Viewport

რა არის ხედვის არე ?

ხედვის არე არის ვებ-გვერდის ნაწილი რომელიც ხილვადია მომხმარებლისთვის.



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

ხედვის არის განსაზღვრა

HTML5-მა დეველოპერებს საშუალება მისცა ეკონტროლებინათ ხედვის არე <meta> ტეგის საშუალებით <meta name="viewport" content="width=device-width, initial-scale=1.0"> ხედვის არის ელემენტი <meta> წარმოადგენს ბრაუზერის ინსტრუქციას, ზომების მართვისა და გვერდის მასშტაბირების შესახებ. width=device-width ნაწილი განსაზღვრავს გვერდის სიგანეს მოწყობილობის ეკრანის ზომიდან გამომდინარე, initial-scale=1.0 ნაწილი მიუთითებს გვერდის მასშტაბირების ხარისხს მისი ჩატვირთვისას.
3. ვებ-გვერდის წარმოდგენა ბადისებურად

რა არის ბადისებური ხედვა ?

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



რეაგირებადი დიზაინის ბადისებურ წარმოდგენას ხშირად აქვს ხოლმე 12 სვეტი და სიგანის 100%. სიგანე იზრდება და მცირდება ბრაუზერის ფანჯრის ზომების ცვლილების შესაბამისად.

რეაგირებადი დიზაინი ბადისებური ხედვით

პირველ რიგში უნდა დავრწმუნდეთ რომ ყველა html ელემენტს მინიჭებუკი აქვს box-sizing თვისება და ამ თვისების მნიშვნელობა არის border-box, ეს იმას ნიშნავს რომ ელემენტის ჩარჩოები და შიდა მიჯნები შესულია ელემენტის სიგანე-სიმაღლეში: * {
    box-sizing: border-box;
}
.menu {
    width: 25%;
    float: left;
}
.main {
    width: 75%;
    float: left;
} ეს მაგალითი მოგვცემს შემდეგ სურათს



ეს ორი სვეტის შემთხვევაში მაგრამ დავუშვათ გვინდა რომ ბადე შედგებოდეს 12 სვეტისაგან, პირველ რიგში უნდა დავთვალოთ ერთი სვეტის სიგანე 100% / 12 სვეტი = 8.33%. შემდეგ თითოეულ სვეტს მივანიჭოთ თერთნაირი კლასი class="col-" და პლიუს რაოდენობა იმ სვეტებისა რომელიც გვინდა რომ მოთავსდეს ამა თუ იმ განყუოფილებაში .col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
4. რეაგირებადი დიზაინის მარტივი ნიმუში, @media
<!DOCTYPE html>
<html>
<head>
   <title>HTML5 და CSS3 </title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
     #container{
       width:960px;
       margin:0px auto;
     }
     #left-column{
       width:700px;
       float:left;
       background:blue;
       box-sizing: border-box;
       padding: 15px;
       color: white;
     }
     #right-column{
       width:260px;
       float:left;
       background:orange;
       box-sizing: border-box;
       padding: 15px;
       color: white;
     }
     .banner{
       width:100%;
     }

     @media screen and (max-width:959px){
       #container{
         width:100%;
       }
       #left-column{
         width:70%;
       }
       #right-column{
         width:30%;
       }
     }

     @media screen and (max-width:640px){
         #left-column{
           width:100%;
        }
        #right-column{
          width:100%;
        }
       }

   </style>
</head>

<body>
     <div id='container'>
         <img src='banner.png' class='banner'>
          <section id='left-column'>
             ეს არის მარცხენა სექცია
         </section>
         <aside id='right-column'>
             ეს არის მარჯვენა სექცია
         </aside>
     </div>
</body>
</html>
 ამ მაგალითის შედეგია:





4. სურათები
მივუთითოთ სხვადასხვა სურათი გვერდის ფონად სხვადასხვა სიდიდის ეკრანისათვის /* 400px - ზე ნაკლები სიგანის ეკრანი */
body {
    background-image: url('img_smallflower.jpg');
}

/* 400px - ზე მეტი სიგანის ეკრანი */
@media only screen and (min-width: 400px) {
    body {
       background-image: url('img_flowers.jpg');
    }
}