close

Sąrašų ir lentelių formatavimo vadovas CSS – ypatybės ir pavyzdžiai

Sąrašų ir lentelių formatavimas yra esminė informacijos pateikimo svetainėje dalis. CSS suteikia ypatybes ir klases, leidžiančias kurti ir tinkinti sąrašus ir lenteles pagal savo skonį. Čia yra išsamus vadovas, kaip formatuoti sąrašus ir lenteles CSS.

 

Sąrašų formatavimas

Netvarkingas sąrašas(ul)

Pagrindinė savybė: sąrašo tipo.

Vertybės none, disc, circle, square:.

Pavyzdys:

ul {  
  list-style-type: disc;  
}

Užsakytas sąrašas(ol)

Pagrindinė savybė: sąrašo tipo.

Reikšmės: nėra(numatytasis), dešimtainis, apatinė alfa, viršutinė alfa, apatinė romėniška, viršutinė romėniška.

Pavyzdys:

ol {  
  list-style-type: decimal;  
}

Apibrėžčių sąrašas(dl)

Pagrindinė ypatybė: nėra konkrečios CSS ypatybės, kuria būtų galima formatuoti apibrėžimų sąrašus. Tačiau sąraše esančius elementus galite stilizuoti naudodami klases ar kitas ypatybes, pvz., font-size, font-weight, margin, padding, etc.

Pavyzdys:

<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;  
}

 

Formatavimo lentelės

Lentelės struktūros formatavimas

Pagrindinė nuosavybė border-collapse:.

Vertybės: separate(default), collaps e.

Pavyzdys:

table {  
  border-collapse: collapse;  
}

Lentelės kraštinės formatavimas

Pagrindinė nuosavybė border:.

Reikšmės: kraštinės reikšmė, pavyzdžiui: 1px solid black.

Pavyzdys:

table {  
  border: 1px solid black;  
}

Langelių kraštinės formatavimas

Pagrindinė nuosavybė border:.

Reikšmės: kraštinės reikšmė, pavyzdžiui: 1px solid black.

Pavyzdys:

td, th {  
  border: 1px solid black;  
}

Lentelės langelių lygiavimas ir tarpai

Pagrindinės savybės text-align, padding:.

  • text-align: Lygiavimo reikšmės, pavyzdžiui: left, right, center.
  • užpildymas: tarpo reikšmė langeliuose, pavyzdžiui: 10 pikselių.

Pavyzdys:

th {  
  text-align: center;  
  padding: 10px;  
}

Fonas ir teksto spalva lentelėse

Pagrindinės savybės: background-color, color

  • background-color: Fono spalvos reikšmė, pavyzdžiui: lightgray.
  • color: Teksto spalvos reikšmė, pavyzdžiui: white.

Pavyzdys:

table {  
  background-color: lightgray;  
  color: white;  
}

Stulpelių ir eilučių dydis lentelėse

Pagrindinės savybės: width, height.

  • width: pločio reikšmė, pavyzdžiui: "100 pikselių", "20 %".
  • height: aukščio reikšmė, pvz.: "50px", "10%".

Pavyzdys:

th {  
  width: 100px;  
  height: 50px;  
}

 

Tai yra išsamus vadovas, kaip formatuoti sąrašus ir lenteles CSS. Galite tinkinti reikšmes ir ypatybes, kad sukurtumėte sąrašų ir lentelių stilius, kurie atitiktų jūsų svetainės dizaino poreikius.