SlideShare uma empresa Scribd logo
1 de 20
Baixar para ler offline
BRUNOMARANHÃO CSS
CSS 1 - Conteúdo 2 - Introdução 3 - Utilização 4 - Editor 5 - Tipos de chamada 6 - Sintaxe 7 - class x id 8 - Seletores 9 - Hierarquia 10 - Estilização 11 - Imagens 12 - Sprite 13 - Pseudo-elemento 14 - Posicionamento 15 - Elementos block e inline 16 - Listas e tabelas 17 - Hacks 18 - Dica essencial 19 - Criação de um template básico BRUNOMARANHÃO Conteúdo
CSS Folhas de estilos em cascata Cascading Style Sheets ( CSS ) Linguagem de marcação de hipertexto Hypertext markup language (HTML) BRUNOMARANHÃO Introdução
CSS CSS x Tabelas Tableless! A tabela é vilã? BRUNOMARANHÃO Utilização
CSS Aptana Dreamweaver $$ Notepad++ Bloco de notas BRUNOMARANHÃO Editor
CSS inline > tag interna > arquivo externo inline <h1 style=&quot;font-size: 18px;&quot;> tag interna <style>      h1 {font-size: 18px;} </style> arquivo externo <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/estilos.css&quot;/> BRUNOMARANHÃO Tipos de chamada !important font-size: 18px !important;
CSS seletor {propriedade: valor;} p {      font-family: Arial;      color: #FFFFFF;      font-size: 12px;  } BRUNOMARANHÃO Sintaxe
CSS não único x único código de barras x número de série <div id=&quot;box1&quot; class=&quot;box_azul&quot;> <div id=&quot;box2&quot; class=&quot;box_azul&quot;> BRUNOMARANHÃO class x id
CSS #minha_div p strong {      font-weight: bold;      color: blue;      text-decoration: underline; } _________________________ ul.menu_principal li {      border: 1px solid #000000;      display: block;      float: left;      height: 20px;      padding: 0 5px;      width: 70px; } BRUNOMARANHÃO Hierarquia div div {color: red;} div>div {color: red;}
CSS font-weight: bold; color: blue; text-decoration: none; text-transform: uppercase; border: 1px dotted #5F5F5F; text-align: center; width: 200px; height: 40px; ... BRUNOMARANHÃO Estilização
CSS background: url(&quot;../imgs/degrade.png&quot;) left top no-repeat; background: url(&quot;../imgs/degrade.png&quot;) left top repeat-x; BRUNOMARANHÃO Imagens
CSS Imagem inteira:   img.minha_imagem { display: block; background: url(&quot;../imgs/degrade_sprite.png&quot;) 0 0 repeat-x; width: 240px; height: 87px; } img.minha_imagem:hover { background-position: 0 -87px; } BRUNOMARANHÃO Sprite
CSS seletor.classe:pseudo-elemento {propriedade: valor;} :first-letter :first-line :first-child :before :after :focus :hover BRUNOMARANHÃO Pseudo-elemento
CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],BRUNOMARANHÃO Posicionamento
CSS block x inline x none Alguns elementos block: div   hr   p   h1   table   ul ... Alguns elementos inline: span   a   strong   img   input   select ... BRUNOMARANHÃO Elementos block e inline
CSS ul li  (marcadores) ol li  (números) list-style: none; _____________________ table thead tr th table tbody tr td BRUNOMARANHÃO Listas e tabelas
CSS Navegadores diferentes = problemas <link href=&quot;todos_navegadores.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <!--[if IE]> <link href=&quot;somente_ie.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <![endif]--> <!--[if lt IE 7]> <link href=&quot;ie_6_e_anteriores.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <![endif]--> <!--[if !IE]>--> <link href=&quot;nao_ie.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <!--<![endif]--> Todos left: 240px; Chrome e IE left 260px;  IE _left: 270px; IE7 *left: 280px; BRUNOMARANHÃO Hacks
CSS FIREBUG! Quem implementa ou usa HTML e CSS  não vive sem o Firebug. Opções: - Firebug para Chrome - DragonFly para Opera BRUNOMARANHÃO Dica essencial
CSS Prática BRUNOMARANHÃO Criação de um template básico
CSS [email_address] www.brunofpm.com BRUNOMARANHÃO Obrigado!

Mais conteúdo relacionado

