Tsara jeri da teburi muhimmin sashi ne na nuna bayanai akan gidan yanar gizon ku. CSS yana ba da kaddarori da azuzuwan ƙirƙira da keɓance jeri da teburi yadda kuke so. Anan akwai cikakken jagora kan yadda ake tsara jeri da teburi a cikin CSS.
Jerin Lissafi
Jerin da ba a ba da oda ba(ul)
Babban dukiya: nau'in jeri-style.
Darajoji none, disc, circle, square
:.
Misali:
ul {
list-style-type: disc;
}
Jerin da aka yi oda(ol)
Babban dukiya: nau'in jeri-style.
Ƙimar: babu ko ɗaya(tsoho), decimal, ƙananan-alpha, babba-alpha, ƙananan-roman, babba-roman.
Misali:
ol {
list-style-type: decimal;
}
Jerin Ma'anar(dl)
Babban kadarorin: Babu takamaiman kayan CSS don tsara lissafin ma'anar. Koyaya, zaku iya salon abubuwan da ke cikin lissafin ta amfani da azuzuwan ko wasu kaddarorin kamar font-size, font-weight, margin, padding, etc.
Misali:
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages</dd>
<dt>CSS</dt>
<dd>A styling language for web pages</dd>
</dl>
dt {
font-weight: bold;
}
Tsara Tables
Tsarin Tsarin Tebur
Babban dukiya border-collapse
:.
Daraja: separate(default), collaps
e.
Misali:
table {
border-collapse: collapse;
}
Tsarin Iyakar Tebur
Babban dukiya border
:.
Ƙimar: Ƙimar iyaka, misali 1px solid black
:.
Misali:
table {
border: 1px solid black;
}
Tsarin Iyakar salula
Babban dukiya border
:.
Ƙimar: Ƙimar iyaka, misali 1px solid black
:.
Misali:
td, th {
border: 1px solid black;
}
Daidaitawa da Tazarar Kwayoyin Tebu
Babban kaddarorin: text-align, padding
.
- rubutu-align: Daidaita dabi'u, misali
left, right, center
:. - padding: ƙimar tazara tsakanin sel, misali: 10px.
Misali:
th {
text-align: center;
padding: 10px;
}
Fage da Launin Rubutu a cikin Tebura
Babban kaddarorin: background-color, color
background-color
: Ƙimar launi ta bango, misalilightgray
:.color
: Ƙimar launi rubutu, misaliwhite
:.
Misali:
table {
background-color: lightgray;
color: white;
}
Girman Rumbun da Layi a cikin Tables
Babban kaddarorin: width
, height
.
width
: Nisa darajar, misali: "100px", "20%".height
: Ƙimar tsayi, misali: "50px", "10%".
Misali:
th {
width: 100px;
height: 50px;
}
Wannan cikakken jagora ne kan yadda ake tsara jeri da teburi a CSS. Kuna iya tsara dabi'u da kaddarorin don ƙirƙirar jeri da salon tebur waɗanda suka dace da buƙatun ƙirar ku akan gidan yanar gizonku.