1
resposta

Qual a diferença entre propriedade e atributo no HTML/CSS?

Boa noite! Atributos e propriedades ainda me confundem um pouco, qual é a diferença entre eles e como diferenciar um do outro?

Aguardo um retorno e agradeço desde já a ajuda.

1 resposta

Olá Luana, tudo bem?

No HTML não existem exatamente propriedades, apenas os atributos. Esses atributos HTML normalmente são escritos no formato nome="valor". Por exemplo, as tags img tem o atributo src="local da imagem.extensão". Ah, se você tiver curiosidade, tem uma documentação da w3 Schools que tem uma lista bem legal dos atributos que podemos usar, em quais tags e o que eles fazem, tá nesse link.

No caso do CSS, eu não entendi muito bem a sua dúvida, então vou tentar ajudar rsrs. Em arquivos CSS usualmente escolhemos seletores, que podem ser tags, classes ou IDs para estilizarmos. Esses seletores receberão sim algumas propriedades, conforme listadas nesse link, que receberão valores de acordo com a escolha do desenvolvedor.

No entanto, o CSS também tem seletores de atributos, que irão deixar a seleção dos estilos ainda mais precisas, sem necessariamente ter o uso de classes ou IDs, conforme listadas nesse tutorial da w3. Em resumo, você pode:

/* Seleciona todas as tags âncora com o atributo desejado */
a[target] {
  background-color: yellow;
}

/* Seleciona todas as tags âncora com o atributo target="_blank", onde você pode escolher qualquer outro atributo */
a[target="_blank"] {
  background-color: yellow;
}

/* 
Seleciona todas as tags com o atributo title específico de "flower" (cuidado, se você usar o title como "red-flower" esse seletor não irá funcionar, ele aceita apenas valores sem o hífen (-)) 
*/
[title~="flower"] {
  background-color: yellow;
}

/* Mesma coisa do anterior, porém aceita receber valores com o hífen */
[title|="red-flower"] {
  background-color: yellow;
}

/* Seleciona elementos cujos valores comecem com "top" (uma mão na roda quando vc coloca várias classes em uma tag, por exemplo) */
[class^="top"] {
  background: yellow;
}

/* Seleciona elementos cujos valores terminem com "test" (uma mão na roda quando vc coloca várias classes em uma tag, por exemplo) */
[class$="test"] {
  background: yellow;
}

/* 
Seleciona elementos que possuam o valor passado (não precisa ser a palavra inteira, por exemplo, caso o valor da class fosse 'Marvel' ela seria selecionada)
*/
[class*="vel"] {
  background: yellow;
}

Eu ainda estou aprendendo sobre, assim como você rsrsrs... não tenho todas as respostas mas espero que possa ter ajudado!

Bons estudos!