CSS Folha de Estilo em CascataUnidade 4 Listas, Menus e Links
Curso: Auxiliar de Web Design
Carga horria: 30h/a
Professor Regis Pires Magalhes
[email protected]://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;
}