CSS 04 Listas Menus Links

CSS Folha de Estilo em Cascata
Unidade 4 Listas, Menus e Links

Curso: Auxiliar de Web Design
Carga horria: 30h/a
Professor Regis Pires Magalhes
regis@ifpi.edu.br
http://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
<html>
<head>
<style type="text/css">
ul {
list-style-image: url("seta.gif");
}
</style>
</head>
<body>
<ul>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
</body>
</html>
Valores vlidos:
none
URL: url("caminho/marcador.gif")
list-style-position - posio dos marcadores de lista
<html>
<head>
ul.inside { list-style-position: inside; }
ul.outside { list-style-position: outside; }
</style>
</head>
<body>
<ul class="inside">
<li>Este texto destina-se a demonstrar o valor:
"inside" dos marcadores de listas.</li>
<li>E aqui continuamos com mais texto para fixar o valor:
"inside" dosmarcadores de listas.</li>
</ul>
<ul class="outside">
<li>Este texto destina-se a demonstrar o valor:
"outside" dos marcadores de listas.</li>
<li>E aqui continuamos com mais texto para fixar o valor:
"outside" dos marcadores de listas.</li>
</ul>
</body>
</html>
Valores vlidos
outside: marcador fora do alinhamento do texto
inside: marcador alinhado com texto
list-style-type - os tipos de marcadores de lista
<html>
<head>
ul.none { list-style-type: none; }
ul.disc { list-style-type: disc; }
ul.circle { list-style-type: circle; }
ul.square { list-style-type: square; }
</style>
</head>
<body>
<ul class="none"><li>Item um</li><li>Item dois</li><li>Item tres</li></ul>
<ul class="disc"><li>Item um</li><li>Item dois</li><li>Item tres</li></ul>
<ul class="circle"><li>Item um</li><li>Item dois</li><li>Item tres</li>
</ul>
<ul class="square"><li>Item um</li><li>Item dois</li><li>Item tres</li>
</ul>
</body>
</html>
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:
<div id="menu">
<ul>
<li><a href="caminho/arquivo1.html">Home</a></li>
<li><a href="caminho/arquivo2.html">Produto A</a></li>
<li><a href="caminho/arquivo3.html">Produto B</a></li>
<li><a href="caminho/arquivo4.html">Servios</a></li>
<li><a href="caminho/arquivo5.html">Contacto</a></li>
</ul>
</div>
Construo de menus
1. 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 {
}
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
text-decoration:none;
}
a:hover {
color:#000;
background:#ff0;
}
Link que muda o tamanho da letra
no link hover
text-decoration: none;
}
a:hover {
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
<html>
<head>
a.classe1:link, a.classe1:visited { text-decoration: none }
a.classe1:hover {
color: #f00;
}
a.classe1:active { text-decoration: none }
a.classe2:link, a.classe2:visited {
text-decoration: underline overline
}
a.classe2:hover {
color: #0f0;
}
a.classe2:active { text-decoration: underline overline }
</style>
</head>
<body>
<a href="http://www.maujor.com" class="classe1">
ESTE O LINK DA classe1
</a>
<a href="http://www.maujor.com" class="classe2">
ESTE O LINK DA classe2
</a>
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;
}

CSS 04 Listas Menus Links

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

CSS 04 Listas Menus Links

Caricato da

Copyright:

Formati disponibili

CSS Folha de Estilo em Cascata

Unidade 4 Listas, Menus e Links

Potrebbero piacerti anche