Usuário com melhor resposta
Herança em CSS

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; }
AbsMarlon Tiedt
www.sesmt.com.br
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
-
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
Todas as Respostas
-
-
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
Marlon Tiedt
www.sesmt.com.br -
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" -
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
-
-
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