Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Css 3

    Enviado por

    Manuel José Fernando
    3 visualizações2 páginas

    Título original

    Css3

    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

    Direitos autorais:

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

    Css 3

    Enviado por

    Manuel José Fernando

    Direitos autorais:

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

    CSS

     3  
    Ficha  de  Exercícios:  Posicionamento  de  elementos  com  CSS.  

    Comunicações  Digitais  e  Internet  


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

    CRIAR  NOVO  DOCUMENTO  HTML  


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

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

    <!DOCTYPE html>

    <html>

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

    <body>

    <section class="a">
    <p>Primeiro parágrafo do documento.</p>
    <p>Segundo parágrafo do documento.</p>
    </section>

    <section class="b">
    <p>Terceiro parágrafo do documento.</p>
    <p>Quarto parágrafo do documento.</p>
    </section>

    <footer>
    <p>Quinto parágrafo do documento.</p>
    <p>Sexto parágrafo do documento.</p>
    </footer>

    </body>
    </html>
     

    Ver  num  navegador  web  o  documento  css3.html.  

     
    ALTERAR  POSICIONAMENTO  DOS  ELEMENTOS  
    a) Crie  um  novo  documento  em  branco  num  editor  de  texto  simples  e  grave  este  documento  
    com  o  nome  estilos3.css  na  mesma  pasta  onde  se  encontra  o  documento  css3.html.  

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

    c) Crie  novas  regras  CSS  no  documento  estilos3.css  de  forma  a  alterar  a  cor  do  texto  dos  
    primeiros  quatro  parágrafos  para  azul,  vermelho,  verde  e  laranja.  Notar  que,  para  manipular  
    isoladamente  cada  um  dos  parágrafos,  também  será  necessário  alterar  o  documento  HTML.  

    d) Crie  uma  nova  regra  de  forma  a  colocar  os  quatro  primeiros  parágrafos  com  o  fundo  a  
    cinzento  claro.  

    e) Altere  a  cor  de  fundo  dos  dois  últimos  parágrafos  para  azul  claro.  

    f) Altere  a  largura  de  cada  parágrafo  para  100px  e  defina  um  contorno  preto  de  1px.  

    g) Defina  um  contorno  de  1px  vermelho  para  todos  os  elementos  section  e  footer  usando  
    apenas  uma  regra  CSS.  

    h) Defina  uma  margem  de  topo  de  40px  para  o  elemento  footer.  

    i) Posicione  o  elemento  section  da  classe  b  no  canto  inferior  direito  do  documento,  com  uma  
    largura  de  100px  e  altura  de  200px.  

    j) Altere  a  posição  do  elemento  section  da  classe  a  para  o  canto  inferior  do  esquerdo  do  
    browser,  com  uma  largura  de  100px  e  altura  de  300px.  

    k) Altere  a  margem  esquerda  e  a  margem  direita  do  elemento  footer  para  200px.  

    l) Coloque  o  quinto  parágrafo  junto  ao  topo  esquerdo  em  relação  ao  browser.  

    m) Coloque  o  sexto  parágrafo  junto  ao  topo  direito  em  relação  ao  browser.  

    n) Coloque  o  segundo  parágrafo  junto  à  parte  inferior  do  elemento  section  da  classe  a.  

    o) Desloque  o  primeiro  parágrafo  50px  para  a  direita.  

    VALIDAR  O  DOCUMENTO  CSS  


    Use  o  serviço  de  validação  de  CSS  oferecido  pelo  W3C  para  verificar  o  documento  estilos2.css.  

    Se  forem  encontrados  erros,  corrija-­‐os  de  forma  a  que  no  final  o  documento  seja  válido.  

    .  

    Você também pode gostar