✅ Listas e menus em CSS3 | Desenvolvimento 2024

Índice

Para crie menus dinâmicos para nossas páginas da web É muito comum hoje programar em HTML5 e dar a ele uma aparência pessoal por meio CSS3 que é uma linguagem baseada em folhas de estilo, ou seja, o código que dá forma, cor e estrutura à nossa página vai em um arquivo separado codificado fora da própria página que estamos escrevendo.

Em primeiro lugar, veremos como fazer listas, pois afinal um menu é uma lista desenhada para torná-la visivelmente mais elegante. Desta forma, estamos estruturados em Html como uma lista de links e então colocamos uma aparência personalizada já com CSS3.

Existem dois tipos de listas, ordenadas e não ordenadas. Se vamos usar uma lista para configurar um menu posteriormente, é mais provável que usemos uma lista não ordenada, no entanto, veremos as opções.

Eles são criados exatamente da mesma forma, a única diferença está na palavra reservada, que para o ordenado será

O código HTML é o seguinte:


Primeiro elemento
Segundo elemento
Terceiro elemento


Primeiro elemento
Segundo elemento
Terceiro elemento

1. Primeiro elemento
2. Segundo elemento
3. Terceiro elemento

Ou exatamente o mesmo sem o ordinal primeiro:

Primeiro elemento
Segundo elemento
Terceiro elemento

Em HTML existem certos pré-formatos quando criamos uma lista, ou seja, existe uma certa margem, cor da fonte, marcador, preenchimento, etc. que aparece por padrão ao criar nossa lista. O ruim é que visualmente não parece muito bom, o bom é que é extremamente fácil alterá-lo ao nosso gosto graças ao CSS.

Vamos começar examinando os diferentes tipos de vinhetas que podemos colocar em nosso menu. Por padrão, cada item da lista é precedido por um círculo preto. Porém podemos colocar quadrados, círculos vazios ou uma imagem de nosso arquivo.

O código para modificar o marcador em CSS3 é o seguinte:

 #menu {tipo de estilo de lista: quadrado;}

Para modificar a margem usando o menu de exemplo, é tão simples quanto usar este código em CSS3:

 #menu {margin: 0px;}

 #menu {margin: 0px; preenchimento: 2px; }

Código CSS3

 #menu {border: 2px;}

Além da espessura, borda é um campo que tem muitas possibilidades, podemos escolher um estilo, uma cor, um gradiente … e vamos ver algumas opções.

Estilo de borda
Começando com o estilo de ponta, estilo de borda, as possibilidades mais utilizadas são:

NenhumO que isso faz é remover a própria borda. Esta é a opção padrão, portanto, normalmente, quando criamos listas para nossos menus, nenhuma borda aparecerá a menos que a especifiquemos.

SólidoEsta é a borda que pode ser mais usada. É uma borda contínua, de cor preta.
EscondidoO oculto é outra opção em que não visualizamos nenhuma aresta, uma vez que estão ocultas. No entanto, para fins de programação, ele existe. É usado para delimitar as bordas com outras células ou tabelas adjacentes, mesmo se não quisermos que uma borda grossa seja vista.
CumeVamos colocar essa vantagem se quisermos que ela se destaque das demais. Faz com que a borda pareça estar colocada um nível acima do resto da tela.
InícioComo o anterior, é uma borda saliente, no entanto, não parece estar um nível acima da superfície da tela do que o que ela carrega dentro.
SulcoAo contrário do cume com este estilo de borda, parece que o elemento está submerso abaixo do resto.
InserirDa mesma forma que o Groove, esta aresta não parece estar afundada, mas na verdade está um nível abaixo do resto.
PontilhadoCom este estilo, geramos uma borda formada por uma linha pontilhada, preta por padrão, e espaços.
DobroComo a própria palavra diz, é uma borda dupla, formada por duas linhas pretas contínuas separadas por um espaço.

TracejadasEste é um tipo especial de borda semelhante ao pontilhado, exceto que os pontos se tornam linhas maiores, ou seja, é uma espécie de linha quebrada.

Tal como acontece com a borda, com o estilo de borda podemos escolher definir a borda de um lado, ambos, o limite superior, o limite inferior ou todos. Se escrevermos apenas um valor, ele será colocado em todas as arestas, e se escrevermos duas opções em vez de uma, a primeira é para as arestas superior e inferior e a segunda é para as laterais.

Agora, com isso definimos a borda, o tamanho e o estilo, porém o menu continua muito simples e não muito bonito visualmente falando. Podemos querer menus verticais, já que são criados por padrão, mas se quisermos que sejam horizontais, temos que adicionar a palavra-chave float para que cada item da lista seja colocado ao lado do próximo.

