A tag de estilo em HTML
- 24-07-2022
- Trung Minh
- 0 Comments
Neste artigo, mostrarei como usar a tag de estilo em HTML, esta é uma tag usada para escrever código CSS para tags HTML ou especificar informações para arquivos CSS para páginas da web.
Quando se trata da tag de estilo, você definitivamente deve pensar em CSS. Mas como ainda não aprendemos, execute temporariamente os exemplos no artigo para ver os resultados. Mais tarde, quando você passar para a série de lições de CSS, aprenderá com mais cuidado.
Mục lục
O que é a tag de estilo em HTML?
Estilo é uma tag HTML normal, é usada para definir o escopo do código CSS para o navegador compilar. Todo o código dentro da tag de estilo não é exibido na interface, apenas compila e roda em segundo plano no navegador.
Exemplo : Use a tag style para especificar a cor do texto de exibição da tag p e da tag h1.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <p>this is a test.</p> </body> </html>
Como você pode ver, dentro da tag style eu defini duas propriedades CSS:
<style> h1 {color:red;} p {color:blue;} </style>
Use a tag de estilo para formatar a interface
Para você entender melhor, vou fazer um exemplo bem simples, que se divide em dois casos da seguinte forma:
<!DOCTYPE html> <html> <head> <title>Tùy chỉnh giao diện HTML bằng CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <p> Chào mừng bạn đến với website học lập trình online web888.vn </p> </body> </html>
Resultado
Chào mừng bạn đến với website học lập trình online web888.vn
<!DOCTYPE html> <html> <head> <title>Tùy chỉnh giao diện HTML bằng CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> p{ background: white; color: black; text-align: center; font-size: 30px; } </style> </head> <body> <p> Chào mừng bạn đến với website học lập trình online web888.vn </p> </body> </html>
Chào mừng bạn đến với website học lập trình online web888.vn
Execute os dois exemplos acima e você verá a diferença entre eles. O primeiro exemplo tem fundo branco e texto preto, o segundo exemplo tem fundo azul e texto branco. Em relação à estrutura HTML, não há diferença, mas no exemplo 2, adicionei um código CSS da seguinte forma:
<style type="text/css"> p{ background: blue; color: white; text-align: center; font-size: 30px; } </style>
Então, para adicionar CSS à tag HTML, nós o colocamos dentro da tag style. Quanto à sintaxe CSS, você pode ler o artigo Sintaxe CSS para entender melhor.
Então você já entendeu o significado da tag de estilo HTML, certo? Mais tarde vamos praticar a escrita de código CSS nesta própria tag de estilo. Vejo você na próxima postagem.