Ir ao conteúdo
  • Cadastre-se
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

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





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

×