Your SlideShare is downloading. ×
0
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS - Módulo Básico de WEB

704

Published on

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

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
704
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS Trabalhando com Folha de Estilos Professor Daniel Brandão www.danielbrandao.com.br
  • 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. Como Escrever  Para que você entenda a sintaxe do CSS, vamos destacar como escrevemos as regras de apresentação. www.danielbrandao.com.br
  • 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. Em funcionamento seria: P { color: #EFEFEF; background-color: #FF0; font-style: oblique; text-align: right; } www.danielbrandao.com.br
  • 6. Seletores agrupados: H1, H2, H3 { color: #EFEFEF; font-family: sans-serif; } www.danielbrandao.com.br
  • 7. Seletores encadeados: Div p strong a { color: #EFEFEF; } www.danielbrandao.com.br
  • 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. 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. 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

×