SlideShare uma empresa Scribd logo
1 de 22
Por Gustavo Venceslau Por Gustavo Venceslau
CSS - Cascading Style Sheets ,[object Object],[object Object]
CSS - Cascading Style Sheets Vantagens: ,[object Object]
São arquivos que só contem textos;
Não exigem plugins;
Facilitam codificação e manutenções posterioresDesvantagens*: ,[object Object],[object Object]
Embedded
Linked,[object Object]
CSS - Cascading Style Sheets CSS – Embedding Estilo incorporado ao HTML através de um Bloco de “style”<head> <style> p {font-family: Arial; color: red} </style> </head> <body> <p>Esta fonte está escrita com fonte “arial” e cor vermelha.</p> </body>
CSS - Cascading Style Sheets CSS – Linking Vincula-se um arquivo externo apontando-o internamente com a tag <link><head> <link rel=“stylesheet” href=“linking.css” type=“text/css”> </head> <body> <p>Esta fonte está escrita com fonte “arial” e cor vermelha.</p> </body> P{font-family:arial; color: red}
CSS - Cascading Style Sheets A regra CSS e sua sintaxe ,[object Object]
Um conjunto de regras CSS formam uma Folha de Estilo;
Uma regra CSS é composta de três partes: seletor, propriedade e valor.seletor { propriedade: valor; }       h1 { text-decoration: underline; }
CSS - Cascading Style Sheets A regra CSS e sua sintaxe ,[object Object]
Propriedade é o atributo do elemento HTML;
Valor é a característica a ser assumida pela propriedade;seletor { propriedade: valor; }       h1 { text-decoration: underline; }
CSS - Cascading Style Sheets Propriedades dos Seletores É o atributo ao qual será aplicada a regra ,[object Object]
Podem existir duas ou mais propriedades por seletor, desde que separadas por um “ ; ”
A propriedade pode ter mais de um valor associado,[object Object]
CSS - Cascading Style Sheets Valores das Propriedades É a característica específica a ser assumida pela propriedade Exemplos: ,[object Object]
Cor preta
Fundo vermelho,[object Object]

Mais conteúdo relacionado

Mais procurados (20)

HTML & CSS - Aula 2
HTML & CSS - Aula 2HTML & CSS - Aula 2
HTML & CSS - Aula 2
 
Folha de estilo css
Folha de estilo   cssFolha de estilo   css
Folha de estilo css
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
WDI - aula 07 - css com html
WDI - aula 07 - css com htmlWDI - aula 07 - css com html
WDI - aula 07 - css com html
 
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
 
Aprenda HTML e CSS
Aprenda HTML e CSSAprenda HTML e CSS
Aprenda HTML e CSS
 
HTML
HTML HTML
HTML
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Html Exercicio
Html ExercicioHtml Exercicio
Html Exercicio
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
Internet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSInternet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSS
 
Técnicas e processos - HTML / CSS - aula 2
Técnicas e processos - HTML / CSS - aula 2Técnicas e processos - HTML / CSS - aula 2
Técnicas e processos - HTML / CSS - aula 2
 
Criando sites com estilos
Criando sites com estilosCriando sites com estilos
Criando sites com estilos
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
 
HTML&CSS 4 - Intermediate CSS (1/2)
HTML&CSS 4 - Intermediate CSS (1/2)HTML&CSS 4 - Intermediate CSS (1/2)
HTML&CSS 4 - Intermediate CSS (1/2)
 
Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3
 
Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3
 
Iniciação em HTML
Iniciação em HTMLIniciação em HTML
Iniciação em HTML
 
Slides Css3
Slides Css3 Slides Css3
Slides Css3
 

Destaque

Turismo em Vila Velha
Turismo em Vila VelhaTurismo em Vila Velha
Turismo em Vila Velhamarcialippaus
 
