Scribd
Carregar
13 visualizações7 páginas

Aula 12 HTML-CSS

O documento ensina sobre Media Queries, que permitem aplicar estilos CSS específicos para diferentes dispositivos. Ele inclui exemplos práticos de exercícios que demonstram como alterar layouts e estilos com base na largura da tela. Os exercícios incentivam a prática e a exploração do conteúdo abordado na aula.

Enviado por

eliezerlimaneves22
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
13 visualizações7 páginas

Aula 12 HTML-CSS

O documento ensina sobre Media Queries, que permitem aplicar estilos CSS específicos para diferentes dispositivos. Ele inclui exemplos práticos de exercícios que demonstram como alterar layouts e estilos com base na largura da tela. Os exercícios incentivam a prática e a exploração do conteúdo abordado na aula.

Enviado por

eliezerlimaneves22
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 7

Nesta aula vamos aprender sobre como utilizar o Media Queries.

O HTML foi criado para ser portável, ou seja, ele deve ser lido e interpretado por qualquer tipo de dispositivo.
Cada dispositivo exibe HTML de uma determinada maneira. Logo, a forma com que você formata o layout precisa
ser diferente para cada dispositivo. Por exemplo, se você visita um site por um desktop, a experiência será
totalmente diferente caso você visite o mesmo site por um dispositivo móvel. São dispositivos diferentes, com
formas totalmente diferentes de navegação e uso.

12. Media Queries.

As Media Queries definem condições para que o CSS seja utilizado em cenários específicos.

Sintaxe:

Media queries consistem de um media type e podem, a partir de uma especificação CSS3, contendo uma ou
mais expressões, expressa em media features, que determinam ou verdadeiro ou falso. Os resultados da query são
verdadeiros se o media type especificado na media query corresponde ao tipo do documento exibido no dispositivo
e todas as expressões na media query são verdadeiras.

<!-- CSS media query dentro de um stylesheet -->

<style>

@media (max-width: 600px) {

.div{display: none;}

</style>

Quando uma media query é verdadeira, a camada de estilo ou as regras de estilos correspondentes são
aplicadas, seguindo o padrão de regras de cascatas.

1
12.1. Exercícios de Conteúdo

Olá, seja bem-vindo a nossa área de exercícios. Desenvolvemos uma série de atividades para que você domine
todo conteúdo abordado nesta aula, por isso é muito importante você fazer todos os exercícios e, qualquer dúvida,
chame o seu instrutor.

Observação: Salve os exercícios. Se você precisar de orientação de como localizar sua pasta, converse com seu
instrutor para que ele lhe ajude a criar uma ou oriente a encontrá-la.

Exercício 1:

Este exercício tem como objetivo trocar a cor do layout quando a tela for menor que 800 pixels.

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>

<html lang="pt-br">

<head>

<title>Exercício 1</title>

<style>

*{margin:0; padding:0; font-family:arial;}

header{width:100%; height:80px; background:#000000; color:white; line-height:80px; }

nav{width:100%; height:40px; background:#339933; color:white; line-height:40px;}

section{width:100%; height:500px; background:#DDD; }

@media (max-width: 800px){

header{background:#003333;}

nav{background:#99CCCC;}

section{background:#FFFFCC;}

</style>

</head>

<body>

2
<header>

<h1>Título da página</h1>

</header>

<nav>

<h3>Menu de navegação</h3>

</nav>

<section>

<h4>Conteúdo da página</h4>

</section>

</body>

</html>

6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.

7)Salve na Área de trabalho com o nome aula12-exercicio1.

8) Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Exercício 2:

Este exercício tem como objetivo criar um espaço para o logo no lado esquerdo e para o menu de navegação à
direita. Caso o navegador seja reduzido abaixo de 800 pixels, o logo será centralizado e o menu de navegação. Além
de centralizado, cada link vai ficar em uma linha.

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Exercício 2</title>
<style>
*{margin:0; padding:0; font-family:arial; list-style:none; text-decoration:none;}

3
h1{color:white; font:normal 32px arial; float:left; line-height:100px;}
#headerprincipal{width:100%; height:100px; background:#333;}
#navprincipal{float:right;}
#navprincipal a{color:white; margin:0 5px; line-height:100px;}
@media (max-width: 800px){
h1{width:100%; text-align:center;}
#headerprincipal, #navprincipal{width:100%; }
#headerprincipal, #navprincipal a {width:100%; display:block; color:black; text-align:center; line-
height:30px;}
}
</style>
</head>
<body>
<header id="headerprincipal">
<h1>Logotipo</h1>
<nav id="navprincipal">
<a href="#">HOME</a>
<a href="#">EMPRESA</a>
<a href="#">PRODUTOS</a>
<a href="#">CONTATO</a>
</nav>
</header>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.

7)Salve na Área de trabalho com o nome aula12-exercicio2.

8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Exercício 3:

Este exercício tem como objetivo criar três áreas quando a tela do navegador chegar a 800 pixels duas colunas
desaparecem.

1)Acesse o campo de busca do Windows e digite Notepad++

4
2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H” . Por fim, na opção HTML.

5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>

<html lang="pt-br">

<head>

<title>Exercício 3</title>

<style>

*{margin:0; padding:0; font-family:arial;}

#informativo1{width:10%; height:600px; background:#996666; float:left;}

#layout{width:80%; height:600px; background:#FF9966; float:left;}

#informativo2{width:10%; height:600px; background:#996666; float:left;}

#footer{width:100%; height:100px; background:#E7B8B8; float:left;}

@media (max-width: 800px){

#informativo1{display:none;}

#layout{width:100%;}

#informativo2{display:none;}

</style>

</head>

<body>

<div id="informativo1">

</div>

<div id="layout">

</div>

<div id="informativo2">

</div>

<div id="footer">

</div>

</body>

</html>

5
6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.

7)Salve na Área de trabalho com o nome aula12-exercicio1.

8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Exercício 4:

Este exercício tem como objetivo ajustar o conteúdo do site à esquerda, no modo padrão de visualização do
site, e ajustar à direita com bordas quando chegar em 800 pixels.

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>

<html lang="pt-br">

<head>

<title>Exercício 4</title>

<style>

*{margin:0; padding:0; font-family:arial;}

#area1{width:300px; float:left;}

@media (max-width: 800px){

#area1{float:right; width:400px;}

img{border:2px solid black; border-radius:10px 0 10px 0;}

</style>

</head>

<body>

<div id="area1">

<p>

6
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo
a ser o texto padrão usado por estas indústrias, desde o ano de 1500, quando uma misturou os caracteres de um
texto para criar um espécime de livro.

</p>

<img src="imagens/carro1.png"/>

</div>

<div id="area1">

<p>

O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo
a ser o texto padrão usado por estas indústrias, desde o ano de 1500, quando uma misturou os caracteres de um
texto para criar um espécime de livro.

</p>

<img src="imagens/carro2.png"/>

</div>

<div id="area1">

<p>

O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo
a ser o texto padrão usado por estas indústrias, desde o ano de 1500, quando uma misturou os caracteres de um
texto para criar um espécime de livro.

</p>

<img src="imagens/carro3.png"/>

</div>

</body>

</html>

6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.

7)Salve na Área de trabalho com o nome aula12-exercicio4.

8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Bom, concluímos aqui os exercícios passo a passo. Lembre-se, pratique, pois essa é a única maneira de
aprender. Refaça os exercícios e, qualquer dúvida, chame o instrutor.

Até a próxima aula!

Você também pode gostar