Desafio 6, consegui fazer…. Estou tão feliz, obrigada professor Guanabara

Home › Fóruns › Desenvolvimento Web 2020 (HTML5+CSS3) › Desafio 6, consegui fazer…. Estou tão feliz, obrigada professor Guanabara

Marcado: 

Visualizando 3 respostas da discussão
  • Autor
    Posts
    • 2 de março de 2021 às 10:16 #62014
      MARIA APARECIDA DA SILVA RAMOS
      Participante

      <!DOCTYPE html>
      <html lang=”pt-br”>
      <head>
      <meta charset=”UTF-8″>
      <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
      <title>Desafios das Tags</title>
      <style>
      [data-title]:hover:after {
      opacity: 1;
      transition: all 0.1s ease 0.5s;
      visibility: visible;
      }
      [data-title]:after {
      content: attr(data-title);
      position: absolute;
      bottom: -1.6em;
      left: 100%;
      padding: 4px 4px 4px 8px;
      color: #222;
      white-space: nowrap;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: 0px 0px 4px #222;
      -webkit-box-shadow: 0px 0px 4px #222;
      box-shadow: 0px 0px 4px #222;
      background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
      background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);
      background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
      background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);
      background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
      opacity: 0;
      z-index: 99999;
      visibility: hidden;
      }
      [data-title] {
      position: relative;
      }

      abbr{
      border-bottom: .1em dotted;
      /*cursor: help;*/
      border-width:1px;
      color: blue;
      }
      </style>

      </head>
      <body>
      <h1>Tags em HTML</h1>
      <h4>Em Html5, podemos inserir os elementos da linha a seguir. Passe o mouse sobre os termos para descobrir qual a tag deverá utilizar em cada caso.</h4>

      <ul type=”square”>

    • <abbr data-title= “<p> </p>”>Parágrafo</abbr>
    • <abbr data-title= “de: <h1> até: <h6>”>Títulos</abbr>
    • <abbr data-title= “Exemplo de Foto“>Imagens</abbr>
    • <abbr data-title= “<abbr title=’Estados Unidos da America’>EUA</abbr>”>Abreviações</abbr>
    • <abbr data-title= “ “>Código-fonte</abbr>
    • <abbr data-title= “

      “>Listas numeradas</abbr>

    • <abbr data-title= “

      “>Listas com demarcadores</abbr>

      • </body>
      </html>

  • 2 de março de 2021 às 20:56 #62057
    Tutora Mayla
    Mestre

    Parabéns, Maria! Continue se dedicando e ficará cada vez melhor!
    Se surgir alguma dúvida basta entrar em contato conosco que ajudaremos.

  • 28 de agosto de 2022 às 20:47 #100289
    Bruno Miguel Bárbara Afonso Condado
    Participante

    Boas, resolvi o problema com as soluções dadas até a aula 10 do módulo 1. Tentei colocar a cor de fundo da caixa de texto em cinza ou preto, mas não consegui. Tem como mudar usando os recursos <abbr>. Tentei atribuir o background pelo css, mas não tive muito sucesso. O exemplo de sucesso que a colega postou está recheado de atributos css, que ainda não estudei, irei chegar lá. A minha questão é se tem como eu atingir o efeito de background preto, texto branco de forma mais simples?

    <!DOCTYPE html>
    <html lang=”pt-br”>
    <head>
    <meta charset=”UTF-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <link rel=”shortcut icon” href=”CeV.ico” type=”image/x-icon”>
    <title>Tags HTML</title>

    </head>
    <body>
    <h1>Tags HTML</h1>
    <p>Em HTML5, podemos inserir os elementos da lista a seguir. Passe o mouse sobre os termos para descobrir qual tag deverá utilizar em cada caso.</p>
    <ul type=”square”>

  • <abbr title=”Use a tag <p>”>Parágrafos</abbr>
  • <abbr title=”Use as tags <h1>…<h6>”>Títulos</abbr>
  • <abbr title=”Use a tag “>Imagens</abbr>
  • <abbr title=”Use a tag <abbr>”>Abreviações</abbr>
  • <abbr title=”Use a tag ">Códigos-fonte</abbr>
  • <abbr title="Use as tags
      ...

    1. ">Listas númeradas</abbr>
    2. <abbr title="Use as tags
        ...

      • ">Listas com demarcadores</abbr>

      </body>
      </html>

  • 2 de setembro de 2022 às 09:47 #100543
    Tutora Jessica
    Moderador

    Ola Bruno,
    Você pode fazer da seguinte forma, exemplo:

    <p>Estilizando a tag <abbr style="background-color: #000; color: #fff;" title="Elemento de Abreviação HTML">abbr</abbr></p>

    No caso, você pode ir trocando a cor dentro do background-color.

  • Autor
    Posts
    • Visualizando 3 respostas da discussão
    • Você deve fazer login para responder a este tópico.