Você está na página 1de 10

CSS

O que é CSS

CSS
CSS

CSS é a abreviação de Cascading Style Sheets (folhas de estilo em cascata). É uma linguagem de estilos com diversos comandos, que tem como principal objetivo formatar o layout de uma página HTML. Através do CSS, podemos formatar textos, bordas, posicionamentos, margens, espaçamentos entre outras coisas.

Infelizmente, algumas pessoas ainda possuem o péssimo hábito de usar o HTML para formatar o layout das páginas, o que é um erro. Apesar de parecer mais “fácil” e rápido formatar o layout desta forma, veremos a facilidade de utilizar o CSS na hora de fazer uma ou mais atualizações no site.

Imagine um site com 50 páginas, todas elas formatadas diretamente no HTML. O menu lateral tem 200 pixels de largura, mas agora vai passar a ter 250 pixels. Se o site estiver com o layout formatado com o HTML, você precisará formatar todas as páginas individualmente. Entretanto, se o layout estiver formatado com folhas de estilo, a única alteração será de 1 número (de 200 para 250). Acredito que esse seja um grande incentivo para criarmos nossas páginas formatadas desta forma.

 

1

CSS
CSS
CSS 2
 

2

O conceito de Tableless

CSS
CSS

Tableless é a forma de desenvolvimento de páginas web sem a utilização de tabelas para se definir o layout, e sim aliando o HTML ou XHTML com o CSS.

Construir um site com esse conceito não é abolir totalmente o uso de tabelas. Elas existem e devem sim ser utilizadas, mas apenas quando for necessária a exibição de dados tabulares, como uma tabela de preços, tabela de notas, etc.

É muito comum vermos pessoas que criavam seus layouts em tabelas, usarem apenas DIVs para exibição. Essa é a chamada “divmania”, onde o novato no ambiente CSS deseja formatar todo o layout usando DIVs.

Apesar de o nome Tableless ser mais conhecido, o correto seria Web Standards. Tableless significa “menos tabelas”, mas como vimos, tabelas podem e devem ser usadas. O termo Web Standards ou Padrões Web são mais corretos, pois definem a forma correta de se construir uma página, que é usar cada tag para sua real função e deixar o código semanticamente correto. Ex: Definir um título com <h1>, um subtítulo com <h2>, parágrafos com <p>, etc.

Podemos perceber que ao desenvolver um site nos padrões:

O código ficará mais claro e limpo, facilitando futuras alterações;

O arquivo HTML ficará com um tamanho menor;

Melhor indexação por motores de busca;

Economia na banda e rapidez no carregamento da página;

Facilidade ao alterar o layout do site, e disponibilizar versões diferentes para a mesma página (versão para impressão, dispositivos móveis, etc).

 

3

Métodos de inclusão do CSS na página

CSS
CSS

Existem 3 métodos de se carregar a formatação CSS para dentro de uma página: inline, interno e externo.

Método inline

Insere uma formatação diretamente em uma tag. Esse tipo de marcação deve ser evitada, pois se perde a vantagem de usar folhas de estilo, que a formatação está inserida direto no HTML. Ex:

<p style="color:#ff0000"> Bla bla bla </p>

Neste exemplo, estamos configurando o parágrafo com a cor de fonte vermelha.

Método interno

Neste método, criamos uma folha de estilos inserida diretamente na página. Ela é declarada na tag <head> do HTML, e define a formatação apenas para essa página. Ex:

