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


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


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

  • ბაზისური სელექტორების როგორიც არის (id, class , tag)
  • კომბინატორები (ირჩევს ელემენტებს სხვადასხვა კომბინაციებით)
  • ფსევდო კლასები (მომხმარებლის ქცევაზე დაფუძნებული სელექტორი)
  • ფსევდო ელემენტები (ასელექტებენ ელემენტის სპეციფურ ნაწილს, მაგ : პირველი ხაზი, პირველი სიმბოლო და სხვა)
  • ატრიბუტი (ასელექტებს  ელემენტებს  HTML ატრიბუტების გამოყენებით)



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


HTML ტეგ  სელექტორი 

მაგალითი:


p{
  color: red;
}

h1{
  color: green;
}


განმარტება:

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

ყველა h1 და p ტეგი მიიღებს იმ თვისებებს რომელიც ფიგურული ფრჩხილების შორისაა გაწერილი


id სელექტორი 

მაგალითი:


css:
#bigtext{
  font-size: 35x;
 }

html:
<p id="bigtext">id სელექტორი</p>


განმარტება:

id სელექტორი ირჩევს სპეციფიურ ელემენტს , ჰეშტეგის(#)  მარჯვნის არსებული ტექსტი ეძებს HTML დოკუმენტში არსებულ id ატრიბუტის მნიშვნელობას ,  თითეულ დოკუმენტში id ატრიბუტის მნიშვნელობა უნდა იყოს უნიკალური და არ უნდა მეორდებოდეს,


class სელექტორი 

მაგალითი:


css:
.heading{
   color: blue;
 }

html:
 <h1 class="heading">სათაური</h1>
 <h2 class="heading">მცირე  სათაური</h2>
 <p class="heading">ტექსტი</p>


განმარტება:

class სელექტორი ირჩევს  ელემენტების ჯგუფს , წერტილის(.)  მარჯვნის არსებული ტექსტი ეძებს HTML დოკუმენტში არსებულ class  ატრიბუტის მნიშვნელობას  , მოცემულ მაგალითში h1, h2, და p ელემენტების ტექსტის ფერი იქნება ლურჯი,  რადგან ყველა მათგანს ერთი და იგივე  კლასის მნიშვნელობა აქვს  "heading"