სარჩევი

HTML BASIC.........................................................................................................4
სურათის ჩამატება HTML - ში........................................................................5
Copyright free Image Sites:...............................................................................6
სურათის ზომა და გადიდება/დაპატარავება:............................................6
Links in HTML...................................................................................................6
სხვადასხვა გვერდები HTML - ში...............................................................7
გვერდის სათავეში დასაბრუნებელი ლინკის ფუნქცია..........................7
ლინკში სურათი..........................................................................................8
სტილური წერის ელემენტები......................................................................9
არეულად წერის ელემენტი..........................................................................9
მუქი და დახრილი ელემენტები...............................................................9
Special character...........................................................................................9
ნომრების და რგოლების ელემენტები.......................................................10
Table ელემენტები........................................................................................10
Form ელემენტები.........................................................................................11
Internal, External, Inline CSS...........................................................................16
Inline CSS.....................................................................................................16
Internal CSS.................................................................................................16
External CSS ანუ თავად style.css...............................................................17
Cascading Syle Sheets – CSS...............................................................................17
საბაზისო Css Syntax და წესები და სახელები............................................18
Id და Class სელექტორები............................................................................20
Span და Div ელემენტები.............................................................................21
ფერები CSS - ში.............................................................................................22
RGB Colors...................................................................................................23
 RGBA colors.................................................................................................23
HSL colors....................................................................................................23
Value Absolute Value........................................................................................24
Percent Value %...........................................................................................24
em – Relative...............................................................................................25
rem – Relative.............................................................................................25
Vh და vw value...........................................................................................25
calc function (?) ჯერ ვერ გავიგე...............................................................26
Typography - ტიფოგრაფია css ში................................................................26
Font family..................................................................................................26
Google Fonts...............................................................................................27
Font & Text customation.............................................................................27
CSS Box Model................................................................................................28
border- style......................................................................................................29
border-radius...............................................................................................30
Border სინტაქსი..............................................................................................30
Border outline & offset................................................................................31
Display Property..........................................................................................32
Horizontal Centering....................................................................................33
Content & Border Box..................................................................................34
opacity & display: none; & visability............................................................34
CSS Background..............................................................................................34
background-repeat:.....................................................................................35
float & clear ელემენტები...........................................................................36
Media Queries.............................................................................................37
z index.........................................................................................................38
Pseudo elements............................................................................................38
 p::before/after { content: “…”}....................................................................38
სურათი div ში...........................................................................................39
CSS Selector - ები...........................................................................................40
:hover სელექტორი....................................................................................41
:link :visited :hover :active ელემენტები.....................................................41
root ელემენტი (?)......................................................................................42
Transform / Animation ელემენტები.............................................................42
Transition.......................................................................................................42
SHORTCUTS:
ALT + Mouse click - ერთად მონიშვნა მაუსით სიტყვებთან, თუ
რამე ჩასაწერია ან წასაშლელი რამდენიმე ხაზში იდენტურად
წერს/შლის.
CTRL + LEFT / RIGHT - სიტყვებით გადასვლა
HOME / END - ხაზის თავში და ბოლოში გადასვლა
CTRL + D - ერთიდაიმავე ელემენტების მონიშნა
SHIFT + ALT + UP - ელემენტის პირდაპირ ქვემოთ კოპირება
CTRL + \ - მეორე ფანჯრის გახსნა ნახევარ ეკრანზე
SHIFT + ENTER (ჩემთან) (სახელი: INSERT LINE BELOW) - პირდაპირ
ქვემოთ ჩამოსვლა, თუდნაც ელემენტის შუიდან
CTRL + SHIFT + ENTER - ახალი ლაინის შექმნა, ისე რომ მიმდინარე
ლაინი ქვემოთ ჩამოვიდეს
SHIFT + K + K – (ჩემთან) (სახელი Comment) კომენტარი
ALT + UP / DOWN - ასვლა / ჩამოსვლა
SHIFT + ALT + CTRL + UP / DOWN - ლაინების მონიშვნა
CTRL + END / HOME - თავში / ბოლოში ასვლა
ALT + SHIFT + მაუსით მონიშვნა ლაინების - ერთად რამდენიმე
ლაინზე მითითებული კლიკიდან წერა
F2 - სახელის გადარქმევა
Ctrl + Space – suggestion - ანუ ელემენტის ჩაწერის შემდეგ
შემოთავაზება როა ეგ თუ გაქვიქრა დააბრუნებს
HTML BASIC

! ---------> გამოჰყავს საბაზისო HTML გვერდის სტრუქტურა:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,
initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

LOREM - რენდომ სიტყვები - ციფრის გვერდზე მიწერით ამოაგდებს

მითითებული რაოდენობის სიტყვებს (მაგ: Lorem30 = 30 სიტყვიან
ტექსტს)

სურათის ჩამატება HTML - ში

სურათის ჩამატებისთვის ვწერთ img:

src="" alt="">
source - წყარო სურათის, საიდან ავიღეთ სურათი.
alternative - თუ წყაროში რამე არასწორადაა, დარქმეული სახელი alt- ში
საიტზე გამოჩნდება.
სურათი უნდა ჩავაგდოთ პროექტის ფაილში.
სურათებისთვის კი პროგრამაში ცალკე ფაილი უნდა შევქმნათ, სადაც
ყველა სურათს ერთად მოვათავსებთ.
იმისთვის რომ სურათი გამოჩნდეს ფაილის გახსნისას, ატვირთული
სურათის ტექსტს უნდა წავუშალოთ / ან მივაწეროთ ./ თუ სხვაგანაა ../

<img src="./man-4203784_960_720.webp" alt="">

Copyright free Image Sites:

www.Pixabay.com
www.Pexels.com
www.Gratisography.com

სურათის ზომა და გადიდება/დაპატარავება:

ზომის გასაგებად, პროგრამაში დავაჭერთ სურათს, სადაც მარჯვენა ქვედა

კუთხეში გვიჩვენებს მის სიგრძე/სიგანეს.
ზომის შეცვლა შესაძლებელია source და alts შორის width და height
ჩაწერით, შემდეგ კი სასურველი ზომის მითითებით.
თუმცა, ზომის ამ ხერხით შეცვლა კარგი გზა არ არის, რადგან საიტი
საწყის ზომას არენდერებს, რაც შემდგომში ლაგებს და გადატვირთვის
სინელეს გამოიწვევს.
სწორი გზა: Photoshop / სახის პროგრამა ან crop – ით მაკის ან
ვიუნდოუსის აპლიკაციებში.
< ! - - Shortcut: CTRL + K + C / K + U ყოველთვის გამოიყენე კომენტარი.
კომენტარის საშუალებით შესაძლებელია კოდის ან რაიმე ტექსტის
შენანხვაც ისე, რომ არ გამოჩნდეს საიტზე.
<br – break - გამოყოფა სურათებს ან ტექსტებს შორის. დისტანციის
გაზრდა შესაძლებელია იმდენი break - ით რამდენ კოდსაც ჩავწერთ.
Links in HTML