<style type="text/css"> <!‐‐ body { background:#000000; } p { marginleft: 15px; } ‐‐> </style>

Neste caso, configuramos a cor de fundo da página como amarelo e definimos um espaço de 15 pixels em cada parágrafo (margem esquerda).

Método externo

É o método mais indicado, que desta forma, conseguimos controlar toda a formatação de um site através de um único arquivo CSS. O arquivo CSS pode ser chamado de duas formas na página (todas elas definidas na tag <head> do HTML).

<style type="text/css"> <!‐‐ @import url("estilos.css"); ‐‐> </style>

Ou

<link href=" estilos.css" rel="stylesheet" type="text/css" media="screen" />

 

4

Configurando seletores CSS

A sintaxe do CSS é composta por 3 elementos:

Seletor { propriedade: valor; }

CSS
CSS

O seletor é uma tag HTML, id ou classe que será formatada. A propriedade é o valor ou os valores a serem alterados e/ou definidos. O valor contém a formatação propriamente dita.

Cada seletor pode possuir várias propriedades dentro dele. Para isso, iremos separálas por um ponto e vírgula, e essas propriedades deverão estar entre chaves. Ex:

p { textalign:center; color:#ff0000; fontsize:1.2em; }

Se o valor de uma propriedade for composto por mais de uma palavra, devemos colocar entre aspas.

p { fontfamily:“Trebuchet MS”, Arial, Verdana; }

Podemos ainda configurar um grupo de seletores juntos, separador por vírgula.

h1, h2, h3 { fontfamily:“Trebuchet MS”, Arial, Verdana; color:#333333; }

Às vezes, é interessante inserir comentários dentro do arquivo CSS. Esses comentários não são interpretados na hora que o CSS é carregado, e servem como “lembretes”. Isso é bom para deixar o código mais claro, e facilitar alterações no arquivo por você ou por outras pessoas. Definimos um comentário desta forma:

/* Configuração de parágrafos */

Tudo o que estiver entre a marcação /* e a marcação */ será ignorado e não interpretado como código CSS.

 

5

Definindo uma classe e um id

CSS
CSS

Até esse ponto, aprendemos a configurar uma tag. Todas as vezes que ela aparecer no documento HTML, ela irá adotar essa configuração. Mas e se quisermos alterar outras configurações dentro de um parágrafo? Vejamos esse exemplo:

Esse parágrafo tem um texto vermelho.

Se definirmos a configuração do seletor p para um texto em negrito e na cor preta, não iremos ver a palavra vermelho na cor vermelha. Para isso, iremos definir uma classe e aplicar na palavra vermelho

<p>Esse parágrafo tem um texto <span class=”destaque”>vermelho</span>.</p>

Uma classe é definida no CSS com um ponto na frente do nome.

.destaque { color:#ff0000; }

Agora toda vez que precisarmos colocar um texto em vermelho, é só aplicar a classe nas áreas desejadas.

Podemos também definir um id, que será identificado pelo id de uma tag. A declaração é feita com o símbolo “#” na frente do nome.

Um detalhe importante é lembrar que esse tipo de declaração é única e não poderá ser repetida no HTML (ao contrário da classe, que pode ser usada quantas vezes forem necessárias)

#menu { width:180px; backgroundcolor:#343346; }

Uso correto:

<p class=”destaque”>Bla bla bla</p>

<p class=”marcador”>Bla bla bla</p>

<p class=”destaque”>Bla bla bla</p>

Uso incorreto:

<p id=”destaque”>Bla bla bla</p>

<p id=”marcador”>Bla bla bla</p>

<p id=”destaque”>Bla bla bla</p>

 

6

Propriedades CSS

Propriedades background

CSS
CSS

Define a configuração do background (fundo) de um elemento HTML. Existem vários tipos de configuração de backgrounds:

Propriedade

Significado e valores aceitos

backgroundcolor

Cor do fundo do elemento. Pode ser em hexadecimal, rgb ou com o nome da cor em inglês.

Ex: p { backgroundcolor: #00ff00; }

backgroundimage

Coloca uma imagem de fundo.

url(caminho/imagem.gif)

Ex: body { backgroundimage: url(stars.gif); }

backgroundrepeat

Define a maneira de como a imagem de fundo é posicionada

norepeat: não repete repeat: repete vertical e horizontal. repeaty : repete vertical. repeatx : repete horizontal.

Ex: body { backgroundimage: url(stars.gif); backgroundrepeat: repeatx; }

backgroundattachment

Se a imagem de fundo "rola" ou não com a tela

fixed: imagem fixa na tela. scroll: imagem "rola" com a tela.

Ex: body { backgroundimage: url(stars.gif); backgroundattachment: fixed; }

 
 

7

CSS
CSS

backgroundposition

Como e onde a imagem de fundo é posicionada

xpos ypos x% y% top left top center top right center left center center center right bottom left bottom center bottom right

Ex: body { backgroundimage: url(stars.gif); backgroundrepeat: norepeat; backgroundattachment:fixed; backgroundposition: 0% 0%; }

background

Maneira abreviada para todas as propriedades

 

8

Propriedades text

CSS
CSS

A propriedade text permite controlar a aparência do texto. Permite mudar a cor, aumentar ou diminuir os espaços entre os caracteres, mudar o alinhamento, indentar a primeira linha, entre outras configurações.

Propriedade

Significado e valores aceitos

color

Altera a cor do texto. Pode ser em hexadecimal, rgb ou com o nome da cor em inglês.

Ex: p { color:#ffff00; }

lineheight

Ajusta a altura das linhas do texto. Esse valor define a distância entre as linhas.

Ex: p { lineheight: 14px; }

letterspacing

Aumenta ou diminui o espaço entre os caracteres.

Ex: p { letterspacing: 12px; }

textalign

Ajusta o alinhamento do texto.

left: esquerda. right: direita. center: centralizado. justify: justificado.

Ex: p { textalign: center; }

textdecoration

Ajusta a decoração do texto.

none: nenhuma. underline: sublinhado. overline: linha sobre o texto. linethrough: linha sobre o texto. blink: texto piscando (não funciona no IE e no Opera).

Ex: p { textdecoration: underline; }

texttransform

Controla as letras de um elemento

none: nenhuma.

 
 

9

CSS
CSS
 

capitalize: cada palavra do texto começa com letra maiúscula. uppercase: todo o texto em letras maiúsculas. lowercase: todo o texto em letras minúsculas.

Ex: p { texttransform: uppercase; }

wordspacing

Aumenta ou diminui o espaço entre as palavras.

Ex: p { wordspacing: 10px; }

Links úteis

http://jigsaw.w3.org/cssvalidator/

http://www.westciv.com/style_master/academy/css_tutorial/index.html

 

10