Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Jackson Boss

CSS Códigos de CSS em conflito

Recommended Posts

Boa noite amigos do CDH, como estão? Comecei a estudar HTML5 e CSS a poucos dias, estou fazendo varios tutoriais que encontro na internet, criando sites testes e adicionando varios elementos para aprender mais, minha dúvida é a seguinte: Quero colocar um Pricing Table no meu site, procurei alguns modelos e reparei a seguinte coisa:

image.png.012b3b64ddf7cf56540059b48534176a.png

Esse é um exemplo de código CSS que tenho que colocar pro meu Pricing table funcionar corretamente, mas se eu colocar ele no .CSS do meu site, o body, section ,h1 2 3..., html e etc entram em conflito com os mesmos que eu ja tenho em meu site, o que eu faço nesse caso para poder colocar corretamente esse código sem interferir e estragar o layout do meu site?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Jackson Boss Olá.

 

Pelo que estou vendo na imagem, não parece ser referente ao "pricing table".

Tudo que tem ali é elementos de reset no CSS.

 

Você tem algumas opções para resolver isso, mas penso em duas delas:

  • Não colocar esta parte que conflita e você mesmo criar as regras CSS para sua tabela de preços;
  • Você pode colocar o !important nas regras CSS que você quer que seja a "oficial".

 

O código acima, também é parte do normalize.CSS que é um arquivo css reset para zerar os estados iniciais dos elementos.

Justamente para que possas desenvolver o CSS de forma mais limpa e que seja compatível.

 

Ademais, seria interessante você postar um exemplo de pricing table... ou até mesmo o seus códigos..  para ser analisado. 

  • Amei 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@DiF Oi DiF tudo bem? Realmente, alguns dos codigos CSS ali são de "demo" coisas pra outras finalidades, mas a questão continua a mesma, obrigado pelas suas dicas, a primeira consegue solucionar o problema, já a segunda eu não entendi muito bem, posso colocar "importante" apenas para o pricing list ou se eu colocar a outra em "importante" vai ter risco de mudar algo no layout do site? Se for a primeira opção, soluciona o problema também, vou testar quando chegar em casa, muito obrigado, vendo agora, são errinhos "básicos" que alguem estressado não consegue ver, hahaha, muito obrigado de novo ;)

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Jackson Boss

Boa noite, 

A questão sobre as dicas é o seguinte.

A primeira consiste em apenas criar uma regra para a tabela, sem usar aqueles resets.

Por exemplo:

/*Configuração  geral da Tabela*/
table { border-collapse: collapse; width: 100%; }

/*configuração do TH e TD*/
th, td { text-align: left; padding: 8px; }

/*
  Faz com que crie efeito zebra guiado pelo número ímpar
  Se quiser fazer pelo número par, troca o even por odd
*/
tr:nth-child(even){background-color: #f2f2f2}

/*Configuração da TH*/
th { background-color: #4CAF50; color: white; }

/*
  Insere o R$ na frente dos valores de preço, 
  excluíndo o primeiro TD de Estados
*/
table td:not(:first-child)::before { 
      content: "R$ ";
}

Exemplo online: https://jsfiddle.net/dife/qy4bj8qq/

 

Já a segunda sugestão, consiste em usar o atributo !important.   Este atributo faz com que a regra css sobrescreva outra regra existente. Em outras palavras, ele não segue a hierarquia e prevalece sobre todos os outros.

 

Exemplo:

HTML:

<div class="azul"></div>
<div></div>

 

CSS:

div{
  width: 100px;
  height:100px;
  background: red !important;
  display: inline-block;
}


.azul{
  background: blue;
}

Neste exemplo temos dois elementos DIV, onde um deles tem uma CLASS chamada azul. Esta classe define que a cor de fundo é azul.

Porém, ao executar, ambos elementos ficam vermelhos. Por que?

Porque o atributo !important foi declarado no elemento DIV.  Logo, aquela regra para a cor de fundo prevalecerá sobre todas as outras, mesmo que se elas tiverem outras cores definidas.

Exemplo online: https://jsfiddle.net/dife/cmcmLqa6/

 

PS: experimente retirar o !important dali do exemplo e clicar em "Run"!

:thumbsup:

  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×