CSS – Manual básico sobre estilo

Autor: Cicero Juliao da Silva Junior <juliaojunior at gmail.com>

Introdução

Há pouco tempo passei a estudar um pouco sobre HTML/XHTML. Daí,
acredito que como todos que fazem isso, dei de cara com as CSS, folhas
de estilo em cascata. Encontrei boas matérias, mas uma única fonte, com
boa referência para CSS "em geral", demorei um pouco ver. Com um pouco
de pesquisa, encontrei.

Neste artigo estou trazendo mais uma tradução livre de bom
material disponível apenas em inglês. Para quem quiser se aventurar no
original, o link é www.w3schools.com/
e possui material não apenas sobre CSS, mas sobre HTML, XHTML, XML,
ASP, PHP, JavaScript, e sei lá mais o quê! É muita coisa mesmo.

Vamos ver uma compilação sobre os principais pontos das folhas
de estilo, e você só precisa saber o básico sobre HTML. Acredito que
será útil tanto para os iniciantes como para os mais avançados, estes
últimos podendo utilizar o artigo como fonte de referência rápida.
Portanto, mãos à obra.

O que é CSS

  • CSS significa Cascading Style Sheets, algo como Folhas de Estilo em Cascata.
  • Estilos definem como mostrar elementos HTML na tela.
  • Estilos normalmente são guardados em ´folhas de estilo´.
  • Estilos foram adicionados ao HTML 4.0 para resolver um problema.
  • Folhas de Estilo Externas podem evitar um bocado de trabalho.
  • Definições de estilo múltiplas serão usados em cascata.

O uso de estilos resolveram um grande problema

O HTML nunca
teve o objetivo de conter tags para a formatação de um documento. Tags
HTML deveriam ser destinadas a definir o conteúdo de um documento,
como:

Este é um parágrafo.

Este é um título

Quando tags como <font> e atributos como ´color´ foram
adicionadas à especificação HTML 3.2, começou um pesadelo para os
desenvolvedores web. Desenvolvimento de grandes sites, onde fontes e
cores tiveram de ser organizados a cada página do site, acabou sendo um
processo longo, caro e indevidamente tortuoso.

Para resolver este problema, a World Wide Web Consortium (W3C) –
responsável pela padronização do HTML – criou as CSS em adição ao HTML
4.0. Com o HTML 4.0, toda a formatação pode ser removida do documento
HTML e armazenada em um arquivo CSS separado. Todos os navegadores
atuais suportam CSS.

Usar estilos economiza um monte de trabalho

Folhas de estilos definem como elementos HTML devem ser exibidos. Os
estilos normalmente são salvos em arquivos ´.css´ diferentes dos
arquivos HTML. Tais folhas de estilo salvos assim nos permitem alterar
a aparência e o layout de todas as páginas em um site, editando apenas
um documento CSS.

Vários estilos "cairão" em cascata sobre um único objeto

Folhas de estilo permitem que o estilo das informações possam ser indicados de diversas maneiras.

Estilos podem ser indicados:

  • dentro de um elemento HTML
  • dentro da seção head de uma página HTML
  • em um arquivo CSS externo

Dica: Múltiplas folhas de estilo externas podem ser usadas no interior de um único documento HTML.

Sintaxe

A sintaxe das CSS é composta por três partes: um seletor, uma propriedade e um valor, da forma abaixo:

selector (propriedade: valor)

O selector é normalmente o elemento HTML, ou tag, que você deseja
definir, a propriedade é o atributo que você deseja mudar, e cada
propriedade pode ter um valor. A propriedade e o valor são separados
por dois pontos, e cercado por chavetas, por exemplo:

body (color: black)

Nota: Se o valor possui mais de uma palavra, devemos colocar aspas em torno do valor:

p (font-family: "sans serif")

Se você quiser especificar mais de uma propriedade, deve separar cada propriedade com um ponto e
vírgula. O exemplo abaixo mostra como definir um parágrafo centralizado, com texto de cor vermelha:

p (text-align: center; color: red)

E para tornar as definições de estilo mais legíveis, podemos descrever uma propriedade por linha, como visto abaixo:

p {
   text-align: center;
   color: black;
   font-family: Arial
}

Agrupamento

Você também pode agrupar seletores. Separe cada
seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos
de cabeçalho. Todos os elementos de cabeçalho serão exibidos com texto
de cor verde:

