Linhas horizontais
Publicados: 2021-09-01Há muitas maneiras de tornar suas páginas HTML mais impressionantes e bem estruturadas. Mais especificamente, uma linha horizontal pode desempenhar um papel especial em tornar o conteúdo do seu site bem equilibrado, mais claro e mais fácil de navegar. Sempre que decidimos fazer grandes mudanças em nossos sites, pequenas coisas como linhas podem fazer a diferença. Essas pequenas coisas tornam a mensagem do seu site mais abrangente. Além disso, eles podem mudar o apelo visual do seu recurso da web e a forma como seu público percebe seus dados.
Mas você também pode criar linhas personalizadas para se adequar à sua página da Web e para ter um melhor domínio do espaço que você está manipulando em sua página. Com isso dito, vamos dar uma olhada em como personalizar linhas horizontais em suas páginas HTML.Uma linha horizontal é um elemento HTML que é usado como decoração de sua página web. No entanto, também pode ser útil para vários outros propósitos, como:
- Um separador que divide visualmente diferentes partes do seu conteúdo e coloca ênfase onde uma ideia termina e outra começa.
- Um marcador que dá ênfase a algumas seções significativas de uma página da web.
- Uma linha horizontal é considerada uma das maneiras mais populares e fáceis de alcançar uma ampla gama de propósitos em um site. Embora possa parecer simples à primeira vista, é um elemento multifuncional que você pode ajustar com base em suas necessidades específicas. Usando modificações simples do código HTML de sua página web, você pode ajustar as seguintes especificações da linha horizontal:
Comprimento;
Largura;
Cor;
Alinhamento.
Vale ressaltar também que a linha horizontal se refere aos elementos do bloco. Isso significa que ele é colocado em uma linha separada em uma página da Web, e o texto que você adicionar ao lado da linha será colocado abaixo dela.
As linhas horizontais são muito úteis para separar sua página em diferentes seções, para adicionar uma linha horizontal simples basta digitar <hr>, e você obterá isso:
Como criar uma linha horizontal
Você pode definir uma linha usando uma tag <hr> simples. É a abreviação de "Regra Horizontal" e define os parâmetros externos clássicos. O que o difere de muitos outros é que ele não precisa de uma tag final e pode existir por conta própria. Você pode alterar as características externas de um elemento usando valores adicionais na tag:
Se parece com isso. Por exemplo, se quisermos um comprimento de 100 pixels, definiríamos uma tag como esta: hr width = "100.
Alinhamento.
Você pode alinhar a linha nas bordas esquerda ou direita e também no centro. Este recurso só é válido se você já tiver especificado o parâmetro largura, pois uma linha de página inteira não pode ser alinhada. Para alinhamento, defina um atributo adicional na tag "alinhar" e adicione uma direção a ele: centro - para centro, esquerda - para esquerda e direita - para alinhamento à direita. A tag finalizada, neste caso, ficará assim: se precisarmos definir o alinhamento central para uma linha horizontal com comprimento de 150 pixels, a tag finalizada ficará assim: hr align = "center" width = " 150". Observe que "alinhar", a medida para alinhamento, é colocada na posição 1, embora o atributo dependa da largura da medida de comprimento.Largura.
Opcionalmente, você também pode especificar a largura, criando um sublinhado em negrito ou fino. Este critério não depende de nada e pode ser usado de forma independente sem especificar o comprimento ou alinhamento. Para isso, utilizamos o atributo size na tag e um valor numérico igual à largura desejada em pixels. O número é indicado entre aspas após o atributo size e o símbolo "=".
Assim, se precisarmos criar uma linha de 15 pixels de largura, precisamos criar a seguinte tag: hr size = "15".
Cor.
Também é definido como um indicador independente. Para alterá-lo, use o atributo color em combinação com o nome da cor na forma de código ou em inglês. A cor é indicada entre aspas após o símbolo "=".
Assim, a tag para uma linha branca padrão pode ser escrita de duas maneiras: hr color = "#FFFFFF" ou hr color = "white"
Preto pode ser criado usando o código # 000000.
Como fazer uma linha horizontal colorida?
As linhas horizontais são boas para separar um bloco de texto de outro. Textos pequenos com linhas horizontais na parte superior e inferior chamam mais a atenção do leitor do que o texto comum.
Usando a tag < hr >, você pode desenhar uma linha horizontal, cuja aparência depende dos atributos usados, bem como do navegador. A tag se refere aos elementos do bloco, então a linha sempre começa em uma nova linha, e depois disso, todos os elementos são exibidos na próxima linha. Graças aos muitos atributos da tag <hr >, a linha criada através desta tag é fácil de manipular. Combinado com o poder dos estilos, adicionar uma linha ao seu documento é muito fácil.
Por padrão, a linha é exibida em cinza e com efeito de volume. Esse tipo de linha nem sempre se encaixa no design do site, portanto, é compreensível o desejo dos desenvolvedores de alterar a cor e outros parâmetros da linha por meio de estilos. No entanto, os navegadores são ambíguos sobre esse problema, e é por isso que você terá que usar várias propriedades de estilo de uma só vez. Em particular, as versões mais antigas do Internet Explorer usam a propriedade color para a cor da linha, enquanto outros navegadores usam uma cor de fundo. Mas isso não é tudo, neste caso, certifique-se de especificar uma espessura de linha (propriedade altura) diferente de zero e remova a borda ao redor da linha definindo a propriedade border como none. Juntando todas as propriedades do seletor hr, obtemos uma solução universal para navegadores populares.
<! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title> Cor da linha horizontal < /title > < style > hr { border: none; / * Remova a borda * / background-color: red; / * Cor da linha * / cor: vermelho; / * Cor da linha para IE6-7 * / altura: 2px; / * Largura da linha * / } < /style > < /head > < body > < hr > < p > Texto string < /p > < hr > </body > </html >Exemplos:
Este:
< hr color="#c7c34c" size="2" largura="50%" >dá isso:
Cor: cor da linha:
< hr color="#c7c34c" size="2" largura="50%" >Tamanho: Altura da linha expressa em pixels:
< hr size="x" >Largura: Largura da linha expressa em porcentagem (%) ou em pixels (no meu exemplo é 50% do tamanho original):
< hr largura="x%"> ou < hr largura="x" >Mais avancado:
Este:
< hr largura="400" color="#000000" tamanho="4" >dá:
Neste caso usamos o estilo:
A largura da borda é de 3 pixels (3 px)
está pontilhado
A cor base é preta: #000000
Pontos coloridos em azul: #0099CC
Um último exemplo para explicar mais, se ainda for necessário ;):
este
< hr width="400" color="#FFFFFF" size="6" >dá:
Neste caso logo acima:
A largura da borda é de 2 pixels (2 px)
é pontilhado
A cor base é branca: #FFFFFF
Traços coloridos em prata: #C0C0C0
Os estilos possíveis são:
-pontilhado
-tracejadas
-sólido
-em dobro
-sulco
-início
-inserir
-cume
Isso é tudo que tenho a dizer sobre as linhas horizontais!