Visão geral do atributo de estilo HTML
O código HTML precisa do atributo de estilo para que as páginas da Web sejam renderizadas em navegadores da Web como Chrome, FireFox, IE para que sejam exibidas como pretendem. As tags HTML podem conter uma variedade de informações e o atributo style controla a aparência das informações contidas nos blocos HTML usando o estilo embutido.
Neste artigo, aprenderemos mais sobre o atributo de estilo HTML, que nada mais é do que um conjunto de regras que definem como uma página será renderizada no navegador da web.
Lista de Atributos de Estilo HTML
Aqui está uma lista de todas as propriedades de estilo que podem ser usadas para influenciar e controlar o design de elementos HTML, acompanhadas de um exemplo prático:
1. Cor de fundo
Com essa propriedade CSS, podemos definir a cor do plano de fundo para qualquer elemento HTML, como
etc.
Exemplo
My background is blue
Resultado:
2. Cor
A cor da fonte do texto em um elemento HTML pode ser controlada definindo seu atributo de cor como o nome certo da cor ou o código HEX ou RGB.
Exemplo
My font color is blue
Resultado:
3. Cor da borda
Podemos definir a cor da borda de qualquer elemento HTML, se desejarmos adicionar uma borda a ele.
Exemplo
Minha borda é vermelha
Resultado:
Como você pode ver no código acima, a propriedade border aceita três propriedades na seguinte ordem: “Largura da borda no estilo da borda cor da borda”.
4. Imagem de fundo
Também podemos definir uma imagem como plano de fundo usando a propriedade background-image da seguinte maneira:
Exemplo:
Resultado:
5. Repetição de Antecedentes
Como você pode ver no exemplo acima, quando uma imagem é definida como plano de fundo usando a propriedade background-image; por padrão, repete a imagem horizontalmente e verticalmente. No entanto, algumas imagens podem precisar ser repetidas verticalmente ou horizontalmente ou podem não ser necessárias para serem repetidas. Esse comportamento pode ser controlado definindo o valor desejado contra a propriedade de repetição em segundo plano e só pode ser usado quando a imagem de segundo plano estiver sendo usada; caso contrário, não adicionará nenhum valor de estilo quando usada como uma propriedade autônoma.
O valor "repeat-x" é usado para permitir que a imagem seja repetida apenas horizontalmente.
O valor "repeat-y" é usado para permitir que a imagem seja repetida apenas na vertical.
O valor “sem repetição” é usado para interromper qualquer tipo de repetição da imagem de fundo.
Vamos modificar o exemplo acima para melhorar a imagem de fundo.
Exemplo
Resultado:
Podemos comparar os exemplos acima e entender que, com imagem de fundo, podemos adicionar uma imagem como fundo e com repetição de fundo, podemos controlar a repetição da imagem de fundo.
6. Posição de fundo
Com essa propriedade, podemos definir a posição da imagem de fundo.
Exemplo
Resultado:
7. Margens
O CSS nos fornece propriedades para definir margens nos quatro lados de um elemento HTML, ou podemos adicionar margens a um lado específico do elemento.
Com a margem superior pode adicionar uma margem à parte superior do elemento, a margem direita adiciona uma margem à direita do elemento, a margem esquerda adiciona uma margem à esquerda do elemento e a margem inferior adiciona uma margem para a parte inferior do elemento. Em vez de usar essas 4 propriedades, também podemos usar a propriedade margin e definir seus valores conforme nossa exigência.
Exemplo
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Padding
A propriedade padding define o espaço entre o conteúdo de um elemento e suas bordas. Podemos usar a propriedade “padding” ou propriedades individuais do padding, como padding-top, padding-bottom, padding-left, padding-right, para definir o padding para a parte superior, inferior, esquerda ou direita do conteúdo de um elemento.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Altura e Largura
Altura e largura são as propriedades CSS mais básicas usadas para definir a altura e a largura de qualquer elemento HTML. Eles podem ser definidos com um valor de pixel como 200px ou uma porcentagem como 10%, 20% etc.
10. Alinhamento de texto
Essa propriedade é usada para definir a direção horizontal na qual gostaríamos de alinhar o texto de um elemento. O valor pode ser definido para centralizar, direita ou esquerda.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Decoração de texto
A propriedade de decoração de texto pode ser usada para definir decorações como sublinhado, linha ou sobreposição sobre o texto em HTML.
Exemplo:
Isso está sublinhado
Resultado:
12. Espaçamento entre letras
Como o nome sugere, essa propriedade é usada para definir o espaçamento entre letras / caracteres em uma palavra. Pode ser atribuído um valor de pixel positivo ou negativo para aumentar ou diminuir o espaçamento entre as letras.
Exemplo:
Minhas palavras estão sobrepostas
Resultado:
13. Altura da linha
A altura da linha define a distância entre as linhas verticais. Como o espaçamento das letras, a altura da linha também pode ser definida como um valor de pixel positivo ou negativo. Vamos revisar o exemplo abaixo para entender melhor:
Exemplo:
Este parágrafo tem uma pequena altura de linha.
Este parágrafo tem uma pequena altura de linha.
Resultado:
14. Direção do texto
Às vezes, se o conteúdo da página da web não estiver em inglês, mas em algum outro idioma como o árabe, que segue uma convenção da direita para a esquerda, precisaríamos mudar a direção do texto. Nesses casos, podemos reverter a direção do texto.
Exemplo:
Estou da direita para a esquerda
Resultado:
15. Sombra de texto
Esta propriedade adiciona uma sombra ao texto.
Exemplo:
Eu tenho uma sombra cinza
Resultado:
16. família de fontes
Podemos definir a classe da fonte para o texto em um elemento. Podemos definir várias famílias de fontes separadas por vírgula como um sistema de fallback para lidar com cenários em que uma classe de fonte preferida não pode ser carregada.
- Estilo da fonte: com a propriedade estilo da fonte, podemos adicionar efeito itálico ou oblíquo ao texto.
Exemplo:
Este é um estilo oblíquo.
Resultado:
- Peso da fonte: esta propriedade define o peso de uma fonte.
Exemplo:
Este é um parágrafo em negrito
Resultado :
Os atributos de estilo exibidos acima de nossos blocos de construção com design de interface do usuário e UX. Eles continuam a evoluir à medida que novas versões do CSS são introduzidas.
Artigos recomendados
Este é um guia para o Atributo de estilo HTML. Aqui discutimos a lista de todas as propriedades de estilo que podem ser usadas para influenciar e controlar o design de elementos HTML com a ajuda de exemplos práticos. Você também pode consultar os seguintes artigos para saber mais -
- Estilos de fontes HTML
- Estilos de lista HTML
- Tags HTML básicas
- Vantagens do HTML
- Quadros HTML
- Inverter em JavaScript
- Blocos HTML
- Definir uma cor de plano de fundo em HTML com exemplo