SlideShare uma empresa Scribd logo

Aprenda CSS: introdução a seletores, tags e criação de sites

•
•
H
hellequin

1) O documento discute as folhas de estilo em cascata (CSS), que definem a apresentação visual de documentos HTML. 2) Detalha a sintaxe básica de seletores CSS como ID, classe e tipo. 3) Fornece exemplos de como aplicar CSS a um documento HTML através de métodos internos, externos ou inline.

TecnologiaEducação
1 de 34
Diego Potapczuk [email_address] diegoliveira.com.br CSS Junho de 2008
CSS ,[object Object],[object Object],[object Object]
Sintaxe básica do CSS
Seletores Casa com qualquer elemento F que se segue imediatamente a E. E + F Adjacente Casa com qualquer elemento F que seja filho do elemento E. E > F Filho Casa com qualquer elemento F que seja descendente do elemento E. E F Descendente Casa com qualquer elemento cuja id seja footer . #footer ID Casa com qualquer elemento cujo atributo class tem o valor info . .info Classe Casa com qualquer elemento E. E Tipo Casa com qualquer elemento. * Universal Descrição Formato Seletor Visão geral da sintaxe dos seletores CSS 2.1
Seletores ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tags CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tags CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tags CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tags CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tags CSS ,[object Object],[object Object],[object Object],[object Object],[object Object]
Tags CSS ,[object Object],[object Object]
Tags CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tags CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tags CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tags CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tags CSS ,[object Object],[object Object],[object Object],[object Object]
Tags CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Prática ,[object Object],[object Object],[object Object]
Cria ção do documento padrão ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Criação da estrutura do site ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Aplicando CSS a um documento HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Criação da estrutura do site ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Criação da estrutura do site ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Criação da estrutura do site ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Criação da estrutura do site ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Criação da estrutura do site ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Site final
Web Developer Toolbar ,[object Object]
Wave Toolbar ,[object Object]
Boas práticas CSS
Boas práticas CSS
Boas práticas CSS
Sites para consulta ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Muito obrigado ,[object Object]

Recomendados

HTML & CSS - Aula 3
HTML & CSS - Aula 3 HTML & CSS - Aula 3
HTML & CSS - Aula 3 lucampos_si
 
HTML - aula 1
HTML - aula 1HTML - aula 1
HTML - aula 1lucampos_si
 
HTML & CSS - Aula 4
HTML & CSS - Aula 4HTML & CSS - Aula 4
HTML & CSS - Aula 4lucampos_si
 
HTML & CSS - Aula 2
HTML & CSS - Aula 2HTML & CSS - Aula 2
HTML & CSS - Aula 2lucampos_si
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5lucampos_si
 
Aprenda HTML e CSS
Aprenda HTML e CSSAprenda HTML e CSS
Aprenda HTML e CSSHelton Marinho
 
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 CSSKako Botasso
 
Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignApresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignIuri Andreazza
 

Recomendados

HTML & CSS - Aula 3
HTML & CSS - Aula 3 HTML & CSS - Aula 3
HTML & CSS - Aula 3 lucampos_si
 
HTML - aula 1
HTML - aula 1HTML - aula 1
HTML - aula 1lucampos_si
 
HTML & CSS - Aula 4
HTML & CSS - Aula 4HTML & CSS - Aula 4
HTML & CSS - Aula 4lucampos_si
 
HTML & CSS - Aula 2
HTML & CSS - Aula 2HTML & CSS - Aula 2
HTML & CSS - Aula 2lucampos_si
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5lucampos_si
 
Aprenda HTML e CSS
Aprenda HTML e CSSAprenda HTML e CSS
Aprenda HTML e CSSHelton Marinho
 
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 CSSKako Botasso
 
Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignApresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignIuri Andreazza
 
Análisis de la II Cumbre de la CELAC para La Razón
Análisis de la II Cumbre de la CELAC para La RazónAnálisis de la II Cumbre de la CELAC para La Razón
Análisis de la II Cumbre de la CELAC para La RazónLLYC
 
Principal Financial Group Northeast Business Center Recruiting Presentation
Principal Financial Group Northeast Business Center Recruiting PresentationPrincipal Financial Group Northeast Business Center Recruiting Presentation
Principal Financial Group Northeast Business Center Recruiting Presentationjoe_principe
 
Articulacion tics al pei
Articulacion tics al peiArticulacion tics al pei
Articulacion tics al peifalaslopeza
 
Dani
DaniDani
DaniDany Pachar
 
Personae-journeys-mental-models-Pensions-Regulator
Personae-journeys-mental-models-Pensions-RegulatorPersonae-journeys-mental-models-Pensions-Regulator
Personae-journeys-mental-models-Pensions-RegulatoreSeidr
 