<a - ლინკიზე გადასასვლელი:

<a href=""></a>
ბრჭყალებში ვაკოპირებთ საიტის ან სასურველ ლინკს.
target - ლინკზე დაჭერის შემთხვევაში პირდაპირ გახსნის ახალ ფანჯარას
და ისე გადავა მომხმარებელი მითითებულ ლინკზე. (open link in new
window). ბრჭყალებში კი ვწერთ “blank”. მაგ:

<a href="საიტის ლინკი" target="blank">ტექსტი მაგ: ლინკზე

გადასასვლელად დააკლიკეთ</a>

სხვადასხვა გვერდები HTML - ში

სხვადასხვა პროექტებისთვის გვექნება სხვადასხვა გვერდები,

მაგალითად about, contact და ა.შ გვერდები. დაჭერით ლინკზე
გადასასვლელად კი ვაკეთებთ ახალ ფაილს ანუ ახალ გვერდს, ამ
შემთხვევაში about ფაილს და სახელს ვაწერთ about.html
შემდეგ ისევ ! - კომანდით ვაკეთებთ ახალ სტრუქტურას. დასახელებაში
ვწერთ სახელს გვერდის.

<title>About</title>
<body - ს ქვემოთ ვწერთ ლინკის კომანდს, ანუ a - ს. ბრჭყალებში კი ვწერთ
ლინკს, რომლითაც ამ გვერდიდან გადავალთ ისევ უკან, ან სხვა
გვერდზე, ხოლო > შორის კი ტექსტს.

<body>
    <a href="index.html">ტექსტი,მაგ:back to homepage</a>
</body>
გადმოვდივართ ისევ index.html გვერდზე და კვლავ body - ში ვწერთ a და
ბრჭყალებში about.html
   <a href="about.html">About</a>

გვერდის სათავეში დასაბრუნებელი ლინკის ფუნქცია

მაგალითად back to top - ანუ როდესაც დაკლიკებისას ქვემოდან ისევ

თავში, ზემოთ აღმოჩნდები, იმისთვის რომ სქროლვა არ მოგიწიოს.
ამისათვის არსებობს ორი ხერხი:
1. პარაგრაფის (p) და Lorem -ის გამოყენებით, მაგალითად დიდი
ტექსტის ჩაწერით Lorem500.
2. Br - ანუ ბრეიქები
შემდეგ ვაკეთებთ პარაგრაფს და რაიმე ტექსტს ვსვამთ, როგორც
საიტებზეა, უკვე შემდეგ კი ვაკეთებთ ლინკს a , შემდეგ ბრჭყალებში
ვარქმევთ თავის სახელს, დანიშნულების მიხედვით და # - ის შემდეგ,
ანუ #top

<br>
<p>რაიმე ტექსტი</p>
<a href="#top">back to top</a>
ზემოთ კი, ისევ body - ის ქვემოთ, ვაკეთებთ ჰედინგს (h), ვარქმევთ
სახელს და <> შუაში ჰედინგს შემდეგ ვწერთ id= და ბრჭყალებში სახელს,
ამ შემთხვევაში, რახან top დავარქვით, top - ს.

<body>
    <h1 id="top">top of the page</h1>
ლინკში სურათი

ვწერთ ლინკის კომანდს a და ვუთითებთ საიტის ლინკს სადაც სურათზე

დაჭერით უნდა გადავიდეთ, შემდეგ ჩამოვდივართ ქვემოთ, </a> - მდე
ვწერთ img და ვირჩევთ სასურველ სურათს.თუ url არ ვიცით ვწერთ „_ში #

   <a href="https://www.youtube.com">
       <img src="/image folder/istockphoto-831622276-
170667a.jpg" alt="">
   </a>

სტილური წერის ელემენტები

არეულად წერის ელემენტი

<h1>Hello I'm ^BEST GuGa _{In Town}</h1>

მუქი და დახრილი ელემენტები

<p>Lorem  ipsum dolor sit  <strong>amet consectetur</strong>

adipisicing elit. Laborum autem aperiam <em>architecto
exercitationem!</em> Magni suscipit nihil sequi optio ipsa
sunt.</p>
Special character - ები ანუ % $ და ა.შ იწერება & ით

<h2> Copyright &copy; &dollar;5 </h2>

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

პირველ რიგში ვწერთ ul და შუაში რგოლებისთვის

ვწერთ li ხოლო ნომრებისთვის. ol = ნომრების. HTML list -
ით გუგლში ნახავ ბევრ ნუმერაციის ელემენტებს. ასევე
შეგიძლია ჩასვა ლინკები. CSS - ში, ლისტის ტიპის მისაცემად, ვიყენებთ
list-style-type: …; სხვადასხვა ლისტებია, მაგალითად რომაული ციფრები,
კუბიკებიანი ლისტი რგოლების ნაცვლად და ა.შ

<ul>

    <li> <a href="about.html"> About</a> </li>

    <li> <a href=""> Contact</a> </li>
    <li> <a href=""> Support</a> </li>  
</ul>

Table ელემენტები

    <table>
        <tr>
            <th>some info</th>
            <th>some info</th>
            <th>some info</th>
        </tr>
        <tr>
            <td>guga</td>
            <td>bao</td>
            <td>gega</td>      
        </tr>  
       </table>

მარტივი მაგალითი - დანარჩენს გუგლში HTML Table list - ით ნახავ

Form ელემენტები

HTML - ში ფორმის შევსება ხდება form ჩაწერით, მონაცემების

