none
Herança em CSS RRS feed

 > 

  • Pergunta

  • Question
    Entrar para Votar
    0
    Entrar para Votar
    Olá, estou com uma dúvida sobre CSS.

    Tenho o css abaixo. Quais seriam as diferença de em fazer entre a implementação deles?

    .element 
{
  width: 310px;
  height: 110px;
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #888;
  color: #222;
  -webkit-border-top-right-radius: 1.2em;
  -moz-border-radius-topright: 1.2em;
  border-top-right-radius: 1.2em;
}

.element.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }

.element .symbol {
  left: 0.2em;
  top: 0.4em;
  font-size: 3.8em;
  line-height: 1.0em;
  color: #FFF;
}

.element.large .symbol {
  font-size: 4.5em;
}

.element.fake .symbol {
  color: #000;
}

    Abs

    Marlon Tiedt
    www.sesmt.com.br

    segunda-feira, 23 de julho de 2012 19:27
    |

Respostas

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Marlon Bom dia

    Sem dúvida você esta indo bem, se você for utilizar este conhecimento para fazer sites aberto ao publico não esqueça de estudar tambem o HTML e utilizar os próprios elementos do html em seu CSS.

    Bruno Viegas | Desenvolvedor Web | Desenvolvedor Dynamics CRM

    • Marcado como Resposta Marlon Tiedt quarta-feira, 8 de agosto de 2012 16:14
    terça-feira, 24 de julho de 2012 11:17
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Amigo,

    Hoje não existe uma nomenclatura padrão no CSS, isso deve partir de você e sua necessidade. Eu costumo utilizar algo simples, exemplo:

    - Se eu tenho uma tela de clientes com um DIV e um UL eu faço o seguinte:

    <style>
div.clientes{}
div.clientes p{}
div.clientes strong{}
div.clientes ul.lista-usuario{}
div.clientes ul.lista-usuario li{}
</style>

    E por ai vai...pq eu faço isso bem detalhado? Pq várias pessoas podem trabalhar no mesmo projeto e para não ficar criando coisas sem necessidade é só ler.

    Espero ter ajudado e boa sorte!

    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    • Marcado como Resposta Marlon Tiedt quarta-feira, 8 de agosto de 2012 16:14
    quarta-feira, 25 de julho de 2012 12:47
    |

Todas as Respostas

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Marlon Boa tarde

    Poderia explicar melhor a sua duvida?

    Bruno Viegas | Desenvolvedor Web | Desenvolvedor Dynamics CRM

    segunda-feira, 23 de julho de 2012 19:32
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Sim, qual seria a regra de implementação disto. Como o CSS irá entender.
    Fiz um exemplo simples, e vi como funciona, mas este modo de implementação é o mundo real? É uma boa prática?

    Abaixo meu html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Minha primeira página CSS</title>
  
  <style type="text/css">
    .element 
    {
      width: 310px;
      height: 110px;
      margin: 5px;
      float: left;
      overflow: hidden;
      position: relative;
      background: #888;
      color: #222;
      -webkit-border-top-right-radius: 1.2em;
      -moz-border-radius-topright: 1.2em;
      border-top-right-radius: 1.2em;      
    }

    .element.alkali { background: #F00; background: hsl(   0, 100%, 50%); }

    .element .symbol {
      left: 0.2em;
      top: 0.4em;
      font-size: 3.8em;
      line-height: 1.0em;
      color: #babaca;
    }

    .element.large .symbol {
      font-size: 4.5em;
      color : blue;
    }
    
    .element.fake .symbol {
      color: red;
    }  
  </style>
  
</head>

<body>
  <div class="element">Somente Elemento</div>
  <div class="element alkali">element alkali</div>
  <div class="alkali">alkali</div>
  <div class="symbol">symbol</div>
  <div class="element">
    <div class="symbol">symbol</div>
  </div>
  <div class="element large"><div class="symbol">e.l.symbol</div></div>
  <div class="element fake"><div class="symbol">symbol fake</div></div>
  <div class="element fake">Somente Fake</div>
  <div class="fake">Fake</div>


</body>
</html>

    Html funcionando: Teste

    Abs

    Marlon Tiedt
    www.sesmt.com.br

    segunda-feira, 23 de julho de 2012 19:54
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Amigo,

    Você está no caminho certo...o seu código está próximo do que você vai encontrar no mundo real. Lógico que no dia-a-dia tudo é muito pior e mais extenso, mas para começar você está indo bem.

    Eu quando comecei a trabalhar com HTML + CSS + JQuery eu sai abrindo o CSS de sites que eu achava legal para entender e assim fui aprendendo.

    Esse site http://www.maujor.com tem um conteúdo muito bom sobre CSS me ajudo bastante!

    Não se esqueça o GOOGLE é o seu melhor amigo no momento de aflição!

    Boa sorte!

    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    segunda-feira, 23 de julho de 2012 20:14
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Marlon Bom dia

    Sem dúvida você esta indo bem, se você for utilizar este conhecimento para fazer sites aberto ao publico não esqueça de estudar tambem o HTML e utilizar os próprios elementos do html em seu CSS.

    Bruno Viegas | Desenvolvedor Web | Desenvolvedor Dynamics CRM

    • Marcado como Resposta Marlon Tiedt quarta-feira, 8 de agosto de 2012 16:14
    terça-feira, 24 de julho de 2012 11:17
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    Valeu pessoal.

    Mas qual a nomenclatura que se dá a essa herança do CSS que postei acima?

    Abs

    Marlon Tiedt
    www.sesmt.com.br

    terça-feira, 24 de julho de 2012 14:51
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Amigo,

    Hoje não existe uma nomenclatura padrão no CSS, isso deve partir de você e sua necessidade. Eu costumo utilizar algo simples, exemplo:

    - Se eu tenho uma tela de clientes com um DIV e um UL eu faço o seguinte:

    <style>
div.clientes{}
div.clientes p{}
div.clientes strong{}
div.clientes ul.lista-usuario{}
div.clientes ul.lista-usuario li{}
</style>

    E por ai vai...pq eu faço isso bem detalhado? Pq várias pessoas podem trabalhar no mesmo projeto e para não ficar criando coisas sem necessidade é só ler.

    Espero ter ajudado e boa sorte!

    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    • Marcado como Resposta Marlon Tiedt quarta-feira, 8 de agosto de 2012 16:14
    quarta-feira, 25 de julho de 2012 12:47
    |