F�rum Propriedade no CSS, com ou sem aspas? #516483

12/04/2015

Funciona das duas formas e nos navegadores: chrome, firefox e ie, mas n�o existe diferen�a nas duas formas ou a forma correta?

com aspas


.fundo_madeira {
	background:url("imagens/fundo.png");
}

sem aspas


.fundo_madeira {
	background:url("imagens/fundo.png);
}

a diferen�a � que no notepad++ aparece sublinhado em vermelho com as aspas.

Gabriela Monte

Curtir t�pico

+ 0

Responder

Post mais votado

13/04/2015

Bom Dia,

Pode at� n�o parecer mas na realidade existe sim regras de boas praticas tamb�m para CSS, regras essas que ir�o auxiliar para padronizar seus estilos de c�digo.
A sintaxe correta do CSS �:

seletor { propriedade:valor; }
// O ponto e v�rgula � facultativo quando existir apenas propriedade, mas como boa pr�tica o ideal 
//e sempre acrescentar o " ; " ap�s finalizar o valor de sua sua propriedade.

Quando houver mais de uma propriedade a codifica��o dever� seguir a seguinte estrutura:


.btn.btn-destaque {
	border: none;
	border-color: transparent;
	background-color: #E6E7E8;
	*background-color: #E6E7E8;
	background-image: -moz-linear-gradient(top, #FFF, #E6E7E8);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#E6E7E8));
	background-image: -webkit-linear-gradient(top, #FFF, #E6E7E8);
	background-image: -o-linear-gradient(top, #FFF, #E6E7E8);
	background-image: linear-gradient(to bottom, #FFF, #E6E7E8);
}

// Desta forma o c�digo fica mais leg�vel e de f�cil entendimento.

Mas ele pode ser escrito tamb�m seguindo a estrutura abaixo:

.btn.btn-destaque {border: none; border-color: transparent; background-color: #E6E7E8; *background-color: #E6E7E8; background-image: -moz-linear-gradient(top, #FFF, #E6E7E8); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#E6E7E8)); background-image: -webkit-linear-gradient(top, #FFF, #E6E7E8); 	background-image: -o-linear-gradient(top, #FFF, #E6E7E8); background-image: linear-gradient(to bottom, #FFF, #E6E7E8);
}

// Por�m desta forma o c�digo fica mais "complicado" e ruim de se entender e dar algum tipo de manuten��o, 
// sendo uma boa pr�tica aplicar o estilo de formata��o, linha a linha para cada propriedade.

Se voc� tiver valor composto no valor da propriedade o mesmo devera ser escrito entre " " ou ' ':

 @font-face 
      {
	font-family: 'Poiret One';
	font-style: normal;
	font-weight: 400;
      }

 @font-face 
      {
	font-family: "Poiret One";
	font-style: normal;
	font-weight: 400;
      }

Paulo Gualter

Responder

Gostei + 1

Mais Posts

13/04/2015

Gabriela Monte

N�o conhecia algumas dessas dicas, obrigada, apesar de aparecer sublinhado em vermelho est� correto!

Responder

Gostei + 0

13/04/2015

Jothaz

N�o conhecia algumas dessas dicas, obrigada, apesar de aparecer sublinhado em vermelho est� correto!

O orginal:

.fundo_madeira {
    background:url("imagens/fundo.png);
}

Esta errado.

O correto � usar como o Paulo destacou:

.fundo_madeira {
    background:url("imagens/fundo.png");
}

.fundo_madeira {
    background:url('imagens/fundo.png');
}

Pode at� ser que renderize nos browsers, mas o padr�o correto � o acima.

Responder

Gostei + 0

13/04/2015

Gabriela Monte

Eu errei Jothaz, mas realmente fica sublinhado em vermelho com as aspas fechadas.

Responder

Gostei + 0