Como estilo de listas e tabelas com css3
listas de estilo e mesas é um pouco diferente do estilo de conteúdo no corpo da página, porque ambas as listas e tabelas têm etiquetas específicas que podem ser redefinidos para controlar como o conteúdo fica dentro dessas estruturas.
Conteúdo
Video: #2 HTML - Aula 7 - Classes CSS - Formatação de tabelas
Como estilo de listas com CSS3
Com listas, você pode selecionar atributos de tipo, como fonte, tamanho e alinhamento, e aplicar uma cor de fundo ea beira para cada item da lista. Além disso, você pode selecionar o tipo de lista estilo desejado, selecionar a posição da bala em relação ao conteúdo do item da lista, e optar por usar seu próprio gráfico bala personalizado.
Video: Curso de HTML y CSS #40 - Listas: list-style-image
O segredo para manter todos os estilos de lista em ordem é para embrulhar sua lista entre as tags com um identidade atributo, e em seguida, criar estilos para os, e tags. Isto é especialmente útil na criação de sistemas de navegação com formatação de lista:
Aqui estão os estilos que você pode criar para sua lista na CSS. Este código inclui estilos para estados normais e de link de foco:
#nav {posição: absoluta de largura: 539px; altura: 57px; índice z: 4-direita: 30px;} # nav ul {lista-modelo do tipo: nenhuma; margem: 0px; padding-top: 31px; padding- direito: 0px; padding-bottom: 0px; padding-left: 8px;} # nav ul li {display: inline-font-family: Arial, Helvetica, sans-serif-font-size: 14px; font-weight: bold- color: # 4e2d17-padding: 0px; margin: 0px;} # nav ul li a: link, #nav ul li a: visited {text-decoration: none; color: # 4e2d17-background-color: # FAF8ED-padding- top: 57px; padding-right: 6px;-bottom padding: 10px; padding-left: 6px;} # nav ul li a: hover {color: # FFF-background-color: # E51B24-}A imagem abaixo ilustra como este menu de navegação aparece no navegador quando um visitante mouses sobre um dos links.
Video: Curso Básico de CSS - 11. Listas
Como estilo de tabelas com CSS3
Com tabelas e CSS, você pode estilizar a tabela inteira, células individuais de mesa, linhas ou colunas inteiras, e o conteúdo de cada célula.
Começar por inserção de um quadro e adicionando o conteúdo desejado de cada uma das células da tabela. Aplicar qualquer preenchimento da célula e o espaçamento da célula para a tabela como desejado. Então, para tornar o processo de denominar sua tabela mais fácil, certifique-se de adicionar um identidade atribuir à etiqueta de mesa e a abertura classe atribuir à primeira marca de abertura linha da tabela:
| infantil Silk Long Johns | Preço |
| Crewneck Longa Underwear Top | $ 17,95 |
| Pant Underwear Longo | $ 17,95 |
Em seguida, crie um estilo para que identidade, que você pode usar para formatar as principais partes da tabela, como o tamanho da tabela, cor de fundo e borda:
#longjohns {background-color: # 996-height: 200px; width: 300px; color: # FFF-}Depois de concluir a formatação principal da tabela, você pode criar combinators avançados (também chamado seletores dependentes) e estilos personalizados para as diferentes células da tabela, conforme ilustrado abaixo.
Video: Trucos CSS (29) - Tabla responsive
#longjohns tr td {border-top-width: 0px; border-right; width: 0px; border-bottom-width: 1px; border-left; width: 0px; border-top-style: none; border-right; estilo : none; border-bottom-style: pontilhada-border-left; style: none; border-bottom-color:. #FFF -} longjohnsth {font-weight: bold-background-color: # C9C9AD-color: # 000- }