listy numerowane, punktowane

listy numerowane, punktowane, definicji.

określamy:

  • list-style-type – typ listy numerowanej
    • lower-roman – cyfry rzymskie małe
    • upper-roman – cyfry rzymskie duże
    • decimal – cyfry arabskie
    • decimal-leading-zero – cyfry arabskie rozpoczęte od 0
    • lower-alpha – małe litery
    • upper-alpha – duże litery
    • lower-latin – małe litery
    • upper-latin – duże litery
    • lower-greek – małe greckie litery
    • armenian – litery ormiańskie
    • georgian – cyfry gruzińskie
    • none – bez liter, znaków
  • list-style-type – typ listy punktowanej
    • disc – koło
    • circle – pusty okrąg
    • square – kwadrat
    • none – bez znaków
  • list-style-image:url(’images/bullet.png’); – własny obrazek, ikona jako punktor
  • list-style-position – określenie sposobu zawijania tekstu względem punktora
    • outside – tekst poza punktorem
    • inside – punktor wewnątrz tekstu

 

 

dodanie elementu zamiast stylu listy:


ul {
  list-style-type: "★";
}

ol {
  list-style: symbols("*" "\2020" "\2021" "\A7");
}

 

 

dodanie pseudoelementu przed li:


ul {
  list-style: none;
  li:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #ffd90a;
    border-radius: 50%;
    position: relative;
    top: -4px;
    left: -7px;
  }
}

 

ŚRODKOWANIE LISTY
ul {text-align: center;}
li {display: inline;}

zbiorczy opis:

ol{
 list-style:decimal inside;
}
CSS3

Hope this helps and happy coding :)

Zobacz jeszcze

Metaznaki

* -  wskazany znak lub ciąg znaków, w dowolnym miejscy ciagu ^ - początek wiersza, ciągu znaków $ - koniec wiersza lub ciągu...

tło, background

parametry: background-color:#e22117; background-image:url(bg_pic.png); background-repeat: repeat (default) - powiela obrazek horyzontalnie i wertykalnie repeat-x - powiela...