Listas em HTML

Lista não-ordenada

250g de carne para strogonoff
1 cebola média
um pacote de batata palha
Item não numerado
...

Lista ordenada

descasque a cebola
pique em pequenos pedaços
refogue a cebola
Item numerado
...

Lista de definição

Cebola: Cebola é o nome popular da planta cujo nome científico é Allium cepa, Lineu.
Batata palha: Batata palha é um tipo de batata frita que é cortada, antes da fritura, de modo a ficar como palitos finíssimos.
Termo: Definição; Outra definição

Listas aninhadas

Cebola
- Deve estar fresca
- Coloque na água para evitar choro
Carne
- Use mignon
- Descongele com antecedência
- Na falta de mignon use coxão mole

Listas em CSS

Alterando o início de uma lista

...
Temperar a carne
Colocar sal

Alterando o tipo de bullet de uma lista não ordenada

list-style-type: square;
250g de carne para strogonoff
1 cebola média
...

list-style-type: circle;
250g de carne para strogonoff
1 cebola média
...

list-style-type: disc;
250g de carne para strogonoff
1 cebola média
...

list-style-type: none;
250g de carne para strogonoff
1 cebola média
...

Alterando o tipo de marcador de uma lista ordenada

list-style-type: decimal
descasque a cebola
pique em pequenos pedaços
...

list-style-type: decimal-leading-zero
descasque a cebola
pique em pequenos pedaços
...

list-style-type: lower-roman
descasque a cebola
pique em pequenos pedaços
...

list-style-type: upper-roman
descasque a cebola
pique em pequenos pedaços
...

list-style-type: lower-alpha
descasque a cebola
pique em pequenos pedaços
...

list-style-type: upper-alpha
descasque a cebola
pique em pequenos pedaços
...

Mudar o posicionamento padrão do marcador - outside

list-style-position: outside;
Strogonoff: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat commodo sapien. Etiam sit amet enim. Nulla tempus urna dapibus turpis. Cras lacinia, tellus vitae fringilla condimentum, libero nisl blandit turpis, at consequat est nibh vitae ipsum. Nunc molestie, erat ut placerat tempor, ligula tortor accumsan nunc, pellentesque tristique nunc velit quis elit. Aenean sed tellus sed augue ullamcorper congue. Etiam magna. Nulla eleifend odio eu sapien hendrerit elementum. Integer tempor sapien ac orci. Aenean eget nisl. Aliquam luctus sapien a enim. Praesent augue dolor, ultrices eget, suscipit ut, sodales ut, massa. Maecenas pulvinar lectus vitae leo. Cras et tellus rutrum ante volutpat ornare. Maecenas urna est, bibendum sed, viverra tristique, rutrum eget, urna. Praesent hendrerit interdum nisi. Aliquam accumsan magna ut eros. Donec tincidunt orci ut tortor. Integer varius, lacus nec adipiscing pulvinar, erat lorem dictum turpis, quis feugiat enim dolor eget orci. Nullam a massa. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur placerat, dui vel fringilla porta, nulla nibh egestas tellus, nec vestibulum quam libero id quam. Suspendisse commodo pretium elit. Sed ut diam et ipsum pretium facilisis. Vivamus non ante pulvinar justo iaculis porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec libero eu tellus rhoncus iaculis. Ut volutpat augue vel augue.
Cebola: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat commodo sapien. Etiam sit amet enim. Nulla tempus urna dapibus turpis. Cras lacinia, tellus vitae fringilla condimentum, libero nisl blandit turpis, at consequat est nibh vitae ipsum. Nunc molestie, erat ut placerat tempor, ligula tortor accumsan nunc, pellentesque tristique nunc velit quis elit. Aenean sed tellus sed augue ullamcorper congue. Etiam magna. Nulla eleifend odio eu sapien hendrerit elementum. Integer tempor sapien ac orci. Aenean eget nisl. Aliquam luctus sapien a enim. Praesent augue dolor, ultrices eget, suscipit ut, sodales ut, massa. Maecenas pulvinar lectus vitae leo. Cras et tellus rutrum ante volutpat ornare. Maecenas urna est, bibendum sed, viverra tristique, rutrum eget, urna. Praesent hendrerit interdum nisi. Aliquam accumsan magna ut eros. Donec tincidunt orci ut tortor. Integer varius, lacus nec adipiscing pulvinar, erat lorem dictum turpis, quis feugiat enim dolor eget orci. Nullam a massa. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur placerat, dui vel fringilla porta, nulla nibh egestas tellus, nec vestibulum quam libero id quam. Suspendisse commodo pretium elit. Sed ut diam et ipsum pretium facilisis. Vivamus non ante pulvinar justo iaculis porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec libero eu tellus rhoncus iaculis. Ut volutpat augue vel augue.
...