შესაგროვებლად გვჭირდება BackEnd პროგრამა php და ა.შ. საიტი
formspree.io –თი data იგზავნება მეილზე. Input - კოდით შემოგვაქვს
სხვადასხვა შესავსები საშუალება, მაგალითად ჩასაწერი, შემოსახაზი,
ასარჩევი და ა.შ submit - ფორმის გასაკკეთებლად ვიყენებთ button. Button -
ის ელემენტის დასახურ კოდში, ანუ </button>- მდე ვწერთ submit.
submitis გაკეთება ასევე შესაძლებელია Input - ითაც. (input:submit). \
Label - ით როდესაც ჩასაწერ ფანჯარას დავაჭერთ, მოინიშნება, ანუ
highlitht -ს გაუკეთებს. სწორედ ამისთვისაა საჭირო id - რომელიც input-ს
აქვს.
მისი დანიშნულებაა ელემენტის იდენტიფიცირება დაკავშირებისას
(ფრაგმენტის იდენტიფიკატორის გამოყენებით), სკრიპტირების ან
სტილის შექმნისას, lable - ს აკავშირებს input -თან. Lable input - ის
სათაურია.
მიწერა გვერდზე, ანუ გრაფის ტექსტის, თუ რა უნდა ჩავწეროთ
(მაგალითად სახელის ჩასაწერ გრაფას აწერია first name), შეგვიძლია
როგორც lablet - თი </label> -მდე, ან პარაგრაფით.
Input:password - იმისათვის რომ პაროლი არ გამოჩნდეს აკრეფისას, id- ის
შემდეგ ვწერთ - placeholder.
Input:email - მეილი იგივენაირად როგორც password. Placeholder- ს აქ არ
ვხმარობთ. შესაძლოა ვიხმაროთ value - არის კომპიუტერული პროგრამის
ნაწილი, რომელიც არ შეიძლება შეიცვალოს არანაირად. ეს ნიშნავს, რომ
თუ პროგრამული უზრუნველყოფა უკვე დაკომპლექტებულია და
გადაკეთებულია შესრულებად, პროგრამის მყარი კოდირებული ნაწილი
რჩება მუდმივი, რაც არ უნდა გაკეთდეს პროგრამული უზრუნველყოფის
მიმართ.
<value - ს გამოყენება ასევე შესაძლებელია submit - თან, ტექსტის
გასადიდებლად, მაგალითად submit please.
<textarea - ვრცელი ტექსტის ჩასაწერი, მაგალითად შენს შესახებ
ინფორმაციას როცა გთხოვენ, ან დამატებით ვრცელ ტექტს.
<Input:radio - ასარჩევი რგოლები, სადაც რამდენიმედან აირჩევ ერთს.
(მაგლითად აქ, 3 პროგრამიდან ვირჩევთ საყვარელს) name - ში
აუცილებლად უნდა ემთხვეოდეს ჩაწერილი რამე ტექსტი, რათა
შევძლოთ მხოლოდ ერთის არჩვა. ასევე, უნდა ჩავწეროთ აიდის შემდეგ
value=“და იგივეს რასაც ვირჩევთ, მაგალითად ამ შემთხვევაში Javascript”,
მეორეში ჩაიწერება python და მესამეში, შესაბამისად HTML. ეს ყველაფერი
საჭიროა ბექენდისთვის.
<Input:checkbox - რამდენიმე ასარჩევანის საშუალება. იგივე ყველაფერი
რაც radio - ში. Value უნდა ემთხვეოდეს, იმას რასაც ამ გრაფაში ვირჩევთ.
შეგვიძლია გამოვიყენოთ checked (ზოგგან გვხვდება checked=checked, რაც
იგივეა, არ აქვს მნიშვნელობა როგორ დავწერთ). სამივე მონიშნულია და
პირიქით, დაჭერისას წაიშლება მონიშვნა.
<select - არჩევა რამდენიმე ვარიანტიდან ერთ-ერთის. სელექთს მოყვება
</select>, რომელიც უნდა გადავიტანოთ ბოლოში. Select - ის ქვემოთ
ვწერთ <option და შემდეგ იგივენაირად,აუცილებელია value ემთხვეოდეს
ასარჩევს.
 <body>
    <form action="">
      <label for="name">first name</label>
      <input type="text" name="name" id="name" />
      <br />
      <br />

      <label for="last">last name</label>

      <input type="text" name="last" id="last" />

      <p>passwrod</p>
      <input type="password" name="" id=""
placeholder="password" />
      <br />

      <p>email</p>
      <input type="email" name="" id="email"
value="email@email.com" />
      <br />

      <p>about yourself:</p>
      <textarea name="" id="" cols="50"
rows="10"></textarea>

      <p>Select your favorite programming language:</p>

      <input type="radio" name="code" id=""
value="Javascript" />Javascript
      <input type="radio" name="code" id="" value="Java"
/>Java
      <input type="radio" name="code" id="" value="Python"
/>Python
      <br />
      <p>Select your favorite programming language:</p>
      <input type="checkbox" checked name="" id=""
value="Javascript" />Javascript
      <input type="checkbox" checked name="" id=""
value="Java" />Java
      <input type="checkbox" checked name="" id=""
value="Python" />Python
      <br/>

     
      <p>Choose your favorite programming language:</p>
      <select name="languages" id="">
        <option value="Javascript">Javascript</option>
        <option value="Java">Java</option>
        <option value="Python">Python</option>
      </select>
      <br />
      <br />
      <br />
      <input type="submit" value="submit please" />
    </form>
  </body>
</html>
ამ კოდებით მივიღეთ ასეთი სურათი:
Internal, External, Inline CSS

Inline CSS

CSS - ში ფერის მინიჭება შეგვიძლია index -შიც style ატრიბუტით.

მაგალითად :

<h1 style="color: brown">HI THERE</h1>

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

 <h1 style="color: brown; font-size: 3rem">HI THERE</h1>

Inline css - ის პრობლემა ისაა, რომ ყველა ჰედინგსა, თუ პარაგრაფს სთაილ
ატრიბუტის მიწერა სჭირდება.

Internal CSS

Head ელემენტის განყოფილებაში, ვაკეთებ ახალ ემენტს - style. შიგნით კი

ჩვენთვის სასურველ ჰედინგსა თუ პარაგრაფის ელემენტს. ამით
შეგვიძლია სხვადასხვა ელემენტს სხვადასხვა ფერი ან სხვა რამ მივცეთ

   <style>
      h1 {
        color: aquamarine;
        font-size: 5rem;
      }
      h2 {
        color: rgb(133, 3, 255);
        font-size: medium;
      }
    </style>
Internal CSS - ით არ გავვქვს შესაძლებლობა რამდენიმე გვერდზე
მოოვახდინოთ style ცვლილებებლი. ამისათვის საჭიროა external CSS

External CSS ანუ თავად style.css

Cascading Syle Sheets – CSS

HTML - უზრუნველყოფს სტრუქტურას, ხოლო CSS შეხედულებას. CSS -ს

