CSS სახელმძღვანელო

CSS - დამწყებებისთვის

CSS - მიმოხილვა CSS - სინტაქსი CSS - სელექტორები CSS - შემოტანა CSS - ტექსტური თვისებები CSS - კომენტარი CSS - ფონები CSS - საზღვრები CSS - სიმაღლე და სიგანე CSS - ფონტის შემოტანა CSS - შიდა დაშორება (PADDING) CSS - გარე დაშორება (MARGIN) CSS - სიები CSS - ბმულები CSS - DISPLAY CSS - პოზიციები CSS - Z-INDEX CSS - OVERFLOW CSS - Opacity CSS - ერთეულები CSS - !important

CSS - სელექტორები

CSS - კომბინატორები CSS - ფსევდო კლასები CSS - ფსევდო ელემენტები CSS - ატრიბუტი სელექტორი

CSS - FLEXBOX

FLEXBOX - მიმოხილვა FLEXBOX - კონტეინერი FLEXBOX - ელემენტები

CSS - Responsive

Responsive - მიმოხილვა Responsive - პრინციპები @media - ქუერები

CSS - საშუალო დონე

CSS - ფილტრები CSS - object-fit CSS - გრადაციები CSS - ფონის თვისებები CSS - შუქჩრდილები CSS - 2D/3D ტრანსფორმაციები CSS - გადასვლები CSS - კურსორის თვისებები CSS - ანიმაციები

CSS - კომპონენტები

CSS - სანავიგაციო მენიუ (NAVBAR) CSS - ფორმა CSS - ღილაკები CSS - ბარათი (card) CSS - CHECKBOX & RADIO

CSS - ფონები გამოიყენება HTML ელემენტებისთვის ფონის თვისებების მისანიჭებლად 


ფონი შეიძლება იყოს ფერი, ფოტო ან გარდამავალი ფერები 


თვისება  background-color განსაზღვრავს , ფონის ფერს

მაგალითი:

css: 
 .bg-green {
    background-color: green;
  }


html:
<div class="bg-green">
   <h1> მწვანე ფერის ფონი </h1>
</div>

თვისება  background-image განსაზღვრავს , ფონის ფოტოს


მაგალითი:

css:
.bg-image{
  background-image: url('google.png');
}

html:
<div class="bg-image">
    <h1> მწვანე ფერის ფონი </h1>
</div>

url(' ') მნიშვნელობა არის ფოტოს დასახელება და ლოკაცია ფაილურ სისტემაში,
მსგავსია html ში არსებული src ატრიბუტისა


თვისება  background-repeat განსაზღვრავს ფოტოს გამეორებას ვერტიკალურ და ჰორიზონტალურ

ღერძზე


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

მაგალითი:



repeat - ნაგულისხმევი მნიშვნელობა (ფოტო გადამრავლდება)
repeat-x - ფოტო გადამრავლდება მხოლოდ ჰორიზონტალურად
repeat-y - ფოტო გადამრავლდება მხოლოდ ვერტიკალურად
no-repeat - ფოტო არ გადამრავლდება

მაგალითი:
.bg-green{
    background-image: url('google.png');
  background-repeat: no-repeat;
  }



თვისება  background-position განსაზღვრავს ფოტოს მდებარეობას ელემენტში

მაგალითი:

.bg-green{
      background-image: url('google.png');
    background-repeat: no-repeat;
    background-position: right center;
  }

background-position გადაეცემა ორი მნიშვნელობა , პირველი განსაზღვრავს ფოტოს მდებარეობს ჰორიზონტალურად ,
ხომო მეორე ვერტიკალურად , შესაძლებელია პროცენტული მნიშვნელობების მინიჭებაც, რომელიც ელემენტის ზომებიდან
განსაზღვრავს მდებარეობას


თვისება  background-attachment  განსაზღვრავს ფოტოს პოზიციას ელემენტში

მაგალითი:
.bg-green{
background-image: url('google.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-attachment: fixed;
}

fixed - მნიშვნელობა ფოტოს აფიქსირებს კონტენტი მის ზევიდან ისქროლება , ხოლო სდანდარტული scroll
მნიშნელობისას ფოტო სქროლს მიყვება

თვისება  background-size     განსაზღვრავს ფოტოს ზომას

მაგალითი:

.bg-green{
  background-image: url('google.png');
    background-repeat: no-repeat;
    background-position: right center;
  background-attachment: fixed;
    background-size: cover;  / ან * 100% 50% */
    }

background-size - თვისებას გადაეცემა მნიშვნელობები cover|contain|auto|% %

cover - თუ ფოტო ელემენტის ზომაზე პატარაა, ის მაინც დაიკავებს ელემენტის სრულ ზომას, შესაძლოა მოიჭრას ფოტოს
ნაწილი
contain - ფოტო გამოჩდება სრულად, ელემენტის ზომების საუკეთესო შეფარდებით
auto - ნაგულისხმევი მნიშვნელობა , ფოტო გამოჩდება ორიგინალი ზომებით
პროცენტული - განსაზღვრავს ფოტოს პროცენტულ ზომებს ანგარიშდება მშობელი ელემენტის ზომიდან, პირველი თვისება
არის სიგანე , ხოლო მეორე სიმაღლე