English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Arquivos CSS são arquivos de texto puro salvo com a extensão .css.
Neste tutorial, você aprenderá como é fácil adicionar estilos e informações de formatação a páginas da web usando CSS. Mas, antes de começar, certifique-se de que você tem alguns conhecimentos básicos de HTML.
Se você é novo no campo de desenvolvimento web, por favorComece aqui»
Sem mais delongas, vamos começar a usar a tabela de estilos em cascata (CSS).
CSS pode ser anexado como um documento separado ou integrado ao próprio documento HTML. Existem três maneiras de incluir CSS em um documento HTML:
estilos inline -usandostyleatributos no marcador de início do HTML.
estilos embebidos -usando<style>elemento no cabeçalho do documento.
Folha de estilo externa -usando<link>elemento, aponta para o arquivo CSS externo.
Neste tutorial, vamos apresentar as três formas de inserir CSS um por um.
Atenção:A prioridade dos estilos inline é a mais alta, enquanto a dos folhas de estilo externas é a mais baixa. Isso significa que, se emembutidofolhas de estilo eFolha de estilo externaSe forem especificados estilos para o elemento tanto nas folhas de estilo quanto nos estilos inline,embutidoRegras de estilo conflitantes em folhas de estilo internas cobrem folhas de estilo externas.
Estilos inline são usados para aplicar regras de estilo únicas a um elemento, inserindo diretamente as regras CSS no marcador de início. Pode-se usarstyleO atributo adiciona o estilo ao elemento.
AstyleAs propriedades incluem uma série de pares de atributos CSS e valores. Cada"property: value"entre pontos entre colchetes (}};）separados por ponto-e-vírgula (
<h1 style="color:red; font-size:30px;">Este é um cabeçalho</h1> <p style="color:green; font-size:22px;">Este é um parágrafo.</p> <div style="color:blue; font-size:14px;">Este é algum conteúdo de texto.</div>Teste e veja‹/›
O uso de estilo embutido é geralmente considerado uma má prática. Como as regras de estilo são diretamente incorporadas nas etiquetas HTML, isso mistura o estilo com o conteúdo do documento. Isso torna o código difícil de manter e anula o propósito do uso de CSS.
Atenção:definir com estilo embutidopseudo-elementosepseudo-classesEstilos tornaram-se impossíveis. Portanto, deve-se evitar o uso de atributos de estilo no código. UseFolha de estilo externaé o método preferido para adicionar estilo a um documento HTML.
estilo embutido ou estilo interno afeta apenas o documento em que está inserido.
estilo embutido<head>usar a folha de estilo embutida na<style>definição de elemento. Você pode<style>Definir um número ilimitado de elementos em um documento HTML, mas eles devem aparecer<head>e</head>entre as etiquetas. Vamos ver um exemplo:
<!DOCTYPE html><html lang="en"><head>
<title>Meu Documento HTML</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style></head><body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p></body></html>Teste e veja‹/›Dica:etiquetasetype5é o idioma padrão da folha de estilo e o idioma padrão da folha de estilo, portanto, você pode ignorar esta configuração. A propriedade (isto é) define o idioma da folha de estilo. Esta propriedade é puramente informativa. Since CSS é HTML<style><link>type="text/css"
Quando os estilos são aplicados a muitas páginas do site, as folhas de estilo externas são a escolha ideal.
As folhas de estilo externas guardam todas as regras de estilo em um documento separado, permitindo que você ligue a qualquer arquivo HTML do site. As folhas de estilo externas são as mais flexíveis, pois, com folhas de estilo externas, você precisa apenas alterar um arquivo para mudar a aparência inteira do site.
Você pode anexar uma folha de estilo externa de duas maneiras- LinkareImportar.
Antes de criar os links, precisamos criar uma folha de estilo. Vamos abrir o seu editor de código preferido e criar um novo arquivo. Agora, digite o seguinte código CSS neste arquivo e salve-o como "style.css".
body {
background: lightyellow;
font: 18px Arial, sans-serif;}h1 {}}
color: laranja;}pode usar<link>tag liga um arquivo de estilo externo ao documento HTML. O<link>tag para entrar no interno<head>Parte, você pode ver no exemplo abaixo:
<!DOCTYPE html><html lang="en"><head> <title>Meu Documento HTML</title> <link rel="stylesheet" href="css/style.css"></head><body> <h1>This is a heading</h1> <p>This is a paragraph of text.</p></body></html>Teste e veja‹/›
Dica:Nesses três métodos, usar um arquivo de estilo externo é a melhor maneira de definir estilos e aplicá-los a um documento HTML. Pode-se claramente ver no arquivo de estilo externo que o arquivo HTML afetado tem a menor quantidade de alterações de marcação.
A@importRegra é outra maneira de carregar um arquivo de estilo externo. A@importinstrução indica ao navegador carregar um arquivo de estilo externo e usar seus estilos.
Você pode usá-lo de duas maneiras. A mais simples é dentro do título do documento. Note que outras regras CSS podem ainda estar contidas em<style>elemento. Este é um exemplo:
<style>
@import url("css/style.css");
p {
color: azul;
font-size: 16px;
}
</style>Teste e veja‹/›Da mesma forma, você pode usar@importRegras importando um arquivo de estilo de outro arquivo.
@import url("css/layout.css");
@import url("css/color.css");body {
color: azul;
font-size: 14px;}Teste e veja‹/›Atenção:Todos@importTodas as regras devem aparecer no início do arquivo de estilo. Qualquer regra de estilo definida no arquivo de estilo também cobre regras conflitantes importadas no arquivo de estilo. No entanto, devido a problemas de desempenho, não é recomendável importar estilos de outro arquivo de estilo.