Aplicações Internet e Comércio Eletrônico

  • Prof.: Marcelo Guilherme Kühl, Esp.

CSS - Cascading Style Sheet

  • Trata-se de um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML.

  • Proposto pelo W3C, o CSS foi introduzido pela primeira vez pela Microsoft, no lançamento do Internet Explorer 3.0.

CSS - Cascading Style Sheet

  • O Cascading Style Sheet (Folha de Estilo Cascata) permite uma versatilidade maior na programação do layout de páginas web, pois oferece várias possibilidades que antes só eram possíveis com a utilização de GIFs e JPGs.

CSS - Cascading Style Sheet

  • O CSS permite ao designer um controle maior sobre os atributos de uma página, como:

    • tamanho e cor das fontes;
    • espaçamento entre linhas e caracteres;
    • margem do texto;
    • entre outros.
  • Possibilita também às páginas a utilização de layers, permitindo a sobreposição de texto sobre texto, texto sobre figuras ou figura sobre figura.

Layers

  • Texto sobre texto:

  • Figura sobre Figuras:

Vantagem

  • Todo documento escrito utiliza certos elementos de design para formatar seções de texto a fim de manter a mesma aparência, ou seja, seguir um padrão.

    • Exemplo:
      • <OL> - lista ordenada;
      • <UL> - lista não ordenada;
      • <H1> - cabeçalho.

Vantagem

  • Exemplo:

    • A tag <H1> em quase todos os web sites parece a mesma - texto preto onde o tamanho da fonte é consideravelmente maior que o corpo do texto normal.
    • Se o desejado for criar seus próprios títulos diferenciados, deve-se formatar cada tag de título individualmente, utilizando a tag <FONT> ou similares.
    • Se mais tarde mudar de idéias sobre a aparência desses títulos, deverá voltar e mudar cada título individualmente. Ou seja, um processo lento e trabalhoso.

Vantagem

  • Uma grande vantagem é que a folha de estilo CSS permite realizar uma “declaração global“, facilitando a formatação.

  • É possível definir um estilo personalizado para cada elemento de design em seu web site.

Problemas

  • Como assegurar que as páginas que usam folhas de estilo também sejam mostradas pelos browsers que não detectam o CSS?

  • Como garantir que os estilos serão aplicados nas páginas se a implementação do CSS apresenta variações entre o Netscape, o Internet Explorer (IE) e outros, e mesmo entre o IE 3, 4, 5, 5.5, e o 6.0?

Soluções

  • Para resolver esses problemas, os desenvolvedores têm duas opções:

    • Escrever folhas de estilos simples, que funcionarão em todos os browsers; ou
    • Usar JavaScript para detectar o tipo de browser do usuário e fazer um link para folhas de estilos diferentes (e escrever linhas de código diferentes em alguns casos) de acordo com cada browser.

Formas de Implementação

  • Os estilos podem ser inseridos nos documentos de três maneiras diferentes:

    • Estilo inline: dentro de uma tag HTML;
    • Estilo incorporado: definido entre as tags <HEAD> e </HEAD> do documento; e
    • Estilo externo: arquivo .CSS.

1. Estilo inline

  • Especifica um estilo para um único bloco de texto.

  • Pode-se ainda utilizar a tag <SPAN> para especificar um estilo para uma palavra ou frase.

2. Estilo Incorporado

  • Define os estilo dentro de uma tag <STYLE> que se posiciona entre as tags <HEAD> e </HEAD>.

  • As especificações do estilo são inseridas dentro de uma tag de comentário <!-- -->, para assegurar que os browsers que não suportam CSS não interpretarão estas linhas.

3. Estilo Externo

  • Permite usar uma única folha de estilo para várias documentos HTML.

  • Neste caso, os estilos são definidos em um arquivo em separado com a extensão .CSS, e faz uma referência a ele por meio de uma tag de link, que se posiciona entre as tags de cabeçalho de cada documento HTML que irá utilizá-lo.

Exemplo

  • Arquivo HTML

  • Arquivo CSS

Outros Estilos

  • Usando “atalhos”

  • Contextual

Definição de Classes

  • Pode-se aplicar classes nos estilos: incorporado e externo de CSS, com o objetivo de definir diferentes atributos para uma mesma tag.

  • Exemplo:

Utilizando as Classes

  • No HTML as classes são utilizadas da seguinte forma:

Ordem de Precedência

  • No caso de uma mesma página ter mais de um estilo aplicado, para saber qual predominará deve-se pensar da seguinte forma: o estilo mais específico prevalece.

  • A ordem de precedência dos CSS é:

    • atributos de estilos inline têm precedência sobre tags de estilo incorporado;
    • tags de estilo incorporado têm precedência sobre estilos por link (externos).

Folhas de estilo

  • Uma folha de estilo é composta por regras (rules) que determinam como a página será apresentada pelo browser.

  • Em um documento HTML, cada elemento, ou um conjunto deles, receberá uma dessas regras que define como ele será representado.

Folhas de estilo

  • Cada regra é composta por um seletor que contém diversas propriedades, isto é, os parâmetros de formatação que serão usados para cada elemento.

  • Cada propriedade do seletor assume um valor que irá definir os estilos de formatação.

Declaração

  • Sintaxe:

  • Onde:

    • Seletor: nome do elemento do documento HTML.
    • Propriedade: nome da propriedade que será formatada pela CSS.
    • Valor: conteúdo que será atribuído à propriedade definida no seletor.

Estilo CSS em Texto

  • As propriedades básicas para fontes são:

    • Font-family;
    • Font-size;
    • Font-weight;
    • Font-style;
    • Text-decoration;
    • Text-transform; e
    • Color.

Font-family

  • Utilizado para indicar a fonte, ou uma lista de fontes, que uma tag ou documento irá apresentar.

Font-size

  • É utilizado para definir o tamanho pelo qual as fontes serão apresentadas na tela.

  • Há três formas básicas para definição de tamanho:

    • Pontos, pixels, cm e outras unidades de medida;
    • Palavras-chave; e
    • Percentagem.

Font-size - Unidades de Medidas

Font-size - Palavras-chave

  • Esse tamanho pré-configurados deixam o browser decidir qual o tamanho exato de fonte apropriado para cada palavra-chave.

  • Lista em ordem crescente:

    • xx-small;
    • x-small;
    • small;
    • medium;
    • large;
    • x-large; e
    • xx-large.

Comentários