CSS
Trabalhando com Folha de Estilos
Professor Daniel Brandão
www.danielbrandao.com.br
O que é CSS?
 O termo CSS é uma abreviação de Cascading Style Sheet, que
traduzimos folha de estilo em cascata. Segundo a...
Como Escrever
 Para que você entenda a sintaxe do CSS, vamos destacar como escrevemos
as regras de apresentação.
www.dani...
Regra CSS:
 As regras são constituídas de um seletor e o bloco de
configuração:
 Seletor: Quando construímos uma regra n...
Em funcionamento seria:
P {
color: #EFEFEF;
background-color: #FF0;
font-style: oblique;
text-align: right;
}
www.danielbr...
Seletores agrupados:
H1, H2, H3 {
color: #EFEFEF;
font-family: sans-serif;
}
www.danielbrandao.com.br
Seletores encadeados:
Div p strong a {
color: #EFEFEF;
}
www.danielbrandao.com.br
Seletor de classe:
Permite que elementos do mesmo tipo
possam ter apresentações diferenciadas.
.Texto1 {
color: #EFEFEF;
f...
Seletor de classe
 Podemos ainda configurar para um mesmo elemento mais
de uma classe, para isso apenas é necessário colo...
Seletor de Identificadores
O identificador deverá ser aplicado apenas a um
elemento HTML através da propriedade id
#Texto ...
Próximos SlideShares
Carregando em…5
×

CSS - Módulo Básico de WEB

1.326 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
  • Seja o primeiro a comentar

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

×