Explico esto con un poco más de detalle, cada elemento de la lista que hemos codificado con “li” tiene por defecto el comportamiento de elemento de bloque, es decir, después de situarse genera un salto de línea e impide que otro elemento se coloque a seu lado. Se quisermos colocar cada elemento de nossa lista ao lado do anterior, devemos eliminar esse comportamento de bloco.

Para isso, o código seria o seguinte:

 #menu {estilo de lista: nenhum; margem: 0px; preenchimento: 0; } #menu li {margin: 2px; preenchimento: 2px; borda: 2px sólido; flutuar: esquerda; }

menu horizontal

Agora, se quisermos que nossa lista atue como um menu e nos redirecione para onde queremos, temos que adicionar um link para nossos elementos. Isso é muito simples. Em nosso código no Html, adicionamos o seguinte:


Primeiro elemento
Segundo elemento
Terceiro elemento

Por fim, veremos algumas das opções de aparência.

Propriedades do texto
LarguraSe quisermos colocar uma largura fixa. Por exemplo, largura: 100 px;
Decoração de textoSe quisermos que o texto do nosso elemento seja decorado de alguma forma. Existem muitas possibilidades, mas algumas das mais comuns são:

sublinhado: se quisermos que tudo seja sublinhado
overline: mesmo que sublinhado coloca uma linha em todo o texto, mas desta vez em vez de embaixo acima.
piscar: Crie um texto que brilha, que pisca como uma luz intermitentemente.
line-through: Vamos escrever esta opção se quisermos que nosso texto seja riscado.
Nenhum: isto é uma redundância já que por defeito o texto vem com este valor, sem qualquer decoração. No entanto, às vezes será útil se quisermos voltar à opção inicial após ter usado um efeito usando um recurso chamado hover que veremos a seguir.

Alinhamento de textoÉ a direção em que o conteúdo de nossos elementos de bloco será publicado, cuidado, não o texto em si, que veremos mais tarde com a propriedade direction. As opções são muito simples: esquerda se queremos ir da esquerda, direita se queremos ir da direita para a esquerda, centro se queremos que o texto seja centralizado e justificado se queremos que o texto seja justificado.

DireçãoCom esta opção vamos definir a direção do texto que escrevemos, neste caso só existem duas opções:

ltr: que é o que aparece por padrão nos navegadores, já que exceto em alguns idiomas em que se escreve da direita para a esquerda, é comum escrever da esquerda para a direita, que é o que define esta opção.
rtl: é a outra direcionalidade possível do texto, da direita para a esquerda que usaremos se quisermos escrever textos em árabe, por exemplo.

Text-indentO fato de ser proveniente de indentação ou tabulação é uma propriedade responsável por estabelecer esse critério na primeira linha de nossos elementos de bloco, e também nas tabelas. Existem três opções:

a medida
percentagem
herdar

Neles se usarmos porcentagem estaremos nos referindo à largura do elemento em que está localizado.
Também em todos eles podemos usar números positivos ou negativos de qualquer uma das unidades de medida existentes para css3, pixels, ems …

Transformação de textoÚltima propriedade relacionada ao texto que veremos que tem a ver com maiúsculas e minúsculas:

capitalizar: com esta opção, apenas a primeira letra de cada palavra será mostrada em maiúsculas.
letras maiúsculas: exibe todo o texto em letras maiúsculas.
minúsculas- Exibe todo o texto em letras minúsculas.
Nenhum: deixa o texto como foi escrito. É o que vem por padrão.

Espaçamento entre palavrasEmbora não trate do texto diretamente, o faz no espaço que deixamos entre as palavras. Seus valores podem ser "normais" ou uma medida válida. Se colocarmos uma medida, seu valor é adicionado à medida normal que é a que vem por padrão.

Agora vamos com as propriedades da fonte.

Propriedades da fonte
FonteEsta propriedade é a mais completa de todas as relacionadas à fonte, e possui diversas opções na hora de utilizá-la. Primeiro, você pode começar com um, dois, três ou nenhum dos valores de “estilo da fonte”, “variante da fonte” e “Peso da fonte”.

Depois temos que colocar o tamanho da letra com "font-size" opcionalmente seguido do espaçamento que é dado com "line-height" e sempre terminando com o tipo de família de fonte "font-family". Finalmente, você terá que colocar um dos seguintes valores:

