Aula 4 - VISÃO GERAL CSS

185 visualizações

Publicada em

Aula 4 - VISÃO GERAL CSS

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
185
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 4 - VISÃO GERAL CSS

  1. 1. O que é CSSO Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definira apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagensde marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidosno código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e oconteúdo de um documento.Fonte: TECMUNDOLINK: http://www.tecmundo.com.br/programacao/2705-o-que-e-css-.htmFormas de utilização (Externo, embutido, inline)Externo - Existem 3 maneiras de colocarmos configurações de cores, fontes, tamanhos e outros em CSSpara usarmos uma delas e a referencia do CSS como arquivo externo.<link rel="stylesheet" type="text/css" href="arquivo.css" />Embutido – Comando CSS fica dentro da página HTML. Permite que a página fique dentro de outrapágina.<style type="text/css">a{background: #ff9;color: #00f;text-decoration: underline;}</style>Inline – Possibilita que só aquele elemento seja estabilizado.<p style="border-style: groove; color: red;">Copyright 2007</p>
  2. 2. Tipos de Seletores (elemento HTML,Id ou Classe)Elemento HTML - Seletor universal ou seja qualquer elemento.*{color: #000000;}Aplicável a todos os elementosID - Seleciona o elemento <e> identificado com id.h1#chapter1 {text-align: center;}<e id="Id"... />Classe – Seletor de classe: seleciona os alementos <e> em que se aplicou a “classe”.h1.pastoral {color: green;}<e class="classe"... />Sintaxe@import "folha.css" tipo-midia;/* Comentários */@media tipo-midia {seletor {Propriedade: valor(es);}};
  3. 3. UnidadesRelativasPx – Tamanho de pixels (relativo ao dispositivo)Em – Tamanho relativo à fonte utilizada no elemento ao qual está inseridoEx – Corresponde à altura da fonte ‘x’AbsolutasIn – Polegadas (1 polegada=2,54 cm)Cm – CentímetrosMm – MilímetrosPt – pontos (1pt=1/72 polegadas)Pc – Picas (1 pica=12 pontos)Porcentagem% - Porcentagem0 – Valor ‘0’ não requer atribuição de unidade

×