IFFCO SHIPPING COMPANY S.A.R.L
IFFCO SHIPPING COMPANY S.A.R.LIFFCO SHIPPING COMPANY S.A.R.L
IFFCO SHIPPING COMPANY S.A.R.LIFFCO SHIPPING COMPANY S.A.R.L LOGISTICS CORPORATION
 
Wat is Medicine Plus?
Wat is Medicine Plus?Wat is Medicine Plus?
Wat is Medicine Plus?Charlotte Van Damme
 
Real estate
Real estateReal estate
Real estatepropbangalore5
 
Les murs de Pékin à Berlin la grande illusion
Les murs de Pékin à Berlin la grande illusionLes murs de Pékin à Berlin la grande illusion
Les murs de Pékin à Berlin la grande illusionEdmond Nollomont
 
Bourse de voyage PartAJ !
Bourse de voyage PartAJ !Bourse de voyage PartAJ !
Bourse de voyage PartAJ !Artemis Mazzotti
 
1 cromita 1 b marina dominguez
1 cromita 1 b marina dominguez1 cromita 1 b marina dominguez
1 cromita 1 b marina dominguezmuseocienciaiespedroespinosa
 
Bateson. g. pasos hacia una ecologia de la mente
Bateson. g. pasos hacia una ecologia de la menteBateson. g. pasos hacia una ecologia de la mente
Bateson. g. pasos hacia una ecologia de la menteortoma1926
 
Dias
DiasDias
Diasdcyear5
 
23 etnias de guatemala
23 etnias de guatemala23 etnias de guatemala
23 etnias de guatemalaWillyfgtoriello
 
Pluriculturalidad
PluriculturalidadPluriculturalidad
PluriculturalidadDixa1000
 
The features of the connected speech final
The features of the connected speech finalThe features of the connected speech final
The features of the connected speech finalHina Honey
 
aprendizaje colaborativo
aprendizaje colaborativoaprendizaje colaborativo
aprendizaje colaborativonemesisnavero
 
Ivone, eje 1 actividad 4
Ivone, eje 1 actividad 4Ivone, eje 1 actividad 4
Ivone, eje 1 actividad 4Ivon Rodriguez
 
Iniciação em css
Iniciação em cssIniciação em css
Iniciação em cssGustavo Teodoro
 
Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2paulofa
 
RCOM 11ºAno - CSS
RCOM 11ºAno - CSSRCOM 11ºAno - CSS
RCOM 11ºAno - CSSEscola Secundária de Vizela
 
Criando sites com estilos
Criando sites com estilosCriando sites com estilos
Criando sites com estilosClayton de Almeida Souza
 

Mais conteúdo relacionado

Destaque

Análisis de la II Cumbre de la CELAC para La Razón
Análisis de la II Cumbre de la CELAC para La RazónAnálisis de la II Cumbre de la CELAC para La Razón
Análisis de la II Cumbre de la CELAC para La RazónLLYC
 
Principal Financial Group Northeast Business Center Recruiting Presentation
Principal Financial Group Northeast Business Center Recruiting PresentationPrincipal Financial Group Northeast Business Center Recruiting Presentation
Principal Financial Group Northeast Business Center Recruiting Presentationjoe_principe
 
Articulacion tics al pei
Articulacion tics al peiArticulacion tics al pei
Articulacion tics al peifalaslopeza
 
Personae-journeys-mental-models-Pensions-Regulator
Personae-journeys-mental-models-Pensions-RegulatorPersonae-journeys-mental-models-Pensions-Regulator
Personae-journeys-mental-models-Pensions-RegulatoreSeidr
 
Les murs de Pékin à Berlin la grande illusion
Les murs de Pékin à Berlin la grande illusionLes murs de Pékin à Berlin la grande illusion
Les murs de Pékin à Berlin la grande illusionEdmond Nollomont
 
Bateson. g. pasos hacia una ecologia de la mente
Bateson. g. pasos hacia una ecologia de la menteBateson. g. pasos hacia una ecologia de la mente
Bateson. g. pasos hacia una ecologia de la menteortoma1926
 
Pluriculturalidad
PluriculturalidadPluriculturalidad
PluriculturalidadDixa1000
 
The features of the connected speech final
The features of the connected speech finalThe features of the connected speech final
The features of the connected speech finalHina Honey
 
aprendizaje colaborativo
aprendizaje colaborativoaprendizaje colaborativo
aprendizaje colaborativonemesisnavero
 
Ivone, eje 1 actividad 4
Ivone, eje 1 actividad 4Ivone, eje 1 actividad 4
Ivone, eje 1 actividad 4Ivon Rodriguez
 

Destaque (18)

Análisis de la II Cumbre de la CELAC para La Razón
Análisis de la II Cumbre de la CELAC para La RazónAnálisis de la II Cumbre de la CELAC para La Razón
Análisis de la II Cumbre de la CELAC para La Razón
 
Principal Financial Group Northeast Business Center Recruiting Presentation
Principal Financial Group Northeast Business Center Recruiting PresentationPrincipal Financial Group Northeast Business Center Recruiting Presentation
Principal Financial Group Northeast Business Center Recruiting Presentation
 
