Trabalho de css

Disponível somente no TrabalhosFeitos
  • Páginas : 7 (1566 palavras )
  • Download(s) : 0
  • Publicado : 24 de abril de 2012
Ler documento completo
Amostra do texto
CSS

O que é CSS ?

Sigla em inglês para Cascading Style Sheet ( Folha de estilo em cascata ). É um método simples utilizado para definir a apresentação de documentos escritos por uma linguagem de marcação.

Qual a utilidade do CSS?

Com o CSS podemos eliminar do código elementos e atributos de formatação, o que deixará o código mais limpo e ao mesmo fazendo a separação entre marcação eexibição, o que quer dizer é que, o html destina-se a estruturar e marcar o conteúdo enquanto a CSS se responsabiliza pelo visual do documento.

HTML marca e estrutura textos, cabeçalhos, parágrafos, links, botões, formulários, imagens e demais elementos da página enquanto a CSS define cores, posicionamentos, estilos de linhas, bordas e tudo o que se refere à apresentação da página.

Essebenefício dessa separação permite, por exemplo, a alteração da aparência de várias páginas html apenas modificando um arquivo ao ter que sair alterando todas as páginas do site.

CSS, suas versões e suporte

O suporte ao CSS pode variar. O Internet Explorer 6, por exemplo, tem suporte total a CSS1 e praticamente nulo a CSS2. Navegadores mais recentes como Opera, Internet Explorer 7,8 e 9 eMozilla Firefox tem suporte maior, inclusive até a CSS 3.

Sintaxe e exemplos

As folhas de estilos são aplicadas aos elementos do HTML e XHTML, como por exemplo, aos elementos table, body, p, h1 etc. Na CSS esses elementos são chamados de seletores.
É preciso escolher os seletores que receberão determinadas propriedades de formatação e então atribuir valores às propriedades escolhidas.

Seletor{ propriedade1: valor1;propriedade2:valor2; ... }

Propriedade é o atributo HTML ao qual será aplicada a regra.

Valor é a característica específica a ser assumida pela propriedade.

Na sintaxe é preciso primeiro, indicar o seletor abre chave para iniciar as declarações de propriedade e valor. Logo a abertura da chave, indica a propriedade, seguida de “:” dois pontos para definir seu valor.Para uma nova propriedade, separa-las por ponto e vírgula finalizando com a chave.

Exemplos:

1. p { color: blue }
2. h1 { font-size:12px;color:red }

Descrição:

1. No primeiro exemplo, p é o selector, color é a propriedade e blue o valor atribuído à propriedade color. Essa regra de estilo indica que o texto contido entre a marcação p deve ser exibido na cor azul.
2. No segundoexemplo, a marcação h1 possui a propriedade font-size com o valor de 12px e a propriedade color que recebe o valor red. Essa regra indica que o texto contido dentro do elemento h1 deve ser exibido com tamanho da fonte 12px e na cor vermelha.

Para as cores podem-se utilizar como valor de propriedade tanto os seus nomes (blue , red, green, yellow, navy, white, gray, olive, purple etc) quanto as suaforma hexadecimal (#FF0000, #0000FF, #FFFFFF, #CC0000, #CCCCCC etc).

Para os valores de tamanhos, as unidades predefinidas podem ser:

Abreviação Nome
cm Centímetro
em Eme
ex Ex
in Polegada
mm Milímetro
pc Paica
pt Ponto
px Pixel

Propriedade em declaração única

Algumas propriedades permitem definir mais de um valor para uma propriedade.

Exemplo:

p {font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 16px;
font-family: sans-serif;
}

Forma de declaração única:

p {font: bold italic small-caps 16px sans-serif;}


Agrupamento de seletores

Uma regra válida para vários seletores, esses podem ser agrupados indicando que todos esses agrupados receberão as mesmas formatações. “É preciso paraagrupá-los apenas separa-los por “,” vírgula.

Exemplo:

h1,h2,h3{color:red;}

Seletores de classe

Com o seletor de classe é possível criar várias instâncias de uma regra de estilo.

A sintaxe:

seletor.classe { propriedade:valor }

Dessa forma, podem-se criar formatações específicas para apenas determinados elementos que utilizaram a classe do seletor.
Para a criação das classes utilize...
tracking img