CSS Folha de Estilo em CascataUnidade 4 Listas, Menus e Links

Curso: Auxiliar de Web Design

Carga horria: 30h/a

Professor Regis Pires Magalhes

regis@ifpi.edu.brhttp://sites.google.com/site/ifpiregis

A disciplina

Unidades

1. Fundamentos de CSS

2. Textos, Fontes e Espaamentos

3. Cores e background

4. Listas, Menus e Links

5. Tabelas e Formulrios

6. Posicionamento e Layout

Propriedade CSS list

list-style-image............. imagem como marcador da lista;

list-style-position..........onde o marcador da lista posicionado;

list-style-type...............tipo do marcador da lista;

list-style........................maneira abreviada para todas as propriedades.

list-style-image imagem para marcadores de lista

ul {

list-style-image: url("seta.gif"); }

Item umItem doisItem tres

Valores vlidos:noneURL: url("caminho/marcador.gif")

list-style-position - posio dos marcadores de lista

ul.inside { list-style-position: inside; }ul.outside { list-style-position: outside; }

Este texto destina-se a demonstrar o valor:

"inside" dos marcadores de listas.E aqui continuamos com mais texto para fixar o valor:

"inside" dosmarcadores de listas.

Este texto destina-se a demonstrar o valor:

"outside" dos marcadores de listas.E aqui continuamos com mais texto para fixar o valor:

"outside" dos marcadores de listas.

Valores vlidosoutside: marcador fora do alinhamento do textoinside: marcador alinhado com texto

list-style-type - os tipos de marcadores de lista

ul.none { list-style-type: none; }ul.disc { list-style-type: disc; }ul.circle { list-style-type: circle; }ul.square { list-style-type: square; }

Item umItem doisItem tresItem umItem doisItem tresItem umItem doisItem tres

Item umItem doisItem tres

list-style-type - os tipos de marcadores de lista

Valores vlidos none: sem marcador disc: crculo (bolinha cheia) circle: circunferncia (bolinha vazia) square: quadrado cheio decimal: nmeros 1, 2, 3, 4, ... decimal-leading-zero lower-roman: romano minsculo i, ii, iii, iv, ... upper-roman: romano maisculo I, II, III, IV, ... lower-alpha: letra minscula a, b, c, d, ... upper-alpha: letra maiscula A, B, C, D, ... lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-

ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha

Construo de menus

HTML tpico para um menu:

HomeProduto AProduto BServiosContacto

Construo de menus1. elemento div

2. elemento ul

3. elemento li dos 5 elementos li

4. espaamento entre os elementos li

5. mouse over - quando o mouse passa em cima do link, elemento a

6. borda no elemento div

7. default do link - elemento a

8. Link aps visitado - elemento a

9. borda no elemento ul.

Regra para o elemento div

#menu {width:104px;background:#999999;padding:5px;border:3px inset #cccccc;

}

Regra para o elemento ul

#menu ul {widht:110px;background: #000000;padding:6px;border:3px outset #ffffff;margin:0;

}

Regra para o elemento li

#menu li {list-style: none;padding:3px 5px;background:#666666;margin-bottom:2px;font: 12px verdana, arial, helvetiva, sans-serif;

}

Estilos em Links

Pseudo-classes seletor:pseudo-classe {propriedade: valor}

Pseudo-classe para links So quatro as pseudo classes para links nessa ordem: a:link define o estilo do link no estado inicial.

a:visited define o estilo do link visitado.

a:hover define o estilo do link quando passa-se o mouse sobre ele.

a:active define o estilo do link ativo (o que foi "clicado").

Removendo o sublinhado do link

a:link, a:visited {text-decoration: none

}a:hover {text-decoration: underline; color: #f00

}a:active {text-decoration: none

}

Adicionando sublinhado e sobrelinhado

a:link, a:visited, a:active {text-decoration: underline;

}a:hover {text-decoration: underline overline; color:#f00;

}

Acrescentando um fundo

a:hover {background:#ff0; color:#f00;

}

Link com um fundo de uma cor que muda

no estado link hover

a:link, a:visited, a:active {text-decoration:none;

}a:hover {

text-decoration: underline; color:#000; background:#ff0;

}

Link que muda o tamanho da letra

no link hover

a:link, a:visited, a:active {text-decoration: none;

}a:hover {

text-decoration: underline; color:#000; font-size:150%;

}

Diferentes estilos de links em uma

mesma pgina web

a.link1:hover {text-decoration: underline overline;

}

Diferentes estilos de links em uma mesma pgina web

a.classe1:link, a.classe1:visited { text-decoration: none }a.classe1:hover {text-decoration: underline; color: #f00;

}a.classe1:active { text-decoration: none }a.classe2:link, a.classe2:visited {text-decoration: underline overline

}a.classe2:hover {text-decoration: underline; color: #0f0;

}a.classe2:active { text-decoration: underline overline }

ESTE O LINK DA classe1

ESTE O LINK DA classe2

Regras para o elemento a que

sero aplicadas ao nosso Menu#menu li a {display:block;color: #ffffff;text-decoration: none;

}#menu li a:visited {color: #ffffcc;

}#menu li a:hover {color: #000000;background-color:#ffffff;

}