Internet I
Unidade 4 – Links, listas e pseudo-classes
QI ESCOLAS E FACULDADES
2 HTML ... 3 2.1 Links ... 3 2.1.1 Link externo ... 3 2.1.2 Link âncora ... 4 2.1.3 Link interno ... 4 2.2 Listas ... 5 2.2.1 Lista não-ordenada ... 5 2.2.2 Lista ordenada ... 7 2.2.3 Listas encadeadas ... 8 3 CSS ... 9 3.1 Pseudo-classes ... 9 3.1.1 Sintaxe ... 9 3.1.2 Pseudo-classes em links ... 9
3.1.3 Pseudo-classes first-child e last-child ... 10
3.2 Bordas ... 11 3.2.1 Estilos de borda ... 11 3.2.2 Tamanho da borda ... 12 3.2.3 Cor da borda ... 12 3.2.4 Lados individuais ... 13 3.2.5 Propriedade única ... 14 3.3 Menu... 15 REFERÊNCIAS ... 16
LINKS, LISTAS E PSEUDO-CLASSES
1 REVISÃO
Na Unidade 3 foi apresentada a linguagem CSS, utilizada para aplicar estilos aos elementos de uma página HTML. Nela também há exemplos de formatações básicas para fontes, textos, e fundos com cores e imagens.
Nesta Unidade 4, o assunto volta a ser HTML, mas agora misturado ao CSS. Inicialmente serão apresentados dois novos elementos muito importantes: os links e as listas. Depois deles, novas propriedades CSS serão vistas, como as bordas e os estilos de listas. Por fim, serão conhecidas as pseudo-classes do CSS e sua aplicação.
Essa Unidade está dividida em dois grandes capítulos: HTML e CSS. No capítulo HTML serão mostradas as novas tags e no capítulo CSS, as novas propriedades. Porém, alguns estilos CSS que sejam diretamente ligados a algum elemento HTML podem aparecer dentro da seção do próprio elemento, a fim de tornar a leitura mais natural.
2 HTML
Dois elementos HTML principais serão trabalhados nessa Unidade 4: os links e as listas. As definições de cada um deles e suas variações serão apresentadas nas seções 2.1 e 2.2 a seguir.
2.1 Links
Os links estão presentes em todas as páginas Web. Eles permitem a navegação de página em página através de um clique. Os links podem ser uma palavra, uma frase ou uma imagem em que o usuário clica para ir para outro documento.
A tag <a> define um link e ela possui um atributo obrigatório chamado href que indica o destino do link.
2.1.1 Link externo
Links externos apontam para um documento que não faz parte do site, e devem ser indicados com o protocolo adequado, por exemplo:
<a href="http://qi.edu.br/">Visitar o site da QI</a>
O código acima cria um link que abre a página “http://qi.edu.br”. Na página, os links são mostrados em azul e sublinhados, como mostra a Figura 1.
Figura 1 – Link HTML
Geralmente, os links externos abrem em páginas novas para fazer com que o usuário não saia da página atual. Para isso, utiliza-se o atributo target com o valor “_blank”, como mostra o exemplo abaixo.
<a href="http://qi.edu.br/" target=”_blank”>Visitar o site da QI</a>
2.1.2 Link âncora
Links do tipo âncora são utilizados para direcionar o leitor da página para um ponto específico dentro do mesmo documento. Eles são tipicamente usados para fazer links que voltam ao topo da página, por exemplo.
Nesse caso, o valor do elemento href deve ser “#” seguido pelo id do elemento da página para o qual se quer direcionar.
<h1 id=”topo”>Título Principal</h1>
...
Conteúdo da página ...
<a href="#topo">Voltar para o topo da página</a>
No exemplo acima, ao clicar no link, o usuário seria direcionado para o elemento <h1> que possui o atributo id com o valor “topo”.
Importante saber que o atributo id deve ser único por página, ou seja, não pode haver dois elementos com o mesmo id numa página.
2.1.3 Link interno
Links internos fazem referência a arquivos dentro do mesmo site. Nesse caso, basta indicar o nome do documento que se quer abrir naquele link, com o caminho se não estiver na mesma pasta da página.
<a href="outra-pagina.html">Ir para outra página</a>
O exemplo acima direciona o usuário para outra página com o nome “outra-pagina.html” que esteja dentro da mesma pasta da página em que está o link.
2.2 Listas
Há dois tipos mais comuns de elementos lista no HTML: as listas ordenadas e as listas não-ordenadas.
2.2.1 Lista não-ordenada
Uma lista não-ordenada é marcada pela tag <ul> (unordered list), e cada item da lista é marcado com a tag <li> (list item).
Por padrão, os itens dessa lista são mostrados com pequenos círculos pretos, semelhantes aos marcadores de um editor de texto. O exemplo abaixo cria uma lista não-ordenada com dois itens.
<ul>
<li>Escola</li> <li>Faculdade</li> </ul>
O resultado desse código na página é mostrado na Figura 2.
Figura 2 – Lista não-ordenada em HTML
É possível, através de CSS, alterar o tipo de marcador dos itens da lista. Para isso, utiliza-se a propriedade list-style-type no arquivo de estilos.
O exemplo abaixo mostra o código CSS com algumas formatações possíveis para as listas não-ordenadas.
ul.quadrado {
list-style-type: square; /* Marcador quadrado */ }
ul.circulo {
list-style-type: circle; /* Marcador circular sem preenchimento */ }
ul.nenhum {
list-style-type: none; /* Lista sem marcadores */ }
Figura 3 – Listas não-ordenadas formatadas com list-style-type
Também é possível especificar uma imagem como marcador dos itens da lista, utilizando a propriedade list-style-image, como mostra o exemplo abaixo.
ul.imagem {
list-style-image: url(quadrado-lilas.gif);
}
O resultado é mostrado na Figura 4.
2.2.2 Lista ordenada
Uma lista ordenada é marcada com a tag <ol> (ordered list), e cada item da lista é marcado com <li> (list item). Por padrão, os itens da lista ordenada são marcados com números em ordem crescente.
O exemplo abaixo mostra uma lista ordenada com dois itens.
<ol>
<li>Curso técnico em Informática</li> <li>Curso técnico em Administração</li> </ol>
O resultado dessa lista ordenada é mostrado na Figura 5.
Figura 5 – Lista ordenada em HTML
Assim como as listas não-ordenadas, uma lista ordenada pode ser estilizada usando a propriedade list-style-type no CSS. Nesse caso, pode-se especificar que tipo de numeração será utilizado, como algarismos romanos, letras, números, entre outros.
O código abaixo mostra alguns estilos de listas ordenadas.
ol.romanos {
list-style-type: upper-roman; /* Algarismos romanos maiúsculos */ }
ol.letras {
list-style-type: lower-alpha; /* Letras minúsculas */ }
ol.decimal {
list-style-type: decimal; /* Números naturais (valor padrão) */ }
ol.nenhum {
list-style-type: none; /* Sem marcador */ }
Figura 6 – Listas ordenadas formatadas com list-style-type
Dentro de um item de lista podem ser escritos textos, imagens, links, outras listas, ou seja, praticamente qualquer elemento HTML.
2.2.3 Listas encadeadas
O exemplo abaixo produz uma lista ordenada encadeada em uma não-ordenada.
<ul>
<li>
Escola
<ol>
<li>Curso técnico em Informática</li> <li>Curso técnico em Administração</li> </ol>
</li> <li>
Faculdade
<ol>
<li>Análise e Desenvolvimento de Sistemas</li> <li>Administração</li>
</ol> </li>
A Figura 7 mostra o resultado do código acima, formando uma espécie de menu.
Figura 7 – Listas encadeadas em HTML
3 CSS
3.1 Pseudo-classes
Pseudo-classes são utilizadas para adicionar efeitos especiais a alguns seletores.
3.1.1 Sintaxe
A sintaxe básica das pseudo-classes é:
seletor:pseudo-classe { propriedade: valor; }
E as classes do CSS também podem ser usadas com pseudo-classes:
seletor.classe:pseudo-classe { propriedade: valor; }
3.1.2 Pseudo-classes em links
Links em páginas HTML podem ser mostrados de diversas formas utilizando as pseudo-classes CSS. O exemplo abaixo mostra quatro das pseudo-classes mais comuns.
a:link { color:#FF0000; } /* link não visitado (vermelho) */ a:visited { color:#00FF00; } /* link visitado (verde) */
a:hover { color:#FF00FF; } /* link com mouse em cima (lilás) */ a:active { color:#0000FF; } /* link clicado (azul) */
A Figura 8 mostra alguns links formatados com os estilos acima.
A pseudo-classe first-child encontra um elemento especificado que seja o primeiro filho de outro elemento. Já a last-child, encontra um elemento especificado que seja o último filho de outro elemento. O exemplo abaixo mostra a aplicação de estilos utilizando essas duas pseudo-classes em itens de uma lista.
li:first-child {
color: #00BB00; /* Primeiro item da lista em verde */ }
li:last-child {
color: #BB0000; /* Último item da lista em vermelho */ }
A Figura 9 mostra uma lista formatada com os estilos do exemplo acima.
Figura 9 – Items de lista formatados com pseudo-classes
Existem outras pseudo-classes como, por exemplo, line,
first-letter, focus, lang, before, after e muitas outras. Algumas serão
vistas ao longo das próximas Unidades. Para a lista completa, podem-se consultar os links ao final dessa Unidade.
3.2 Bordas
As priopriedades de borda no CSS permitem especificar estilos, cores e tamanhos às bordas dos elementos de uma página.
3.2.1 Estilos de borda
A propriedade border-style especifica que tipo de borda será mostrada. Os estilos existentes são:
dotted – borda pontilhada
dashed – borda tracejada
solid – borda sólida simples
double – borda sólida dupla
groove – borda com efeito 3D de entalhe
ridge – borda com efeito 3D de profundidade
inset – borda com efeito 3D de inserção
outset – borda com efeito 3D de altura
As bordas com efeito 3D caíram em desuso nos últimos anos. As de utilização mais comun são a sólida, a pontilhada e a tracejada.
O código abaixo mostra três classes CSS que aplicam estilos de bordas diferentes.
.borda-solida { border-style: solid; } .borda-pontilhada { border-style: dotted; } .borda-dupla { border-style: double; }
A propriedade border-width não funciona se utilizada sozinha. É preciso configurar o estilo da borda também.
O exemplo abaixo configura bordas de diferentes tamanhos conforme a classe.
.borda-fina { border-style: solid; border-width: 1px; } .borda-grossa { border-style: solid; border-width: thick; }
A Figura 11 mostra dois parágrafos formatados pelo código acima.
Figura 11 – Parágrafos formatados com bordas de tamanhos diferentes
3.2.3 Cor da borda
A propriedade border-color é utilizada para configurar a cor da borda.
Assim como a border-width, a propriedade border-color deve ser aplicada juntamente com o estilo da borda para funcionar.
O código abaixo configura bordas de cores diferentes conforme a classe. .borda-azul { border-style: solid; border-color: #0000FF; } .borda-verde { border-style: solid; border-color: green; }
A Figura 12 mostra dois parágrafos formatados com as cores de bordas acima.
Figura 12 – Parágrafos formatados com cores de bordas diferentes
3.2.4 Lados individuais
No CSS é possível especificar diferentes bordas para lados diferentes.
p {
border-top-style: dotted; /* borda superior */
border-right-style: solid; /* borda direita */
border-bottom-style: dotted; /* borda inferior */
border-left-style: solid; /* borda esquerda */ }
O exemplo acima também pode ser escrito numa forma abreviada.
p {
border-style: dotted solid;
} /* top right bottom left */
3.2.5 Propriedade única
Há diversas propriedades para configurar bordas. Mas para encurtar o código, também é possível especificar todas as propriedades individuais em uma única.
A propriedade border é um atalho para as seguintes propriedades individuais: border-width
border-style (obrigatória)
border-color
O exemplo abaixo aplica uma borda com 5 pixels de largura, com estilo sólido e de cor azul ao elemento <p>.
p {
border: 5px solid #004488;
}
A Figura 13 mostra o parágrafo formatado com o estilo acima.
3.3 Menu
O código abaixo aplica efeitos de menu a uma lista encadeada semelhante àquela vista na seção 2.2.3, utilizando pseudo-classes e incluindo links. No exemplo, os sub-itens de Escola e Faculdade são mostrados apenas quando o mouse está sobre eles.
a { background-color: #DDEEFF; border: 1px solid #444444; color: #0000FF; text-decoration: none; } a:hover { background-color: #BBCCDD; } ul, ol { list-style-type: none; } li { margin: 10px; } ol {
display: none; /* oculta o elemento */ }
ul li:hover ol {
display: block; /* mostra o elemento */ }
A Figura 14 mostra a página com o resultado dos estilos acima, no momento em que o usuário está com o mouse sobre o item “Análise e Desenvolvimento de Sistemas”.
Figura 14 – Exemplo de menu com listas e links formatados
O funcionamento desse menu fica mais bem entendido se executado diretamente no navegador.
MAUJOR. Pseudo-elementos CSS.
Disponível em: http://maujor.com/tutorial/pseetut.php. Acesso em: maio/2014.
Tableless. Pseudo-classes CSS.
Disponível em: http://tableless.com.br/pseudo-classes-css/. Acesso em: maio/2014.
W3Schools. Bordas CSS.
Disponível em: http://www.w3schools.com/css/css_border.asp. Acesso em: maio/2014.
W3Schools. Links HTML.
Disponível em: http://www.w3schools.com/html/html_links.asp. Acesso em: maio/2014.
W3Schools. Listas HTML.
Disponível em: http://www.w3schools.com/html/html_lists.asp. Acesso em: maio/2014.
W3Schools. Listas CSS.
Disponível em: http://www.w3schools.com/css/css_list.asp. Acesso em: maio/2014.
W3Schools. Pseudo-classes CSS.
Disponível em: http://www.w3schools.com/css/css_pseudo_classes.asp. Acesso em: maio/2014.