Mais procurados

Revisão AP1 Construção de Páginas Web - CEDERJ
Revisão AP1 Construção de Páginas Web - CEDERJRevisão AP1 Construção de Páginas Web - CEDERJ
Revisão AP1 Construção de Páginas Web - CEDERJDeyvid Nascimento
 
Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2paulofa
 
Introdução a desenvolvimento web
Introdução a desenvolvimento webIntrodução a desenvolvimento web
Introdução a desenvolvimento webIago Effting
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerDiego Eis
 
Ur ls amigáveis (friendly urls)
 Ur ls amigáveis (friendly urls) Ur ls amigáveis (friendly urls)
Ur ls amigáveis (friendly urls)COTIC-PROEG (UFPA)
 
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
 
Cursor bonecada
Cursor bonecadaCursor bonecada
Cursor bonecadaEducPaz
 
Edição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaEdição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaJorge Walendowsky
 

Mais procurados (19)

Revisão AP1 Construção de Páginas Web - CEDERJ
Revisão AP1 Construção de Páginas Web - CEDERJRevisão AP1 Construção de Páginas Web - CEDERJ
Revisão AP1 Construção de Páginas Web - CEDERJ
 
Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2
 
Super CSS
Super CSSSuper CSS
Super CSS
 
Css For Beginners
Css For BeginnersCss For Beginners
Css For Beginners
 
Introdução a desenvolvimento web
Introdução a desenvolvimento webIntrodução a desenvolvimento web
Introdução a desenvolvimento web
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
 
Introdução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, AjaxIntrodução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, Ajax
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Css
Css   Css
Css
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Css Aula 1
Css   Aula 1Css   Aula 1
Css Aula 1
 
Ur ls amigáveis (friendly urls)
 Ur ls amigáveis (friendly urls) Ur ls amigáveis (friendly urls)
Ur ls amigáveis (friendly urls)
 
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
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
Cursor bonecada
Cursor bonecadaCursor bonecada
Cursor bonecada
 
CSS tipo de letra (fontes)
CSS tipo de letra (fontes)CSS tipo de letra (fontes)
CSS tipo de letra (fontes)
 
Edição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaEdição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a ponta
 
Psd to html
Psd to htmlPsd to html
Psd to html
 

Destaque

что такое Cloud computing
что такое Cloud computingчто такое Cloud computing
что такое Cloud computingSazn
 
пропозиції уфіб до стратегії розвитку києва 9 11_2011
пропозиції уфіб до стратегії розвитку києва 9 11_2011пропозиції уфіб до стратегії розвитку києва 9 11_2011
пропозиції уфіб до стратегії розвитку києва 9 11_2011Kira Ivanova
 
Curriculum Vitae
Curriculum VitaeCurriculum Vitae
Curriculum Vitaecris4795
 
Métodos de captação de água subterrânea
Métodos de captação de água subterrâneaMétodos de captação de água subterrânea
Métodos de captação de água subterrâneaEmília Garcez
 
Rpp kls x smt 1 baru
Rpp kls x smt 1   baruRpp kls x smt 1   baru
Rpp kls x smt 1 baruAidil Yie
 
Varia mikromekaniikka
Varia mikromekaniikkaVaria mikromekaniikka
Varia mikromekaniikkamyrtsikata
 
Pres un tecnico_generale v 3 2
Pres un tecnico_generale v 3 2Pres un tecnico_generale v 3 2
Pres un tecnico_generale v 3 2Fabio Allegreni
 
Trabajo de informática lorena
Trabajo de informática lorenaTrabajo de informática lorena
Trabajo de informática lorenaandres
 
Winnaar #hetbestejebest-prijs van #postitwarrekenen opdracht 5
Winnaar #hetbestejebest-prijs van #postitwarrekenen opdracht 5Winnaar #hetbestejebest-prijs van #postitwarrekenen opdracht 5
Winnaar #hetbestejebest-prijs van #postitwarrekenen opdracht 5Webredactie_Zwijsen
 
Caso ClíNico Grupo Nº 2 remasterizaoo
Caso ClíNico  Grupo Nº 2 remasterizaooCaso ClíNico  Grupo Nº 2 remasterizaoo
Caso ClíNico Grupo Nº 2 remasterizaooElías Chahuán Kim
 
