Tutorial Iniciante de CSS: Seletores, Propriedades e Valores

4 03 2008

Trecho de código CSS

Enquanto HTML tem tags, CSS tem seletores. Seletores são os nomes dados a estilos em folhas de estilo internas e externas. O que nós chamamos de “estilo” é um conjunto de regras que vai definir como um elemento vai ser apresentado.

Nesse Tutorial Iniciante de CSS nós iremos nos concentrar nos seletores HTML, que são simplesmente o nome das tags HTML e são usados para mudar o estilo de todos os elementos de uma tag específica.

Pra cada seletor existem propriedades dentro de chaves, que são apenas palavras como color (cor), font-weight (peso da fonte) ou background-color (cor do background).

Cada propriedade tem um valor, definido após um sinal de “:” (dois-pontos, não um sinal de igual, e “;” (ponto-e-vírgula) separam as propriedades em um seletor.

body {
	font-size: 0.8em;
	color: blue;
}

Isso vai aplicar os valores dados às propriedades font-size e color do seletor body.

Basicamente, quando isso é aplicado a um documento HTML, todo texto entre as tags body (todo o conteúdo da janela) vai ter 0.8 ems de tamanho e cor azul. Abra o arquivo “web.css” que você criou na lição anterior e digite o código aí de cima. Salve, e abra o arquivo HTML em seu navegador. Brinque com os valores – mude a cor, aumente e diminua o tamanho – e atualize o HTML a cada mudança, pra ver o que acontece.

Tamanhos e Porcentagens

No CSS, existem muitas unidades para valores que são específicas de alguma propriedade, mas existem também unidades gerais que são usadas em inúmeras propriedades, e é melhor ir se acostumando com elas antes de continuar.

As unidades se dividem em dois grupos: relativas, que estão ligadas a outras unidades, e as absolutas, que possuem um tamanho fixo.

em (como em font-size: 2em) é a uma unidade relativa, e o tamanho da fonte é calculado. Então, por exemplo, “2em” quer dizer 2 vezes o tamanho atual (o tamanho que ia ser aplicado se você não mudasse pra “2em”). Dois elementos que possuem “font-size: 2em” podem ter tamanhos diferentes, dependendo do contexto, já que essa unidade é relativa.

% (como em font-size: 80%) é a unidade para… deixa eu me lembrar… porcentagens. É relativa, assim como em, e está ligada a um valor anterior.

px (como em font-size: 12px) é a unidade para pixels. É uma unidade absoluta, assim como todas abaixo. Por isso, dois elementos com “font-size: 12px” vão ter sempre o mesmo tamanho relativa ao tamanho do dispositivo de exibição. Dois elementos com “font-size: 12px” vão ter o mesmo tamanho em dispositivos com a mesma resolução, e tamanhos diferentes em resoluções diferentes.

pt (como em font-size: 12pt) é a unidade para pontos.

Existem ainda outras unidades como pc (picas), cm (centímetros), mm (millímetros) e in (polegadas).

Exercite. Copie o seguinte código:

body {
  font-size: 2em;
}
p {
  font-size: 4em;
}

Mude as unidades e os valores. Veja o que acontece quando:

1. A unidade do parágrafo é relativa e você dobra o tamanho da fonte do body.

2. A unidade do parágrafo é absoluta e você dobra o tamanho da fonte body.

Quando o valor é zero você não precisa especificar uma unidade (qual a diferença entre 0cm e 0mm?). Por exemplo, se você não quiser qua a página tenha bordas, pode fazer border: 0

Uma página web não é um meio estático, absoluto. Ela é feita pra ser flexível e o usuário deve ter o direito de ver a página do jeito que ele quiser, o que inclui o tamanho da font e o tamanho da tela.

Por causa disso, “em” e “%” são consideradas as melhores unidades pra usar com tamanhos de fonte (e possivelmente toda largura e altura como nós veremos no Tutorial Avançado de CSS), já que são relativas. Unidades absolutas, como “px”, que na maioria dos navegadores faz com que o texto não seja redimensionado, devem ser usados raramente, como em tamanhos de bordas.

Recomendo que você leia o artigo do Maujor sobre medidas css, que se aprofunda um pouco mais no assunto.

Páginas Relacionadas

BlogBlogs Tags: , , ,

Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

10 responses

5 03 2008
Evandro Myller

Bom post, Elomar. Eu nunca tinha procurado saber sobe unidades de medida no CSS, e confesso que não sabia a utilidade de em, por exemplo. Valeu! E o trabalho aqui tá ótimo!! Muito bom, e progredindo rapidamente. Parabéns!
[]s

5 03 2008
Elomar França

Obrigado, Evandro!
Bom saber que os tutoriais estão realmente sendo úteis.
E quando ao ritmo do trabalho, ele vai continuar assim, mas esse não vai ser o ritmo do curso em si.
Quando for oficial, os alunos vão ter mais tempo pra cada coisa.

2 05 2008
Tutorial Intermediário de CSS: Pseudo Classes « Codando

[…] Seletores, Propriedades e Valores (Tutorial Iniciante de CSS) […]

3 05 2008
Mike

Não entendi muito bem a respeito do tamanho das bordas. Como posso mudar o tamanho das bordas?

3 05 2008
Elomar França

Olá, Mike

Bordas são assunto de uma outra lição. Esse exemplo aí foi só pra mostrar propriedades e valores. ;D

20 07 2008
Tutorial Avançado de CSS: Especificidade « Codando

[…] Seletores, Propriedades e Valores […]

24 11 2008
wesley

Você indicou um texto. Bom o texto diz que px é uma unidade relativa e você diz que absoluta. Em qual dos dois devo acreditar?

Obrigado.

3 12 2008
Elomar França

Olá, Wesley.

Existe alguma discussão sobre “px” ser uma unidade relativa ou absoluta, com várias fontes defendendo cada lado. Dando uma olhada melhor nesse assunto, resolvi passar pro lado do “px é relativo”, e corrigi o texto.
Obrigado pelo toque, e se encontrar mais alguma coisa assim por favor avise.

10 01 2011
Frederico França

Opa,eu mexo a pouco tempo com css,e gostei muito deste tutorial são coisas simples e essenciais que se deve saber,como por exemplo o “em”
Uia vc eh França tbm KK agora que vi.Meu parente rs.
mudando de assunto otimo tutorial obrigado por postar.

17 02 2012
Tutorial Intermediário de CSS: Seletores Classe e ID – RodrigoAC

[…] Iniciante de CSS nós analisamos apenas os Seletores HTML – aqueles que representam uma tag […]

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: