SlideShare uma empresa Scribd logo
CSS
Treinamento
Julho 2014
carlos.oliveira@vitrio.com.br
kadunew@gmail.com
Carlos Eduardo – Kadu
Cascading Style Sheets
(folhas de estilo em cascata)
São as informações que a página pretende
apresentar.
Separando Responsabilidades
Essa parte é responsável pela apresentação.
Cores, tamanhos, layout...
Através dela é possível tomar decisões
baseadas na interação com o usuário. Parte
dinâmica da interface.
JAVA
SCRIPT
css
HTML
Separando Responsabilidades
Essa parte é responsável pela apresentação.
Cores, tamanhos, layout...
css
HTML
Antigamente...
Home Clientes Produtos Empresa Contato
HTML e
Apresentação
HTML e
Apresentação
HTML e
Apresentação
HTML e
Apresentação
HTML e
Apresentação
Não existia uma preocupação com o código,
manutenção...
Layout com
tabelas
Antigamente
FrontPage Dreamweaver
HOJE!
“Mundo quase
perfeito”
CSSVamos começar
“ CSS define como serão exibidos os
elementos contidos no código
HTML.”
Cascading Style Sheets
(folhas de estilo em cascata)
Introdução ao CSS - Desenvolvimento web
Apresentação
(CSS)
Home Clientes Produtos Empresa Contato
HTML HTML HTML HTML HTML
Controle da apresentação das páginas por
um único arquivo.
Separar Responsabilidades
p {
color: #f60;
}
SELETOR
DECLARAÇÃO
PROPRIEDADE
VALOR
REGRA
ID e classes são atributos que usamos para adicionar estilos
ao nosso HTML
ID é único, classes não
h1 {
font-size: 16px;
margin-left:10px;
}
Alguns exemplos
h2, h3 {
font-size: 16px;
margin-left:10px;
}
#top h2 {
font-size: 16px;
margin-left:10px;
}
Alguns exemplos
Novidades da versão atual?
Bordas
Cores
Transparência
Múltiplos
Backgrounds
Fontes
Layout
Alinhamento
Introdução ao CSS - Desenvolvimento web
Medidas CSS
300px, 20%...
960px
300px 300px 300px
960px
300px 300px300px
px
100%
30% 30%30%
%
Link1 | Link2 | Link3 | Link4 | Link5
01 02 03
04
01
02
03
Media Queries
Design condicional. Só será aplicado em
determinada situação. Isso permite
adaptar o design da página
Adaptar Layout
Conteúdo
Hummmm...,
interessante.. Como isso
deve funcionar...?!?!
Media Queries
Design condicional. Só será aplicado em
determinada situação. Isso permite
adaptar o design da página
Adaptar Layout
Conteúdo
Em telas maiores tudo em ordem, tudo funcionando
perfeitamente...
É difícil fazer tudo ficar
bonito e ajustado a todo tipo de resolução só com
porcentagens
No @media criamos uma condição e, dentro dele, as regras
de CSS. Essas regras CSS só serão aplicadas caso a condição
seja válida.
1024px
400px
320px
No exemplo, (max-width: 420px)
significa que o CSS informado só
será aplicado quando a janela do
navegador tiver até 420px.
@font-face
Suponha que o usuário tenha a font instalada, logo ele não precisa baixar a font, assim
podemos indicar para que o browser possa utilizar o arquivo da própria máquina do
usuário
“Local”: fonte
que será
pesquisado na
máquina do
usuário,
“url” para que
a fonte seja
baixada, caso
o usuário não
a tenha no PC
@font-face
Existem alguns serviços
disponíveis na Internet que
facilitam o uso de fontes
adicionais
http://www.google.com/fonts
Conversor online
O Font Squirrel converte suas fontes para os formatos necessários e gera o código
pronto para você usar.
http://www.fontsquirrel.com/
substituição de texto por
uma imagem. Colocava-se
um texto no HTML e o
ocultava com regras CSS.
E como era feito antes?
Elemento
HTML...
“chirrion”
display: none
Ele será carregado mesmo assim. (uma imagem, um texto...)
Normalmente os leitores de tela não conseguem ler
conteúdos escondidos com a declaração display: none
Ocultar
conteúdo
Ele será carregado mesmo assim. (uma imagem, um texto...)
Normalmente os leitores de tela não conseguem ler
conteúdos escondidos com a declaração display: none
Nem tudo é perfeito...
CSS e navegadores
sem suporte,
antigos...
Diferenças entre os padrões de
um navegador para outro;
Navegadores sem suporte para
propriedades CSS;
Navegadores Antigos.
ALGUMAS
SOLUÇÕES
CONTORNANDO A INCOMPATIBILIDADE
Quando não especificamos nenhum
estilo para nossos elementos do
HTML, o navegador utiliza uma série
de estilos padrão, que são
diferentes em cada um dos
navegadores
Exemplo
Firefox 29.0.1
Estilização padrão de alguns navegadores
IE 9
Chrome 35.0
Opera 22.0
A solução é setar um valor básico
para todas as características do
CSS, sobrescrevendo totalmente
os estilos padrão do navegador.
Famoso CSS Reset de
Eric Meyer
http://meyerweb.com/eri
c/tools/css/reset/
Dev.do Yahoo:
http://yuilibrary.com/
Normalize.css:
http://necolas.github.io/normal
ize.css/
Exemplo CSS Reset
Mais Exemplos
MELHORIA PROGRESSIVA
COMPATIBILIDADE
ENTRE NAVEGADORES
declaração de “background; “ Navegadores com suporte
entenderão as duas e usarão apenas a última.
Colum-count:2
Ferramentas e
CSS
Site com Tabelas de Compatibilidade para suporte de CSS,
HTML, JS...
http://caniuse.com/
Como testar a compatibilidade do HTML5 e CSS3 no
navegador do seu computador ou celular.
http://haz.io/
Como comparar o suporte do CSS3 (e HTML5) entre
navegadores
http://fmbip.com/litmus
“Eu trago tantas
funcionalidade e
quase ninguém
usa...”
OS
NAVEGADORES
TÊM PODERES
OS
NAVEGADORES
TÊM PODERES
Como "destrinchar " o HTML e o CSS de uma página?
Botão direito sobre o elemento da página - opção
“Inspecionar elemento”.
Selecionar
o HTML
CSS do HTML
Selecionado
 Regras CSS prontinhas. Só copiar e usar 
