033.1 Lição 1
Certificação: |
Web Development Essentials |
---|---|
Versão: |
1.0 |
Tópico: |
033 Estilização de conteúdo com CSS |
Objetivo: |
033.1 Noções básicas de CSS |
Lição: |
1 de 1 |
Introdução
Todos os navegadores web exibem as páginas HTML de acordo com regras de apresentação padrão que são práticas e diretas, mas não visualmente atraentes. O HTML, por si só, oferece poucos recursos para produzir páginas elaboradas que correspondam aos conceitos modernos de experiência do usuário. Depois de criar algumas páginas HTML simples, você provavelmente percebeu que elas são feiosas quando comparadas às páginas bem projetadas que vemos comumente na Internet. Isso ocorre porque, no HTML moderno, o código de marcação destinado à estrutura e função dos elementos no documento (ou seja, o conteúdo semântico) é separado das regras que definem a aparência dos elementos (a apresentação). As regras de apresentação são escritas em uma linguagem diferente, chamada Cascading Style Sheets (CSS). Ela permite alterar quase todos os aspectos visuais do documento, como fontes, cores e o posicionamento dos elementos ao longo da página.
Na maioria dos casos, os documentos HTML não são pensados para ser exibidos em um layout fixo, como um arquivo PDF. Em vez disso, as páginas web baseadas em HTML devem se adaptar a uma ampla variedade de tamanhos de tela, ou até mesmo a formatos impressos. O CSS oferece opções ajustáveis para garantir que a página seja exibida conforme o esperado, adaptada ao dispositivo ou aplicativo que a abre.
Aplicação de estilos
Existem várias maneiras de incluir CSS em um documento HTML: escrever diretamente na tag do elemento, em uma seção separada do código-fonte da página ou em um arquivo externo a ser referenciado pela página HTML.
O atributo style
A maneira mais simples de modificar o estilo de um elemento específico é escrevê-lo diretamente na tag do elemento usando o atributo style
. Todos os elementos HTML visíveis aceitam um atributo style
, cujo valor pode ser uma ou mais regras de CSS, também conhecidas como propriedades. Vamos começar com um exemplo simples, um elemento de parágrafo:
<p>My stylized paragraph</p>
A sintaxe básica de uma propriedade CSS personalizada é property: value
, onde property
é o aspecto particular que você deseja alterar no elemento e value
define o que substituirá a opção padrão feita pelo navegador. Algumas propriedades se aplicam a todos os elementos e outras se aplicam apenas a elementos específicos. Da mesma forma, existem valores adequados a serem utilizados em cada propriedade.
Para mudar a cor do nosso parágrafo simples, por exemplo, usamos a propriedade color
. A propriedade color
refere-se à cor do primeiro plano, ou seja, a cor das letras do parágrafo. A cor em si é indicada na parte do valor da regra e pode ser especificada em vários formatos diferentes, incluindo nomes simples como red
, green
, blue
, yellow
etc. Assim, para deixar a letra do parágrafo roxa, adicione a propriedade personalizada color: purple
ao atributo style
do elemento:
<p style="color: purple">My first stylized paragraph</p>
Outras propriedades personalizadas podem entrar na mesma propriedade style
, mas devem ser separadas por ponto e vírgula. Se você quiser aumentar o tamanho da fonte, por exemplo, adicione font-size: larger
à propriedade style
:
<p style="color: purple; font-size: larger">My first stylized paragraph</p>
Note
|
Não é necessário adicionar espaços ao redor dos dois pontos e ponto e vírgula, mas eles ajudam a facilitar a leitura do código CSS. |
Para ver o resultado dessas alterações, salve o HTML a seguir em um arquivo e abra-o em um navegador web (os resultados são mostrados na Figure 1):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Basics</title>
</head>
<body>
<p style="color: purple; font-size: larger">My first stylized paragraph</p>
<p style="color: green; font-size: larger">My second stylized paragraph</p>
</body>
</html>
Podemos imaginar cada elemento da página como um retângulo ou caixa cujas propriedades geométricas e decorações podem ser manipuladas com CSS. O mecanismo de renderização emprega dois conceitos básicos padrão para o posicionamento do elemento: posicionamento em bloco e posicionamento em linha. Os elementos de bloco ocupam todo o espaço horizontal do elemento pai e são posicionados sequencialmente, de cima para baixo. Sua altura (sua dimensão vertical, que não deve ser confundida com sua posição no alto da página) geralmente depende da quantidade de conteúdo que incluem. Os elementos em linha são posicionados horizontalmente, da esquerda para a direita, até que não haja mais espaço no lado direito; depois disso, o elemento continua em uma nova linha logo abaixo da atual. Elementos como p
, div
e section
são posicionados como blocos por padrão, ao passo que elementos como span
, em
, a
e letras sozinhas são posicionados em linha. Esses métodos básicos de posicionamento podem ser modificados fundamentalmente pelas regras do CSS.
O retângulo correspondente ao elemento p
no corpo do documento HTML de amostra ficará visível se adicionarmos a propriedade background-color
à regra (Figure 2):
<p style="color: purple; font-size: larger; background-color: silver">My first stylized paragraph</p>
<p style="color: green; font-size: larger; background-color: silver">My second stylized paragraph</p>
Conforme adicionamos novas propriedades personalizadas de CSS ao atributo style
, o código como um todo vai começando a ficar confuso. A inclusão de muitas regras de CSS no atributo style
prejudica a separação entre a estrutura (HTML) e a apresentação (CSS). Além disso, você logo perceberá que muitos estilos são compartilhados entre diferentes elementos e não vale a pena repeti-los em cada um deles.
Regras de CSS
Em vez de estilizar os elementos diretamente nos atributos style
de cada um deles, é muito mais prático informar ao navegador sobre a coleção inteira de elementos aos quais o estilo personalizado se aplica. Para isso, adicionamos um seletor às propriedades personalizadas, combinando elementos por tipo, classe, ID único, posição relativa etc. A combinação de um seletor com as propriedades personalizadas correspondentes — o que também chamamos de declarações — constitui uma regra de CSS. A sintaxe básica de uma regra de CSS é selector { property: value }
. Como no caso do atributo style
, propriedades separadas por ponto e vírgula podem ser agrupadas, como em p { color: purple; font-size: larger }
. Essa regra pega todos os elementos p
da página e aplica as propriedades personalizadas color
e font-size
.
Uma regra de CSS para um elemento pai abarcará automaticamente todos os seus elementos filhos. Assim, podemos aplicar propriedades personalizadas a todo o texto da página, independentemente de ele estar dentro ou fora de uma tag <p>
, usando o seletor body
: body { color: purple; font-size: larger }
. Essa estratégia nos livra de precisar escrever a mesma regra novamente para todos os elementos filhos, embora possa ser necessário escrever regras adicionais para “desfazer” ou modificar as regras herdadas.
A tag style
A tag <style>
permite escrever regras de CSS dentro da página HTML que queremos estilizar. Ela permite ao navegador diferenciar o código CSS do código HTML. A tag <style>
entra na seção head
do documento:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Basics</title>
<style type="text/css">
p { color: purple; font-size: larger }
</style>
</head>
<body>
<p>My first stylized paragraph</p>
<p>My second stylized paragraph</p>
</body>
</html>
O atributo type
informa ao navegador qual tipo de conteúdo está dentro da tag <style>
, ou seja, seu tipo MIME. Como todo navegador que suporta CSS pressupõe que o tipo da tag <style>
é text/css
por padrão, a inclusão do atributo type
é opcional. Há também um atributo media
que indica o tipo de mídia — monitores ou impressão, por exemplo — a que se aplicam as regras de CSS na tag <style>
. Por padrão, as regras de CSS se aplicam a qualquer mídia em que o documento for exibido.
Como no código HTML, as quebras de linha e o recuo de código não alteram a forma como as regras de CSS são interpretadas pelo navegador. Se escrevermos:
<style type="text/css">
p { color: purple; font-size: larger }
</style>
o resultado será exatamente igual ao de:
<style type="text/css">
p {
color: purple;
font-size: larger;
}
</style>
Os bytes extras ocupados pelos espaços e quebras de linha fazem pouca diferença no tamanho final do documento e não têm um impacto significativo no tempo de carregamento da página, portanto a escolha do layout é questão de gosto. Observe o ponto e vírgula após a última declaração (font-size: larger;
) da regra de CSS. Esse ponto e vírgula não é obrigatório, mas sua presença facilita a inclusão de outra declaração na linha seguinte sem se preocupar com a falta de um ponto e vírgula.
As declarações em linhas separadas também ajudam quando precisamos comentar uma declaração. Sempre que você quiser desabilitar temporariamente uma declaração para, por exemplo, resolver um problema na página, basta colocar a linha correspondente entre /*
e */
:
p {
color: purple;
/*
font-size: larger;
*/
}
ou:
p {
color: purple;
/* font-size: larger; */
}
Escrita assim, a declaração font-size: larger
será ignorada pelo navegador. Tenha o cuidado de abrir e fechar os comentários corretamente; caso contrário, o navegador pode não ser capaz de interpretar as regras.
Os comentários também são úteis para escrever lembretes sobre as regras:
/* Texts inside <p> are purple and larger */
p {
color: purple;
font-size: larger;
}
Lembretes como o do exemplo são opcionais em folhas de estilo contendo um pequeno número de regras, mas tornam-se essenciais para ajudar a navegar por folhas de estilo com centenas de regras (ou mais).
Embora o atributo style
e a tag <style>
sejam adequados para testar estilos personalizados e úteis em situações específicas, eles não são usados comumente. Em vez disso, as regras de CSS normalmente são mantidas em um arquivo separado que pode ser consultado a partir do documento HTML.
CSS em arquivos externos
O método mais usado para associar definições CSS a um documento HTML é armazenar o CSS em um arquivo separado. Este método oferece duas vantagens principais sobre os anteriores:
-
As mesmas regras de estilo podem ser compartilhadas entre documentos distintos.
-
O arquivo CSS geralmente é armazenado em cache pelo navegador, acelerando os tempos de carregamento futuros. Os arquivos CSS têm a extensão
.css
e, como os arquivos HTML, podem ser editados em qualquer editor de texto simples. Ao contrário dos arquivos HTML, os arquivos CSS não têm uma estrutura em níveis construída com tags hierárquicas, como<head>
ou<body>
. Em vez disso, o arquivo CSS é apenas uma lista de regras processadas em ordem sequencial pelo navegador. As mesmas regras escritas dentro de uma tag<style>
poderiam constar em um arquivo CSS.
A associação entre o documento HTML e as regras de CSS armazenadas em um arquivo é definida apenas no documento HTML. Para o arquivo CSS, não importa se existem elementos que correspondem às suas regras e, portanto, não há necessidade de enumerar no arquivo CSS os documentos HTML aos quais ele está vinculado. No lado do HTML, todas as folhas de estilo vinculadas serão aplicadas ao documento, como se as regras estivessem escritas em uma tag <style>
.
A tag HTML <link>
define uma folha de estilo externa a ser usada no documento atual e deve constar da seção head
do documento HTML:
<head>
<meta charset="utf-8" />
<title>CSS Basics</title>
<link href="style.css" rel="stylesheet">
</head>
Podemos colocar a regra para o elemento p
que usamos anteriormente no arquivo style.css
e o resultado visto pelo visitante da página web será o mesmo. Se o arquivo CSS não estiver no mesmo diretório do documento HTML, especifique o caminho relativo ou completo até ele no atributo href
. A tag <link>
pode fazer referência a diferentes tipos de recursos externos, por isso é importante estabelecer a relação que o recurso externo tem com o documento atual. Para os arquivos CSS externos, a relação é definida em rel="stylesheet"
.
O atributo media
pode ser usado da mesma forma que na tag <style>
: ele indica as mídias, como monitores de computador ou impressão, às quais as regras do arquivo externo devem se aplicar.
O CSS pode alterar completamente um elemento, mas ainda assim é importante empregar o elemento apropriado para os componentes da página. Caso contrário, as tecnologias de acessibilidade, como os leitores de tela, podem não ser capazes de identificar as seções corretas da página.
Exercícios Guiados
-
Que métodos podem ser usados para alterar a aparência de elementos HTML usando CSS?
-
Por que não é recomendado usar o atributo
style
na tag<p>
se houver parágrafos irmãos que devem ter a mesma aparência? -
Qual é a política de posicionamento padrão para o elemento
div
? -
Qual atributo da tag
<link>
indica a localização de um arquivo CSS externo? -
Qual a seção correta para a inclusão do elemento
link
dentro de um documento HTML?
Exercícios Exploratórios
-
Por que não é recomendado usar uma tag
<div>
para identificar uma palavra em uma frase comum? -
O que acontece se você iniciar um comentário com
/*
no meio de um arquivo CSS, mas esquecer de fechá-lo com*/
? -
Escreva uma regra CSS para incluir um sublinhado em todos os elementos
em
do documento. -
Como podemos indicar que uma folha de estilo de uma tag
<style>
ou<link>
deve ser usada somente por sintetizadores de fala?
Resumo
Esta lição cobre os conceitos básicos de CSS e como integrá-lo ao HTML. Regras escritas em folhas de estilo CSS são o método padrão para alterar a aparência dos documentos HTML. O CSS nos permite manter o conteúdo semântico separado das políticas de apresentação. Esta lição aborda os seguintes conceitos e procedimentos:
-
Como alterar as propriedades CSS usando o atributo
style
. -
A sintaxe básica das regras de CSS.
-
Uso da tag
<style>
para incorporar regras de CSS ao documento. -
Uso da tag
<link>
para incorporar folhas de estilo externas ao documento.
Respostas aos Exercícios Guiados
-
Que métodos podem ser usados para alterar a aparência de elementos HTML usando CSS?
Três métodos básicos: Escrever diretamente na tag do elemento, em uma seção separada do código-fonte da página ou em um arquivo externo a ser consultado pela página HTML.
-
Por que não é recomendado usar o atributo
style
na tag<p>
se houver parágrafos irmãos que devem ter a mesma aparência?A declaração de CSS precisará ser reproduzida nas outras tags
<p>
, o que consome tempo, aumenta o tamanho do arquivo e dá margem a erros. -
Qual é a política de posicionamento padrão para o elemento
div
?O elemento
div
é tratado como um elemento de bloco por padrão, então ele ocupará todo o espaço horizontal de seu elemento pai e sua altura dependerá do conteúdo. -
Qual atributo da tag
<link>
indica a localização de um arquivo CSS externo?O atributo
href
. -
Qual a seção correta para a inclusão do elemento
link
dentro de um documento HTML?O documento
link
deve estar na seçãohead
do documento HTML.
Respostas aos Exercícios Exploratórios
-
Por que não é recomendado usar uma tag
<div>
para identificar uma palavra em uma frase comum?A tag
<div>
cria uma separação semântica entre duas seções distintas do documento e interfere nas ferramentas de acessibilidade quando é usada para elementos de texto em linha. -
O que acontece se você iniciar um comentário com
/*
no meio de um arquivo CSS, mas esquecer de fechá-lo com*/
?Todas as regras após o comentário serão ignoradas pelo navegador.
em
do documento.+
em { text-decoration: underline }
+ ou
+
em { text-decoration-line: underline }
-
Como podemos indicar que uma folha de estilo de uma tag
<style>
ou<link>
deve ser usada somente por sintetizadores de fala?O valor de seu atributo
media
deve serspeech
.