Mudar o posicionamento padrão do marcador - inside

list-style-position: inside;
Strogonoff: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat commodo sapien. Etiam sit amet enim. Nulla tempus urna dapibus turpis. Cras lacinia, tellus vitae fringilla condimentum, libero nisl blandit turpis, at consequat est nibh vitae ipsum. Nunc molestie, erat ut placerat tempor, ligula tortor accumsan nunc, pellentesque tristique nunc velit quis elit. Aenean sed tellus sed augue ullamcorper congue. Etiam magna. Nulla eleifend odio eu sapien hendrerit elementum. Integer tempor sapien ac orci. Aenean eget nisl. Aliquam luctus sapien a enim. Praesent augue dolor, ultrices eget, suscipit ut, sodales ut, massa. Maecenas pulvinar lectus vitae leo. Cras et tellus rutrum ante volutpat ornare. Maecenas urna est, bibendum sed, viverra tristique, rutrum eget, urna. Praesent hendrerit interdum nisi. Aliquam accumsan magna ut eros. Donec tincidunt orci ut tortor. Integer varius, lacus nec adipiscing pulvinar, erat lorem dictum turpis, quis feugiat enim dolor eget orci. Nullam a massa. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur placerat, dui vel fringilla porta, nulla nibh egestas tellus, nec vestibulum quam libero id quam. Suspendisse commodo pretium elit. Sed ut diam et ipsum pretium facilisis. Vivamus non ante pulvinar justo iaculis porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec libero eu tellus rhoncus iaculis. Ut volutpat augue vel augue.
Cebola: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat commodo sapien. Etiam sit amet enim. Nulla tempus urna dapibus turpis. Cras lacinia, tellus vitae fringilla condimentum, libero nisl blandit turpis, at consequat est nibh vitae ipsum. Nunc molestie, erat ut placerat tempor, ligula tortor accumsan nunc, pellentesque tristique nunc velit quis elit. Aenean sed tellus sed augue ullamcorper congue. Etiam magna. Nulla eleifend odio eu sapien hendrerit elementum. Integer tempor sapien ac orci. Aenean eget nisl. Aliquam luctus sapien a enim. Praesent augue dolor, ultrices eget, suscipit ut, sodales ut, massa. Maecenas pulvinar lectus vitae leo. Cras et tellus rutrum ante volutpat ornare. Maecenas urna est, bibendum sed, viverra tristique, rutrum eget, urna. Praesent hendrerit interdum nisi. Aliquam accumsan magna ut eros. Donec tincidunt orci ut tortor. Integer varius, lacus nec adipiscing pulvinar, erat lorem dictum turpis, quis feugiat enim dolor eget orci. Nullam a massa. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur placerat, dui vel fringilla porta, nulla nibh egestas tellus, nec vestibulum quam libero id quam. Suspendisse commodo pretium elit. Sed ut diam et ipsum pretium facilisis. Vivamus non ante pulvinar justo iaculis porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec libero eu tellus rhoncus iaculis. Ut volutpat augue vel augue.
...

Mudar o marcador de uma lista - propriedade list-style-image

list-style-image: url(flecha1.gif);
250g de carne para strogonoff
1 cebola média
...

Mudar o marcador de uma lista - propriedade background-image

background-image: url(flecha1.gif);
250g de carne para strogonoff
1 cebola média
...

Ocultar parte de uma lista - propriedade display:none

Receita 1: Strogonoff de nozes
- Creme de leita
- Nozes
- ...
Receita 2: Strogonoff de frango
- Frango
- Creme de leite
- ...