Treinamento compacto 2013 20 min versão 2.1
Treinamento compacto 2013 20 min versão 2.1Treinamento compacto 2013 20 min versão 2.1
Treinamento compacto 2013 20 min versão 2.1Mauro Friedrich
 
Procesos Administrativos 1
Procesos Administrativos 1Procesos Administrativos 1
Procesos Administrativos 1guest9627ba
 

Destaque (20)

Dn12 u3 a9_fvle
Dn12 u3 a9_fvleDn12 u3 a9_fvle
Dn12 u3 a9_fvle
 
что такое Cloud computing
что такое Cloud computingчто такое Cloud computing
что такое Cloud computing
 
пропозиції уфіб до стратегії розвитку києва 9 11_2011
пропозиції уфіб до стратегії розвитку києва 9 11_2011пропозиції уфіб до стратегії розвитку києва 9 11_2011
пропозиції уфіб до стратегії розвитку києва 9 11_2011
 
Curriculum Vitae
Curriculum VitaeCurriculum Vitae
Curriculum Vitae
 
Métodos de captação de água subterrânea
Métodos de captação de água subterrâneaMétodos de captação de água subterrânea
Métodos de captação de água subterrânea
 
MediaFilmExchange.co.uk Powerpoint
MediaFilmExchange.co.uk PowerpointMediaFilmExchange.co.uk Powerpoint
MediaFilmExchange.co.uk Powerpoint
 
Rpp kls x smt 1 baru
Rpp kls x smt 1   baruRpp kls x smt 1   baru
Rpp kls x smt 1 baru
 
Bmd opdracht 5
Bmd opdracht 5Bmd opdracht 5
Bmd opdracht 5
 
Varia mikromekaniikka
Varia mikromekaniikkaVaria mikromekaniikka
Varia mikromekaniikka
 
Romanos 8:37
Romanos 8:37Romanos 8:37
Romanos 8:37
 
Tm31
Tm31Tm31
Tm31
 
Tarea 5
Tarea 5Tarea 5
Tarea 5
 
Pres un tecnico_generale v 3 2
Pres un tecnico_generale v 3 2Pres un tecnico_generale v 3 2
Pres un tecnico_generale v 3 2
 
Trabajo de informática lorena
Trabajo de informática lorenaTrabajo de informática lorena
Trabajo de informática lorena
 
Winnaar #hetbestejebest-prijs van #postitwarrekenen opdracht 5
Winnaar #hetbestejebest-prijs van #postitwarrekenen opdracht 5Winnaar #hetbestejebest-prijs van #postitwarrekenen opdracht 5
Winnaar #hetbestejebest-prijs van #postitwarrekenen opdracht 5
 
Caso ClíNico Grupo Nº 2 remasterizaoo
Caso ClíNico  Grupo Nº 2 remasterizaooCaso ClíNico  Grupo Nº 2 remasterizaoo
Caso ClíNico Grupo Nº 2 remasterizaoo
 
Treinamento compacto 2013 20 min versão 2.1
Treinamento compacto 2013 20 min versão 2.1Treinamento compacto 2013 20 min versão 2.1
Treinamento compacto 2013 20 min versão 2.1
 
Procesos Administrativos 1
Procesos Administrativos 1Procesos Administrativos 1
Procesos Administrativos 1
 
Decreto
DecretoDecreto
Decreto
 
Personalidad
PersonalidadPersonalidad
Personalidad
 

Semelhante a CSS

Semelhante a CSS (20)

Criando sites com estilos
Criando sites com estilosCriando sites com estilos
Criando sites com estilos
 
Curso HTML e CSS Part2
Curso HTML e CSS Part2Curso HTML e CSS Part2
Curso HTML e CSS Part2
 
RCOM 11ºAno - CSS
RCOM 11ºAno - CSSRCOM 11ºAno - CSS
RCOM 11ºAno - CSS
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
CSS
CSSCSS
CSS
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
 
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
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
 
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
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
Curso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSCurso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSS
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
SVG Essencial
SVG EssencialSVG Essencial
SVG Essencial
 
Gráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVG
 
Aw aula 04
Aw aula 04Aw aula 04
Aw aula 04
 
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
 
CSS: Introdução no Webdesign
CSS: Introdução no WebdesignCSS: Introdução no Webdesign
CSS: Introdução no Webdesign
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
 
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
 