http://css-tricks.com/snippets/
Essa extensão permite desabilitar, visualizar e editar cookies, CSS, HTML,
formulários e imagens, validação de páginas e muito mais.
http://bit.ly/1vfOmxD
Permite ao desenvolvedor identificar os códigos CSS de
elementos específicos de uma página.
http://bit.ly/1qId0a6
CSSTreinamento CSS
Julho 2014
Perguntas?
Links para estudo
• http://tableless.com.br/categoria/o-basico/
• http://www.maujor.com/
• http://www.w3c.br/pub/Cursos/CursoCSS3/cs
s-web.pdf
• http://www.codecademy.com/pt/tracks/web
“Era Wilson”

Mais conteúdo relacionado

Mais procurados

Minicurso CSS: Definição e aplicação
Minicurso CSS: Definição e aplicaçãoMinicurso CSS: Definição e aplicação
Minicurso CSS: Definição e aplicação
Vanessa Me Tonini
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
Willian Watanabe
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Bunee.io - Hiring with Intelligence
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
Leonardo Soares
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
Rafael Rinaldi
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
orenatoaraujo
 
Material css parte I
Material css parte IMaterial css parte I
Material css parte I
Denise Lima
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
Jolvani Morgan
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
Leonardo Quixada
 
Slides Css3
Slides Css3 Slides Css3
Slides Css3
Pedro Neto
 
Arquitetura CSS - Uma rápida introdução
Arquitetura CSS - Uma rápida introduçãoArquitetura CSS - Uma rápida introdução
Arquitetura CSS - Uma rápida introdução
Matheus Lucca do Carmo
 
Folha de estilo css
Folha de estilo   cssFolha de estilo   css
Desenvolvimento Web 02 - David Arty - SENAC
Desenvolvimento Web 02 - David Arty - SENACDesenvolvimento Web 02 - David Arty - SENAC
Desenvolvimento Web 02 - David Arty - SENAC
David Arty
 
Aula 4 - VISÃO GERAL CSS
Aula 4 - VISÃO GERAL CSSAula 4 - VISÃO GERAL CSS
Aula 4 - VISÃO GERAL CSS
diogolevel3
 
Css - por Nícolas Lazarte Kaqui
Css - por Nícolas Lazarte Kaqui Css - por Nícolas Lazarte Kaqui
Css - por Nícolas Lazarte Kaqui
Arthur Henrique Guimarães de Oliveira
 
Desenvolvimento Web 01 - David Arty - SENAC
Desenvolvimento Web 01 - David Arty - SENACDesenvolvimento Web 01 - David Arty - SENAC
Desenvolvimento Web 01 - David Arty - SENAC
David Arty
 
Aula 11
Aula 11Aula 11
Desenvolvimento Web 03 - David Arty - SENAC
Desenvolvimento Web 03 - David Arty - SENACDesenvolvimento Web 03 - David Arty - SENAC
Desenvolvimento Web 03 - David Arty - SENAC
David Arty
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
Eliene Resende
 
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
David Arty
 

Mais procurados (20)

Minicurso CSS: Definição e aplicação
Minicurso CSS: Definição e aplicaçãoMinicurso CSS: Definição e aplicação
Minicurso CSS: Definição e aplicação
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
 
Material css parte I
Material css parte IMaterial css parte I
Material css parte I
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
 
Slides Css3
Slides Css3 Slides Css3
Slides Css3
 
Arquitetura CSS - Uma rápida introdução
Arquitetura CSS - Uma rápida introduçãoArquitetura CSS - Uma rápida introdução
Arquitetura CSS - Uma rápida introdução
 
Folha de estilo css
Folha de estilo   cssFolha de estilo   css
Folha de estilo css
 
Desenvolvimento Web 02 - David Arty - SENAC
Desenvolvimento Web 02 - David Arty - SENACDesenvolvimento Web 02 - David Arty - SENAC
Desenvolvimento Web 02 - David Arty - SENAC
 
Aula 4 - VISÃO GERAL CSS
Aula 4 - VISÃO GERAL CSSAula 4 - VISÃO GERAL CSS
Aula 4 - VISÃO GERAL CSS
 
Css - por Nícolas Lazarte Kaqui
Css - por Nícolas Lazarte Kaqui Css - por Nícolas Lazarte Kaqui
Css - por Nícolas Lazarte Kaqui
 
Desenvolvimento Web 01 - David Arty - SENAC
Desenvolvimento Web 01 - David Arty - SENACDesenvolvimento Web 01 - David Arty - SENAC
Desenvolvimento Web 01 - David Arty - SENAC
 
Aula 11
Aula 11Aula 11
Aula 11
 
Desenvolvimento Web 03 - David Arty - SENAC
Desenvolvimento Web 03 - David Arty - SENACDesenvolvimento Web 03 - David Arty - SENAC
Desenvolvimento Web 03 - David Arty - SENAC
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
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
 

Destaque

Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de textoPropriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto
Filipe Rezende
 
AULA 4 - PROPRIEDADES CSS
AULA 4 - PROPRIEDADES CSSAULA 4 - PROPRIEDADES CSS
AULA 4 - PROPRIEDADES CSS
diogolevel3
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
igorpimentel
 
Introdução ao framework CakePHP
Introdução ao framework CakePHPIntrodução ao framework CakePHP
Introdução ao framework CakePHP
igorpimentel
 
TCC I - Igor Pimentel
TCC I - Igor PimentelTCC I - Igor Pimentel
TCC I - Igor Pimentel
igorpimentel
 
Css powerpoint
Css powerpointCss powerpoint
Css powerpoint
kongmata
 
Design Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - MultimídiaDesign Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - Multimídia
Dra. Camila Hamdan
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
igorpimentel
 
Curso html
Curso htmlCurso html
Curso html
richard_romancini
 
Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklist
Dra. Camila Hamdan
 
O que há de novo no PHP 5.3
O que há de novo no PHP 5.3O que há de novo no PHP 5.3
O que há de novo no PHP 5.3
Jose Berardo
 
Html5 - O futuro da Web
Html5 - O futuro da WebHtml5 - O futuro da Web
Html5 - O futuro da Web
Jose Berardo
 
Engenharia Social
Engenharia SocialEngenharia Social
Engenharia Social
Jefferson Matheus
 
Espionagem e Software Livre
Espionagem e Software LivreEspionagem e Software Livre
Espionagem e Software Livre
Átila Camurça
 
Html5 - Estrutura Básica
Html5 - Estrutura BásicaHtml5 - Estrutura Básica
Html5 - Estrutura Básica
André Aguiar
 
Certificacoes Desenvolvedores
Certificacoes DesenvolvedoresCertificacoes Desenvolvedores
Certificacoes Desenvolvedores
Jose Berardo
 
Web e HTML5
Web e HTML5Web e HTML5
Web e HTML5
Bruno Orlandi
 
HTML5 & CSS3 - A Evolução da Web
HTML5 & CSS3 - A Evolução da WebHTML5 & CSS3 - A Evolução da Web
HTML5 & CSS3 - A Evolução da Web
Manoel dos Santos
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
Jose Berardo
 
Apostila Tutorial CakePHP
Apostila Tutorial CakePHPApostila Tutorial CakePHP
Apostila Tutorial CakePHP
Fernando Palma
 

Destaque (20)

Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de textoPropriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto
 
AULA 4 - PROPRIEDADES CSS
AULA 4 - PROPRIEDADES CSSAULA 4 - PROPRIEDADES CSS
AULA 4 - PROPRIEDADES CSS
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Introdução ao framework CakePHP
Introdução ao framework CakePHPIntrodução ao framework CakePHP
Introdução ao framework CakePHP
 
TCC I - Igor Pimentel
TCC I - Igor PimentelTCC I - Igor Pimentel
TCC I - Igor Pimentel
 
Css powerpoint
Css powerpointCss powerpoint
Css powerpoint
 
Design Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - MultimídiaDesign Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - Multimídia
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
Curso html
Curso htmlCurso html
Curso html
 
Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklist
 
O que há de novo no PHP 5.3
O que há de novo no PHP 5.3O que há de novo no PHP 5.3
O que há de novo no PHP 5.3
 
Html5 - O futuro da Web
Html5 - O futuro da WebHtml5 - O futuro da Web
Html5 - O futuro da Web
 
Engenharia Social
Engenharia SocialEngenharia Social
Engenharia Social
 
Espionagem e Software Livre
Espionagem e Software LivreEspionagem e Software Livre
Espionagem e Software Livre
 
Html5 - Estrutura Básica
Html5 - Estrutura BásicaHtml5 - Estrutura Básica
Html5 - Estrutura Básica
 
Certificacoes Desenvolvedores
Certificacoes DesenvolvedoresCertificacoes Desenvolvedores
Certificacoes Desenvolvedores
 
Web e HTML5
Web e HTML5Web e HTML5
Web e HTML5
 
HTML5 & CSS3 - A Evolução da Web
HTML5 & CSS3 - A Evolução da WebHTML5 & CSS3 - A Evolução da Web
HTML5 & CSS3 - A Evolução da Web
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
Apostila Tutorial CakePHP
Apostila Tutorial CakePHPApostila Tutorial CakePHP
Apostila Tutorial CakePHP
 

Semelhante a Introdução ao CSS - Desenvolvimento web

Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASS
Larissa Carvalho
 
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTEDOficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
Bunee.io - Hiring with Intelligence
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0
Campus Party Brasil
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
iMasters
 
ASP.NET - Conhecendo um pouco do framework
ASP.NET - Conhecendo um pouco do frameworkASP.NET - Conhecendo um pouco do framework
ASP.NET - Conhecendo um pouco do framework
Guilherme Ferreira
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
Cezar Bruno
 
Responsive web design_CPRecife2 - Felipe de Albuquerque
Responsive web design_CPRecife2 -  Felipe de AlbuquerqueResponsive web design_CPRecife2 -  Felipe de Albuquerque
Responsive web design_CPRecife2 - Felipe de Albuquerque
Felipe de Albuquerque
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
CSS´s Dinâmicos - InfoTech 2012
CSS´s Dinâmicos - InfoTech 2012CSS´s Dinâmicos - InfoTech 2012
CSS´s Dinâmicos - InfoTech 2012
André Paulovich
 
Front end - the right way
Front end - the right wayFront end - the right way
Front end - the right way
Vinicius Dacal Lopes
 
Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marques
Willian Marques
 
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
Marconi Pacheco
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
Clécio Bachini
 
Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?
Rafael Pazini
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
Clécio Bachini
 
Estruturação Web
Estruturação WebEstruturação Web
Estruturação Web
Fabiano Pereira
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
Anderson Luís Furlan
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões web
Divulgrs
 
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
Marcos E Cris Tecnologiabrasil
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
Anderson Luís Furlan
 

Semelhante a Introdução ao CSS - Desenvolvimento web (20)

Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASS
 
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTEDOficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
 
ASP.NET - Conhecendo um pouco do framework
ASP.NET - Conhecendo um pouco do frameworkASP.NET - Conhecendo um pouco do framework
ASP.NET - Conhecendo um pouco do framework
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Responsive web design_CPRecife2 - Felipe de Albuquerque
Responsive web design_CPRecife2 -  Felipe de AlbuquerqueResponsive web design_CPRecife2 -  Felipe de Albuquerque
Responsive web design_CPRecife2 - Felipe de Albuquerque
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
CSS´s Dinâmicos - InfoTech 2012
CSS´s Dinâmicos - InfoTech 2012CSS´s Dinâmicos - InfoTech 2012
CSS´s Dinâmicos - InfoTech 2012
 
Front end - the right way
Front end - the right wayFront end - the right way
Front end - the right way
 
Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marques
 
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
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
Estruturação Web
Estruturação WebEstruturação Web
Estruturação Web
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões web
 
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
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 

Mais de Carlos Eduardo Kadu

Framework Foundation Basicão
Framework Foundation BasicãoFramework Foundation Basicão
Framework Foundation Basicão
Carlos Eduardo Kadu
 
Pesquisa no Twitter - Requisição com API JSON
Pesquisa no Twitter - Requisição com API JSONPesquisa no Twitter - Requisição com API JSON
Pesquisa no Twitter - Requisição com API JSON
Carlos Eduardo Kadu
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
Carlos Eduardo Kadu
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
Carlos Eduardo Kadu
 
Construcao de interfaces web
Construcao de interfaces webConstrucao de interfaces web
Construcao de interfaces web
Carlos Eduardo Kadu
 
Tcc ii curso análise e desenvolvimento de sistemas
Tcc ii curso análise e desenvolvimento de sistemasTcc ii curso análise e desenvolvimento de sistemas
Tcc ii curso análise e desenvolvimento de sistemas
Carlos Eduardo Kadu
 
Treinamento Comercial Microlins
Treinamento Comercial Microlins Treinamento Comercial Microlins
Treinamento Comercial Microlins
Carlos Eduardo Kadu
 

Mais de Carlos Eduardo Kadu (7)

Framework Foundation Basicão
Framework Foundation BasicãoFramework Foundation Basicão
Framework Foundation Basicão
 
Pesquisa no Twitter - Requisição com API JSON
Pesquisa no Twitter - Requisição com API JSONPesquisa no Twitter - Requisição com API JSON
Pesquisa no Twitter - Requisição com API JSON
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Construcao de interfaces web
Construcao de interfaces webConstrucao de interfaces web
Construcao de interfaces web
 
Tcc ii curso análise e desenvolvimento de sistemas
Tcc ii curso análise e desenvolvimento de sistemasTcc ii curso análise e desenvolvimento de sistemas
Tcc ii curso análise e desenvolvimento de sistemas
 
Treinamento Comercial Microlins
Treinamento Comercial Microlins Treinamento Comercial Microlins
Treinamento Comercial Microlins
 

Introdução ao CSS - Desenvolvimento web

Notas do Editor

  1.  CSS define como serão exibidos os elementos contidos no código
  2. Ajustar a prioridade do conteúdo
  3. No exemplo, o (max-width:420px) significa que o CSS informado só será aplicado quando a janela do navegador tiver até 420px.
  4. substituição de texto por uma imagem. Colocava-se um texto no HTML e o ocultava com regras CSS
  5.  Normalmente os leitores de tela conseguem ler conteúdos escondidos com a declaração display: none