Articulacion tics al pei
Articulacion tics al peiArticulacion tics al pei
Articulacion tics al pei
 
Dani
DaniDani
Dani
 
Personae-journeys-mental-models-Pensions-Regulator
Personae-journeys-mental-models-Pensions-RegulatorPersonae-journeys-mental-models-Pensions-Regulator
Personae-journeys-mental-models-Pensions-Regulator
 
IFFCO SHIPPING COMPANY S.A.R.L
IFFCO SHIPPING COMPANY S.A.R.LIFFCO SHIPPING COMPANY S.A.R.L
IFFCO SHIPPING COMPANY S.A.R.L
 
Wat is Medicine Plus?
Wat is Medicine Plus?Wat is Medicine Plus?
Wat is Medicine Plus?
 
Real estate
Real estateReal estate
Real estate
 
Les murs de Pékin à Berlin la grande illusion
Les murs de Pékin à Berlin la grande illusionLes murs de Pékin à Berlin la grande illusion
Les murs de Pékin à Berlin la grande illusion
 
Bourse de voyage PartAJ !
Bourse de voyage PartAJ !Bourse de voyage PartAJ !
Bourse de voyage PartAJ !
 
1 cromita 1 b marina dominguez
1 cromita 1 b marina dominguez1 cromita 1 b marina dominguez
1 cromita 1 b marina dominguez
 
Bateson. g. pasos hacia una ecologia de la mente
Bateson. g. pasos hacia una ecologia de la menteBateson. g. pasos hacia una ecologia de la mente
Bateson. g. pasos hacia una ecologia de la mente
 
Dias
DiasDias
Dias
 
23 etnias de guatemala
23 etnias de guatemala23 etnias de guatemala
23 etnias de guatemala
 
Pluriculturalidad
PluriculturalidadPluriculturalidad
Pluriculturalidad
 
The features of the connected speech final
The features of the connected speech finalThe features of the connected speech final
The features of the connected speech final
 
aprendizaje colaborativo
aprendizaje colaborativoaprendizaje colaborativo
aprendizaje colaborativo
 
Ivone, eje 1 actividad 4
Ivone, eje 1 actividad 4Ivone, eje 1 actividad 4
Ivone, eje 1 actividad 4
 

Semelhante a Aprenda CSS: introdução a seletores, tags e criação de sites

Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2paulofa
 
Curso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSCurso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSWillian Magalhães
 
Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSSMauro Pereira
 
CSS - Folhas de Estilo em Cascata
CSS - Folhas de Estilo em Cascata CSS - Folhas de Estilo em Cascata
CSS - Folhas de Estilo em Cascata Mauro Duarte
 
Front-end treinamento html/css
Front-end treinamento html/cssFront-end treinamento html/css
Front-end treinamento html/cssfelipefsilva
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
 
Mini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/GlobalcodeMini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/GlobalcodeVictor Cavalcante
 

Semelhante a Aprenda CSS: introdução a seletores, tags e criação de sites (20)

Iniciação em css
Iniciação em cssIniciação em css
Iniciação em css
 
Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2
 
RCOM 11ºAno - CSS
RCOM 11ºAno - CSSRCOM 11ºAno - CSS
RCOM 11ºAno - CSS
 
Criando sites com estilos
Criando sites com estilosCriando sites com estilos
Criando sites com estilos
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
Aula html5
Aula html5Aula html5
Aula html5
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
Dream 06
Dream 06Dream 06
Dream 06
 
Curso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSCurso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSS
 
Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSS
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
CSS - Folhas de Estilo em Cascata
CSS - Folhas de Estilo em Cascata CSS - Folhas de Estilo em Cascata
CSS - Folhas de Estilo em Cascata
 
CSS
CSSCSS
CSS
 
Css
Css Css
Css
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Front-end treinamento html/css
Front-end treinamento html/cssFront-end treinamento html/css
Front-end treinamento html/css
 
CSS
CSSCSS
CSS
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
Mini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/GlobalcodeMini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/Globalcode
 

Aprenda CSS: introdução a seletores, tags e criação de sites

  • 1. Diego Potapczuk [email_address] diegoliveira.com.br CSS Junho de 2008
  • 2.
  • 4. Seletores Casa com qualquer elemento F que se segue imediatamente a E. E + F Adjacente Casa com qualquer elemento F que seja filho do elemento E. E > F Filho Casa com qualquer elemento F que seja descendente do elemento E. E F Descendente Casa com qualquer elemento cuja id seja footer . #footer ID Casa com qualquer elemento cujo atributo class tem o valor info . .info Classe Casa com qualquer elemento E. E Tipo Casa com qualquer elemento. * Universal Descrição Formato Seletor Visão geral da sintaxe dos seletores CSS 2.1
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 28.
  • 29.
  • 33.
  • 34.