Então, vamos começar com uma introdução:
1. Introdução
CSS é o acrônimo de Cascading Style Sheets (Folha de Estilos em Cascatas) e foi desenvolvido para definir como as tags HTML serão mostradas. A necessidade da criação do CSS vem de um problema gerada nas novas tags do HTML 3.2, onde surgiu tags de formatação como a <font>. Entretanto, HTML nunca foi projetado para formatar texto e para piorar, cada página de um site tinha que ter sua própria formatação definida, mesmo que fossem páginas iguais.
Com esse problema, foi criado o CSS, no qual podemos definir em um arquivo css, as formatações necessárias e em cada página web, usará esse arquivo para definir suas formatações. Então, caso exista necessidade de alterar a aparência ou o layout da página, basta alterar o arquivo css e todas as páginas serão alteradas.
Para curiosidade, as tags de formatação, como a <font> continuaram existindo no HTML4, entretanto foram excluídas no HTML5, sendo CSS a única forma de formatação na nova versão do HTML.
2. Sintaxe
2.1 Definindo as formatações
A sintaxe do CSS não é complexa, possuindo duas partes, o seletor e as declarações. O seletor indica o que estaremos alterando e as declarações são como que vai estar sendo apresentado. Vamos ver um exemplo:
h1 {
color:purple;
font-size:12px;
}
Nesse exemplo, estamos alterando a forma que a tag <H1> será mostrada, por isso usamos como seletor, o próprio nome da tag. Entre as chaves, nós temos duas declarações, a primeira altera a cor do texto e a segunda altera o tamanho da fonte. Note que as declarações possuem duas partes separados por ":". A primeira parte é a propriedade que estamos alterando, neste caso, estamos indicando que estamos alterando a cor (color) e o tamanho da fonte (font-size). O que está depois do ":" é o valor que essa propriedade vai assumir, neste caso roxo (purple) e 12 pixels (12px). Também perceba que cada declaração é finalizada com um ";".
2.2 Comentários
Caso deseja inserir comentários no arquivo, você deve utilizar os delimitadores /* e */. Por exemplo:
/* Isso aqui é um comentário, vai ser ignorado pelo navegador */
Tudo que estiver entre os delimitadores, não vai ser interpretado pelo navegador.
3. Seletores
Já vimos no primeiro exemplo que podemos utilizar a tag HTML como seletor para alterar sua aparência. Entretanto, imagine a tag <p>, que delimita cada parágrafo da página. É bem provável que você queira estilos diferentes para alguns parágrafos. Nessa seção mostrarei como fazer isso:
3.1 Seletor ID
Usamos o seletor ID quando queremos que apenas uma tag seja afetada, logo o seletor id irá afetar apenas a tag que tenha o mesmo id que o seletor. Vamos pegar por exemplo, temos o seguinte código:
<p id="exemplo1">Olá mundo </p>
O id dessa tag é "exemplo1", e se quisermos criar um seletor para ela, podemos definir da seguinte maneira:
#exemplo1 {
text-align: center;
color: orange;
}
Aqui podemos ver que para definir um seletor que afeta o id, utilizamos o nome do id que queremos afetar precedido por um "#".
3.2 Seletor Class
Usamos o seletor Class quando queremos que um grupo de tags seja afetado. Vamos mostrar um exemplo de código:
<p class="exemplo2"> Olá mundo </p>
<p class="exemplo2"> Olá América </p>
<h1 class="exemplo2">Olá Brasil</h1>
Aqui nós temos um grupo de tags, cuja classe foi definida como "exemplo2". Para criar um seletor que afete a aparência dessa classe, fazemos da seguinte maneira:
.exemplo2 {
color:red;
}
Ou seja, na hora de declarar o seletor, usamos o nome da classe que queremos afetar, precedido por um ".".
Também podemos definir que somente uma tag com aquela classe seja afetada, colocando a tag queremos afetar antes do ponto, por exemplo:
h1.exemplo2 {
color:red;
}
aqui, somente as tags <h1> da classe "exemplo2" serão afetadas.
IMPORTANTE: Evite nome de id, nem a classe que inicie com números, pois a maioria dos navegadores não suportam isso.
4. Como usar o CSS no HTML
Existem três formas de inserir a folha de estilos em um documento HTML.
- Através de um arquivo externo;
- Em uma folha declarada internamente;
- Declaração na linha;
Como foi dito anteriormente, as folhas de estilos podem ser declaradas em um arquivo CSS. Obviamente, assim como todos os arquivos envolvidos em uma página web, segue os mesmos tratamentos de caminho relativo.
Então, para importar um arquivo CSS para a página web, usamos a seguinte tag:
<head>
<link rel="stylesheet" type="text/css" href="nomeDoArquivo.css">
</head>
Não preciso dizer que o que vai no href é o nome completo do arquivo css (junto com a extensão) e que é o caminho relativo.
4.2 Declaração Interna
A declaração interna pode ser feita usando as tags <style>, que geralmente fica dentro da tag <head>:
<head>
<style>
p{
color:blue;
}
</style>
</head>
4.3 Declaração Na Linha
Quando precisar alterar o estilo em uma única tag, você pode usar uma declaração na linha. Para isso, você usa o atributo style dessa forma:
<p style="color:blue;">
Aqui, como pode ver, usamos as declarações diretamente na tag.
4.4 Usando as três formas
As três formas podem ser usadas em conjunto, mas vamos ver o exemplo: temos três definições da tag h3. Na folha externa, temos:
h3{
color:red;
text-align:left;
font-size:8pt;
}
Na folha interna temos:
<head>
h3
{
text-align:right;
font-size:20pt;
}
</head>
e em uma tag h3, temos o seguinte:
<h3 style="font-size:22pt;">
Então como fica no final? O que ocorre a fusão dos estilos, ou seja, cada atributo será adicionado no efeito. Entretanto, o que ocorrerá se o mesmo já foi declarado? A definição mais nova será substituirá a definição mais antiga. Pegando o exemplo acima, sendo que a definição do arquivo externo foi declarada antes da interna, temos a seguinte estilo resultante:
h3{
color:red;
text-align:right;
font-size:20pt;
}
juntando com o estilo na linha:
h3{
color:red;
text-align:right;
font-size:22pt;
}
Agora, se eu defini primeiro a folha interna e depois declarei a folha externa, teremos já o seguinte resultado:
h3{
color:red;
text-align:left;
font-size:8pt;
}
adicionando o estilo na linha:
h3{
color:red;
text-align:left;
font-size:22pt;
}
Então, preste atenção nas ordens da declaração quando for trabalhar com estilos internos e externos, pois como pode ser visto, a ordem pode alterar o resultado final.
5. Conclusão
Esse foi o nosso tutorial de introdução ao CSS. Vimos como declarar um folha, os tipos de seletores que podemos ter e como importar e usá-los em um arquivo HTML. No próximo tutorial irei falar sobre estilizando a página, ou seja, como alterar a aparência da página, como cores, imagens de fundo, etc. Então, até a próxima
Nenhum comentário:
Postar um comentário