SlideShare une entreprise Scribd logo
1  sur  3
TUTORIAL CSS
Garcia, Diogo
TUTORIAL CSS
Gerar uma versão para impressão -
Há muitos sites que ainda não têm um CSS para impressão. O resultado é que um usuário que quiser
imprimir uma página do site irá ter uma impressão que, freqüentemente, não vai fazer jus ao visual do
mesmo. Preparar um CSS para a impressão é um trabalho relativamente fácil. Darei aqui uns conselhos
práticos para produsi-lo. Vamos ver como:
1.Redefinir o Css
A primeira coisa a ser feita é decidir se criar um CSS partindo do zero, ou usar o CSS para a tela como
base. Não há uma regra definitiva e absoluta e, de qualquer forma, o CSS para a impressão não vai dar
muito trabalho. Eu prefiro usar o CSS para a tela para ter uma versão para impressão que resemble a
versão para a tela. Se declararemos no head um CSS, sem especificar o media a que se refere, este vai
afetar todos os media, inclusive a impressão. Aqui vai um exemplo de CSS onde o primeiro vai afetar
todos os media e o segundo só terá efeito para imprimir a página.
<link rel="stylesheet" type="text/css" href="all.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Neste caso é importante a ordem das declarações, sendo que o CSS para impressão irá redefinir o
geral, deverá ser declarado por último.
Exemplo:

Contenu connexe

En vedette

S R Initiatives - Advertising Agencies
S R Initiatives -  Advertising AgenciesS R Initiatives -  Advertising Agencies
S R Initiatives - Advertising AgenciesS R Initiatives
 
2016 Audi A5 Brochure | Audi For Sale Orange County
2016 Audi A5 Brochure | Audi For Sale Orange County 2016 Audi A5 Brochure | Audi For Sale Orange County
2016 Audi A5 Brochure | Audi For Sale Orange County Audi Mission Viejo
 
SLoveless_Resume_20160201
SLoveless_Resume_20160201SLoveless_Resume_20160201
SLoveless_Resume_20160201Sara Loveless
 
Turcon POLYPAC - SELEMASTER DSM China
Turcon POLYPAC - SELEMASTER DSM  ChinaTurcon POLYPAC - SELEMASTER DSM  China
Turcon POLYPAC - SELEMASTER DSM ChinaBanana Yuan
 
El sapito y la garza c.t
El sapito y la garza c.tEl sapito y la garza c.t
El sapito y la garza c.tGira ......
 
Cuidemos al mundo
Cuidemos al mundoCuidemos al mundo
Cuidemos al mundoGira ......
 
Glossário de termos contábeis
Glossário de termos contábeisGlossário de termos contábeis
Glossário de termos contábeisherlaine sousa
 
Estudios de debates y discursos
Estudios de debates y discursosEstudios de debates y discursos
Estudios de debates y discursosAntoni
 
Las neurociencias en los primeros años de vida
Las neurociencias en los primeros años de vida Las neurociencias en los primeros años de vida
Las neurociencias en los primeros años de vida vegapaulina
 

En vedette (17)

S R Initiatives - Advertising Agencies
S R Initiatives -  Advertising AgenciesS R Initiatives -  Advertising Agencies
S R Initiatives - Advertising Agencies
 
2016 Audi A5 Brochure | Audi For Sale Orange County
2016 Audi A5 Brochure | Audi For Sale Orange County 2016 Audi A5 Brochure | Audi For Sale Orange County
2016 Audi A5 Brochure | Audi For Sale Orange County
 
SLoveless_Resume_20160201
SLoveless_Resume_20160201SLoveless_Resume_20160201
SLoveless_Resume_20160201
 
Turcon POLYPAC - SELEMASTER DSM China
Turcon POLYPAC - SELEMASTER DSM  ChinaTurcon POLYPAC - SELEMASTER DSM  China
Turcon POLYPAC - SELEMASTER DSM China
 
Srinitiatives
SrinitiativesSrinitiatives
Srinitiatives
 
9
99
9
 
9
99
9
 
