Jagora don Tsara Rubutu a CSS

Lokacin zayyana gidan yanar gizon, tsara rubutu wani muhimmin al'amari ne na ƙirƙirar ƙa'idar da za a iya karantawa.

CSS yana ba da kaddarori da yawa waɗanda ke ba ku damar keɓance abubuwa daban-daban na rubutu, gami da launin rubutu, girman, iyali, daidaitawa, tazara, da ƙari.

A ƙasa akwai cikakken jagora akan kowane kayan tsara rubutu, tare da misalai na kowane kadara.

 

Launin Font

Siga: Ƙimar launi, wanda zai iya zama sunan launi(misali, red), lambar hex(misali, "#FF0000"), ƙimar RGB(misali, "rgb(255, 0, 0)"), ko ƙimar RGBA(misali., "rgba(255, 0, 0, 0.5)").

p {  
  color: blue;  
}  

 

Girman Font

Siga: Ƙimar girman, wanda zai iya kasancewa a cikin pixels(misali, "16px"), raka'a em(misali, "1em"), raka'o'in rem(misali, "1.2rem"), raka'a nisa na kallo(misali, "10vw"), raka'a tsayin kallo(misali, "5vh"), ko wasu raka'a.

h1 {  
  font-size: 24px;  
}  

 

Iyalin Font

Siga: Jerin dangin font, ƙayyadaddun tsari da aka fi so. Kuna iya ƙididdige sunan font(misali, Arial) ko haɗa sunayen haruffa masu ɗauke da haruffa na musamman a cikin ƙididdiga biyu(misali, " Times New Roman).

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

 

Font Weight da Salo

Siga font-weight: normal(default), bold, bolder, lighter, ko ƙimar lambobi daga 100 zuwa 900.

Siga font-style: normal(default), italic.

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

 

Rubutun Ado

Siga: "none"(default), "underline", "overline", "line-through"  ko haɗin ƙimar da aka raba ta sarari.

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

 

Daidaita Rubutu

Siga "left"(default), "right", "center" or "justify":.

p {  
  text-align: center;  
}  

 

Layi Tsawo da Margins

Tsawon layin siga: Ƙimar lamba ko kashi na girman font na yanzu.

Gefen siga: Ƙimar auna, kamar pixels(px), raka'a em(em), raka'a rem(rem), da sauransu.

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

 

Tsarin Rubutu Multicolumn

Siga: Kyakkyawan lamba ko "auto"(default).

.container {  
  column-count: 2;  
}  

 

Canjin Launi Rubutu akan Hover

Babu takamaiman ma'auni, yi amfani da ajin ƙididdiga kawai :hover.

a:hover {  
  color: red;  
}  

 

Canjin Launi Rubutu akan Jiha(aiki, ziyarta)

Babu takamaiman ma'auni, kawai yi amfani da azuzuwan ƙididdiga :active  da :visited.

a:visited {  
  color: purple;  
}  

 

Muna fatan bayanin da ke sama da misalan sun taimaka muku fahimtar yadda ake amfani da keɓance kaddarorin tsara rubutu a cikin CSS don ƙirƙirar ƙirar rubutu mai kyan gani da jan hankali akan gidan yanar gizonku.