2.1 Folhas de Estilo Externas
Conectar CSS (Cascading Style Sheets) a um documento HTML te permite estilizar páginas web, melhorando a aparência e a usabilidade delas. Existem várias formas de conectar CSS ao HTML, cada uma com suas vantagens e aplicabilidade para situações diferentes.
Métodos para conectar CSS:
- Folhas de estilo externas (External Stylesheets)
- Folhas de estilo internas (Internal Stylesheets)
- Estilos embutidos (Inline Styles)
Folhas de estilo externas (External Stylesheets)
As folhas de estilo externas são arquivos CSS separados que são conectados ao documento HTML usando a tag <link>.
Este método permite separar os estilos da estrutura do documento, o que facilita o gerenciamento dos estilos e a reutilização dos arquivos CSS em várias páginas.
Vantagens:
- Facilidade no gerenciamento dos estilos
- Reutilização dos estilos em várias páginas
- Melhora no cache e no desempenho
Sintaxe:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemplo de folha de estilo externa</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Cabeçalho</h1>
<p>Texto</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemplo de folha de estilo externa</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Cabeçalho</h1>
<p>Texto</p>
</body>
</html>
Exemplo de arquivo CSS(styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
2.2 Folhas de Estilo Internas (Internal Stylesheets)
As folhas de estilo internas são colocadas dentro do próprio documento HTML na seção <head> usando a tag <style>.
Este método é conveniente quando você precisa aplicar estilos apenas a uma página ou quando o arquivo externo não está disponível.
Vantagens:
- Facilidade de uso para uma única página
- Não há necessidade de um arquivo adicional
Sintaxe:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemplo de folha de estilo interna</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Cabeçalho</h1>
<p>Texto</p>
</body>
</html>
2.3 Estilos Embutidos (Inline Styles)
Os estilos embutidos são aplicados diretamente aos elementos HTML usando o atributo style. Este método é útil para
testes rápidos ou quando é necessário alterar o estilo de um elemento individualmente.
Vantagens:
- Aplicação rápida e precisa de estilos
- Adequado para mudanças dinâmicas através de JavaScript
Desvantagens:
- Dificuldade na gestão de estilos com muitos elementos
- Dificuldade na reutilização de estilos
Sintaxe:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemplo de estilos embutidos</title>
</head>
<body>
<h1 style="color: #333; font-family: Arial, sans-serif;">Cabeçalho</h1>
<p style="color: #666; background-color: #f4f4f4;">Texto</p>
</body>
</html>
Exemplo de uso de todos os métodos em uma única página:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemplo de todos os métodos de conexão CSS</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f4f4f4;
}
.internal {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="internal">Cabeçalho</h1>
<p style="color: #666;">Este texto é estilizado usando estilos embutidos.</p>
</body>
</html>
2.4 Ordem de Prioridade dos Estilos
Quando estilos são aplicados de diferentes maneiras, a prioridade é determinada da seguinte forma:
- Estilos embutidos (Inline Styles) têm a maior prioridade
- Folhas de estilo internas (Internal Stylesheets) têm o próximo nível de prioridade
- Folhas de estilo externas (External Stylesheets) têm a menor prioridade
Se múltiplos estilos com a mesma prioridade forem aplicados a um único elemento, a prioridade é determinada pela especificidade do seletor e pela ordem de declaração.
Exemplo de prioridade de estilos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemplo de prioridade de estilos</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue; /* Estilo interno */
}
</style>
</head>
<body>
<p style="color: red;">Este texto será vermelho devido à prioridade do estilo embutido.</p>
</body>
</html>
GO TO FULL VERSION