CSS - Módulo Básico de WEB

1.277 visualizações

Publicada em

Slide com o princípio dos conceitos de web, trabalhando os conceitos iniciais de estilos em páginas web.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.277
No SlideShare
0
A partir de incorporações
0
Número de incorporações
215
Ações
Compartilhamentos
0
Downloads
53
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

CSS - Módulo Básico de WEB

  1. 1. CSS Trabalhando com Folha de Estilos Professor Daniel Brandão www.danielbrandao.com.br
  2. 2. O que é CSS?  O termo CSS é uma abreviação de Cascading Style Sheet, que traduzimos folha de estilo em cascata. Segundo a W3C a definição de CSS é:  “Folha de estilo em cascata é m mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espaçamentos) aos documentos web.” www.danielbrandao.com.br
  3. 3. Como Escrever  Para que você entenda a sintaxe do CSS, vamos destacar como escrevemos as regras de apresentação. www.danielbrandao.com.br
  4. 4. Regra CSS:  As regras são constituídas de um seletor e o bloco de configuração:  Seletor: Quando construímos uma regra não fazemos de forma individual por elemento de nosso documento, criamos na verdade um modelo que será aplicado a todos os elementos no qual sejam enquadrados através do seletor  Configuração: Definimos como os elementos serão afetados com relação a sua apresentação Propriedade: característica que será configurada Valor: valor que será atribuído a propriedade configurada seletor { propriedade: valor; } www.danielbrandao.com.br
  5. 5. Em funcionamento seria: P { color: #EFEFEF; background-color: #FF0; font-style: oblique; text-align: right; } www.danielbrandao.com.br
  6. 6. Seletores agrupados: H1, H2, H3 { color: #EFEFEF; font-family: sans-serif; } www.danielbrandao.com.br
  7. 7. Seletores encadeados: Div p strong a { color: #EFEFEF; } www.danielbrandao.com.br
  8. 8. Seletor de classe: Permite que elementos do mesmo tipo possam ter apresentações diferenciadas. .Texto1 { color: #EFEFEF; font-family: sans-sarif; } www.danielbrandao.com.br
  9. 9. Seletor de classe  Podemos ainda configurar para um mesmo elemento mais de uma classe, para isso apenas é necessário colocar um espaço entre os nomes das classes p.Titulo { color: #EFEFEF; font-size: 16px; } p.Texto { color: #000; font-size: 12px; } www.danielbrandao.com.br
  10. 10. Seletor de Identificadores O identificador deverá ser aplicado apenas a um elemento HTML através da propriedade id #Texto { color: #EFEFEF; font-family: sans-sarif; } www.danielbrandao.com.br

×