აკეთებ new file style.css -თ.
Index- ში head განყოფილებაში <link -ის ჩაწერით აკავშირებ html -ს css -
თან. Head -ში ჩავუწერთ link და href - ში styles.css
შემდეგ კი css გვერდზე ვწერთ სასურველს კოდს, მაგალითდ:

h1 {
  color: royalblue;
}
h2 {
  color: fuchsia;
}

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

მარტივადაა შესაძლებელი ორივე გვერდზე იდენტური ფონტების, ფერის
მინიჭება ან ცვალებადობის გაკეთბა, ისე, რომ ორივე გვერდის
ჰედინგებზე აისახოს.
Internal, External , Inline CSS - ებიდან რომელის ბრძანება უფრო ძლიერია
ვნახოთ მაგალითებით:
რა ხდება მაშინ, როდესაც გვაქვს stlye.css ფაილი, მაგრამ index ფაილში
ვაკეთებთ Internal -ს. - ამ შემთხვევაში, მიუხედავად style.css ფაილის
არსებობისა, ცვლილება აისახება Internal CSS - ის ქომანდის მიხედვით.
რა ხდება მაშინ, როდესაც ორივე შემთხვევასთან ერთად, ემატება Inline css
- ამ დროს, ცვლილება აისახება Inline CSS - ის ქომანდის მიხედვით. ანუ,
არც External და არც Internal CSS - ის კოდებს არ აღიქვავს და ბრძანებას
ასრულებს Inline- ის მიხედვით.
დასკვნა - Inline არის ყველა ძლიერი და გადაეწერება ბრძანება პირველ
რიგში მის მიხედვით, შემდეგ მოდის Internal და ბოლოს External CSS.~
ეს ცოდნა გვეხმარება იმაში, რომ ბაგების შემთხვევაში ვიცოდეთ რაშია
პრობლემა.

საბაზისო Css Syntax და წესები და სახელები

{} უნდა კრავდეს ერთმანეთს. კოდი უდნა ეწეროს {} შუაში. სხვა

შემთხვევაში კოდი არ იმუშავებს. ყურადღება უდნა მივაქციოთ ; - საც.
ასევე კოდის დაბოლოვებისას მისი არ არსებობის შემთხვევაში კოდი არ
იმუშავებს.
განვიხილოთ რა რას ნიშნავს css - ის წესებით.
მაგალითად:

h1 {
  color: royalblue;
  font-size: 4rem;
}

ამ შემთხვევაში:

/* css rules */
/* Selectors - h1 */
/* declaration block - {} */
/* declaration - property + value ანუ ლაინი */
/* property - color და fontsize */
/* value - royalblue და 4rem */
ეს არის მაგალითი, სხვადასხვა შემთხვევაში იცვლება სელექტორიც ,
ფროფერთიც და ა.შ მაგრამ სინტაქსი იგივე რჩება.
Selector ჯგუფის შესაქმნელად შეგვიძლია გამოვიყენოთ მძიმე.
მაგალითდ h1,h2,p მივცეთ ერთი ფერი.

h1,
h2,
p {
  color: royalblue;
  font-size: 4rem;
}

შესაძლებელია ფერის მიცემა ასეთი ხერხითაც:

body {
  color: crimson;
}

h1,
h2 {
  color: royalblue;
  font-size: 4rem;
}

ამ შემთხვევაში,მიუხედავად body ში ჩაწერილი h1,h2 ისა, ფერს მაინც

მხოლოდ პარაგრაფი მიიღებს, რადგან შემდეგი ბრძანება ჰედინგებს
royalblue ფერს მიანიჭებს.
Id და Class სელექტორები

რამდენიმე თეგს ერთად ფერის ან სხვა სტილის მინიჭება id და class

ელემენტებით შეგვიძლია, რომელიც თვითონ თეგშივე იწერება.
მნიშნელოვანია, უბრალოდ არ დავარქვათ აიდის სახელი და სწორი
ავურჩიოთ (მაგალითდ title-ს დავარქვათ title). აიდები უნდა იყოს
უნიკალური. Css -ში აიდისთვის სტილის მინიჭება შეგვიძლია # -ით და
აიდის სახელით.
იგივე პრინციპია class - ზეც. განსხვავება ისაა, რომ class . - ით იწერება css-
ში.
შესაძლებელია id და class - ი ელემენტს ერთად მიანიჭებაც

      <h1 id="heading_one"  class=" green lowercase">HI

THERE</h1>

CSS

#heading_one {
  font-size: medium;
  color: darkblue;
}
.lowercase {
  text-transform: lowercase;
}
Span და Div ელემენტები

ეს ელემენტები არის ჯგუფების შექმნისთვის ანუ გრუფინგისთვის.

დაჯგუფებისთვის ვიყენებთ Div ელემენტს, ხოლო block ელემენტისთვის
span - ს. Span - არის inline.
ეს ელემენტები, შეგვიძლია ერთმანეთშიც ჩავწეროთ და მივახმაროთ class
ან id ელემენტები.

მაგალითად:

<body>
    <div class="green">
      <h3>Heading number one</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing
elit. case Quasi neque
        <span class="red">hey i am upper</span>
        quia praesentium animi dolorem iure labore minima
qui ex possimus.
      </p>
      <h3>Heading number 2</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quasi neque quia hey
        <span>i am upper </span>
        praesentium animi dolorem iure labore minima qui ex
possimus.
      </p>
    </div>
  </body>

CSS

.green {
  color: green;
}
.red {
  color: red;
  background-color: grey;
}
span {
  text-transform: uppercase;
  color: blue;
}

შედეგად ვიღებთ

ფერები CSS - ში

https://coolors.co - ფერების გენერატორი

https://html-color.codes

 Hexadecimal colors
 Hexadecimal colors with transparency
 RGB colors
 RGBA colors
 HSL colors
  HSLA colors
 Predefined/Cross-browser color names
 With the currentcolor keyword

RGB Colors
Red Green Blue (css -ში იწერება value იწერება color: rgb(0-255,0-255, 0-255)

#first {
  color: rgb(255, 0, 0);
  background-color: rgb(0, 0, 0);
}

RGBA colors
RGBA 0-1 opacity/transparency (გაუმჭვირვალობა, გამჭვირვალობა)

0 დან 1 მდე ნებისმიერი(მაგ 0.002 - 0.999)

#first {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(0, 0, 0, 0.5);
}

HSL colors

#first {
  color: hsl(hue, saturation, lightness)

#first {
  background-color: hsl(180, 50%, 50%);
  color: hsl(0, 0%, 100%);
}

