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 - ტექსტური თვისებები 



font-size - განსაზღვრავს ფონტის ზომას

font-size: 25px;

text-align - განსაზღვრავს ტექსტის ჰორიზონტალურ განლაგებას , მნიშნელობები : left, center, right, justify

text-align: center;

text-weight - განსაზღვრავს ტექსტის სისქეს , მნიშვნელობა შეიძლება იყოს როგორც რიცხვითი ასევე bold|normal|bolder

font-weight: bold;

text-decoration - ტექსტის ხაზი, მნიშვნელობები : none|underline|overline|line-through

text-decoration: none;

text-shadow- ტექსტის შუქჩრდილები, მნიშვნელობები : პირველი მნიშნელობა ჰორიზონტალური დახრა, მეორე თვისება
ვერტიკალური დახრა, მესამე თვისება დაბურვის რადიუსი, მეოთხე თვისება ფერი

text-shadow: 20px 5px 5px #0dd417;

letter-spacing - განსაზღვრავს ტექსტში სიმბოლოებს შორის დაშორებას

letter-spacing: 5px;

line-height- განსაზღვრავს ტექსტში ხაზებს შორის დაშორებას

line-height: 25px;

text-transform - განსაზღვრავს დიდ და პატარა ასოებს , მნიშვნელობები uppercase|lowercase|capitalize

text-transform: uppercase;



white-space:

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


white-space: nowrap; ტექსტი ყოველლთვის არის ერთ ხაზზე და გადის მშობელი ელემენტის საზღვრებიდან
white-space:normal; ნაგულისხმევი მნიშვნელობა , თუ ტექსტი არ ეტევა ელემენტში იწყება ახალი ხაზიდან
white-space: pre; ტექსტი ყოველლთვის არის ერთ ხაზზე და გადის მშობელი ელემენტის საზღვრებიდან, ელემენტში
არსებული ტექსტის განლაგება გავლენად ახდენს ბრაუზერში გამოტანილ შედეგზე




text-overlflow:

განსაზღვრავს დამალული (მოჭრილი) ტექსტის ვიზუალს

text-overflow: ellipsis; - ბოლო სიმბოლოები იმალება ბურთულებით
text-overflow: crip; - ნაგულისხმევი მნიშვნელობა (ტექსტი არ იმალება ბურთულებით)




overlflow:

overlflow თვისებას ცალკე თავი დაეთმობა მაგრამ მოდი ახლა ვნახოთ როგორ გამოვიყენოთ ის ტექსტებთან მიმართებაში

overflow: hidden; - hidden მნიშვნელობა მიუთითებს ბრაუზერს რომ ელემენტის საზღვრებიდან გარეთ გასული კონტენტი
უნდა დაიმალოს

მაგალითად:

{

  white-space: nowrap;
    text-overflow: ellipsis;
  overflow: hidden;
  width: 120px; /* სიგანის თვისება */

}



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


შედეგი