H1, H2, H3, H4, H5, H6 {
   color: green
}

Seletores

As classes

Com as classes é possível definir diferentes estilos
para o mesmo tipo de elemento HTML. Suponha que você gostaria de ter
dois tipos de parágrafos em seu documento: um alinhado à direita, e um
centralizado. Aqui está como fazer usando CSS:

p.right (text-align: right)
p.center (text-align: center)

A partir daí, para inserir esses estilos, precisaremos usar o atributo class no documento
HTML:

<p class="right"> Este parágrafo será alinhado à direita. </p>
<p class="center"> Este parágrafo será centralizado. </p>

Para aplicar mais de uma classe em um mesmo elemento,, a sintaxe é:

<p class="center bold"> Este é um parágrafo. </p>

O parágrafo acima terá os estilos indicados da classe "center" e da
classe "bold". Você também pode omitir o nome da tag ou do elemento
quando escrever a definição de sua classe. Isso servirá para definir um
estilo utilizado por todos os elementos HTML que possuem uma
determinada classe. No exemplo abaixo, todos os elementos HTML com class = "center" serão centralizados:

.center (text-align: center)

No código abaixo tanto o elemento h1 como o elemento p possuem o seletor class = "center". Isto significa que ambos os elementos seguirão as regras do ".center" indicado acima:

<h1 class="center"> Este cabeçalho será centralizado</h1>
<p class="center"> Este parágrafo também será centralizado. </p>

Lembre-se: Não comece o nome de uma classe com um número! Não funcionará no Mozilla / Firefox.

Adicionar estilos a elementos com atributos particulares

Você também pode aplicar estilos para elementos HTML com atributos particulares. A regra de estilo
abaixo irá funcionar com todos os elementos de input do tipo "text":

input [type = "text"] (background-color: blue)

O seletor id

Você também pode definir estilos para elementos HTML com o seletor id.
O seletor id é definido com um "#". O exemplo do uso de estilos visto
abaixo mostra a definição de um atributo ao seletor id com um valor
"green":

#green (color: green)

Já a regra de estilo seguinte vale para o elemento p com um id com um valor "para1":

p #para1 {
   text-align: center;
   cor: red
}

Lembre-se: não inicie um ID com um número! Não funcionará no Mozilla / Firefox.

Inserindo comentários

Comentários em CSS

Como em qualquer linguagem, comentários são usados para explicar o seu
código, e podem ajudar quando você editar o código-fonte em uma data
posterior. Um comentário será ignorado pelos browsers, e em CSS começa
com "/*" e termina com "*/", como este:

/ * Este é um comentário * /
p {
   text-align: center;
   / * Este é outro comentário * /
   color: black;
   font-family: Arial
}

Exemplos

O arquivo HTML abaixo utiliza uma folha de estilos externa com a tag "link". Veja:

<html>

<link rel="stylesheet" type="text/css" href="ex1.css" />

<h1>Este cabeçalho tem 36 pt</h1>
<h2>Este cabeçalho é azul</h2>

<p>Este parágrafo tem uma margem esquerda
de 50 pixels</p>

Este é o conteúdo do arquivo com a folha de estilo (ex1.css) indicado na tag "link" visto acima:

body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}

Outro exemplo no uso de folhas de estilo externa:

<html>
<link rel="stylesheet" type="text/css" href="ex2.css" />

<h1>Este é um cabeçalho do tipo h1</h1>
<hr />

<p>Você pode ver que a folha de estilo
formata o texto</p>

<p><a href="http://www.w3schools.com" target="_blank">Este é um link</a></p>

Abaixo, como ficaria o conteúdo do arquivo com a folha de estilo indicado acima (ex2.css):

body {background-color: tan}
h1 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link     {color:green}
a:visited  {color:yellow}
a:hover    {color:black}
a:active   {color:blue}

Teste em seu computador e veja as mudanças que a folha de estilo causam na aparência da página.

Salve os arquivos HTML e os .css na mesma página, e depois acesse os
arquivos HTML normalmente como você sempre faz. Você verá como o uso de
folhas de estilo alteram a formatação dos elementos.

Inserindo as folhas de estilo

Quando um navegador lê uma folha de estilo, ele irá formatar o
documento de acordo com ela. Existem três maneiras de inserir uma folha
de estilo:

Folha de estilo externa

