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  DISPLAY  თვისება განსაზღვრვავს ელემენტების ხილვადობას და მათ განლაგებას 


DISPLAY  თვისება განსაზღვრავს როგორ უნდა გამოჩდეს ელემენტი ბრაუზერში

ყველა html ელემენტს აქვს საწყისი მნიშნელობა  block ან  inline


DISPLAY  თვისებას შეუძლია საწყისი მნიშვნელობების ჩანაცვლება


ბლოკური ტიპის ელემენტები იკავებენ მშობელი ელემენტის 100 % , ყოველი ახალი ბლოკური ელემენტი იწყება ახალი ხაზიდან, ბლოკური ტიპის ტეგებია :

<div>

<h1> 

<p>

<footer>

და სხვა


ინლაინ ტიპის ელემენტების ზომა გამოითვლება საკუთარი კონტენტიდან , ყოველი ინლაინ ელემენტი არის ერთმანეთის გვერდით განლაგებული, ინლაინ  ტიპის ტეგებია :

<a>

<img> 

<span>

<small>

და სხვა





DISPLAY   თვისების მნიშვნელობები 


block - იკავებს მშობელი ელემენტის 100%

inline -  ლაგდება მეზობელი ელემენტის გვერდით, ზომა გამოითვლება კონტენტიდან,  არ მოქმედებს სიმაღლის და სიგანის თვისებები

inline-block - ლაგდება მეზობელი ელემენტის გვერდით, ზომა გამოითვლება კონტენტიდან,   მოქმედებს სიმაღლის და სიგანის თვისებები

flex - შვილობილი ელემენტები ლაგდებიან ერთმანეთის გვერდით

inline-flex - მეზობელი და შვილობილი ელემენტები ლაგდებიან ერთმანეთის გვერდით

none - ელემენტი ქრება ბრაუზერიდან , მის ადგილს იკავებს სხვა ელემენტი



მაგალითი:

  .container{
    display: flex;
  }