CSS

Páginas: 9 (2164 palavras) Publicado: 30 de agosto de 2015
CSS

Cascating Style Sheet
Folhas de estilos em cascata
http://www.pt-br.html.net/tutorials/css/

Introdução
• O que é CSS?
• O que eu posso fazer com CSS?
• Qual é a diferença entre CSS e HTML?
– HTML é usado para estruturar conteúdos. CSS é
usado para formatar conteúdos estruturados.

http://www.pt-br.html.net/tutorials/css/

Quais são os benefícios do uso de CSS?
• controle do layout devários documentos a
partir de uma simples folha de estilos;
• maior precisão no controle do layout;
• aplicação de diferentes layouts para servir
diferentes mídias (tela, impressora, etc.);
• emprego de variadas, sofisticadas e avançadas
técnicas de desenvolvimento.

http://www.pt-br.html.net/tutorials/css/

A sintaxe básica das CSS
Suponha que desejamos uma cor de fundo
vermelha para a página web:
–Usando HTML podemos fazer assim:


– Com CSS o mesmo resultado será obtido assim:
body {background-color: #FF0000;}

http://www.pt-br.html.net/tutorials/css/

Aplicando CSS a um documento HTML
• Método 1: In-line (o atributo style)
• Método 2: Interno (a tag style)
• Método 3: Externo (link para uma folha de
estilos)

http://www.pt-br.html.net/tutorials/css/

Método 1:In-line (o atributo style)


Exemplo


Esta é uma página com fundo vermelho





http://www.pt-br.html.net/tutorials/css/

Método 2: Interno (a tag style)


Exemplo



Esta é uma página com fundovermelho





http://www.pt-br.html.net/tutorials/css/

Método 3: Externo (link para uma folha de
estilos)
Uma folha de estilos externa é um simples
arquivo de texto com a extensão .css




Meu documento


...http://www.pt-br.html.net/tutorials/css/

Cores e fundos


color - define a cor do primeiro plano de um elemento
h1 { color: #ff0000; }



background-color - define a cor do fundo de um elemento
body { background-color: #FFCC66; }
h1 {
color: #990000;
background-color: #FC9804;
}



background-image - definir uma imagem de fundo
body {
background-color: #FFCC66;
background-image:url("butterfly.gif");
}

http://www.pt-br.html.net/tutorials/css/

Cores e fundos


background-repeat - controla o comportamento de repetição da imagem
de fundo
Valor
Background-repeat: repeat-x

Descrição
A imagem se repete na horizontal

background-repeat: repeat-y

A imagem se repete na vertical

A imagem se repete tanto na horizontal como na vertical
background-repeat: no-repeat A imagem não se repetebackground-repeat: repeat

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}

http://www.pt-br.html.net/tutorials/css/

Cores e fundos


background-attachment - define se a imagem será fixa ou se irá rolar
juntamente com o elemento que a contém
Valor
Background-attachment: scroll

Descrição
A imagem rola com a página

Background-attachment: fixedA imagem é fixa

background-attachment: fixed;



background-position - permite alterar este posicionamento padrão e
colocar a imagem em qualquer lugar na tela
Valor

Descrição

background-position: 2cm 2cm

A imagem é posicionada a 2 cm da esquerda e 2 cm para
baixo na página

background-position: 50% 25%

A imagem é centrada na horizontal e a um quarto (25%) para
baixo na páginabackground-position: top right

A imagem é posicionada no canto superior direito da página

http://www.pt-br.html.net/tutorials/css/

Cores e fundos


background-position
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}

http://www.pt-br.html.net/tutorials/css/

Cores e fundos
•...
Ler documento completo

Por favor, assinar para o acesso.

Estes textos também podem ser interessantes

  • O que é CSS
  • Linguagem css
  • html e css
  • html, CSS
  • Apontamentos css
  • Códigos css
  • Código css
  • Css completo

Seja um membro do Trabalhos Feitos

CADASTRE-SE AGORA!