Introdução ao CSS
Introdução ao CSS
Sintaxe
O CSS é uma linguagem visual e tem uma sintaxe muito fácil. Ela não é como linguagens de programação que vemos normalmente, por isso, se você não entende nada de programação, não se preocupe, não haverá nada de outro mundo aqui.
Sua sintaxe é bastante simples:
seletor {propriedade: valor;}Seletor= elemento contido na estrutura HTML. Você selecionará um elemento pelo seu nome ou tipo de tag, então indicará isso em primeiro lugar.
Propriedade= é a propriedade que você manipulará desse elemento. Cor de fundo, tamanho de texto, cor de texto, posição, largura, altura, etc.
Valor= é o valor referente a propriedade escolhida. Se você quer mudar a cor do texto, o valor da propriedade será o nome da cor ou o código hexadecimal dessa cor:
p {color:#000000;}
No código acima, eu escolhi o elemento P (parágrafo), defini a propriedade "color" que é a propriedade para mudar a cor do texto, logo após escolhi a cor em hexadecimal, no caso, preto.
Inserindo CSS em sua página
Existem 3 formas para que você aplique CSS em suas páginas: CSS Inline, CSS Interno e CSS Externo.
CSS Inline
Você insere um trecho de CSS diretamente no corpo da TAG (elemento HTML). Deste modo:
<p style="color: #000000;">Texto do parágrafo.</p>
Você insere no objeto um atributo chamado STYLE, o valor desse atributo serão as propriedades CSS que você deseja manipular no objeto.
Fazendo dessa maneira, você não separa a informação da formatação, o que não diferencia muito da criação convencional de sites. A manutenção fica totalmente prejudicada.
Tente se manter afastado desta maneira. Normalmente, usa-se essa forma para solucionar rapidamente bugs de layout. Se fizer isso, tente encontrar outra solução posteriormente.
CSS Interno
O CSS Interno é um pouco mais organizado que o CSS Inline. Você cria um bloco destinado apenas para o código CSS. Mas, mesmo assim a informação não está totalmente desvinculada da parte visual. Dentro do <head>, é criado um bloco de código CSS, como abaixo:
<html>
<head>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>...</body>
<html>
Dentro deste bloco você coloca toda formatação para sua página. Infelizmente a formatação neste método, terá efeito apenas para a página que elas estão. Desta forma, perdemos todas as vantagens que o Efeito Cascata cria em nossas páginas. Se mudarmos a cor do texto, por exemplo, ele não será efetivo em todas as páginas, apenas em uma.
CSS Externo
Essa forma sim é a melhor de todas: você define um arquivo para guardar seu código CSS que será usado para o site todo. Você escreve seu código CSS em um arquivo .css, depois linka este arquivo em seu <head> para que as páginas possam herdar os estilos:
<link rel="stylesheet" type="text/css" href="seuarquivo.css" />
Com certeza é a forma mais indicada, já que na página fica com apenas 1 linha qual folha de estilo o browser deve utilizar.
Você pode linkar quantos arquivos CSS quiser. Apenas tome cuidado para que o código CSS dos arquivos não entrem em conflito. Isso pode se mostrar muito trabalhoso ao longo do projeto.
Diferenças entre CLASS e ID
Essa é uma das primeiras dúvidas que vem à cabeça do iniciante. Por isso, preste muita atenção.
No código HTML você pode gerar alguma identificação específica nos elementos, para que a formatação desses elementos fique mais fácil. Existem duas formas para criar essas "etiquetas".
O uso do ID
O id é usado há muito tempo pelos programadores, para identificar elementos que serão usados por exemplo, para emitir um formulário ou elementos que serão manipulados com JavaScript ou qualquer outra linguagem.
Ele é especificado assim:
<div id="nome">conteúdo</div>
Fazendo isso, o programador poderia manipular facilmente esse elemento com Javascript e DOM (Document Object Model). Se não houvesse o id nomeando o objeto, como isso seria possível?
O nome dos ids devem ser únicos. Não pode haver mais de um id com mesmo nome em uma página. Lembre-se disso!
O ID é reconhecido no CSS pelo sinal de # (sustenido, grelha, tralha, lasanha, jogo da velha ou como você chamar).
Tomando o exemplo que demos acima, se você quisesse manipular esse div pelo CSS, você faria o seguinte:
#nome {
color:black;
}
Class
O Class tem a mesma utilidade que o ID: identificar elementos. Só que ele serve para criar um grupo, uma classe de elemento que terão características iguais. Então, se você tem três destaques, e esses três destaques terão as mesmas características, como por exemplo, fundo preto, cor branca, e tipo da fonte será Verdana, você definirá o mesmo nome de classe para esses elementos:
<div class="destaques"> Aqui vai o texto do destaque </div> <div class="destaques"> Aqui vai o texto do destaque </div> <div class="destaques"> Aqui vai o texto do destaque </div>
O class é definido no CSS pelo sinal de "." ponto.
Tomando o exemplo acima, se você quisesse manipular as características desses objetos, você faria desta maneira:
.destaques {
background-color:black;
color:white;
font-family: Verdana;
}
Seletores
Você tem várias formas para especificar qual elemento da sua estrutura HTML você vai manipular. Você define esta especificidade pelo seletor. Você tem uma série de técnicas que faz com que este trabalho fique fácil.
Seletores Agrupados
Você pode definir que vários elementos diferentes do HTML obtenham características idênticas. Por exemplo, você pode querer que um H1 (título), um p (parágrafo) e algum outro div tenham a mesma família de letra, você poderia fazer assim:
h1 {font-family: Verdana;}
p {font-family: Verdana;}
div {font-family: Verdana;}
Mas você criaria três linhas para fazer a mesma coisa. Nesse caso três linhas não seriam o problema. Mas imagine fazer isso para um site grande, seu arquivo CSS ficaria enorme e muito bagunçado.
Você simplificará agrupando os seletores, desta forma:
h1, p, div {font-family: Verdana;}
Perceba que eu agrupei os objetos usando vírgulas. Então, o H1, o P e o DIV terão a família de fonte igual a Verdana.
Seletores Encadeados
Os seletores encadeados servem para especificar um objeto que esteja dentro de outro objeto. Por exemplo, tome o código html abaixo:
<div>
<p>
Aqui vai o texto que vamos usar <b>como exemplo<b>para ensinar seletores encadeados.
</p>
</div>
Suponha que você queira formatar o B que está envolvendo as palavras "como exemplo" do código acima. Se você fizesse assim:
b {color: blue;}
Você estaria deixando azul todos os Bs da página e não apenas o B que queremos.
Precisamos deixar azul apenas o B que está dentro daquele P. Para isso, usamos o seletor encadeado:
div p b {color: blue;}
Para entender esse seletor, você precisa lê-lo da direita para a esquerda, assim: o elemento B que está dentro do elemento P que por sua vez está dentro do elemento de DIV terá a cor azul.
Melhor seria: O elemento B que é filho de P que é filho de DIV terá a cor azul.
Veja que desta vez não separei com vírgula os elementos. Eles estão separados apenas por um espaço.
Vamos fazer outro exemplo para simplificar:
<div id="coluna">
<div>
<p>
Aqui vai o texto que vamos usar <b>como exemplo<b>para ensinar seletores encadeados.
</p>
</div>
</div>
Ficaria assim:
#coluna div p b {color:blue;}
O elemento B que é filho de P que é filho de DIV que é filho de COLUNA terá a cor azul.
Juntando os dois modos
Você pode juntar os dois modos.
#coluna div p b, h1 {color:blue;}
Selecionamos dois elementos nesse caso: o H1 e o B. Separamos eles por vírgulas como nos seletores encadeados que vimos logo acima.
PSEUDO-CLASSES
Pseudo-classes podem ser usados como seletores na CSS, mas eles não existem dentro da HTML. Mais exatamente, eles são 'inseridos' pelo browser, sob certas condições, para serem usados como elos de ligação com as folhas de estilo. Eles são referidos como 'classes' e 'elementos' porque esta é uma maneira conveniente de descrever seu comportamento. Mais especificamente, seu comportamento é definido por uma tag fictícia de seqüência.
Os browsers normalmente usam cores diferentes para mostrar links ainda não visitados, links ativos e links já visitados. Em CSS1, isto é feito através de pseudo-classes do elemento 'A' (anchor):
a:link { color: red; } /* link não visitado */
a:visited { color: blue; } /* link visitado */
a:active { color: lime; } /* link ativo */
Todos os elementos 'A' com um atributo 'HREF' serão classificados em um, e apenas um, destes grupos (ou seja, as definições das posições locais dos links não serão afetadas). Os browsers podem decidir mover um elemento de um grupo a outro (de 'visitado' para 'não visitado', por exemplo, após um certo tempo). Um 'link ativo' é aquele que está sendo selecionado no momento pelo leitor (está sendo 'clicado').
A formatação de uma pseudo-classe 'anchor' ocorre como se a classe tivesse sido inserida manualmente. Um browser não é obrigado a reformatar todo o documento apenas porque ocorreu a transição no estado da pseudo-classe (de 'não visitado' para 'ativo', por exemplo). Uma folha de estilo pode especificar que a propriedade 'font-size' de um link 'ativo' deva ser maior que um link 'visitado', mas o browser não é obrigado a reformatar dinamicamente o documento, quando o leitor seleciona o link 'visitado'.
As propriedades dos seletores de pseudo-classes não são aplicadas às classes normais, e vice-versa. O estilo definido no exemplo abaixo não exercerá, portanto, qualquer influência sobre a formatação do documento:
a:link { color: red; }
As pseudo-classes também podem ser combinadas com as classes normais:
O HTML seria: <a class="external" href="http://out.side/">link externo</a>
E o CSS correspondente: a.external:visited { color: blue; }
Se o link acima no exemplo, já tiver sido visitado, ele será formatado em azul. Note que o nome das classes normais precede o das pseudo-classes no seletor.