Marca <estilo> em HTML
Neste artigo, falaremos sobre estilo de tag com exemplos . Desejando que satisfizesse os requisitos para a aprendizagem.
A tag <style> é um elemento HTML usado para definir estilos para uma página da web. É normalmente usado em conjunto com folhas de estilo em cascata (CSS) para aplicar estilo visual a elementos HTML.
A tag <style> é utilizada para especificar os detalhes de estilo de um documento (CSS). A tag <style> pode ser utilizada para indicar quais elementos HTML devem ser exibidos nos navegadores.
Documento HTML simples com a tag <style> :
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
body {
background-color: lightblue;
}
h1 {
color: maroon;
}
p {
font-size: 20px;
}
Welcome to Mr examples
This is an example of using the tag style to define global CSS styles for a document.
Criando um efeito de foco em um botão:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
button:hover {
background-color: blue;
color: white;
}
Welcome to Mr examples
Hover over me
Outro exemplo é criar uma consulta de mídia para alterar o layout de uma página da Web com base no tamanho da tela:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
@media only screen and (max-width: 600px) {
body {
font-size: 12px;
}
#sidebar {
display: none;
}
}
Welcome to Mr examples
Usar a tag <style> em HTML para criar um elemento exclusivo em uma página da Web é criar uma animação CSS:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.animated {
animation-name: example;
animation-duration: 4s;
}
Welcome to Mr examples
class="animated"This div has an animation
Índice-
Tag <estilo> usa
Aqui estão alguns usos comuns da tag <style> :
- A tag <style> é comumente usada para definir regras CSS que se aplicam a elementos HTML específicos. Por exemplo, você pode usar a tag <style> para alterar a cor e o tamanho da fonte de todos os cabeçalhos do documento.
- A tag <style> também pode ser usada para definir uma folha de estilo interna. Esta é uma maneira de incluir regras CSS diretamente no documento HTML, em vez de vincular a uma folha de estilo externa.
- A tag <style> também pode ser usada para definir estilos embutidos. Isso significa que as regras de estilo são aplicadas diretamente aos elementos HTML do documento.
- A tag <style> pode ser usada para definir media queries, que são regras CSS que só se aplicam sob certas condições (como tamanho ou orientação da tela).
IMPORTANTE: Em HTML , um navegador formata um documento de acordo com as especificações da folha de estilo. Nos casos em que algumas propriedades forem declaradas em diferentes folhas de estilo para o mesmo seletor (elemento), elas serão retiradas da última folha de estilo.
Conselho:
- Links para folhas de estilo externas são criados com a tag <link> .
- Nosso próximo tutorial de CSS ajudará você a aprender tudo sobre folhas de estilo.
Se você deseja fazer uma animação atrativa para o usuário siga o exemplo abaixo:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
lang="en"
charset="UTF-8"
http-equiv="X-UA-Compatible" content="IE=edge"
name="viewport" content="width=device-width, initial-scale=1.0"
Style Tag Usage
img {
--s: 15px; /* size of the frame */
--b: 2px; /* border thickness */
--w: 200px; /* width of the image */
--c: #7B3B3B;
width: var(--w);
aspect-ratio: 1;
object-fit: cover;
padding: calc(2*var(--s));
--_g: var(--c) var(--b),#0000 0 calc(100% -- var(--b)),var(--c) 0;
background:
linear-gradient( var(--_g)) 50%/100% var(--_i,100%) no-repeat,
linear-gradient(90deg,var(--_g)) 50%/var(--_i,100%) 100% no-repeat;
outline: calc(var(--w)/2) solid #0009;
outline-offset: calc(var(--w)/-2 -- 2*var(--s));
transition: .4s;
cursor: pointer;
}
img:hover {
outline: var(--b) solid var(--c);
outline-offset: calc(var(--s)/-2);
--_i: calc(100% -- 2*var(--s));
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
align-items: center;
grid-auto-flow: column;
gap: 20px;
background: #e8e8e8;
}
src="https://picsum.photos/id/111/300/300" alt="an old car"
src="https://picsum.photos/id/183/300/300" style="--c: #668284;--b:1px;--s: 18px" alt="an old car"
Atributos
Global
A tag <style> também funciona com os atributos globais do HTML .
Evento
A tag de estilo <estilo> lida com os atributos do evento HTML .
Lista de Atributos
| Atributo | Valor | Visão geral |
|---|---|---|
| meios de comunicação | media_query | Indica a mídia/dispositivo para o qual o recurso de mídia é adaptado |
| tipo | texto/css | Define o tipo de mídia para a tag <style> |
Compatibilidade do navegador
| Elemento |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <estilo> | Sim | Sim | Sim | Sim | Sim |
CSS predefinido
O elemento <style> será apresentado na maioria dos navegadores com estes valores padrão:
style {
display: none;
}
Vantagens de tags de estilos HTML
A tag <style> em HTML oferece várias vantagens, incluindo:
- A tag <style> permite definir estilos para sua página da Web em um local centralizado, em vez de repetir os mesmos estilos para cada elemento HTML individual. Isso pode ajudar a simplificar seu código e torná-lo mais fácil de manter ao longo do tempo. Além disso, usando CSS para definir seus estilos, você pode criar efeitos de estilo mais avançados e dinâmicos do que com HTML sozinho.
- Ao usar a tag <style> para definir seus estilos em um arquivo separado ou seção de seu documento HTML, você pode reduzir a quantidade de código que precisa ser carregado pelo navegador. Isso pode melhorar o desempenho do site e fazer com que suas páginas carreguem mais rapidamente.
- Usando CSS para definir seus estilos, você pode separar a apresentação visual de seu conteúdo da estrutura HTML subjacente. Isso pode ajudar a melhorar a acessibilidade do seu site, pois tecnologias assistivas, como leitores de tela, podem analisar o conteúdo com mais facilidade e transmiti-lo a usuários com deficiências.
- Usando a tag <style> para definir seus estilos em um local centralizado, você pode garantir que todos os seus elementos HTML sejam estilizados de forma consistente em seu site. Isso pode ajudar a criar um site coeso e com aparência profissional, fácil de navegar e entender pelos usuários.
Deixe sua reação abaixo para apreciar nossos esforços ou nos fornecer algumas sugestões para a melhoria deste site.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
