033.3 Lição 1
Certificação: |
Web Development Essentials |
---|---|
Versão: |
1.0 |
Tópico: |
033 Estilização de conteúdo com CSS |
Objetivo: |
033.3 Estilização com CSS |
Lição: |
1 de 1 |
Introdução
O CSS inclui centenas de propriedades que podem ser usadas para modificar a aparência dos elementos HTML. Somente os designers experientes conseguem memorizar a maioria deles. No entanto, vale a pena conhecer as propriedades básicas que são aplicáveis a qualquer elemento, bem como algumas propriedades específicas de determinados elementos. Este capítulo trata de algumas propriedades populares que você certamente encontrará em seu caminho.
Propriedades e valores comuns do CSS
Muitas propriedades CSS têm o mesmo tipo de valor. As cores, por exemplo, têm o mesmo formato numérico, quer estejamos mexendo na cor da fonte ou na cor do fundo. Da mesma forma, as unidades disponíveis para mudar o tamanho da fonte também são usadas para alterar a espessura de uma borda. No entanto, o formato do valor nem sempre é único. As cores, por exemplo, podem ser inseridas em vários formatos diferentes, como veremos a seguir.
Cores
Alterar a cor de um elemento é provavelmente uma das primeiras coisas que os designers aprendem a fazer em CSS. É possível trocar a cor do texto, a cor do plano de fundo, a cor da borda dos elementos e muito mais.
O valor de uma cor em CSS pode ser escrito como uma palavra-chave da cor (ou seja, um nome de cor) ou como um valor numérico que lista cada componente da cor. Todos os nomes de cores comuns (em inglês), como black
, white
, red
, purple
, green
, yellow
e blue
, são aceitos como palavras-chave de cores. A lista completa de palavras-chave de cores aceitas pelo CSS está disponível na página web da W3C. Mas para ter um controle mais preciso sobre a cor, é melhor usar o valor numérico.
Palavras-chave de cor
Mostraremos primeiro o uso da palavra-chave de cor, por ser mais simples. A propriedade color
altera a cor do texto no elemento correspondente. Portanto, para colocar todo o texto da página em roxo, você pode escrever a seguinte regra CSS:
* {
color: purple;
}
Valores Numéricos de Cor
Embora intuitivas, as palavras-chave de cor não oferecem a gama completa de cores possíveis nos monitores modernos. Os webdesigners geralmente desenvolvem uma paleta de cores personalizada, atribuindo valores específicos aos componentes vermelho, verde e azul.
Cada componente de uma cor é representado por um número binário de oito bits, variando de 0 a 255. Todos os três componentes devem ser especificados na mistura de cores, sempre na ordem vermelho, verde, azul. Portanto, para trocar a cor de todo o texto da página para vermelho usando a notação RGB, usamos rgb(255,0,0)
:
* {
color: rgb(255,0,0);
}
Um componente definido como 0
indica que a cor básica correspondente não é usada na mistura de cores. Também é possível usar porcentagens em vez de números:
* {
color: rgb(100%,0%,0%);
}
A notação RGB raramente é vista nos aplicativos de desenho para a criação de layouts ou apenas para a escolha de cores. Em vez disso, é mais comum ver as cores CSS expressas em valores hexadecimais. Os componentes de uma cor em notação hexadecimal também variam de 0 a 255, mas de uma forma mais sucinta, começando com um símbolo de hash (cerquilha) #
e limitando-se a um comprimento fixo de dois dígitos para todos os componentes. O valor mínimo 0
é 00
e o valor máximo 255
é FF
, de modo que a cor red
(vermelho) seria #FF0000
.
Tip
|
Se os dígitos de cada componente de uma cor hexadecimal se repetirem, o segundo dígito pode ser omitido. A cor |
A lista a seguir mostra a notação RGB e hexadecimal para algumas cores básicas:
Palavra-chave da cor | Notação RGB | Valor Hexadecimal |
---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
As palavras-chave de cores e as letras nos valores de cor hexadecimais não diferenciam maiúsculas de minúsculas.
Opacidade da cor
Além de cores opacas, é possível preencher os elementos da página com cores semitransparentes. A opacidade de uma cor é definida com um quarto componente no valor da cor. Ao contrário dos outros componentes, cujos valores são números inteiros entre 0 a 255, a opacidade é uma fração que varia de 0
a 1
.
O valor mais baixo, 0
, resulta em uma cor completamente transparente, tornando-a indistinguível de qualquer outra cor totalmente transparente. O valor mais alto, 1
, resulta em uma cor totalmente opaca, idêntica à cor original, sem nenhuma transparência.
Ao usar a notação RGB, especifique as cores com um componente de opacidade por meio do prefixo rgba
em vez de rgb
. Portanto, para tornar a cor vermelha semitransparente, use rgba(255,0,0,0.5)
. O caractere a
indica o canal alpha, um termo comumente usado para especificar o componente de opacidade no jargão gráfico digital.
A opacidade também pode ser definida na notação hexadecimal. Nesse caso, como os outros componentes de cor, a opacidade varia de 00
a FF
. Portanto, para tornar a cor red
semitransparente usando a notação hexadecimal, usaríamos #FF000080
.
Plano de fundo
A cor de fundo de elementos individuais ou de toda a página é definido com a propriedade background-color
. Ela aceita os mesmos valores da propriedade color
, seja na forma de palavras-chave ou em notação RGB/hexadecimal.
No entanto, o plano de fundo dos elementos HTML não se restringe às cores. Com a propriedade background-image
, é possível usar uma imagem como fundo. Todos os formatos convencionais aceitos pelo navegador, como JPEG e PNG, podem ser usados.
O caminho para a imagem deve ser especificado usando um designador url()
. Se a imagem que você deseja usar estiver na mesma pasta do arquivo HTML, basta incluir o nome do arquivo:
body {
background-image: url("background.jpg");
}
Neste exemplo, o arquivo de imagem background.jpg
será usado como imagem de fundo para todo o corpo da página. Por padrão, a imagem de fundo é repetida se seu tamanho não bastar para cobrir a página inteira, começando no canto superior esquerdo da área correspondente ao seletor da regra. Esse comportamento pode ser modificado com a propriedade background-repeat
. Se você quiser que a imagem de fundo seja posta na área do elemento sem repeti-la, use o valor no-repeat
:
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
}
Também podeMOS fazer a imagem se repetir apenas na direção horizontal (background-repeat: repeat-x
) ou apenas na vertical (background-repeat: repeat-y
).
background-repeat
.
Tip
|
Duas ou mais propriedades CSS podem ser combinadas em uma só, que seria a propriedade abreviada (ou shorthand) do plano de fundo. As propriedades |
Uma imagem de fundo também pode ser posta em uma posição específica na área do elemento graças à propriedade background-position
. As cinco posições básicas são top
, bottom
, left
, right
e center
, mas a posição superior esquerda da imagem também pode ser definida com porcentagens:
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-position: 30% 10%;
}
A porcentagem de cada posição é relativa ao tamanho correspondente do elemento. No exemplo, o lado esquerdo da imagem de fundo estará a 30% da largura do corpo (normalmente o corpo é todo o documento visível) e o lado superior da imagem estará a 10% da altura do corpo.
Bordas
Outra personalização de layout comum feita com CSS é alterar a borda de um elemento. A borda se refere à linha que forma um retângulo ao redor do elemento e tem três propriedades básicas: color
, style
e width
.
A cor da borda, definida com border-color
, segue o mesmo formato que vimos para as outras propriedades de cor.
As bordas podem ser traçadas em um estilo diferente de uma linha sólida. A propriedade border-style: dashed
, por exemplo, criaria uma borda tracejada. Os outros valores de estilo possíveis são:
dotted
-
Uma sequência de pontos redondos
double
-
Duas linhas retas
groove
-
Uma linha com aparência sulcada
ridge
-
Uma linha com aparência tridimensional
inset
-
Um elemento em baixo relevo
outset
-
Um elemento em alto relevo
A propriedade border-width
define a espessura da borda. Seu valor pode ser uma palavra-chave em inglês (thin
, medium
ou thick
) ou um valor numérico específico. Se você preferir usar um valor numérico, também precisará especificar a unidade correspondente. Falaremos disso a seguir.
Valores de unidade
Os tamanhos e distâncias em CSS podem ser definidos de diferentes maneiras. As unidades absolutas são baseadas em um número fixo de pixels da tela e, portanto, não são tão diferentes dos tamanhos e dimensões fixos usados na mídia impressa. Existem também unidades relativas, que são calculadas dinamicamente a partir de alguma medida fornecida pela mídia onde a página está sendo exibida, como o espaço disponível ou outro tamanho escrito em unidades absolutas.
Unidades absolutas
As unidades absolutas são equivalentes às suas correspondentes físicas, como centímetros ou polegadas. Nos monitores convencionais, uma polegada tem 96 pixels de largura. As seguintes unidades absolutas são comumente usadas:
in
(polegada)-
1 in equivale a a 2,54 cm ou 96 px.
cm
(centímetro)-
1 cm equivale a 96 px / 2,54.
mm
(milímetro)-
1 mm equivale a 1 cm / 10.
px
(pixel)-
1 px equivale a 1 / 96 de polegada.
pt
(ponto)-
1pt equivale a 1 / 72 de polegada.
Lembre-se de que a proporção de pixels por polegada pode variar. Nas telas de alta resolução, onde os pixels são compactados com mais densidade, uma polegada corresponderá a mais de 96 pixels.
Unidades relativas
As unidades relativas variam de acordo com as outras medidas ou com as dimensões da janela de visualização. A janela de visualização é a área do documento atualmente visível em sua janela. No modo de tela inteira, a janela de visualização corresponde à tela do dispositivo. As seguintes unidades relativas são comumente usadas:
%
-
Porcentagem — é relativa ao elemento pai.
em
-
O tamanho da fonte usada no elemento.
rem
-
O tamanho da fonte usada no elemento raiz.
vw
-
1% da largura da janela de visualização.
vh
-
1% da altura da janela de visualização.
A vantagem de se usar unidades relativas é poder criar layouts ajustáveis alterando apenas alguns tamanhos determinados. Por exemplo, podemos usar a unidade pt
para definir o tamanho da fonte no elemento do corpo e a unidade rem
para as fontes dos outros elementos. Depois de alterar o tamanho da fonte do corpo, todos os outros tamanhos de fonte serão ajustados a partir dali. Além disso, o uso de vw
e vh
para definir as dimensões das seções da página as torna ajustáveis para telas de tamanhos diferentes.
Propriedades das fontes e do texto
A tipografia, ou o estudo dos tipos de fonte, é um assunto muito amplo dentro do design, e a tipografia CSS não fica para trás. No entanto, existem algumas propriedades básicas de fonte que atenderão às necessidades da maioria dos usuários que estão aprendendo CSS.
A propriedade font-family
define o nome da fonte a ser usada. Não há garantia de que a fonte escolhida estará disponível no sistema onde a página será visualizada, portanto esta propriedade talvez não tenha efeito no documento. Embora seja possível fazer o navegador baixar e usar o arquivo de fonte especificado, a maioria dos webdesigners prefere usar uma família de fontes genérica em seus documentos.
As três famílias de fontes genéricas mais comuns são serif
, sans-serif
e monospace
. Serif é a família de fontes padrão da maioria dos navegadores. Se você preferir usar sans-serif
para a página inteira, adicione a seguinte regra à sua folha de estilo:
* {
font-family: sans-serif;
}
Opcionalmente, podemos primeiro definir um nome específico de família de fonte, seguido pelo nome de família genérico:
* {
font-family: "DejaVu Sans", sans-serif;
}
Se o dispositivo que exibe a página tiver essa família de fontes específica, o navegador a usará. Caso contrário, ele usará a fonte padrão correspondente ao nome de família genérico. Os navegadores procuram pelas fontes na ordem em que elas estão especificadas na propriedade.
Qualquer pessoa que tenha usado um aplicativo de processamento de texto também estará familiarizado com três outros ajustes de fonte: tamanho, peso e estilo. Esses três ajustes têm seus equivalentes nas propriedades CSS: font-size
, font-weight
e font-style
.
A propriedade font-size
aceita palavras-chave de tamanho como xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
, xxx-large
. Essas palavras-chave são relativas ao tamanho de fonte padrão usado pelo navegador. As palavras-chave larger
e smaller
alteram o tamanho da fonte com relação ao tamanho da fonte do elemento pai. Também é possível expressar o tamanho da fonte com valores numéricos, incluindo a unidade após o valor, ou com porcentagens.
Se você não deseja alterar o tamanho da fonte, mas sim a distância entre as linhas, use a propriedade line-height
. Uma line-height
de 1
torna a altura da linha do mesmo tamanho da fonte do elemento, o que pode deixar as linhas de texto próximas demais umas das outras. Portanto, um valor maior que 1 é mais apropriado para textos. Assim como na propriedade font-size
, outras unidades podem ser usadas junto com o valor numérico.
font-weight
define a espessura da fonte, usando as conhecidas palavras-chave normal
ou bold
(negrito). As palavras-chave lighter
e bolder
alteram o peso da fonte do elemento em relação ao peso da fonte de seu elemento pai.
A propriedade font-style
pode ser definida como italic
para selecionar a versão em itálico da família de fontes atual. O valor oblique
seleciona a versão oblíqua da fonte. Essas duas opções são quase idênticas, mas a versão em itálico de uma fonte geralmente é um pouco mais estreita do que a versão oblíqua. Se não houver versões em itálico ou oblíquo da fonte, a fonte será inclinada artificialmente pelo navegador.
Existem outras propriedades que alteram a forma como o texto é processado no documento. Você pode, por exemplo, adicionar um sublinhado a algumas partes do texto que deseja enfatizar. Primeiro, use uma tag <span>
para delimitar o texto:
<p>CSS is the <span class="under">proper mechanism</span> to style HTML documents.</p>
Use então o seletor .under
para alterar a propriedade text-decoration
:
.under {
text-decoration: underline;
}
Por padrão, todos os elementos a
(link) são sublinhados. Para remover o sublinhado, use o valor none
em text-decoration
de todos os elementos a
:
a {
text-decoration: none;
}
Ao revisar o conteúdo, alguns autores gostam de riscar as partes incorretas ou desatualizadas do texto, para que o leitor saiba que o texto foi atualizado e o que foi removido. Para fazer isso, use o valor line-through
da propriedade text-decoration
:
.disregard {
text-decoration: line-through;
}
Mais uma vez, uma tag <span>
pode ser usada para aplicar o estilo:
<p>Netscape Navigator <span class="disregard">is</span> was one of the most popular Web browsers.</p>
Existem decorações específicas a um elemento. Os círculos nas listas de marcadores podem ser personalizados usando a propriedade list-style-type
. Para transformá-los em quadrados, por exemplo, usamos list-style-type: square
. Para simplesmente removê-los, definimos o valor de list-style-type
como none
.
Exercícios Guiados
-
Como adicionar uma semitransparência à cor azul (notação RGB
rgb(0,0,255)
) para usá-la na propriedade CSScolor
? -
Que cor corresponde ao valor hexadecimal
#000
? -
Dado que
Times New Roman
é uma fonteserif
e que não está disponível em todos os dispositivos, como seria possível escrever uma regra CSS para solicitar o uso deTimes New Roman
, tendo a família de fontes genéricaserif
como substituto ? -
Como usar uma palavra-chave de tamanho relativo para definir uma fonte menor para o elemento
<p class="disclaimer">
em relação ao seu elemento pai?
Exercícios Exploratórios
-
A propriedade
background
é uma abreviatura para definir mais de uma propriedadebackground-*
de uma vez. Reescreva a regra CSS a seguir como uma única propriedade abreviadabackground
.body { background-image: url("background.jpg"); background-repeat: repeat-x; }
-
Escreva uma regra de CSS para o elemento
<div id="header"></div>
de maneira a alterar somente a borda inferior para4px
. -
Escreva uma propriedade
font-size
que dobre o tamanho da fonte usada no elemento raiz da página. -
O duplo espaçamento é um recurso comum de formatação nos processadores de texto. Como definir um formato semelhante usando CSS?
Resumo
Esta lição trata da aplicação de estilos simples aos elementos de um documento HTML. O CSS inclui centenas de propriedades e a maioria dos web designers precisará recorrer a manuais de referência para lembrar de todas elas. No entanto, um conjunto relativamente pequeno de propriedades e valores é usado na maioria dos casos e é importante sabê-los de cor. A lição abordou os seguintes conceitos e procedimentos:
-
Propriedades CSS fundamentais para alterar cores, planos de fundo e fontes.
-
As unidades absolutas e relativas que o CSS pode usar ara definir tamanhos e distâncias, como
px
,em
,rem
,vw
,vh
, etc.
Respostas aos Exercícios Guiados
-
Como adicionar uma semitransparência à cor azul (notação RGB
rgb(0,0,255)
) para usá-la na propriedade CSScolor
?Use o prefixo
rgba
e inclua0.5
no quarto valor:rgba(0,0,0,0.5)
. -
Que cor corresponde ao valor hexadecimal
#000
?A cor
black
(preto). O valor hexadecimal#000
é a abreviatura de#000000
. -
Dado que
Times New Roman
é uma fonteserif
e que não está disponível em todos os dispositivos, como seria possível escrever uma regra CSS para solicitar o uso deTimes New Roman
, tendo a família de fontes genéricaserif
como substituto ?* { font-family: "Times New Roman", serif; }
-
Como usar uma palavra-chave de tamanho relativo para definir uma fonte menor para o elemento
<p class="disclaimer">
em relação ao seu elemento pai?Using the
smaller
keyword:p.disclaimer { font-size: smaller; }
Respostas aos Exercícios Exploratórios
-
A propriedade
background
é uma abreviatura para definir mais de uma propriedadebackground-*
de uma vez. Reescreva a regra CSS a seguir como uma única propriedade abreviadabackground
.body { background-image: url("background.jpg"); background-repeat: repeat-x; }
body { background: repeat-x url("background.jpg"); }
-
Escreva uma regra de CSS para o elemento
<div id="header"></div>
de maneira a alterar somente a borda inferior para4px
.#header { border-bottom-width: 4px; }
-
Escreva uma propriedade
font-size
que dobre o tamanho da fonte usada no elemento raiz da página.A unidade
rem
corresponde ao tamanho da fonte usado no elemento raiz, de modo que a propriedade seriafont-size: 2rem
. -
O duplo espaçamento é um recurso comum de formatação nos processadores de texto. Como definir um formato semelhante usando CSS?
Definindo a propriedade
line-height
para o valor2em
, pois a unidadeem
corresponde ao tamanho da fonte do elemento atual.