É fácil adicionar linhas horizontais usando HTML ou CSS, mas pode não funcionam como você pensa.
Linhas horizontais são uma forma de separar o conteúdo e podem ser feitas usando o elemento HTML HR ou as regras de borda CSS.
Hoje vou mostrar como usar o elemento HTML U para adicionar significado semântico aos seus sublinhados e CSS para enfeitá-los. Você também aprenderá a usar apenas CSS para adicionar sublinhados ao texto e ao conteúdo.
HTML tem a tag hr para declarar uma quebra temática para o conteúdo. Em especificações HTML mais antigas, a tag HR era apenas uma regra horizontal e não fornecia o significado semântico que oferece agora. Hoje, ele não fornece uma quebra visível, mas deve ser estilizado usando CSS. Isso dá mais controle ao designer para fazer com que a tag HR corresponda ao tema do site.
HTML Underlines usando o elemento HR
Desde o início do HTML, ou pelo menos desde Lembro que o elemento U foi uma maneira rápida e suja de inserir uma linha horizontal ou régua horizontal em uma página da web. O elemento U é ótimo porque pode ser usado para os seguintes cenários:
- Quebra temática
- Semântica
- Melhor percepção visual
- Sem tag de fechamento
É simples adicionar uma linha horizontal em sua marcação, basta adicionar:
. Os navegadores desenham uma linha em toda a largura do contêiner, que pode ser o corpo inteiro ou um elemento filho.
Originalmente, o elemento HR era estilizado usando atributos. Hoje, com o HTML5, a tag HR tornou-se semântica, o que significa que informa ao navegador, à tecnologia de leitura assistida e a outros sistemas automatizados que há uma quebra temática de nível de parágrafo.
Esta é uma quebra no fluxo de conteúdo , mas não uma nova página. É melhor servir como uma fila visual de uma mudança de assunto. Por exemplo, você pode colocá-los no final de uma seção, antes de um novo subtítulo.
Cor da linha horizontal HTML, tamanho e outros estilos com CSS
Hoje, o HTML HR elemento é estilizado com CSS em vez de atributos. Isso não apenas usa o sistema certo (CSS) para definir regras de renderização, mas também permite que você reutilize a mesma regra muitas vezes. Isso torna seu código mais sustentável e seus layouts mais consistentes.
Os navegadores renderizam a linha aplicando os estilos a uma combinação dos estilos de fundo e borda. A borda é o estilo principal da linha padrão. Remover a fronteira também remove a linha.
style="border: none;">
Por que você faria isso?
Uma linha invisível ainda pode ser útil para fornecer as informações semânticas ao agente do usuário sem confusão visual que pode interferir na experiência do usuário desejada.
Os estilos padrão de RH comuns do navegador são:
hr {display: block; margem-antes: 0,5em; margem após: 0,5em; início da margem: automático; extremidade da margem: automático; estouro: oculto; estilo de borda: inserção; border-width: 1px;}
Você pode controlar a largura da linha definindo a propriedade width e depois centralizando-a usando a seguinte regra CSS.
hr {width: 60%; margin-left: auto; margin-right: auto;}
Você também pode ajuste a espessura da linha definindo o valor da altura. A cor é definida usando a propriedade background-color . Como bônus, você também pode usar a propriedade opacidade para tornar a linha semitransparente.
hr {width: 300px ; margin-left: auto; margin-right: auto; height: 100px; background-color: # 666; opcaity: 0.5;}
O navegador típico define a margem para cerca de metade de um largura do personagem. Mas você pode alterar isso para qualquer valor que desejar. Isso pode adicionar espaço em branco de qualidade aos seus layouts e enfatizar a quebra de conteúdo.
hr {width: 80%; height: 8px; margin-left: auto; margin-right: auto; cor de fundo: # 666; borda: 0 nenhum; margin-top: 100px; margin-bottom: 100px;}
Você pode aplicar muitas variações de estilo diferentes às suas linhas horizontais. Você não está limitado apenas a cor e largura. Aqui eu defino o estilo de fundo da linha horizontal para uma imagem de 5 estrelas amarelas. Em seguida, fiz com que eles repetissem no eixo x enquanto centralizava a linha.
Dica profissional: defina a cor de fundo como transparente para não mostrar acidentalmente uma cor atrás da imagem.
.five-star-line {height: 20px; imagem de fundo: url (img/5-star-rating.png); repetição de fundo: repetir-x; posição de fundo: centro; cor de fundo: transparente; fronteira: nenhum; largura: 50%; margem: automático; margem superior: 5%; margem inferior: 5%; }
Ajustando a borda o tamanho, a cor e o estilo farão com que a linha tenha uma aparência diferente e tenha o mesmo efeito em todos os navegadores modernos. Por exemplo, nesta demonstração a borda é vermelha, tracejada e 1px de largura:
Divertindo-se aplicando estilos a linhas horizontais
Algumas semanas atrás, publiquei um artigo sobre como fazer listras de fundo usando CSS . Como você pode aplicar essas mesmas regras de plano de fundo a uma linha horizontal, pode fazer algumas coisas bem interessantes com o elemento HR.
Mas primeiro, vamos examinar alguns truques simples de CSS. Este primeiro exemplo altera o estilo da linha para uma linha tracejada.
.striped-border {border: 1px tracejada # 000; largura: 50%; margem: automático; margem superior: 5%; margem inferior: 5%; }
Agora, aplique uma das técnicas de listra à linha horizontal. Aqui eu uso gradientes lineares para fazer o efeito. A borda da linha horizontal é apagada e o tamanho é definido como 40px. O 40px é arbitrário, o importante é fazer com que os dois primeiros gradientes lineares metade da altura do HR. Você também precisará definir o tamanho do plano de fundo para corresponder à altura.
. Zig-zag {border: nenhum ; largura: 50%; margem: automático; margem superior: 5%; margem inferior: 5%; altura: 40px; plano de fundo: gradiente linear (135deg, #ECEDDC 25%, transparente 25%)-20px 0, gradiente linear (225deg, #ECEDDC 25%, transparente 25%)-20px 0, gradiente linear (315deg, #ECEDDC 25% , transparente 25%), gradiente linear (45deg, #ECEDDC 25%, transparente 25%); tamanho do fundo: 40px 40px; cor de fundo: # EC173A;}
Transformando elementos de RH
Com CSS3, você também pode tornar suas linhas mais interessantes. O elemento HR é tradicionalmente uma linha horizontal, mas com a propriedade de transformação do CSS, você pode alterar sua aparência. Uma transformação favorita no elemento HR é alterar a rotação.
Você pode girar seu elemento HR para que fique ligeiramente diagonal:
.incline-line {width: 50%; margem: automático; margem superior: 5%; margem inferior: 5%; transformar: girar (10deg); cor da borda: roxo; }
Ou você pode girá-lo para que fique completamente vertical:
.vertical-line {largura: 50%; margem: automático; margem superior: 50%; margem inferior: 50%; transformar: girar (90deg); cor da borda: roxo; }
Você deve aplicar isso com cuidado, pois isso pode causar interrupções indesejadas em seu layout. Mas é bom saber que você pode aplicar transformações ao elemento HR.
Resumo
As linhas horizontais são uma ótima maneira de adicionar valor visual aos seus layouts. O elemento HTML HR fornece significado semântico para o layout de uma página. Ele só pode ser personalizado usando CSS. Mas você pode aplicar todos os tipos de estilos malucos a uma linha horizontal para criar efeitos de layout muito interessantes.