El sapito y la garza c.t
El sapito y la garza c.tEl sapito y la garza c.t
El sapito y la garza c.t
 
5
55
5
 
Web 1.0 y Web 2.0
Web 1.0 y Web 2.0Web 1.0 y Web 2.0
Web 1.0 y Web 2.0
 
Cuidemos al mundo
Cuidemos al mundoCuidemos al mundo
Cuidemos al mundo
 
Glossário de termos contábeis
Glossário de termos contábeisGlossário de termos contábeis
Glossário de termos contábeis
 
Broadcast Bill
Broadcast BillBroadcast Bill
Broadcast Bill
 
Estudios de debates y discursos
Estudios de debates y discursosEstudios de debates y discursos
Estudios de debates y discursos
 
Social Marketing
Social MarketingSocial Marketing
Social Marketing
 
Las neurociencias en los primeros años de vida
Las neurociencias en los primeros años de vida Las neurociencias en los primeros años de vida
Las neurociencias en los primeros años de vida
 
A2 Sociology: Marxist Theories of Religion
A2 Sociology: Marxist Theories of ReligionA2 Sociology: Marxist Theories of Religion
A2 Sociology: Marxist Theories of Religion
 

Similaire à Tutorial css

Agilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASSAgilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASSRenato Galvão
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webCarlos Eduardo Kadu
 
Dicas para montar excelentes apresentações de slides no power point
Dicas para montar excelentes apresentações de slides no power pointDicas para montar excelentes apresentações de slides no power point
Dicas para montar excelentes apresentações de slides no power pointBruno Oliveira
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução cssJolvani Morgan
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução cssJolvani Morgan
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPressMarconi Pacheco
 
E book conhecendo-o-wordpress
E book conhecendo-o-wordpressE book conhecendo-o-wordpress
E book conhecendo-o-wordpressJosé Salomão
 
1502 - Revista - SQL Server.pdf
1502 - Revista - SQL Server.pdf1502 - Revista - SQL Server.pdf
1502 - Revista - SQL Server.pdfjoaoJunior93
 
Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Guga Alves
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoAnyssa Ferreira
 
IBM TechDay - SEO para Desenvolvedores Web e Web desginers
IBM TechDay - SEO para Desenvolvedores Web e Web desginersIBM TechDay - SEO para Desenvolvedores Web e Web desginers
IBM TechDay - SEO para Desenvolvedores Web e Web desginersFabio Ricotta
 
SEO para Wordpress (WordCamp Salvador)
SEO para Wordpress (WordCamp Salvador)SEO para Wordpress (WordCamp Salvador)
SEO para Wordpress (WordCamp Salvador)Ian Castro
 
Cartilhado slide de sucesso
Cartilhado slide de sucessoCartilhado slide de sucesso
Cartilhado slide de sucessoCICERO MOURA
 
Devmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end FoundationDevmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end FoundationDevmedia
 

Similaire à Tutorial css (20)

Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Agilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASSAgilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASS
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
 
Dicas para montar excelentes apresentações de slides no power point
Dicas para montar excelentes apresentações de slides no power pointDicas para montar excelentes apresentações de slides no power point
Dicas para montar excelentes apresentações de slides no power point
 
Blogger rapido
Blogger rapidoBlogger rapido
Blogger rapido
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
 
E book conhecendo-o-wordpress
E book conhecendo-o-wordpressE book conhecendo-o-wordpress
E book conhecendo-o-wordpress
 
1502 - Revista - SQL Server.pdf
1502 - Revista - SQL Server.pdf1502 - Revista - SQL Server.pdf
1502 - Revista - SQL Server.pdf
 
Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013
 
14 CSS Introdução
14 CSS Introdução14 CSS Introdução
14 CSS Introdução
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
IBM TechDay - SEO para Desenvolvedores Web e Web desginers
IBM TechDay - SEO para Desenvolvedores Web e Web desginersIBM TechDay - SEO para Desenvolvedores Web e Web desginers
IBM TechDay - SEO para Desenvolvedores Web e Web desginers
 
