none
Herança em CSS RRS feed

  • Pergunta

  • 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

  • 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
  • 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

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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