CSS

  • 2. CSS 1 - Conteúdo 2 - Introdução 3 - Utilização 4 - Editor 5 - Tipos de chamada 6 - Sintaxe 7 - class x id 8 - Seletores 9 - Hierarquia 10 - Estilização 11 - Imagens 12 - Sprite 13 - Pseudo-elemento 14 - Posicionamento 15 - Elementos block e inline 16 - Listas e tabelas 17 - Hacks 18 - Dica essencial 19 - Criação de um template básico BRUNOMARANHÃO Conteúdo
  • 3. CSS Folhas de estilos em cascata Cascading Style Sheets ( CSS ) Linguagem de marcação de hipertexto Hypertext markup language (HTML) BRUNOMARANHÃO Introdução
  • 4. CSS CSS x Tabelas Tableless! A tabela é vilã? BRUNOMARANHÃO Utilização
  • 5. CSS Aptana Dreamweaver $$ Notepad++ Bloco de notas BRUNOMARANHÃO Editor
  • 6. CSS inline > tag interna > arquivo externo inline <h1 style=&quot;font-size: 18px;&quot;> tag interna <style>     h1 {font-size: 18px;} </style> arquivo externo <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/estilos.css&quot;/> BRUNOMARANHÃO Tipos de chamada !important font-size: 18px !important;
  • 7. CSS seletor {propriedade: valor;} p {      font-family: Arial;      color: #FFFFFF;      font-size: 12px;  } BRUNOMARANHÃO Sintaxe
  • 8. CSS não único x único código de barras x número de série <div id=&quot;box1&quot; class=&quot;box_azul&quot;> <div id=&quot;box2&quot; class=&quot;box_azul&quot;> BRUNOMARANHÃO class x id
  • 9. CSS #minha_div p strong {     font-weight: bold;     color: blue;     text-decoration: underline; } _________________________ ul.menu_principal li {      border: 1px solid #000000;      display: block;      float: left;      height: 20px;      padding: 0 5px;      width: 70px; } BRUNOMARANHÃO Hierarquia div div {color: red;} div>div {color: red;}
  • 10. CSS font-weight: bold; color: blue; text-decoration: none; text-transform: uppercase; border: 1px dotted #5F5F5F; text-align: center; width: 200px; height: 40px; ... BRUNOMARANHÃO Estilização
  • 11. CSS background: url(&quot;../imgs/degrade.png&quot;) left top no-repeat; background: url(&quot;../imgs/degrade.png&quot;) left top repeat-x; BRUNOMARANHÃO Imagens
  • 12. CSS Imagem inteira:   img.minha_imagem { display: block; background: url(&quot;../imgs/degrade_sprite.png&quot;) 0 0 repeat-x; width: 240px; height: 87px; } img.minha_imagem:hover { background-position: 0 -87px; } BRUNOMARANHÃO Sprite
  • 13. CSS seletor.classe:pseudo-elemento {propriedade: valor;} :first-letter :first-line :first-child :before :after :focus :hover BRUNOMARANHÃO Pseudo-elemento
  • 14.
  • 15. CSS block x inline x none Alguns elementos block: div   hr   p   h1   table   ul ... Alguns elementos inline: span   a   strong   img   input   select ... BRUNOMARANHÃO Elementos block e inline
  • 16. CSS ul li  (marcadores) ol li  (números) list-style: none; _____________________ table thead tr th table tbody tr td BRUNOMARANHÃO Listas e tabelas
  • 17. CSS Navegadores diferentes = problemas <link href=&quot;todos_navegadores.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <!--[if IE]> <link href=&quot;somente_ie.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <![endif]--> <!--[if lt IE 7]> <link href=&quot;ie_6_e_anteriores.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <![endif]--> <!--[if !IE]>--> <link href=&quot;nao_ie.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <!--<![endif]--> Todos left: 240px; Chrome e IE left 260px;  IE _left: 270px; IE7 *left: 280px; BRUNOMARANHÃO Hacks
  • 18. CSS FIREBUG! Quem implementa ou usa HTML e CSS  não vive sem o Firebug. Opções: - Firebug para Chrome - DragonFly para Opera BRUNOMARANHÃO Dica essencial
  • 19. CSS Prática BRUNOMARANHÃO Criação de um template básico
  • 20. CSS [email_address] www.brunofpm.com BRUNOMARANHÃO Obrigado!