Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Css 2

    Enviado por

    Manuel José Fernando
    0 visualizações4 páginas
    Este documento fornece instruções para formatar menus horizontais e verticais usando CSS. Inclui etapas como remover marcadores de itens de lista, definir propriedades como display, text-decoration e cores para criar a aparência desejada.

    Descrição original:

    Título original

    Css2

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Este documento fornece instruções para formatar menus horizontais e verticais usando CSS. Inclui etapas como remover marcadores de itens de lista, definir propriedades como display, text-decoration e cores para criar a aparência desejada.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    0 visualizações4 páginas

    Css 2

    Enviado por

    Manuel José Fernando
    Este documento fornece instruções para formatar menus horizontais e verticais usando CSS. Inclui etapas como remover marcadores de itens de lista, definir propriedades como display, text-decoration e cores para criar a aparência desejada.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 4

     

    CSS  4  
    Ficha  de  Exercícios:  Desenho  de  menus.  

    Comunicações  Digitais  e  Internet  


    Ciências  da  Comunicação,  U.Porto  2011/12  

    Material  baseado  nos  conteúdos  disponíveis  em  Listutorial  


    (http://css.maxdesign.com.au/listutorial).  

    CRIAR  NOVO  DOCUMENTO  HTML  


    Comece  por  criar  um  novo  documento  HTML  com  o  nome  css4.html.  

    Use  o  código  seguinte  como  base  para  este  documento.  

    <!DOCTYPE html>
    <html>

    <head>
    <title>Exercício CSS 4</title>
    </head>

    <body>

    <section class="menu1">
    <h2>Menu Horizontal</h2>
    <ul>
    <li><a href="#">Sobre a Empresa</a></li>
    <li><a href="#">Produtos</a></li>
    <li><a href="#">Parcerias</a></li>
    <li><a href="#">Contatos</a></li>
    </ul>
    </section>

    <section class="menu2">
    <h2>Menu Vertical</h2>
    <ul>
    <li><a href="#">Sobre a Empresa</a></li>
    <li><a href="#">Produtos</a></li>
    <li><a href="#">Parcerias</a></li>
    <li><a href="#">Contatos</a></li>
    </ul>
    </section>

    </body>
    </html>

    1/4  
     

    Reparar  no  uso  do  cardinal  (#)  para  simular  ligações.  

    Ver  num  navegador  web  o  documento  css4.html.  

    FORMATAÇÃO  DE  UM  MENU  HORIZONTAL  


    a) Crie  um  novo  documento  em  branco  num  editor  de  texto  simples  e  grave  este  documento  
    com  o  nome  menuhorizontal.css  na  mesma  pasta  onde  se  encontra  o  documento  css4.html.  

    b) Associe  o  documento  HTML  css4.html  ao  documento  menuhorizontal.css.  Para  tal,  adicione  o  
    elemento  link  (com  os  atributos  corretos)  ao  elemento  head  no  documento  css4.html.  

    c) Como  primeiro  passo,  vamos  remover  os  marcadores  associados  a  cada  item  da  lista.  Para  
    tal,  é  necessário  definir  uma  regra  que  se  aplique  apenas  à  lista  da  primeira  secção  e  que  
    altere  o  tipo  de  marcador  para  nenhum  (none).  O  código  CSS  desta  regra  é  o  seguinte:  

    section.menu1 ul {
    list-style-type: none;
    }

    d) A  apresentação  normal  de  listas  HTML  inclui,  por  omissão,  espaçamentos  à  esquerda.  Os  
    detalhes  de  cada  espaçamento  variam  de  navegador  para  navegador.  Para  definir  um  ponto  
    de  partida  seguro,  deve-­‐se  colocar  a  zero  a  margem  e  o  espaçamento  interno  da  lista.  Para  
    tal,  adicione  à  regra  anterior  estas  duas  alterações  à  margin  e  ao  padding.  

    margin: 0px;
    padding: 0px;

    Acompanhe  sempre  cada  uma  destas  alterações  no  documento  HTML.  

    e) Para  que  os  itens  da  lista  surjam  na  horizontal,  numa  única  linha,  é  necessário  alterar  a  
    propriedade  display  de  cada  item  (li)  para  o  valor  inline.  Crie  uma  nova  regra  para  conseguir  
    este  efeito.  

    section.menu1 li {
    display: inline;
    }

    f) O  passo  seguinte  consiste  na  remoção  do  sublinhado  de  cada  ligação  em  cada  item.  Para  tal,  
    basta  alterar  a  propriedade  text-­‐decoration  das  ligações  (a)  para  o  valor  none  com  a  seguinte  
    regra.  

    section.menu1 li a {
    text-decoration: none;
    }

    g) É  possível  aumentar  o  espaçamento  entre  os  diversos  itens  alterando  o  espaçamento  interno  
    esquerdo  e  direito  das  ligações.  Para  tal,  acrescente  as  duas  linhas  seguintes  à  regra  anterior.  

    padding-left: 4px;
    padding-right: 4px;

    h) Altere  a  regra  anterior  de  forma  a  que  as  ligações  tenham  texto  branco  sobre  fundo  preto.  

    2/4  
     

    i) Para  que  o  utilizador  tenha  uma  indicação  visual  associada  às  ligações,  vamos  definir  uma  
    cor  de  fundo  diferente  para  quando  o  rato  está  sobre  cada  ligação.  Para  tal,  criamos  a  
    seguinte  regra.  

    section.menu1 li a:hover {
    background-color: red;
    }

    j) Este  exemplo  permite  observar  como  se  pode  transformar  uma  lista  HTML  num  menu  
    horizontal.  Para  concluir,  introduza  três  alterações  ao  menu:  (1)  modifique  a  altura  da  caixa  
    de  cada  ligação,  (2)  aumente  o  espaçamento  entre  as  caixas  de  cada  ligação,  e  (3)  altere  a  cor  
    do  texto  para  azul  quando  o  rato  está  sobre  a  ligação.  

    FORMATAÇÃO  DE  UM  MENU  VERTICAL  


    a) Crie  um  novo  documento  em  branco  num  editor  de  texto  simples  e  grave  este  documento  
    com  o  nome  menuvertical.css  na  mesma  pasta  onde  se  encontra  o  documento  css4.html.  

    b) Associe  o  documento  HTML  css4.html  ao  documento  menuvertical.css.  Para  tal,  adicione  o  
    elemento  link  (com  os  atributos  corretos)  ao  elemento  head  no  documento  css4.html.  

    c) Tal  como  no  caso  anterior,  o  primeiro  passo  consiste  na  remoção  do  marcador  associado  a  
    cada  item  da  lista.  Crie  uma  nova  regra  para  remover  o  marcador  existente  por  omissão  nos  
    itens  da  segunda  lista.  

    d) Altere  a  regra  criada  no  ponto  anterior  de  forma  a  que  a  margem  (margin)  e  o  afastamento  
    interno  (padding)  da  lista  sejam  zero  (0px).  

    e) Altere  a  propriedade  display  das  ligações  para  block  com  a  seguinte  regra.  Esta  alteração  faz  
    com  que  as  ligações  sejam  apresentadas  visualmente  como  blocos  independentes.  

    section.menu2 li a {
    display: block;
    }

    f) Altere  a  cor  do  texto  das  ligações  para  branco  e  a  cor  de  fundo  para  preto.  

    g) Defina  uma  largura  (width)  fixa  para  as  ligações  da  lista,  por  exemplo  140px.  

    h) Altere  o  espaçamento  interno  de  cada  ligação  de  forma  a  que  no  topo  e  em  baixo  seja  de  2px  
    e  à  esquerda  e  à  direita  seja  de  4px.  

    i) Remova  o  sublinhado  das  ligações.  

    j) Defina  uma  cor  de  fundo  vermelha  para  as  ligações  para  quando  o  utilizador  está  com  o  rato  
    sobre  a  ligação.  

    k) Introduza  um  afastamento  entre  os  itens  da  lista.  Para  tal,  defina  uma  nova  regra  que  altere  a  
    margem  inferior  de  cada  item  da  lista  para  2px.  

    3/4  
     

    OUTROS  RECURSOS  
    Existem   diversos   recursos   disponíveis   na   web   sobre   desenho   de   menus   com   HTML   e   CSS.   Um  
    bom  ponto  de  partida  é  —  http://css.maxdesign.com.au/listamatic/.  

    .  

    4/4  

    Você também pode gostar