rubrica- Para botões ou listas suspensas, ou seja, para controles e campos de formulário.
cardápio: se vamos configurar menus suspensos ou outros tipos de menus.
ícone: para os textos exibidos abaixo dos ícones.
caixa de mensagem- Para caixas de diálogo, sejam pop-ups de erro, pop-ups de informação, etc.
status-baA: para barras de status da janela.
pequeno-caption - Para campos e controles de formulário pequenos.

Na propriedade da fonte usamos algumas outras opções que ainda não vimos e que explicaremos a seguir:

Estilo de fonteCom ele vamos definir o estilo de fonte. Os valores que pode ter são "normal", que é o padrão, "itálico" se quisermos que nossa letra fique em itálico, ou seja, itálico; ou "oblíqua" se quisermos a letra oblíqua, que é uma espécie de itálico onde apenas os caracteres estão inclinados e nem todos como em itálico.

Variante de fonteVamos usá-lo para estabelecer o variantes de fonte e temos apenas duas opções, a "normal", que vem por padrão, e a variante "versalete", também chamada de versalete, que faz com que as letras maiúsculas tenham o mesmo tamanho das letras minúsculas.

Espessura da fonteÉ uma das propriedades mais utilizadas já que com ela podemos controlar a espessura das letras (atenção, não é igual ao tamanho de cada letra que veremos mais tarde). Numericamente falando, tem 9 opções que são as centenas de 100 a 900, ou seja, 100, 200, 300, 400, 500, 600, 700, 800 e 900. Também existem valores escritos, o "normal" que equivale a 400 , "negrito" que corresponde a 700 e que é o que chamaríamos de negrito e que curiosamente não apareceu em estilo de fonte, mas aqui. Existem também os valores "mais negrito" ou "mais claro" e às vezes outros como "médio" ou "pesado" que são atribuídos a valores numéricos dependendo do número de espessuras que a fonte possui.

Tamanho da fonteCom esta propriedade se nós controlaremos o tamanho da fonte. Existem quatro valores disponíveis, "tamanho absoluto", "tamanho relativo", "unidade percentual" e "unidade de medida". Existem algumas unidades de medida absolutas e relativas definidas em css, como em, que é a mais usada nesta propriedade, ex, px,%, in, cm, mm, pt ou pc. Além dessas medidas, existem algumas palavras que funcionam e podem ser usadas como xx-pequeno para o menor, x-pequeno, pequeno, médio, grande, x-grande ou xx-grande para o maior. Essas seis palavras correspondem aos tamanhos das diferentes tags de título html de

para

e esses são tamanhos de medida absolutos, então eles sempre terão a mesma aparência, independentemente do navegador ou da resolução da tela. As palavras "menor" e "maior" também podem ser usadas como medidas relativas que dependerão do tamanho da fonte do elemento que a contém.

Altura da linhaJá está definido nas propriedades do texto.
Família de fontesPropriedade amplamente utilizada que nós permite-lhe escolher o tipo de letra ou fonte. Primeiro colocamos o nome da fonte, ou o tipo de letra, e opcionalmente pode ser seguido por outros nomes de fontes, caso nosso navegador ou sistema não tenha o primeiro ou não o suporte. Não existe um tipo de fonte padrão, pois depende do nosso navegador, embora uma muito comum seja a "Times New Roman". Alguns valores de tipo de fonte genérico podem ser "serif", onde algumas fontes como Times New Roman, Garamond, Georgia ou Cambria estão incluídas; "Sans-serif" e seus tipos Verdana, Arial, Tahoma, Helvetica ou Futura. "Monospace" e seus exemplos Courier New ou Monaco entre outros. E "fantasia" com os tipos Comic sans ou Impact. Claro, existem muitos outros tipos de fontes que podemos escolher.

Espaçamento entre letrasCom isso podemos controlar o espaço entre as letras, e funciona exatamente da mesma forma que seu análogo de espaçamento de palavras de propriedades de texto, com os valores "normal" e uma medida válida.

CorFinalmente veremos o propriedade da cor que queremos colocar em nosso texto. Por padrão, é preto. Existem várias maneiras de escolher a cor, uma delas é através das 17 palavras de cores diferentes que existem: aqua, preto, vermelho, amarelo, azul, fúcsia, verde, limão, laranja, cinza, marrom, oliva, marinho, roxo , prata, azul-petróleo e branco.

Outra opção é colocar uma cor de Porcentagem RGB, basta especificar três percentagens correspondentes às cores vermelho ®, verde (G) e azul (B):

 cor: rgb (22%, 76%, 14%); (As 3 porcentagens não precisam dar 100%)

Outra maneira é por Decimal RGB que funciona exatamente da mesma forma que o RGB percentual, mas em vez de colocar três valores em porcentagem, eles são colocados como valores decimais: