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 - !importantCSS - სელექტორები
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 & RADIOCSS - ტექსტური თვისებები
font-size - განსაზღვრავს ფონტის ზომას
font-size: 25px;
text-align - განსაზღვრავს ტექსტის ჰორიზონტალურ განლაგებას , მნიშნელობები : left, center, right, justify
text-align: center;
text-weight - განსაზღვრავს ტექსტის სისქეს , მნიშვნელობა შეიძლება იყოს როგორც რიცხვითი ასევე bold|normal|bolder
font-weight: bold;
font-weight: bold;
text-decoration - ტექსტის ხაზი, მნიშვნელობები : none|underline|overline|line-through
text-decoration: none;
text-decoration: none;
text-shadow- ტექსტის შუქჩრდილები, მნიშვნელობები : პირველი მნიშნელობა ჰორიზონტალური დახრა, მეორე თვისება
ვერტიკალური დახრა, მესამე თვისება დაბურვის რადიუსი, მეოთხე თვისება ფერი
text-shadow: 20px 5px 5px #0dd417;
text-shadow: 20px 5px 5px #0dd417;
letter-spacing - განსაზღვრავს ტექსტში სიმბოლოებს შორის დაშორებას
letter-spacing: 5px;
letter-spacing: 5px;
line-height- განსაზღვრავს ტექსტში ხაზებს შორის დაშორებას
line-height: 25px;
line-height: 25px;
text-transform - განსაზღვრავს დიდ და პატარა ასოებს , მნიშვნელობები uppercase|lowercase|capitalize
text-transform: uppercase;
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 მნიშვნელობა მიუთითებს ბრაუზერს რომ ელემენტის საზღვრებიდან გარეთ გასული კონტენტიუნდა დაიმალოს
მაგალითად:
p {
white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 120px; /* სიგანის თვისება */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 120px; /* სიგანის თვისება */
}
ამ სამი თვისების ერთობლიობა , პარაგრაფის საზღვრებიდან გასულ ტექსტს დამალავს , უფრო კონკრეტულად ამ პრინციპს სხვა
თავებში შევეხებით
შედეგი