CSS-ში ტექსტის ფორმატის სახელმძღვანელო

ვებსაიტის შექმნისას, ტექსტის ფორმატირება მნიშვნელოვანი ასპექტია მიმზიდველი და წასაკითხი ინტერფეისის შესაქმნელად.

CSS გთავაზობთ რამდენიმე თვისებას, რომელიც საშუალებას გაძლევთ დააკონფიგურიროთ ტექსტის სხვადასხვა ელემენტები, მათ შორის შრიფტის ფერი, ზომა, ოჯახი, გასწორება, ინტერვალი და სხვა.

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

 

Შრიფტის ფერი

პარამეტრი: ფერის მნიშვნელობა, რომელიც შეიძლება იყოს ფერის სახელი(მაგ., red), თექვსმეტობითი კოდი(მაგ., "#FF0000"), RGB მნიშვნელობა(მაგ., "rgb(255, 0, 0)") ან RGBA მნიშვნელობა(მაგ., "rgba(255, 0, 0, 0.5)").

p {  
  color: blue;  
}  

 

Შრიფტის ზომა

პარამეტრი: ზომის მნიშვნელობა, რომელიც შეიძლება იყოს პიქსელებში(მაგ., "16px"), em ერთეულებში(მაგ., "1em"), rem ერთეულებში(მაგ., "1.2rem"), ხედის სიგანის ერთეულებში(მაგ., "10vw"), ხედის სიმაღლის ერთეულები(მაგ., „5vh“) ან სხვა ერთეულები.

h1 {  
  font-size: 24px;  
}  

 

შრიფტის ოჯახი

პარამეტრი: შრიფტების ოჯახის სია, მითითებული სასურველი თანმიმდევრობით. თქვენ შეგიძლიათ მიუთითოთ შრიფტის სახელი(მაგ., Arial) ან ჩართოთ სპეციალური სიმბოლოების შემცველი შრიფტების სახელები ორმაგ ბრჭყალებში(მაგ., " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

 

შრიფტის წონა და სტილი

პარამეტრი font-weight: normal(default), bold, , ან რიცხვითი მნიშვნელობები 100 bolder- lighter დან 900-მდე.

პარამეტრი font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

ტექსტის გაფორმება

პარამეტრი: "none"(default), "underline", "overline", "line-through"  ან ინტერვალით გამოყოფილი მნიშვნელობების კომბინაცია.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

ტექსტის გასწორება

პარამეტრი: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

ხაზის სიმაღლე და მინდვრები

პარამეტრი ხაზის სიმაღლე: რიცხვითი მნიშვნელობა ან შრიფტის მიმდინარე ზომის პროცენტი.

პარამეტრის ზღვარი: საზომი მნიშვნელობა, როგორიცაა პიქსელები(px), em ერთეულები(em), rem ერთეულები(rem) და ა.შ.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

მრავალსვეტიანი ტექსტის განლაგება

პარამეტრი: დადებითი მთელი რიცხვი ან "auto"(default).

.container {  
  column-count: 2;  
}  

 

ტექსტის ფერის შეცვლა Hover-ზე

კონკრეტული პარამეტრი არ არის, გამოიყენეთ მხოლოდ ფსევდოკლასი :hover.

a:hover {  
  color: red;  
}  

 

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

კონკრეტული პარამეტრი არ არის, გამოიყენეთ მხოლოდ ფსევდოკლასები :active  და :visited.

a:visited {  
  color: purple;  
}  

 

ვიმედოვნებთ, რომ ზემოხსენებული ახსნა-განმარტებები და მაგალითები დაგეხმარათ იმის გაგებაში, თუ როგორ გამოიყენოთ და დააკონფიგურიროთ ტექსტის ფორმატირების თვისებები CSS-ში, რათა შექმნათ ვიზუალურად მიმზიდველი და მიმზიდველი ტექსტური ინტერფეისი თქვენს ვებსაიტზე.