The impact of innovation on travel and tourism industries (World Travel Marke...
The impact of innovation on travel and tourism industries (World Travel Marke...The impact of innovation on travel and tourism industries (World Travel Marke...
The impact of innovation on travel and tourism industries (World Travel Marke...Brian Solis
 
Open Source Creativity
Open Source CreativityOpen Source Creativity
Open Source CreativitySara Cannon
 
Reuters: Pictures of the Year 2016 (Part 2)
Reuters: Pictures of the Year 2016 (Part 2)Reuters: Pictures of the Year 2016 (Part 2)
Reuters: Pictures of the Year 2016 (Part 2)maditabalnco
 
The Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post FormatsThe Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post FormatsBarry Feldman
 
The Outcome Economy
The Outcome EconomyThe Outcome Economy
The Outcome EconomyHelge Tennø
 

Destaque (7)

Turismo em Vila Velha
Turismo em Vila VelhaTurismo em Vila Velha
Turismo em Vila Velha
 
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job? Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
 
The impact of innovation on travel and tourism industries (World Travel Marke...
The impact of innovation on travel and tourism industries (World Travel Marke...The impact of innovation on travel and tourism industries (World Travel Marke...
The impact of innovation on travel and tourism industries (World Travel Marke...
 
Open Source Creativity
Open Source CreativityOpen Source Creativity
Open Source Creativity
 
Reuters: Pictures of the Year 2016 (Part 2)
Reuters: Pictures of the Year 2016 (Part 2)Reuters: Pictures of the Year 2016 (Part 2)
Reuters: Pictures of the Year 2016 (Part 2)
 
The Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post FormatsThe Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post Formats
 
The Outcome Economy
The Outcome EconomyThe Outcome Economy
The Outcome Economy
 

Semelhante a Css

Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao cssLéo Dias
 
Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java scriptandreluizlc
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosTiago Antônio da Silva
 
Aula 02 - Font End
Aula 02 - Font EndAula 02 - Font End
Aula 02 - Font Endmvcbotelho
 
Introdução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENACIntrodução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENACDavid Arty
 
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSSMódulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSSAgrupamento de Escolas da Batalha
 
Desenvolvimento Web 03 - David Arty - SENAC
Desenvolvimento Web 03 - David Arty - SENACDesenvolvimento Web 03 - David Arty - SENAC
Desenvolvimento Web 03 - David Arty - SENACDavid Arty
 
2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSSWillian Magalhães
 
Css introdução - madson dias
Css   introdução -  madson diasCss   introdução -  madson dias
Css introdução - madson diasYago Augusto
 

Semelhante a Css (20)

Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
CSS
CSSCSS
CSS
 
Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java script
 
Css
CssCss
Css
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
Aula 02 - Font End
Aula 02 - Font EndAula 02 - Font End
Aula 02 - Font End
 
Css
CssCss
Css
 
Css For Beginners
Css For BeginnersCss For Beginners
Css For Beginners
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Introdução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENACIntrodução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENAC
 
CSS
CSSCSS
CSS
 
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSSMódulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
 
Desenvolvimento Web 03 - David Arty - SENAC
Desenvolvimento Web 03 - David Arty - SENACDesenvolvimento Web 03 - David Arty - SENAC
Desenvolvimento Web 03 - David Arty - SENAC
 
2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS
 
Css introdução - madson dias
Css   introdução -  madson diasCss   introdução -  madson dias
Css introdução - madson dias
 
CSS
CSSCSS
CSS
 
Aula 4 css
Aula 4   cssAula 4   css
Aula 4 css
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 

Css

  • 1. Por Gustavo Venceslau Por Gustavo Venceslau
  • 2.
  • 3.
  • 4. São arquivos que só contem textos;
  • 6.
  • 8.
  • 9. CSS - Cascading Style Sheets CSS – Embedding Estilo incorporado ao HTML através de um Bloco de “style”<head> <style> p {font-family: Arial; color: red} </style> </head> <body> <p>Esta fonte está escrita com fonte “arial” e cor vermelha.</p> </body>
  • 10. CSS - Cascading Style Sheets CSS – Linking Vincula-se um arquivo externo apontando-o internamente com a tag <link><head> <link rel=“stylesheet” href=“linking.css” type=“text/css”> </head> <body> <p>Esta fonte está escrita com fonte “arial” e cor vermelha.</p> </body> P{font-family:arial; color: red}
  • 11.
  • 12. Um conjunto de regras CSS formam uma Folha de Estilo;
  • 13. Uma regra CSS é composta de três partes: seletor, propriedade e valor.seletor { propriedade: valor; } h1 { text-decoration: underline; }
  • 14.
  • 15. Propriedade é o atributo do elemento HTML;
  • 16. Valor é a característica a ser assumida pela propriedade;seletor { propriedade: valor; } h1 { text-decoration: underline; }
  • 17.
  • 18. Podem existir duas ou mais propriedades por seletor, desde que separadas por um “ ; ”
  • 19.
  • 20.
  • 22.
  • 27.
  • 28. h1 { font: small-capsbold; color: red }
  • 29.
  • 30. h1, h2 { font: small-capsbold; color: red }
  • 31.
  • 32.
  • 33. a:link – link que não foi visitado
  • 34. a:hover – cursor sobre o link
  • 35.
  • 36.
  • 37. CSS - Cascading Style Sheets Obrigado! Gustavo Venceslau WebDesigner Portfolio: www.gustavovenceslau.com Email/MSN:falecom@gustavovenceslau.com Twitter:@gusvenceslau