https://www.w3schools.com/colors/colors_hsl.asp - მეტს ნახავ

Value
Absolute Value

Value არის ზომის,სიგრძის და სხვადასხვა განსაზღვრებების მინიჭების

სახელი სელექტორისთვის. ამ თავში, განვიხილავთ თითოეულ მათგანს.

/* font-size,width,height,pixels */
h1{
  font-size: 60px;
  width: 200px;
  height: 300px;
}

Percent Value %

პროცენტები კიდევ ერთი ხერხია ზომების მინიჭების, ჩვეულებრივ width

ან height - ს, როგორც პიქსელებს ისე მიუწერ პროცენტს

<div class="outer">
      <div class="inner"></div>
    </div>
.outer{
  width: 500px;
  height: 500px;
  background: blue;
}

.inner{
  width: 100%;
  height: 50%;
  background: red;
}
em – Relative

em – Relative დამოკიდებულია parent element-ზე

1em = 16px default ბრაუზერის ფონტი. ( თუ ბრაუზერის ფონტის ზომა 18-
ია,მაშინ იქნება 18)
მაგალითად - თუ გავეკეთებ div -ს და მივანიჭებთ 10 px ზომას, ანუ
გავაკეთებთ base value-ს, ამ შემთხვევაში relative value 1 em = 10px

rem – Relative

დამოკიდებულია root - ზე და არ ითვალისწინებს Parent ელემენტს,

ზემოთა შემთხვევაში ჩვენს გაკეთებულ div - ს. თუ შევცვლით html
ფონტის ზომას, ავტომატურად შეიცვლება rem ზომაც. მაგ html { font- size:
40px} ამ დროს 1 rem – 40 px.

Vh და vw value

სქრინის პროცენტული დაფარვა ფერით/ სურათით და ა.შ.

vh – h არის height აღმნიშვნელი და შესაბამისად vw – w - width
აღმნიშვნელი.

