Criando um site – Parte 9

Olá! Voltei…. Eu parei esse tutorial um pouco, mas ele já vai ser continuado.

As duas partes anteriores, pra quem não viu:

Neste tutorial você vai aprender a criar simples folhas de estilo CSS. Mas antes, um pouco de história….

Antes das folhas de estilo CSS, as imagens eram muito usadas. As pessoas criavam imagens e as colocavam no site, o que criava uma maravilha visual. Porém, as páginas ficavam muito pesadas.

Só um pouco de cálculo pra você entender: numa página rázoavelmente feita de imagens existiam 2 KB de página + 160 KB de figuras = 162 KB,  contra os nossos 48 Kbps da discada. Eram baixadas a uma taxa de transferência de, então, 6 KB por segundo. 162 / 6 = 27 segundos. Parece um tempo pequeno, mas é o tempo do download. O PC tinha que renderizar a página web.

Com o surgimento do CSS 1.0, 160 KB de figuras podiam ser reduzidos a 16 KB de CSS e figuras (em casos onde não tem jeito), o que diminui o tempo de download das páginas a 3 segundos.


Mas, vamos:
CSS significa Folha de Estilos em Cascata.
É uma norma W3C
Está na versão 3.0
O código do CSS funciona desse jeito:


seletor
{
regra: valor;
outraregra: valor;
maisumaregra: valor
}

Seletor pode ser uma tag ou algo com atributo, ou alguma  id/class, ou uma união deles. Ele seleciona todos que contenham aqueles atributos
Regra pode ser uma ‘instrução’ CSS
Exemplo:

a
{
color: #FF0000;
}

O código CSS acima deixa todos os links vermelhos

Colocação do CSS

O código CSS pode ser incorporado de três formas:

  1. Dentro da página: usa-se a tag ‘style’, que fica dentro da tag ‘head’, assim:
    <head>
    <!-- Abaixo vão os estilos -->
    <style type="text/css">
    </style>
    </head>
    

    O atributo type deve ser ‘text/css’, senão o navegador não reconhece a folha de estilos.

  2. Num arquivo externo:usa-se a tag link, responsável por ligar conteúdos externos (como o ícone de favorito) à página
    <head>
    <!-- Abaixo vai a ligação -->
    <link rel="stylesheet" type="text/css" href="meuarquivocss.css" />
    </head>
    

    O arquivo CSS deve ter a extensão CSS. No atributo href você deve colocar o local do seu script como você faz no atributo href do link âncora (tag a). Fora isso é igual como está aqui.

  3. No próprio elemento: Você pode aplicar os estilos CSS diretamente, sem usar nenhum seletor. Basta usar o atributo style na tag desejada e escrever os estilos CSS lá. Assim:
    um arquivo externo:usa-se a tag link, responsável por ligar conteúdos externos (como o ícone de favorito) à página

    <html>
    ...
    <a href="site.com.br" style="color: red">Site.com.br</a>
    ...
    </html>
    

    Obs: o atributo style só pode ser feito nas tags em que o atributo id e class é possível. Seu maior uso é nas tags SPAN e DIV.

Na próxima página você vai ver alguns efeitos básicos bem interessantes.

Anúncios

Publicado em 16/05/2011, em Nível alto, Nível médio, tutoriais e marcado como , , . Adicione o link aos favoritos. 1 comentário.

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: