HTML & CSS
Prof. Me. Jaidson Brandão da Costa
[Link]
jaidsonbrandao@[Link]
HTML
• É uma Linguagem de Marcação de Hipertexto;
• A única linguagem que o navegador consegue
interpretar para a exibição de conteúdo é o
HTML;
• Que fique claro: HTML é só a linguagem usada na
Web. Não é a Web;
HTML - NAVEGADORES
O navegador por padrão:
• Pode não exibir caracteres acentuados corretamente;
• Não exibe quebras de linha;
Vemos que é necessário que cada trecho de texto tenha
uma marcação indicando qual é o significado dele. No
próximo slide o exemplo.
HTML - FINALIDADE
• A pagina que fizemos não apresenta nenhum atrativo
estético e, nessa deficiência do HTML, reside o primeiro e
maior desafio do programador front-end;
• O HTML foi desenvolvido para exibição de documentos
científicos;
• Porém, com o tempo e a evolução da Web a exibição de
informações com elementos gráficos e de interação,
tornou-se necessário;
HTML - SINTAXE
• As tags usam a sintaxe <nomedatag> Muitas tags
possuem conteúdo, logo devemos fechar </nomedatag>
Exemplo: <h1>Mirror Fashion.</h1>
• Algumas tags podem receber atributos dentro de sua
definição. São parâmetros usando a sintaxe de
<nomedatag nomeAtributo=valor >
Exemplo: <img src="../imagens/casa_de_praia.jpg">
• Repare que a tag img não possui conteúdo por si só.
Nesses casos, não é necessário usar uma tag de
fechamento como antes no h1
HTML - ESTRUTURA
• Um documento HTML válido precisa seguir
obrigatoriamente a estrutura composta pelas tags <html>
, <head> e <body> e a instrução <!DOCTYPE>
• <html> Dentro dessa tag, é necessário declarar: <head> e
<body>
<!DOCTYPE html>
<html>
<head> </head>
<body> </body>
</html>
HTML - instrução DOCTYPE
• O DOCTYPE não é uma tag HTML, mas uma instrução
especial.
• Ela indica para o navegador qual versão do HTML deve
ser utilizada para renderizar a página.
• Utilizaremos <!DOCTYPE html> , que indica para o
navegador a utilização da versão mais recente do HTML -
a versão 5, atualmente.
HTML - <head>
• A tag <head> contém informações que são de interesse
somente do navegador. São informações que não serão
exibidas na área do documento no navegador.
• A especificação obriga a presença da tag de conteúdo
<title> dentro do nosso <head>
• No <head> podemos configurar codificação através de
charset na tag <meta> . Um dos valores mais comuns
usados hoje em dia é o UTF-8.
HTML – Exemplo <head>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TÍTULO</title>
</head>
<body>
</body>
</html>
HTML - <body>
• A tag <body> contém o corpo do nosso documento, que é
exibido pelo navegador em sua janela.
• É necessário que o <body> tenha ao menos um elemento
"filho", ou seja, uma ou mais tags HTML dentro dele.
HTML – Exemplo <body>
<!DOCTYPE html>
<html>
<head>
<title>TÍTULO</title>
<meta charset="utf-8">
</head>
<body>
<h1>Cocurso</h1>
</body>
</html>
Nesse exemplo, usamos a tag <h1> , que indica um título.
HTML - Títulos
• Quando queremos indicar que um texto é um título em
nossa página, utilizamos as tags de heading em sua
marcação:
<h1>Notas</h1>
<h2>Bem-vindo </h2>
• As tags de heading são tags de conteúdo e vão de <h1> a
<h6> , seguindo a ordem de importância, sendo <h1> o
título principal, o mais importante, e <h6> o título de
menor importância.
• A ordem de importância, além de influenciar no tamanho
padrão de exibição do texto, tem impacto nas
ferramentas que processam HTML
HTML - Parágrafos
• Texto em nossa página, é recomendado que ele seja
sempre conteúdo de alguma tag filha da tag <body>.
• A marcação mais indicada para textos comuns é a tag de
parágrafo:
<p>Nenhum item na sacola de compras.</p>
• Texto na tag <strong> fica negrito, Texto na tag <em> fica
itálico. Existem ainda as tags <b> e <i> , que atingem o
mesmo resultado visualmente.
<p>Compre suas roupas e acessórios na <strong>Saron</strong>.</p>
• Também há a tag <small> , que diminui o tamanho do
texto.
HTML - Imagens
• A tag <img> define uma imagem em uma página HTML e
necessita de dois atributos preenchidos: src e alt .
• O primeiro aponta para o local da imagem e o segundo,
um texto alternativo para a imagem caso essa não possa
ser carregada ou visualizada.
• O HTML 5 introduziu duas novas tags específicas para
imagem: <figure> e <figcaption> define uma imagem com
legenda, respectivamente.
<figure>
<img src=“[Link]" alt="Foto do produto">
<figcaption>por R$ 129,90</figcaption>
</figure>
HTML - Listas
• A lista mais comum é a • A lista de definição:
lista não-ordenada:
• A lista ordenada:
CSS
• Cascading Style Sheets (CSS) ou Folhas de Estilo
Encadeadas (apareceu em 1996)
• Antigamente os estilos eram feitos com tags
Html. Mas isso é má prática hoje em dia e jamais
devem ser usadas;
• O CSS é uma outra linguagem, separada do
HTML, com objetivo único de cuidar da
estilização da página;
Sintaxe e inclusão de CSS
• A sintaxe do CSS tem estrutura simples:
background-color: yellow;
color: blue;
• Podemos incluir CSS no Html de 3(três) formas:
1. Tag embutida:
<p style="color: blue; background-color: yellow;">
O conteúdo desta tag será exibido em azul com fundo amarelo no navegador!
</p>
2. Estilo embutido:
<style>
p{
background-color: yellow;
color: blue;
}
</style>
3. Estilo externo:
Geralmente com a extensão .css. A indicação de uso de uma folha de estilos
externa deve ser feita dentro da tag <head> no HTML.
CSS no HTML
• A folha de estilo externa traz vantagens como: Manter o
HTML mais limpo; Poder ser reaproveitado;
[Link]
[Link]
Propriedades tipográficas e fontes
• Podemos definir fontes com o uso da propriedade:
font-family
• A propriedade font-family pode receber seu valor com
ou sem aspas:
h1 { body {
font-family: serif; font-family: "Arial", "Helvetica", sans-serif;
} }
h2 {
font-family: "Arial";
}
p{
font-family: monospace;
}
Alinhamento e decoração de texto
• Propriedade para alinhamento de texto: text-align
• Esta propriedade nos permite controlar o alinhamento horizontal dos
parágrafos. Exemplo:
Valor Resultado
p{ left alinhamento à esquerda
text-align: right; right alinhamento à direita
} center texto centralizado
justify texto justificado
• É possível configurar também uma série de espaçamentos de texto com o CSS:
p{
line-height: 3px; /* tamanho da altura de cada linha */
letter-spacing: 3px; /* tamanho do espaço entre cada letra */
word-spacing: 5px; /* tamanho do espaço entre cada palavra */
text-indent: 30px; /* tamanho da margem da primeira linha do texto */
}
• As unidades válidas são: pt (pontos), px (pixels), pc (paicas), cm (centímetros),
mm (milímetros) e in (polegadas).
Imagem de fundo
• A propriedade background-image permite indicar um
arquivo de imagem para ser exibido ao fundo do
elemento. Por exemplo:
h1 {
background-image: url([Link]);
}
Bordas
• Podemos, para cada borda de um elemento, determinar
sua cor, seu estilo de exibição e sua largura. Por exemplo:
body {
border-color: red;
border-style: solid;
border-width: 1px;
}
• Para que o efeito da cor sobre a borda surta efeito, é
necessário que a propriedade border-style tenha
qualquer valor diferente do padrão none .
Cores na Web
• Propriedades como background-color, color, border-
color, entre outras aceitam uma cor como valor. Existem
várias maneiras de definir cores quando utilizamos o CSS:
h1 {
color: red; Usando o nome da cor
}
h1 {
Usando RGB - Vermelho (Red), Verde (Green),
color: rgb(255, 200, 0); Azul (Blue). Numa escala de 0 a 255
}
h1 {
color: #F2EDED; Usando a notação hexadecimal
}
Espaçamento - padding
• Utilizamos a propriedade padding para espaçamento, e
tem as subpropriedades listadas a seguir:
• padding-top
• padding-right
• padding-bottom
• padding-left
p{
Esse valor é atribuído para : padding-top ,
padding: 10px; padding-bottom , padding-right e padding-left
}
p{ O 1° valor é atribuído para : padding-top e padding-
padding: 10px 15px; bottom e o 2° valor é atribuído para: padding-right
} e padding-left
p{ O 1° valor é atribuído para : padding-top e o 2° valor
padding: 10px 20px 15px; é atribuído para: padding-right e padding-left e 3°
} valor é atribuído para padding-bottom
p{ O 1° valor é atribuído para : padding-top e o 2°
padding: 10px 20px 15px 5px; valor é atribuído para: padding-right e 3° valor é
} atribuído para padding-left e 4° no padding-bottom
Margem - margin
• Utilizamos a propriedade margin para margem, e tem as
subpropriedades listadas a seguir:
• margin-top
• margin-right
• margin-bottom
• margin-left
p{ Define qual será a dimensão da propriedade
marging:auto; conforme o espaço disponível na tela
}
• Dimensões:
É possível determinar as dimensões de um elemento, por exemplo:
p{
background-color: red;
height: 300px;
width: 300px;
}
Dicas
• Para centralizar o body, podemos usar o truque de
colocar um tamanho fixo e margens auto na esquerda e
na direita:
body {
margin-left: auto;
margin-right: auto;
width: 940px;
}
• Para ajustar o espaçamento e indentação do paragrafo
usamos: padding e text-indent adicione no arquivo essa
propriedade e text-align usaremos justificado:
p{
padding: 0 45px;
text-indent: 15px;
text-align: justify;
}
Exemplos de Atributos
• Ajustando a margin dos títulos e imagem:
h1 {
padding: 10px;
background-image: url(../img/[Link]);
}
h2 {
margin-top: 30px;
border-bottom: 2px solid #333333;
}
figure {
padding: 15px;
margin: 30px;
background-color: #F2EDED;
border: 1px solid #ccc;
text-align: center;
}
figcaption {
font-style: italic;
margin-top: 10px;
}
HTML - Links
• Quando precisamos indicar que um trecho de
texto se refere a um outro conteúdo, seja ele no
mesmo documento ou em outro endereço,
utilizamos a tag de âncora <a>
• Existem dois diferentes usos para as âncoras:
1. Links (fora do documento):
<p>
Visite o site do <a href="[Link]
</p>
2. bookmark (dentro do documento):
<p>Mais informações <a href="#info">aqui</a>.</p>
<p>Conteúdo da página...</p>
<h2 id="info">Mais informações sobre o assunto:</h2>
<p>Informações...</p>
CSS: seletores de id e filho
• Já vimos como selecionar elementos no CSS
usando simplesmente o nome da tag do html;
• Às vezes não queremos pegar todos os parágrafos
da página;
• Solução usando os seletores CSS: Seletor de ID e
Seletor hierárquico;
CSS: Seletor de ID
• É possível aplicar propriedades visuais a um
elemento selecionado pelo valor de seu atributo
id. Declarando id:
<p id="modelo">exemplo de parágrafo</p>
• Para isso, o seletor deve iniciar com o caractere
"#" seguido do valor correspondente;
#modelo {
color: red;
text-align: center;
}
CSS: Seletor hierárquico
• É possível aplicar propriedades com hierarquias:
<figure id="padrao">
<img src="img/[Link]">
<figcaption>Centro de distribuição da Mirror Fashion</figcaption>
</figure>
• Podemos ainda utilizar um seletor hierárquico
que permite aplicar estilos aos elementos filhos
de um elemento pai:
#padrao img {
margin-right: 35px;
vertical-align: middle;
width: 94px;
}
Fluxo do documento e float
• Até agora, os elementos da página são
desenhados um em cima do outro;
• Temos um problema: a tag <figure> ocupa toda a
largura da página;
• Imagem aparece empilhada no fluxo do
documento, não permitindo que outros
elementos sejam adicionados ao seu lado;
• Este problema pode ser solucionado por meio da
propriedade float;
Html – div e span
• As tags <div> e <span> funcionam como coringas;
• São tags que podem servir para agrupar um certo
conteúdo, tanto um bloco da página quanto um
pedaço de texto;
• Exemplo de uma div como rodapé da pagina:
<div id="rodape">
<img src="img/[Link]">
© Copyright Capsula
</div>
Estilização com classes
• Para estilizar um menu <nav> como exemplo, podíamos fazer:
nav { Usando nome da TAG <nav> algo aqui</nav>
...
}
#menu-opcoes { Usando nome do ID <nav id="menu-opcoes"> algo aqui</nav>
...
}
.menu-opcoes { Usando nome do CLASS <nav class="menu-opcoes"></nav>
...
}
• Usar classes facilita reuso de código e flexibilidade.
• Um elemento pode ter mais de uma classe ao mesmo tempo, aplicando estilos de várias
regras do CSS ao mesmo tempo:
.menu-opcoes {
... <nav class="menu-opcoes menu-cabecalho"></nav>
}
.menu-cabecalho {
...
}
block vs inline
• Entre os elementos em bloco, podemos destacar as tags de heading
<h1> a <h6> , os parágrafos <p> e divisões <div>;
• Entre os elementos em linha, podemos destacar as tags de âncora
<a> , as tags de ênfase <small> , <strong> e <em> e a tag de
marcação de atributos <span> ;
• Existe a propriedade display no CSS, que permite definir qual
estratégia de exibição o elemento utilizará, por exemplo na
horizontal:
ul li {
display: inline;
}
CSS Reset
• Quando não especificamos nenhum estilo para nossos elementos
do HTML, o navegador utiliza uma série de estilos padrão;
• Para evitar esse tipo de interferência, alguns desenvolvedores e
empresas criaram alguns estilos que chamamos de CSS Reset;
• A intenção é setar um valor básico para todas as características do
CSS, sobrescrevendo totalmente os estilos padrão do navegador;
• Existem algumas opções para resetar os valores do CSS:
1. HTML5 Boilerplate
2. YUI3 CSS Reset
3. Eric Meyer CSS Reset
position
• Existem propriedades para posicionar um elemento na página, que
são top , left , bottom e right ;
• Por padrão, não são obedecidas por nenhum elemento, pois elas
dependem de uma outra propriedade, a position;
• A position determina o posicionamento de um elemento, com os
valores: static, relative, absolute ou fixed;
• A position que aceitam coordenadas é o relative, exemplo:
.logotipo {
position: relative;
top: 20px;
left: 50px;
}
position:static
• Sua posição é dada automaticamente pelo fluxo da página: por
padrão ele é renderizado logo após seus irmãos
• Não aceita um posicionamento manual (left, right, top, bottom);
• O tamanho do seu elemento pai leva em conta o tamanho do
elemento static;
position:relative
• Por padrão o elemento será renderizado da mesma maneira que o
static;
• Aceita posicionamento manual;
• O tamanho do seu elemento pai leva em conta o tamanho do
elemento relative, porém sem levar em conta seu posicionamento.
O pai não sofreria alterações mesmo se o elemento fosse static;
position:fixed
• Uma configuração de posicionamento vertical (left ou right) e uma
horizontal (top ou bottom) é obrigatória;
• O elemento será renderizado na página na posição indicada: mesmo
que ocorra uma rolagem o elemento permanecerá no mesmo lugar;
• Seu tamanho não conta para calcular o tamanho do elemento pai, é
como se não fosse elemento filho;
position:absolute
• Uma configuração de posicionamento vertical (left ou right) e uma
horizontal (top ou bottom) é obrigatória;
• O elemento será renderizado na posição indicada, porém relativa ao
primeiro elemento pai cujo position seja diferente de static ou, se
não existir este pai, relativa à página;
• Seu tamanho não conta para calcular o tamanho do elemento pai;
Html - <form>
• Elemento <form> criado para capturar os dados do
usuário e submetê-lo a algum serviço da Internet;
• Os dados são passados para o <form> por meio da tag
<input> , que pode ter dupla finalidade: receber os
dados digitados ou submeter o formulário;
• É por meio da propriedade type que definimos essa
finalidade usaremos (search e image) há outros:
• text -password- checkbox- radio - submit- reset- file- hidden- image- button- color
<form>
<input type="search">
<input type="image" src="img/[Link]" class="lupa">
</form>
CSS - clear
• clear determina o comportamento de outros elementos
que vêm ao redor daquele que a recebe e estão
flutuando; Pode receber os valores left , right ou both;
.menu-departamentos {
clear: left;
}
• clear só interfere nos elementos que estiverem flutuando;
• left impede que elementos flutuantes fiquem à esquerda do
elemento com clear;
• right impede que elementos flutuantes fiquem à direita do
elemento com clear;
• both impede que elementos flutuantes ambos lados;
Decoração de Texto - HTML
• <a> </a> essa tag deixa abaixo texto um sublinhado;
• <del> </del> essa tag deixa no meio texto um traço;
Decoração de Texto - CSS
• text-decoration essa propriedade permite realizar
decorações em textos e seus possíveis valores são:
1. none (nenhuma decoração)
2. underline (com uma linha embaixo, o padrão dos links)
3. overline (com uma linha em cima do texto)
4. line-through (uma linha no meio do texto)
5. blink (o texto fica piscando na tela)
.item-menu {
text-decoration: line-through;
}
Transformação de Texto - CSS
• text-transform essa propriedade permite realizar
transformações em textos e seus possíveis valores são:
1. uppercase - Todas as letras em maiúsculo;
2. lowercase - Todas as letras em minúsculo;
3. capitalize - Só as primeiras letras das palavras em maiúsculo.
.menu-departamentos {
text-transform: uppercase;
}
CSS - valor inherit
Imagine que temos a seguinte divisão com A forma que foi feita não é ideal,
uma imagem: porque, se alterarmos o tamanho da
<div> , teremos que alterar o tamanho
<div> da imagem. Uma forma de resolver
<img src="[Link]" alt="box model"> este problema é utilizado o valor
</div> inherit para as propriedades width e
height da imagem:
div {
border: 2px solid;
width: 30px;
height: 30px;
}
img {
Queremos que a imagem preencha todo o espaço width: inherit;
da <div> , mas as propriedades width e height não height: inherit;
são aplicadas em cascata, sendo assim, somos }
obrigados a definir o tamanho da imagem
manualmente: O valor inherit indica para o
elemento filho que ele deve
img { utilizar o mesmo valor presente no
width: 30px; elemento pai.
height: 30px;
}
Html - <section>
• <section> </section> essa tag representa uma seção
genérica contida em um documento HTML;
• Define um bloco ou um assunto especifico;
<section class="busca">
<h2>Busca</h2>
<form>
<input type="search">
<input type="image" src="img/[Link]">
</form>
</section><!-- fim .busca -->
Comentário em html
CSS – Pseudo-Classes
• Há duas pseudo-classes que representam exatamente o
primeiro elemento filho (first-child) e o último elemento
filho (last-child).
HTML CSS
<ul>
li:first-child {
<li>Primeiro item</li>
color: red;
<li>Segundo item</li>
}
<li>Terceiro item</li>
li:last-child {
<li>Quarto item</li>
color: blue;
</ul>
}
CSS – Pseudo-Classes
• Um seletor ainda mais genérico é o (nth-child) que nos
permite passar o índice do elemento.
HTML CSS
<ul>
<li>Primeiro item</li> li:nth-child(3) {
<li>Segundo item</li> color: yellow;
<li>Terceiro item</li> }
</ul>
• Para uma lista zebrada, com itens ímpares de uma cor e
pares de outra:
HTML CSS
<ul> li:nth-child(2n) {/* elementos pares */
<li>Primeiro item</li> color: red;
}
<li>Segundo item</li>
li:nth-child(2n+1) {/* elementos impares */
<li>Terceiro item</li> color: yellow;
</ul> }
CSS – Pseudo-Classes
• O CSS possui excelentes pseudo-classes que
representam estados dos elementos e, em especial, uma
que representa o momento que o usuário está com o
mouse em cima do elemento, a :hover.
/* seleciona o link no exato momento em que passamos o mouse por cima dele */
a:hover {
background-color:#FF00FF;
}
/* seleciona todas as âncoras que têm o atributo "href", ou seja, links */
a:link {
background-color:#FF0000;
}
/* seleciona todos os links cujo valor de "href" é um endereço já visitado */
a:visited {
background-color:#00FF00;
}
/* seleciona o link no exato momento em que clicamos nele */
a:active {
background-color:#0000FF;
}
CSS – Pseudo-Elementos
• O que fazer quando precisamos selecionar certo tipo de
conteúdo que nem elemento tem? Exemplo:
<p>O ifam é um instituto de ponta!</p>
• Como fazer para estilizar apenas a primeira letra da frase?
<p><span>O</span> ifam é um instituto de ponta!</ p>
“Arruma uma tag” Só para
poder chamar no css!! Não
seria o ideal!
• O CSS apresenta então a ideia de pseudo-elementos. São
elementos que não existem no documento mas podem
ser selecionados pelo CSS.
p:first-letter {
font-size: 200%;
}
EXEMPLO
• Temos o menu superior (.menu-opcoes) que é uma lista
de links. Podemos melhorar sua usabilidade alterando
seus estados quando o usuário passar o mouse (:hover)
e quando clicar no item (:active).
.menu-opcoes a:hover {
color:#007dc6;
}
.menu-opcoes a:active {
color:#867dc6;
}
EXEMPLO
• Por padrão, queremos que essa sublista esteja
escondida (display:none). Quando o usuário passar o
mouse ( :hover ), queremos exibi-la ( display: block ).
.menu-departamentos li ul {
display: none;
}
.menu-departamentos li:hover ul {
display: block;
}
.menu-departamentos ul ul li {
background-color: #dcdcdc;
}
EXEMPLO
• Para ajudar a diferenciar os links dos submenus,
queremos colocar um traço na frente. Podemos alterar o
HTML colocando os traços - algo visual e não semântico -
, ou podemos gerar esse traço via CSS com pseudo
elementos.
.menu-departamentos li li a:before {
content: '- ';
}
CSS - Border-Radius
• Com o CSS3 há o suporte a propriedade border-radius
que recebe o tamanho do raio de arredondamento das
bordas. Por exemplo: .d{
/*borda superior esquerda com 5px
.a{ borda superior direita com 20px
/* todas as bordas arredondadas com um raio de borda inferior direita com 50px
15px */ bordar inferior esquerda com 100px */
border-radius: 15px; border-radius: 5px 20px 50px 100px;
} }
.b{
/*borda superior esquerda e inferior direita com 5px
borda superior direita e inferior esquerda com 20px*/
border-radius: 5px 20px;
}
.c{
/*borda superior esquerda com 5px
borda superior direita e inferior esquerda com 20px
borda inferior direita com 50px */
border-radius: 5px 20px 50px;
}
CSS - Text-shadow
• Outro efeito do CSS3 é o suporte a sombras em textos
com text-shadow . Sua sintaxe recebe o deslocamento
da sombra e sua cor:
HTML
<p> Olá alunos!</p>
CSS Navegador
p{
text-shadow: 10px 10px red;
}
p{
text-shadow: 10px 10px 5px red;
}
p{
text-shadow: 10px 10px 5px red, -5px -5px 4px red;
}
CSS - Transitions
• Com as transitions, conseguimos animar o processo de
mudança de algum valor do CSS.
• Sua sintaxe possui vários recursos mas seu uso mais
simples, para esse nosso caso, seria apenas:
#teste:hover {
transition: top 2s;
}
• Isso indica que queremos animar a propriedade top
durante 2 segundos.
CSS - Transitions
Por padrão, a animação é linear, mas temos outros tipos
para animações mais suaves:
linear - velocidade constante na animação;
ease - redução gradual na velocidade da animação;
ease-in - aumento gradual na velocidade da animação;
ease-in-out - aumento gradual, depois redução gradual na
velocidade da animação;
cubic-bezier(x1,y1,x2,y2) - curva de velocidade para
animação customizada (avançado);
Web Design Responsivo
• HTML usando CSS para suportar diversas resoluções diferentes, desde a
pequena de um smartphone até um Desktop é o que chamamos de Web Design
Responsivo.
• O termo surgiu com artigo de Ethan Marcotte fala que são 3 os elementos de
um design responsivo:
1-layout fluído usando medidas flexíveis, como porcentagens;
2-media queries para ajustes de design;
3-uso de imagens flexíveis.
• Para solução na adaptação da Home pra mobile usaremos os 3 princípios.
• A ideia do responsivo é para página se adaptar a diferentes condições, em
especial a diferentes resoluções.
CSS3 Media Queries
• Todos os smartphones e navegadores modernos se
adaptam com CSS baseado nas propriedades dos
dispositivos, as media queries do CSS3.
• CSS3 vincula suas regras a propriedades do dispositivo
como tamanho da tela, orientação (landscape ou
portrait) e até resolução em dpi.
Media Queries - Declaração
• Os media queries podem ser declarados ao se invocar
um arquivo CSS:
<link rel="stylesheet" href="[Link]" media="screen">
<link rel="stylesheet" href="[Link]" media="(max-width: 480px)">
• Outra forma de declarar os media queries é separar as
regras dentro do mesmo arquivo CSS:
@media screen {
body {
font-size: 16px;
}
}
@media (max-width: 480px) {
body {
font-size: 12px;
}
}
CSS – Viewport
• Por padrão, iPhones, Androids e afins costumam
considerar o tamanho da tela visível, chamada de
viewport capaz de comportar os Sites Desktop normais.
• Por isso a nossa página foi mostrada sem zoom como se
estivéssemos no Desktop.
• A Apple criou então uma solução que depois foi copiada
pelos outros smartphones, que é configurar o valor que
julgarmos mais adequado para o viewport.
Viewport - declaração
• Declarar a meta tag com o viewport dentro do <head>:
<meta name="viewport" content="width=320">
• Com essa configuração largura da tela é 320px,
fazendo com que nosso layout mobile finalmente
funcione e nossas media queries também.
• Podemos colocar o viewport com o valor device-width
definido pelo fabricante, dando mais flexibilidade com
dispositivos diferentes com tamanhos diferentes:
<meta name="viewport" content="width=device-width">
1 - Questão 3 - Questão
Complete as lacunas das frases, indicando a qual elemento Em CSS é correto afirma que a classe é:
da tríade de tecnologias a descrição se refere.
1) ______________: tecnologia para especificar o conteúdo a) h1
. {
de páginas Web. ...
2) ______________: tecnologia para especificar a }
apresentação dessas páginas.
3) ______________: tecnologia para especificar o b) #titulo{
.
comportamento das mesmas. ...
A sequência que preenche corretamente as lacunas das }
frases é
a) HTTP / Web / Java c) ..titulo{
b) CSS / Windows / Java ...
c) HTML / CSS / JavaScript }
d) HTML / IOS / JavaScript
d) .h1 ;
2 - Questão
Web design responsivo usa HTML e CSS para que uma página web seja
adequadamente apresentada em diversos tipos de dispositivos, como celulares,
tablets, computadores, desktop etc. CSS3 introduziu uma nova técnica chamada
media query que utiliza uma instrução para indicar que um bloco de propriedades
CSS será aplicado somente se uma determinada condição for verdadeira. Por
exemplo, para executar um bloco de propriedades CSS, somente se a janela do
navegador for menor do que 768px, utiliza-se a instrução
(A) @mediaQuery only screen-max-width: 768px {/* propriedades CSS */}
(B) @apply if (screen >= 768px) {/* propriedades CSS */}
(C) @mediaQuery only screen on max-width: 768px {/* propriedades CSS */}
(D) @media if (screen >= 768px) {/* propriedades CSS */}
(E) @media only screen and (max-width: 768px) {/* propriedades CSS */}
65
GABARITO
1 C
2 E
3 C
66