Uma folha de estilo externa é ideal quando o estilo é aplicado a muitas
páginas. Com uma folha de estilos externa, você pode mudar a aparência
de um site inteiro, alterando um único arquivo. Cada página deve
indicar a folha de estilo usada como base por meio da tag "link", como
já vimos anteriormente. A tag link deve estar dentro da seção "head" do
arquivo HTML. Veja:

<head>
<link rel="stylesheet" type="text/css" href="meuestilo.css" />
</head>

O browser lerá as definições de estilo a partir do arquivo meuestilo.css e formatará o documento de acordo.

Uma folha de estilos externa pode ser escrita em qualquer
editor de texto. Porém, sugiro os editores bem "simples", como nano,
gedit ou mesmo o vim ou emacs. Nada de OpenOffice e companhia, pois
esses editores mais sofisticados alteram o conteúdo do arquivos para
melhorar sua aparência e seu uso pelo programa. O arquivo .css não deve
conter quaisquer tags HTML. E, obviamente, a folha de estilo deve ser
salva com extensão .css. Veja um exemplo de folha de estilo:

hr (color: sienna)
p (margin-left: 20px)
body (background-image: url ( "images/back40.gif"))

Lembre-se: Não deixe espaços entre o valor da propriedade e as
unidades! Por exemplo, usar "margin-left: 20 px" (e não usar
"margin-left: 20px") só irá funcionar no IE, mas não funcionará no
Firefox ou Opera.

Folha de estilo interna

Uma folha de estilo interna deve ser utilizada quando um determinado documento tem um estilo único.

Você define os estilos internos na seção "head" usando a tag <style>, como neste exemplo:

<head>
<style type="text/css">
hr (color: sienna)
p (margin-left: 20px)
body (background-image: url ( "images/back40.gif"))
</style>
</head>

O browser agora lê as definições de estilo e formata o documento de acordo com elas.

Lembre-se: Um browser normalmente ignora tags desconhecidas. Isto
significa que um browser que não suporta estilos, vai ignorar a tag
"style", mas seu conteúdo será exibido na página. É possível evitar que
um browser antigo faça isso, ou seja, não exibir o conteúdo das
definições de estilo. Para isso incluímos as definições entre
comentários do HTML. Veja:

<head>
<style type="text/css">
<! —
hr (color: sienna)
p (margin-left: 20px)
body (background-image: url ( "images/back40.gif"))
->
</style>
</head>

Estilos em linha

Um estilo "em linha" perde muitas das vantagens das folhas de estilo,
misturando conteúdo com apresentação. Use este método o mínimo
possível, por exemplo quando um estilo será aplicado uma única vez em
um elemento.

Para utilizar estilos "em linha" usar o atributo "style" na respectiva
tag. Este atributo style pode conter qualquer propriedade CSS. Veja um
exemplo de como alterar a cor e a margem esquerda de um parágrafo:

<p style="color:sienna;margin-left:20px"> Este é um parágrafo. </p>

Múltiplas folhas de estilo

Se algumas propriedades foram indicadas para o mesmo seletor em
diferentes folhas de estilo, os valores serão herdadas da folha de
estilo mais específica. Por exemplo, uma folha de estilos externa tem
estas propriedades para o seletor h3:

h3 {
   color: red;
   text-align: left;
   font-size: 8pt
}

E uma folha de estilo interna tem estas propriedades para o seletor h3:

h3 {
   text-align: right;
   font-size: 20pt
}

Se a página com a folha de estilo interna também tem links para a folha de estilo externa, as propriedades de h3 serão:

color: red;
text-align: right;
font-size: 20pt

O que aconteceu? A cor foi herdada da folha de estilos externa, mas o
alinhamento do texto e o tamanho da fonte foram substituídos pela folha
de estilo interna. Traduzindo, o que estiver indicado na folha de
estilos mais específica será utilizado, depois a segunda folha de
estilos mais específica é usada, e assim por diante.

Conclusão

É isso, pessoal. Para os iniciantes, já serviu como
uma boa base para começar. E para os avançados, aí está uma referência
rápida. No próximo artigo veremos pontos mais específicos: como aplicar
estilos de background (cor, imagem, etc), de texto, de fonte, e o
importante conceito do modelo da caixa.

Até o próximo!


http://www.vivaolinux.com.br/artigo/CSS-Manual-basico-sobre-estilo

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