Como denominar listas e tabelas com CSS3

listas de estilo e mesas é um pouco diferente do que denomina 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.

Como estilo de listas com CSS3

Com listas, é possível selecionar atributos de tipo, como fonte, tamanho e alinhamento, e aplicar uma cor de fundo e borda para cada item da lista. Além disso, você pode selecionar o tipo de lista de estilo desejado, selecione a posição da bala em relação ao conteúdo item da lista, e optar por usar seu próprio gráfico bala personalizado.

O segredo para manter todos os estilos de lista em ordem é para embrulhar sua lista entre as tags com uma 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:

Casa
Sobre
Serviços
Contato

Aqui estão os estilos que você pode criar para sua lista na CSS. Este código inclui estilos para estados normais e link em foco:

#nav {position: absolute-width: 539px; height: 57px; z-index: 4-direita: 30px;} # nav ul {list-style-type: none; margin: 0px; padding-top: 31px; padding- certo: 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.

Como estilo de tabelas com CSS3

Com mesas e CSS, você pode estilizar a tabela inteira, as 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 espaçamento de célula para a mesa como desejado. Então, para tornar o processo de denominar sua tabela mais fácil, não se esqueça de adicionar um identidade atribuir à marca de tabela de abertura ea classe atribuir à primeira marca de abertura linha da tabela:

id = "longjohns" width = "300" border = "0" cellpadding = "10" cellspacing = "0">class = "longjohnsth">
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.

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