.relative{
  width: 40vw;
  height: 50vh;
  background-color: red;
}
.absolute{
  width: 100vw;
  height: 100vh;
  background: blue;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ეს არის მიღებული ტექნიკა, რომელსაც ეწოდება CSS reset. სხვადასხვა

ბრაუზერი იყენებს სხვადასხვა margin-ებს, რის გამოც საიტები
განსხვავებულად გამოიყურება margin-ების მიხედვით. * ნიშნავს "ყველა
ელემენტს" (უნივერსალური სელექტორი), ამიტომ ჩვენ ვაყენებთ ყველა
ელემენტს ნულოვანი margin-ით და ნულოვანი padding-ით, რითაც ისინი
ერთნაირად გამოიყურებიან ყველა ბრაუზერში.

calc function (?) ჯერ ვერ გავიგე

calc ფუნქცია არის მათემატიკური ოპერაციებისთვის + - * /

ამას ვიყეენბთ

min-height - მინიმალური სიმაღლე, ელემენის მინიმალურ სიმაღლეს. თუ

content მინიმალურ სიმაღლეზე მცირეა, მინიმალურ სიმაღლეს ეფექტი
გამოიყენება. თუ აღემატება, მაშინ ეფექტი არ ექნება.

Typography - ტიფოგრაფია css ში

Font family

ფონტის მინიჭება ტექსტისთვის.

/*
font-size font family
 */
 body{
   font-family: helvetica;
 }
 h1{
   font-family: impact;
 }

იმ შემთხვევაში თუ User - ის ბრაუზერი კონკრეტულ ფონტს არ

აღქივამს, შესაძლებელია რამდენიმე ფონტის მიცემა, რასაც font-
stack ჰქვია. ეს ფონტებია სასურველი ფონტის მსგავსები,
რომლიდანაც ერთ-ერთს მაინც აღიქვამს user - ის ბრაუზერი.

Google Fonts

გუგლ ფონტის ჩაწერით ვნახავთ ბევრ ფონტს, რომლის შემოტანაც

შეგვიძლია პროექტში. სასურველი ფონტის არჩევისას, ვაკოპირებთ
პირველ რიგში ლინკს და ვსვამთ head განყოფილებაში, ხოლო შემდეგ css
- ში ფონტ ფემილიში ვაკოპირებთ ფონტის ელემნტს. მეორე ხერხია
იმპორტი css ში.

Font & Text customation

fornt-weight - ფონტებს ამუქებს, ანუ bold ის ელემენტია.

font-style - დახრილი წერა

text-align - ცენტრში,მარჯვნივ,მარცხნივ ან სხვა მიმართულებით წერა

(default არის left)

text-indent - აბზაცის განმსაზღვრელი

line-height - ხაზებს შორის დაშორება

letter-spacing - ასოებს შორის დაშორება

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

text-transform - ტექსტის გარდაქმნა, uppercase, capitalize, lowercase

text-decoration:
  overline;
 line-through;
 underline;
 overline underline;

CSS Box Model

Width - სიგანე
Border - საზღვრები
Margin - გარედან დაშორება
Padding - შიგნიდან დაშორება
არსებობს ოთხივე ელემენტისთვის -left –top –right –bottom და ა.შ
მიმთითებლები. რომელ მხარეს გვინდა ცვლილება. თუ გვინდა
რამდენიმე მხარეს, ან ყველა მხარეს, შეგვიძლია მარტივად სხვადასხვა
ზომები მივცეთ.
მაგალითად:

 h1{
   padding: 20 30 40 50;
 }

სინტაქსი ასეთია
20 – ზემო მხარე, შემდეგ მოდის მარჯვენა 30, შემდექ ქვემო 40 და 50 ანუ
მარცხენა მხარე.ყველა მხარეს ერთად -padding 30px, padding 30px და ა.შ.
ასევე, ორის ერთად ჩაწერით, მაგალითად padding 30px 10px; ეს ნიშნავს
რომ ზედა ქვედა 30 პიქსელია, ხოლო მარჯვენა მარცხენა 10 px.
margin: 0; -ით შეგვიძლია ერთმანეთს მივუერთთ ბოქსები, შესაბამისი
მიმართულებებით.

border- style

 border-width
 border-style 
 border-color
ბორდერებისთვის შეგვიძლია
როგორც ფართობის, ისე
სტილის და ფერის მინიჭებაც.
შეგვიძლია ასევე ბორდერ
სტილები ცალ მხარეს
მივანიჭოთ. ესენი უკვე border-
bottom-style და ა.შ

border-radius
ბორდერებს ასევე აქვთ რადიუსის განმსაზღვრელი ელემენტები. ეს
გვაძლევს შესაძლებლობას, მოვამრგვალოთ ბორდერები ან/და რომელიმე
კონკრეტული მხარე. მაგალითდ მარჯვენა ზედა ბორდერი და ა.შ

 h1{
   padding: 20px;
   border: 30px solid green;
   border-radius: 30px;
 }
 border-top-left-radius
 border-top-right-radius
 border-bottom-right-radius
 border-bottom-left-radius
ასევე, შესაძლოა შეთამაშება მარჯინის ზომებთან. მარჯინს აქვს
უარყოფითი რიცხვის ზომებიც.
მაგალითად:

 h1{
   padding: 20px;
   border: 30px solid green;
   border-radius: 30px; margin-top: -100px;
 }

Border სინტაქსი

მისი სინტაქსიც გავს ზემოთაღწერილ padding სინტაქსებს, ანუ მხარეების

და ციფრების შესაბამისობა. ასევე შესაძლებელია რამდენიმე მხარისთვის
რამდენიმე value -ს მინიჭება ერთ კოდში. ამ შემთხვევაში, მხარისთვის
value-ს მინიჭების შემდეგ ვწერთ დროპს / .

მაგალითად:
 h1{
   padding: 20px;
   border: 30px solid green;border-radius: 10px 5% / 20px
25em 30px 35em;
 }

Border outline & offset

ბორდერის ხაზები, რომლის გაწევა და შემოწევაც შეგვიძლია

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

p {
  margin: 30px;
  background:yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

outline-offset - ს ჩარჩოებიდან გაყავს outline. ანუ, წითლი ხაზია.

შეგვიძლია შიგნითაც შევწიოთ, - px ებით ან სხვა value - თი.
Content box - width + (2 * padding) + (2 * border)
border box - width - (2 * padding) - (2 * border

Display Property
Inline $ Block Elements
display: block; - ყოველთვის იწყებს ახალ ხაზს და აგრძელებს მთლიან
გვერდამდე ფერს
display: inline; - იმდენ ადგილს იყენებს რამდენიც ჭირდება.
ზედა და ქვემო მარჯინები ბლოკის შემთხვევაში გათვალისწინებულია,
ხოლო ინლაინის შემთხვევაში არა (ითვალისწინებ მხოლოდ მარჯვენა და
მარცხენა მხარეებს), ამისთვის, გვიწევს display: block; ელემენტიის
გამოყენება. ასევე, არსებობს display: inline-block; ეს იმისთვის, რომ
როგორც სურათზეა ფერები მთლიანად არ გავიდეს ხაზზე, მხოლოდ რაც
ტექსტს ჭირდება. ასეთ შემთხვევაში, inline-ს ბლოკის ფუნქციას ვაძლევთ
ისე, რომ მისი ეს თვისება შენარჩუნებულია და ბლოკ ელემენტისგან
მხოლოდ მარჯინების გათვალისწინების ფუნქციას იღებს.

Horizontal Centering

text-alaign: center; - ასევე სხვა მიმართულებები.

text alaing block ელემენტისთვისაც მუშაობს, მაგრამ როცა ვწერთ
width-საც, ამ შემთხვევაში უკვე ბლოკი მარცხენა საწყის
მდგომარეობაში ბრუნდება.მის გასაცენტრად ვიყენებთ
მარჯინებს სასურველი მიმართულებით, ამაში გვეხმარება
მარჯინის ოფცია auto. მაგალითაც ბლოკის გასაცენტრად, ვწერთ
შემდეგ კოდს
.block{
  background: blue;
  color: white;
  width: 150px;
  margin-right: auto;
  margin-left: auto;
}

გასაცენტრად კიდევ უფრო უკეთესი ელემენტებია flexbox და

grid, უბრალოდ სინტაქსის გასაგებად იყო ეს მაგალითი.

Content & Border Box

ვწერთ box-sizing: …;
Content box - width + (2 * padding) + (2 * border)
border box - width - (2 * padding) - (2 * border)
ასეთი ფორმულაა, მაგალითად თუ ჩვეულებრივი ბოქსი გვაქვს 200px 200
px ზე width- height 20px padding 20px border -, საიტზეც გაადააქვს როგორც
280 პიქსელი. თუ მივაწერთ box-sizing: border box; ფორმულის მიხედვით,
საიტზე გამოჩნდება 200px ებით. ხოლო, content box -ით, გადააქვს, 280
პიქსელით.

opacity & display: none; & visability

ელემენტის მთლიანად გასაქრობად, ვიყენებთ display:none; -ს. თუ გვინდა

ელემენტი გამჭირვალე გავხადოთ, მაშინ opacity: 0 დან 1 - მდე;
დამალვისთვის visability: hidden;

CSS Background

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

ვიცით, რომ სურათი წერტილით და / უნდა ჩავსვათ (./) აუცილებლად.
პატარა სურათები, დაწესებულ height/weight - ში თუ არ ხვდება, მაგ
შემთხვევაში მეორდება და სურათს ვერ გამოვიყენებთ, ასე რომ,
მნიშვნელოვანია მისი ზომის გათვალისწინება და დარეგულირება.

background-repeat:

repeat: - repeat - სურათის გამეორება, ანუ სურათს მითითებულ

სიგრძე/სიგანეზე გაამეორებს და მთლიანად შეავსებს.
repeat: no-repeat - ამ კომანდით არ გაამეორებს.
repeat: repeat-x და -y ჰორიზონტალურად და ვერტიკალურად მთელს
ხაზე განათავსებს სურათს.
repeat: space - სურათებს შორის სივრცეს მისცემს.
Repeat: round - ნებადართული სივრცის ზომით გაზრდისას,
განმეორებითი სურათები გაიჭიმება (არ დატოვებს ხარვეზებს) მანამ,
სანამ არ დარჩება ადგილი (დატოვებული სივრცე >= სურათის სიგანის
ნახევარი) კიდევ ერთის დასამატებლად.
background-size: cover - სურათი მთლიანად შეავსებს ადგილს.
background-size: contain – cover -ის მსგავსად შეავსებს, მაგრამ თუ სურათი
პატარაა, თავის თავს აკოპირებს და რამდენიმე სურათით ავსებს
background-position: center სურათის სასურველ ადგილას მოთავსება, აქვს
ყველა მხარე, x y ( მაგ 20% 20%;) და სხვა value ებიც
background-attachment: - სხვადასხვა ეფექტები სქროლვისას
:fixed - ტექსტი მოძრაობს და სურათი რჩება
background - linear-gradient - კაი რამეა (?)
display: flex - გვერდიგვერდ დაყენების საშუალებას იძლევა
background: linear-gradient რამდენიმე ფერის ერთმანეთთან გადასვლა (to
top, 100 deg და ა.შ). აქვს repeating-linear -იც
background: radial-gradient - იგივეა რაც linear, მაგრამ წრეში აქკეთებს
ფერების გადასვლას
justify-content: centre და ა.შ - ცენტრში მოთავსება
background: url() - სურათის ჩასმა css - ში

float & clear ელემენტები

float: center/top… და ა.შ - float ფუნქცია განსაზღვრავს, ელემენტი რა

პოზიციაზე ჩაჯდეს მარცხნივ, მარჯვნივ, თუ საერთოდ არ უნდა
იყოს(none).
clear: - აკონტროლებს დინებას float ელემენტების გვერდით. Clea
განსაზღვრავს რა უნდა მოხდეს იმ ელემენტთან, რომელიც არის float
ელემენტის გვერდით. Float ელემენტთან ვიყენებთ clear -საც.
overflow: hidden - თუ სურათი დიდია და არ ჯდება საზღვრებში - ამ
ელემენტით მას ისევ მოვაქცევთ საზღვრებში.
Position: static; - ბლოკავს სასურველი სელექტორის ცვლილებებს, ამ
ელემენტს არ შეეხება ცვლილებები რომელბსაც ყველას ერთად ვაძლევთ
ან ჯგუფშია შემავალი.
Position: relative; - წევს სასურველი მიმართულებით ჩვენს ელემენტს.
ქვემოთ, ვუწერთ მიმართულებას (top 50px,botttom 50px და ა.შ property)
div{
    position: relative;
    top: 300px;
    left: 20px;
    right: 400px;
    bottom: 10px;
}

Position: absolute; - ამით ტექსტი ან სხვა ფროფერთი „იკიდებს“ ყველა

სხვა ელემენტს , და დგება იქ სადაც უნდა. შეუძლია ამოუდგეს უკნიდან
ყველა ელემენტს, ან პირიქით. იყენებს ფროფერთიებს როგორც
რელატივი. როცა ვიყენებთ აბსოლუტს, ის არის შედარებითი წინა
ფოზიშენ რელატივთან, ანუ მაგალითად სიგრძეზე მთლიანი ფერის
ჩამოტარება თუ გვინდა აბსოლუტით, ჩამოატარებს იმ height, with -ზე, რა
მანძილითაცაა რელატივი დაყენებული. თუ არ გვაქვს რელატივი, მაშინ
მთლიან ბადიზე იქნება დამოკიდებული და მის პარამეტრებს აიღებს.
Position: fixed; - სქროლვისას ეკრანზე ჩამოყოლის ფუნქციას აძლევს, ან
მენიუს ან სასურველ რამეს, მასთან ერთად, გვჭირდება რელატივზე
დაყენება, იმისთვის, რომ იმოქმედოს სასურველ ადგილას. სწორედ
ამიტომ, მივუთითებთ თუ სად გვინდა იყოს ის, რაც გვიდნა რომ
სქროლვისას მოყვებოდეს. Fixed-ს დავუწერთ ქვეშ სასურველ ადგილს,
მაგ top 50px და დაყენდება.

Media Queries
იმასათვის, რომ ჩვენი საიტი გავხადოთ mobile friendly, საჭიროა შემდეგი კოდის
მინიჭება.
@media screen and (min-width: 400px){
    body{
        background-color: blue;
    }
    h1{
        font-size: large;
    }
}
თითოეულ სელექტორს ვსვამთ {} - ში. მაშინ როდესაც ვიყენებთ მინიმალურ
სიგანეს/სიმაღლეს არ უდნა დაგვავიწდეს, რომ ათვლა იწყება მაგ ზომიდან. ანუ, თუ გვაქვს
ორი მედია, სხვადასხვა min-width -ით, პირობითად 250 და 400, ნიშნავს, რომ ცვლილებები
მედიაში ჩაწერილი დაიწყება 250 დან და დამთავრდება 400 - მდე, რადგან 400 დან იწყება
ახალი, მეორე მედიის სტილით ხელმძღვანელობა. იგივე შეიძლება ითქვას max-width - ზე,
განსხვავება ისაა, რომ არ უდნა დაგვავიწყდეს, თუ გვაქვს იგივე შემთხვევასი 250 და 400
პიქსელიანი max-width -ები, იმოქმედებს მხოლოდ 400 იანი, რადგან კოდით ვეუბნებით, რომ
400 პიქსელამდე უნდა მიანიჭოს სელექტორებს სტილები. ნებისმიერ შემთხვევაში, ასეთ
დროს, 400 პიქსელიან მედიაში ჩაწერილი ყველა სელექტორისთვის მინიჭებული სტილი,
იქნება გადაწერილი 250იანზე.

z index
z ინდექსის value გვეხმარება სურათების ან ტექსტის „უპირატესად“ წარმოჩენისთვის.

ამ სურათზე, პირველი სურათის z index - ია 1, მეორესი 2,

ხოლო მესამესი 3. სწორედ ამ თანმიმდევრობით დაალაგა z
index მა სურათების ხილვადობაც. ეს ციფრები არ ნიშნავს
არაფერს, შესაძლებელია მივანიჭოთ -1, -2…-999 ან 1,2-999 და
ა.შ. გასათვალისწინებელია, რომ z index მუშობს მხოლოდ
მაშინ ,როდესაც ვიყენებთ position: relative ან position: absolute.
იგი არ მუშაობს position: fixed - შემთხვევაში.
Pseudo elements

p::before/after { content: “…”}

CSS ფსევდოელემენტის საშუალებით შეგვიძლია გავსტილოთ არჩეული

ელემენტის კონკრეტული ნაწილი, ისე რომ span ან div /id ელემენტები არ
მივანიჭოთ.
სინტაქსი ასეთია:
<!-- selector::pseudo-element {
  property: value;
} -->
მაგალითად:
p::before {
    content: "hello";
    display: block;
    background: black;
}

p:: first- line და p:: first- letter {}

first line მთელს პირველ ხაზს სტილავს, ხოლო first letter,
პირველს ასოს

სურათი div ში

როდესაც სურათს div - ში ვსვამთ, css- ში მისი გამოყენება ხდება

შემდეგი სინტაქსით: ვაკეთებთ div ელემენტს და შიგნით
სურათს სასურველ სტილებს მივანიჭებთ. შემდეგ ელემენტად
კი ვწერთ img, შემდეგ კი მაგალითად width: 100%. ამ კოდით, div-
ში და img-ში ჩაწერილი სტილ თეგები ურთიერთმოქმედებენ და
width: 100% კოდით ავტომატურად მიიღებენ ცვლილებებს. ანუ,
div ში შეტანილი ცვლილებები ავტომატურად აისახება img -ზე
და რადგან width გვაქვს 100%, სურათიც ავტომატურად div
თეგში შეტანილ ცვლილებასთან ერთად
გაიზრდება/დაპატარავდება.
div{
    width: 60vw;
    margin: 100px auto;
    border: 2px solid red;
}
img{
    width: 100%;
    display: block;
}
გასათვალისწინებელია, რომ სურათი თავად არის კონტენტი,
შესაბამისად, before და after ფსევდოელემენტები მასზე
ცვლილებას ვერ მოახდენენ, თუ მას img::before -ით მოვნიშნავთ.
სწორედ ამიტომ ვსვამთ სურათს div - ში. ასე, შეგვიძლია უკვე
ცვლილებების მინიჭება.
CSS Selector - ები
class - .
id - #
div – div და ელემენტი მაგ- div h1 – div ში ყველა h1
ელემენტისთვის გასტილვა.
div > h1 – h1 – div ში მდებარე მხოლდო h1 ის გასტილვა.
ზემოთ აღნიშნული სინტაქსიდან, განვიხილოთ შემთხვევა,
როდესაც გვაქვს ორი div ელემენტი, სადაც ორივეგან h1 გვაქვს
შექმნილი. ერთ-ერთ div ში კი ul ელემენტი, რომლის child
ელემენტი, არის h1. სწორედ ამიტომ, როგორც ზემოთ წერია, თუ
დავწერ div h1 - გაისტილება ორივე div -ში მყოფი heading.
მაგრამ, თუ დავწერ div > h1 , გაისტილება მხოლოდ ის div,
რომელშიც არ მაქვს დამატებით ul ელემენტი. ანუ, ერთ
შემთხვევაში, div ის child ელემენტი, არის h1, მეორე შემთხვევაში
h1 ის parent არის ul. სწორედ ამიტომ ისტილება მხოლოდ ის h1,
რომლის parent არის div.
> გვეხმარება იმაში, რომ კონკრეტულად ავირჩიოთ რომელი
ელემენტი გავსტილოთ
არსებობს descendant - იც, რომელსაც შემდეგნაირი სინტაქსი
აქვს: მაგალითად გავაკეთეთ <div class header და შიგნით
მოვათავსეთ 2 h1, css- ში კი ვსტიალვთ შემდეგნაირად - .header
h1 { color: green;}, ამ შემთხვევაში ორივე h1 მიიღებს მწვანე ფერს
ისე, რომ წინა შემთხვევაში დაწერილი div h1 და div > h1 სუ რომ
last rule წესით დავწეროთ, ანუ, .header h1 ის შემდეგ, მაინც
მწვანედ დარჩება. ანუ, descendant უფრო ძლიერია ვიდრე სხვა
დანარჩენი და მისი სტილი გადაეწერება ელემენტს,
მიუხედავად იმისა თუ რა რიგითობით გვიწერია. მაგრამ, თუ
გავაკეთებთ .header > h1 თეგს და მივცემთ ლურჯ ფერს,
მხოლოდ პირველი h1 მიიღებს ლურჯს, მეორე ისევ მწვანედ
დარჩება.

:hover სელექტორი

ჰოვერი გვეხამრება ელემენტების ანიმაციურ გასტილვაში, მაგალითდ

მაუსის გადატარებაზე ფერის მინიჭება.
მაუსის გადატარებაზე ტექსტის წითლად გამოჩენა
p:hover{
    color: red;
}
მაუსის გადატარებაზე პარაგრაფის ტექსტის წითელი ბექგრაუნდით
გამოჩენა, ხოლო ტექსტის - თეთრი ფერით.
p:hover{
    background: red;
    color: white;
}

მსგავსი რამ შეგვიძლია სხვადასხვა გასტილვის მეთოდებით, მაგალითად

text-decoration, font-size და ა.შ

:link :visited :hover :active ელემენტები

მაგალითად გვაქვს 4 ლინკი, ვნახოთ ამ ელემენტებით როგორი ტიპის

გასტილვებია შესაძლებელი.
a:link - ყველა ლინკზე სტილის მინიჭება
a:visited - უკვე ლინკზე გადასულ საიტებზე სტილის მინიჭება
a:hover - გადატარებით სტილიის მინიჭება
a:active - აქტიური ლინკის გაკეთება, რომელიც გვანიშენბს

root ელემენტი (?)

HTML-ში :root წარმოადგენს <html> ელემენტს. ანუ არის უნივერსალური

სელექტორი. გავს * - ს.

Transform / Animation ელემენტები

transform: translateY/X/Z- ჰორიზონტალურად და ვერტიკალურად გაწევა

სურათის/მასალის.
transform: scaleY/X - - ჰორიზონტალურად და ვერტიკალურად გაზრდა
transform: rotatZ/X/Y - გადახრა. Z -ის value არის deg ანუ გრადუსი და მაგ
გრადუსით გადაიხრება.
Transform: skewY/X - გადახრა, ოღონდ არა გრადუსებით. ხზოვანი
გადახრა

Transition

შესაძლებლობას გვაძლევს ანიმაციური სტილის მინიჭების.

Transition-ებს უნდა მივუწეროთ რა ცვლილება/ები გვინდა, მაგალითად
ფერის შეცვლის, რადიუსის და ა.შ. თუ ორი სახის სტილი გვინდა,
მძიმეთი მივუწერთ მეორეს.
Transition-property: background, border- radius; - ამ შემთხვევაში მაგალითში
ვიყენებთ ბექგრაუნდის ფერს დაკუთხეების მომრგვალებას.
Transition-duration: - არის ინტერვალი, რა დროში უნდა შეიცვალოს
მაუსის მიტანისას ფორმა ჩვენთვის სასურველმა ელემენტმა. იმისთვის,
რომ ეს ცვლილებები მოხდეს, გვჭირდება hover -ის გამოყენებაც.
transition-delay: - მაუსის მიტანისას სასურველი დროის შემდეგ დაიწყება
ანიმაცია

მაგალითად:
.three {
  background: green;
  transition-property: background, border-radius;
  transition-duration: 4s;
  transition-delay: 3s;

}
.three:hover {
    border-radius: 50%;
}
div:hover{
    background: red;
}
სინტაქსი ასეთია: