9. Dimensionamento de Elementos, Listas e Seletores Complexos.

Nesta aula vamos aprender como definir uma área na página, pode ser um retângulo onde vamos definir o
espaço do logo e do menu de navegação.

Outro exemplo são os parágrafos onde o melhor a ser usado são medidas mínimas, desta forma o tamanho vai
automaticamente aumentando conforme o conteúdo.

Em outro caso em um formulário podemos definir uma largura e altura mínima e máxima, para que algum
usuário não fique modificando os componentes como a área de mensagem.

Utilizamos as propriedades width, min-width, max-width, height, min-height e max-height para

dimensionamento dos elementos do HTML.

Os elementos de lista facilitam quando queremos criar por exemplo os links.

Os seletores complexos mostram como o CSS pode ser rápido e dinâmico.

Com o uso destes recursos, iremos aprimorar os nossos projetos.

9.1. DIMENSIONAMENTO

Quando criamos um site o layout é o primeiro item a ser desenvolvido e em seguida é inserido o conteúdo.

Para transferir o layout desenhado para o código é necessário montar cada parte desenhada utilizando o CSS
para ser visualizado.

No exemplo acima vamos definir como seria a montagem do css.

As áreas com os números 1, 2 e 4 utilizarei altura fixa.

No exemplo a área numerada como (1) possui as seguintes propriedades:

1
 Width:600px e height:50px

No exemplo a área numerada como (2) possui as seguintes propriedades:

Width:600px e height:20px

No exemplo a área numerada como (4) possui as seguintes propriedades:

Width:600px e height:158px

As próximas áreas possuem valores mínimos.

No exemplo a área numerada como (3, 5, 6 e 7) possui as seguintes propriedades:

Width:600px e min-height:1px

O que acontece quando usamos a propriedade min-height, é que a medida que for aumentando o conteúdo,
automaticamente a área amplia.

Outro caso é o campo de mensagem que permite alterar o tamanho da área, clicando e arrastando a caixa a
partir do canto inferior direito.

Para que este campo de mensagem não possa ser alterado, utilize as seguintes propriedades.

Width:350px; min-width:350px; max-width:350px; height:82px; min-height:82px e max-height:82px;

Desta forma não será possível modificar o tamanho deste componente.

Width e height Definem a altura e a largura de um elemento.

Max-width e max-height Definem a largura máxima e a altura máxima de um elemento.
Min-width e min-height Definem a largura mínima e a altura mínima de um elemento.
Valores definidos em pixels ou porcentagem.

9.2. Listas e Marcadores

As listas auxiliam a organizar o conteúdo, e são utilizadas para criar menus. Esses menus podem ser verticais
ou horizontais, o efeito horizontal é auxiliado pela propriedade float.

O elemento UL é um container que comporta os itens da lista, as tags LI.

O UL é a lista e os LI são os itens. Ul significa lista não ordenada.

2
 Veja o resultado no navegador.

Há também a lista OL, que é a lista ordenada.

Veja o resultado no navegador.

Criando uma lista personalizada. Para usar um marcador personalizado como uma imagem podemos usar a
propriedade list-style-image. O problema é que este recurso não oferece controle sobre a posição do marcador.

Vamos ao exemplo.

Veja o exemplo no navegador

Para melhor ajustar as imagens utilize a propriedade background no elemento LI.

3
 Veja o resultado no navegador.

Desta maneira obtemos o melhor controle da imagem na lista.

9.3. Seletores

Os seletores auxiliam na formatação dos elementos, conheça alguns deles.

Quando utilizamos o agrupamento de seletores podemos padronizar vários elementos, exemplo, todos as tags
de cabeçalho de h1 até h6 vai ser da formatada na cor laranja.

O seletor descendente.

Seletores descendentes permitem que você case um elemento sem necessidade de atribuir-lhe uma classe ou
uma id, o que resultará em uma marcação mais limpa.

Seletor filho:

4
 Um seletor filho tem como alvo um filho imediato de um elemento. O seletor filho consiste de um ou mais
seletores separados por um sinal de maior “>”. O elemento pai fica à esquerda do sinal “>”, e é permitido deixar
espaço em branco entre o elemento de combinação e os seletores.

Neste exemplo somente os elementos que estão em primeiro nível serão formatados, ou seja, o elemento h1
que está fora da div dicas.

Seletores irmãos adjacentes:

Um seletor irmão adjacente consiste de um ou mais seletores simples separados por um sinal de adição “+”. É
permitido deixar espaço em branco entre o elemento de combinação e os seletores. O seletor tem como alvo um
elemento que seja irmão e adjacente ao primeiro elemento. Os elementos devem ter o mesmo pai e o primeiro
elemento deve ser imediatamente anterior ao segundo.

p+p{color:#FFF;}

Este exemplo será aplicado a cor verde somente no segundo parágrafo.

Seletor ~ busca todas as ocorrências que contenha um determinado nome. Veja o resultado no navegador.

5
 No exemplo acima foi aplicado formatação no atributo title com o valor ‘menu’. Veja o resultado no navegador.

Seletor ^ busca a primeira ocorrência.

No exemplo acima foi aplicado formatação apenas na primeira ocorrência com a palavra lateral. Veja o
resultado no navegador.

Seletor $ busca a última ocorrência.

No exemplo acima foi formatado a última ocorrência. Veja o resultado no navegador.

a[title*="artigo"] Seleciona os elementos “a” cujo o valor tenha pelo menos uma
ocorrência com a palavra “artigo”.

6
 9.4. 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, é muito importante você fazer todos os exercícios, 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 crie uma, ou oriente, onde a mesma se encontra.

As imagens estão na pasta Arquivos Auxiliares/Aula9/imagens-passo-a-passo.

Exercício 1:

Criar dentro da pasta Documentos a subpasta aula9 e copiar as fotos da pasta Arquivos
Auxiliares/Aula9/imagens-passo-a-passo.

1) Clique duas vezes na pasta Documentos;

2) Clique no ícone Nova Pasta como mostra em destaque.

3) Pressione a tecla Backspace para apagar o título e em seguida digite liga-do-esporte.

4) Clique duas vezes na pasta liga-do-esporte.

5) Para criar a pasta CSS clique no botão em destaque.

7
6) Pressione a tecla Backspace para apagar o título e em seguida digite css.

7) Clique novamente no botão Nova Pasta.

8) Pressione a tecla Backspace para apagar o título e em seguida digite imagens.

9) As copiar as imagens chame o instrutor.

10) Agora abra o Notepad++
11) Clique no botão Iniciar;

12) Na lista que surgiu, clique em Notepad++

13) Ajustando o formato de caracteres especiais, clique no menu Formatar.

14) Ajustando a linguagem de programação, clique no menu Linguagem, clique na letra “H” e logo após em
HTML.

8
 15) Digite o código abaixo.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Liga do Esporte</title>
<link href="css/estilo.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<header id="header">
<div id="areaheader">
<h1>LIGA DO ESPORTE</h1>

<nav>

<ul id="series">
<li id="seriea"><a href="#">SÉRIE A</a>
<ul id="listaseriea">
<li><img src="imagens/serie-a-1.png" alt="Série A 1"/></li>
<li><img src="imagens/serie-a-2.png" alt="Série A 2"/></li>
<li><img src="imagens/serie-a-3.png" alt="Série A 3"/></li>
<li><img src="imagens/serie-a-4.png" alt="Série A 4"/></li>
</ul>
</li>
<li id="serieb"><a href="#">SÉRIE B</a>
<ul id="listaserieb">
<li><img src="imagens/serie-b-1.png" alt="Série B 1"/></li>
<li><img src="imagens/serie-b-2.png" alt="Série B 2"/></li>
<li><img src="imagens/serie-b-3.png" alt="Série B 3"/></li>
<li><img src="imagens/serie-b-4.png" alt="Série B 4"/></li>
</ul>
</li>
<li id="seriec"><a href="#">SÉRIE C</a>
<ul id="listaseriec">
<li><img src="imagens/serie-c-1.png" alt="Série C 1"/></li>
<li><img src="imagens/serie-c-2.png" alt="Série C 2"/></li>
<li><img src="imagens/serie-c-3.png" alt="Série C 3"/></li>
<li><img src="imagens/serie-c-4.png" alt="Série C 4"/></li>

9
 </ul>
</li>
</ul>
</nav>
</div>
</header>

<section id="container">
<div id="ajuste-1">
<figure id="foto1"><img src="imagens/foto1.jpg"/></figure>
<figure id="foto2"><img src="imagens/foto2.jpg"/></figure>
</div>

<div id="ajuste-2">
<figure id="foto3"><img src="imagens/foto3.jpg"/></figure>
<figure id="foto4"><img src="imagens/foto4.jpg"/></figure>
</div>
<figure id="circulo"><img src="imagens/circulo.png"/></figure>
</section>

</body>
</html>

16) Para salvar clique no meu Arquivo, Salvar como.

17) Clique duas vezes na pasta Documentos.

18) Para abrir a pasta liga-do-esporte.

10
19) Dentro da pasta clique duas vezes em liga-do-esporte.

20) Clique dentro da caixa Nome e apague o título teclando Backspace e em seguida digite index.

21) Para finalizar clique no botão Salvar.

Exercício 2:

Este exercício, tem como objetivo, criar a página de estilo para ajustar o index.

1) Crie um novo documento, clique no menu Arquivo/ Novo.

2) Ajustando o formato de caracteres especiais, clique no menu Formatar/ Codificação em UTF-8.

3) Ajustando a linguagem de programação, clique no menu Linguagem, clique na letra “C” e logo após em
CSS.

11
4) Digite o código abaixo:

*{margin:0; padding:0; list-style:none; text-decoration:none;}

body{margin:auto; text-align:center;}

#header{width:100%; height:70px; position:relative; background:#009900;}

#areaheader{width:1000px; height:70px; margin:auto;}
h1{width:200px; height:70px; float:left; font:normal 20px arial; color:#FFF; line-height:70px; }

nav{width:300px; height:70px; background:#CCC; float:right; position:relative;z-index:2;}

ul li{float:left; margin:0 20px; line-height:70px; }
#listaseriea{width:170px; height:170px; position:absolute; left:0px; display:none;}
#listaseriea li{line-height:0; margin:0; background:#DDD;}
#seriea:hover > #listaseriea{display:block;}

#listaserieb{width:170px; height:170px; position:absolute; left:80px; display:none;}

#listaserieb li{line-height:0; margin:0; background:#DDD;}
#serieb:hover > #listaserieb{display:block;}

#listaseriec{width:170px; height:170px; position:absolute; left:140px; display:none;}

#listaseriec li{line-height:0; margin:0; background:#DDD;}
#seriec:hover > #listaseriec{display:block;}

#container{width:1000px; height:500px; margin:0 auto; position:relative; }

#ajuste-1{width:1000px; height:auto;}
#foto1{float:left;}
#foto2{float:right;}
#ajuste-2{width:1000px; height:auto;}
#foto3{float:left;}
#foto4{float:right;}
#circulo{position:absolute; top:200px; left:350px;}
5) Para salvar clique no menu Arquivo/ Salvar como.

6) Clique duas vezes na pasta CSS.

12
 7) Clique dentro da caixa Nome e digite estilo.

8) Clique no botão Salvar.

9) Faça o teste abrindo o index

Veja o resultado.

Exercício 3:

Este exercício tem como objetivo, criar um menu de navegação com imagem. Uma pasta chamada menu-
navegacao será criada.

1) Crie dentro da pasta Documentos;

2) Clique no botão Nova Pasta em destaque

13
 3) Apague o título com a tecla Backspace, digite menu-navegacao e pressione a tecla Enter.

4) Copie a imagem a ser usada no exercício que está na pasta Arquivos Auxiliares/Aula9/imagens-passo-a-
passo
5) Agora abra o Notepad++
6) Clique no botão Iniciar;

7) Na lista que surgiu, clique em Notepad++

8) Ajustando o formato de caracteres especiais, clique no menu Formatar.

9) Ajustando a linguagem de programação, clique no menu Linguagem, clique na letra “H” e logo após em
HTML.

10) Digite o código abaixo.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>

14
 <meta charset="utf-8"/>
<title>Lista Esportes</title>
<link href="css/estilo.css" type="text/css" rel="stylesheet"/>
</head>

<body>

<nav id="menu">
<ul>
<li><a href="#">Meu Time</a></li>
<li><a href="#">Melhores momentos</a></li>
<li><a href="#">Agora no Esporte</a></li>
<li><a href="#">O melhor do Esporte</a></li>
<li><a href="#">Opiniões</a></li>
</ul>
</nav>

</body>
</html>
11) Agora vamos salvar, clique no menu Arquivo, Salvar como.

12) Abra a pasta menu-navegacao.

13) Clique dentro da caixa Nome, apague o título e digite index.

14) Para concluir, clique no botão Salvar.

15
 Exercício 4:

Este exercício, tem como objetivo, criar a página de estilo para ajustar o index.

1) Crie um novo documento, clique no menu Arquivo/ Novo.

2) Ajustando o formato de caracteres especiais, clique no menu Formatar/ Codificação em UTF-8.

3) Ajustando a linguagem de programação, clique no menu Linguagem, clique na letra “C” e logo após em
CSS.

4) Digite o código abaixo:

*{list-style:none; text-decoration:none; }
#menu ul li { display: inline; padding:30px 0; background:url(../imagens/bola.png) no-repeat 0px; padding-
left:22px;}
#menu ul li a{font:normal 12px arial; color:#000;}
#menu ul li a:hover{text-decoration:underline;}
5) Para salvar clique no menu Arquivo/ Salvar como.

6) Clique duas vezes na pasta CSS.

16
 7) Clique na caixa Nome e apague o título, em seguida digite estilo.

8) Para concluir clique no botão Salvar.

Veja com o ficou a página no navegador.

Exercício 5:

Este exercício tem como objetivo, utilizar a propriedade min-height para ajustar o tamanho das áreas de texto
da página. Crie a pasta mundo-do-boxe.

1) Crie dentro da pasta Documentos;

2) Clique no botão Nova Pasta em destaque

17
 3) Apague o título com a tecla Backspace, digite mundo-do-boxe e pressione a tecla Enter.

4) Copie a imagem a ser usada no exercício que está na pasta Arquivos Auxiliares/Aula9/imagens-passo-a-
passo
5) Agora abra o Notepad++
6) Clique no botão Iniciar;

7) Na lista que surgiu, clique em Notepad++

8) Ajustando o formato de caracteres especiais, clique no menu Formatar.

9) Ajustando a linguagem de programação, clique no menu Linguagem, clique na letra “H” e logo após em
HTML.

10) Digite o código abaixo.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>História do Boxe</title>
<link href="css/estilo.css" type="text/css" rel="stylesheet"/>
</head>

18
<body>

<header id="header">
<h1>Mundo do Boxe</h1>
</header>

<section id="container">
<div id="area-container">
<article id="historia">
<h2>História</h2>
<p>
Na antiguidade, antes mesmo das civilizações grega e romana, há indícios arqueológicos que indicam
que o homem praticava lutas usando as mãos, desferindo golpes uns contra os outros.
</p>
<p>
Os gregos e romanos também praticavam lutas deste tipo com objetivos esportivos (caso dos gregos)
ou de simples diversão (caso dos romanos).
</p>
</article>

<article id="esporte">
<h2>Crescimento do Esporte</h2>
<p>
Porém, o boxe só ganhou algumas regras, aproximando-se do que é hoje, no século XVII, no Reino
Unido. Foi no ano de 1867, que o uso de luvas e o número de assaltos foram determinados como regras oficiais.
</p>
<p>
Para tornar as lutas mais competitivas, as regras do boxe definiram categorias que variam de acordo
com o peso do lutador (boxeador ou pugilista).
</p>
<p>
As lutas profissionais possuem, no máximo, 12 assaltos com 3 minutos cada. Porém, em
determinadas competições o número de assaltos pode ser menor. Nas Olimpíadas, por exemplo, são 3 rounds de
3 minutos cada.
</p>

</article>

<nav id="menu">
<h2>Principais organizações</h2>
<ul>
<li><a href="#">Associação Mundial de Boxe (AMB)</a></li>
<li><a href="#">Conselho Mundial de Boxe (CMB)</a></li>
<li><a href="#">Federação Internacional de Boxe (FIB)</a></li>
<li><a href="#">Organização Mundial de Boxe (OMB)</a></li>
</ul>
</nav>
</div>

19
 <figure id="boxe"><img src="imagens/foto.jpg"/></figure>
</section>
</body>
</html>
11) Para salvar clique no menu Arquivo/ Salvar como

12) Clique duas vezes na pasta Mundo-do-Boxe.

13) Clique dentro da caixa Nome e digite index.

14) Para concluir clique no botão Salvar.
15) Para criar o estilo clique no menu Arquivo/ Novo.
16) Clique no menu Formatar, Codificação em UTF-8;
17) Clique no menu Linguagem, Clique na letra “C” e clique em CSS;

18) Digite o código abaixo.

*{list-style:none; text-decoration:none; margin:0; padding:0;}

body{margin:auto; background:#444;}

#header{width:100%; height:40px; background:#000;}

h1{font:normal 20px arial; color:#999; line-height:40px; padding-left:10px;}

#container{width:1000px; min-height:1px; margin:auto; padding:10px 0 0 0; background:#333; }

20
#area-container{width:1000px; min-height:1px; margin:auto; padding:5px 0; float:left;}

#historia{width:300px; min-height:1px; padding:10px 5px; background:#333; float:left; margin:0 5px;}

#esporte{width:300px; min-height:1px; padding:10px 5px; background:#333; float:left; border-right:1px solid
#DDD; border-left:1px solid #DDD; margin:0 5px;}

h2{font:normal 16px arial; color:#999; line-height:40px; padding-left:10px;}

p{font:normal 12px arial; color:#999; padding:0 10px; margin:10px 0; text-align:justify;}

#menu{width:300px; min-height:1px; padding:10px 5px; background:#333; float:left; margin:0 5px;}

#menu ul li{display:block; background:url(../imagens/luva.png) no-repeat 0px; padding-left:35px;}
#menu ul li a{color:#999; font:normal 12px arial;}
#menu ul li a:hover{color:#FFF; text-decoration:underline;}

#historia{width:300px; min-height:1px; padding:10px 5px; background:#333; float:left;}

19) Clique no menu Arquivo/ Salvar Como.

20) Clique duas vezes na pasta CSS.

21) Clique dentro da caixa Nome e digite estilo.
22) Para concluir clique no botão Salvar.
23) Veja com o ficou no navegador.

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

Até a próxima aula!

21