Como desenvolver um tema wordpress de A a Z
Como desenvolver um tema wordpress de A a ZComo desenvolver um tema wordpress de A a Z
Como desenvolver um tema wordpress de A a Z
 
SEO para Wordpress (WordCamp Salvador)
SEO para Wordpress (WordCamp Salvador)SEO para Wordpress (WordCamp Salvador)
SEO para Wordpress (WordCamp Salvador)
 
Cartilhado slide de sucesso
Cartilhado slide de sucessoCartilhado slide de sucesso
Cartilhado slide de sucesso
 
Como criar e manter o site do seu projeto político no word press
Como criar e manter o site do seu projeto político no word press Como criar e manter o site do seu projeto político no word press
Como criar e manter o site do seu projeto político no word press
 
Devmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end FoundationDevmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end Foundation
 

Plus de diogolevel3

Norma 508 e wcag
Norma 508 e wcagNorma 508 e wcag
Norma 508 e wcagdiogolevel3
 
Noções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidadeNoções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidadediogolevel3
 
Design universal
Design universalDesign universal
Design universaldiogolevel3
 
Design responsivo
Design responsivoDesign responsivo
Design responsivodiogolevel3
 
Lista de abreviações 3
Lista de abreviações 3Lista de abreviações 3
Lista de abreviações 3diogolevel3
 
Lista de abreviações 2
Lista de abreviações 2Lista de abreviações 2
Lista de abreviações 2diogolevel3
 
Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviaçõesdiogolevel3
 
Bases para internet
Bases para internetBases para internet
Bases para internetdiogolevel3
 
Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviaçõesdiogolevel3
 

Plus de diogolevel3 (20)

Norma 508 e wcag
Norma 508 e wcagNorma 508 e wcag
Norma 508 e wcag
 
Noções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidadeNoções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidade
 
Design universal
Design universalDesign universal
Design universal
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Taquigrafia css
Taquigrafia cssTaquigrafia css
Taquigrafia css
 
Seletores css
Seletores cssSeletores css
Seletores css
 
Seletores css
Seletores cssSeletores css
Seletores css
 
Modelo TCP/IP
Modelo TCP/IPModelo TCP/IP
Modelo TCP/IP
 
Modelo osi
Modelo osiModelo osi
Modelo osi
 
Modelo osi
Modelo osiModelo osi
Modelo osi
 
Css avançado
Css avançadoCss avançado
Css avançado
 
Lista de abreviações 3
Lista de abreviações 3Lista de abreviações 3
Lista de abreviações 3
 
Lista de abreviações 2
Lista de abreviações 2Lista de abreviações 2
Lista de abreviações 2
 
Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviações
 
Bases para internet
Bases para internetBases para internet
Bases para internet
 
Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviações
 
Post 5
Post   5Post   5
Post 5
 
Post 4
Post   4Post   4
Post 4
 

Tutorial css

  • 2. TUTORIAL CSS Gerar uma versão para impressão - Há muitos sites que ainda não têm um CSS para impressão. O resultado é que um usuário que quiser imprimir uma página do site irá ter uma impressão que, freqüentemente, não vai fazer jus ao visual do mesmo. Preparar um CSS para a impressão é um trabalho relativamente fácil. Darei aqui uns conselhos práticos para produsi-lo. Vamos ver como: 1.Redefinir o Css A primeira coisa a ser feita é decidir se criar um CSS partindo do zero, ou usar o CSS para a tela como base. Não há uma regra definitiva e absoluta e, de qualquer forma, o CSS para a impressão não vai dar muito trabalho. Eu prefiro usar o CSS para a tela para ter uma versão para impressão que resemble a versão para a tela. Se declararemos no head um CSS, sem especificar o media a que se refere, este vai afetar todos os media, inclusive a impressão. Aqui vai um exemplo de CSS onde o primeiro vai afetar todos os media e o segundo só terá efeito para imprimir a página. <link rel="stylesheet" type="text/css" href="all.css" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> Neste caso é importante a ordem das declarações, sendo que o CSS para impressão irá redefinir o geral, deverá ser declarado por último.