Analise abaixo o trecho de um documento HTML no qual foi emb...
<p style="color:blue;">Parágrafo azul</p>
Esse método de implementação de CSS é conhecido como:
Gabarito comentado
Confira o gabarito comentado por um dos nossos professores
Gabarito: A alternativa correta é a E - inline.
Para entender o porquê desta alternativa ser a correta, vamos falar sobre os diferentes métodos de implementação de CSS em documentos HTML. O CSS pode ser aplicado de três formas principais:
- Externo: quando o CSS é colocado em um arquivo separado e referenciado através da tag <link>.
- Interno (ou embedded): quando o CSS é incluído dentro de uma tag <style> no cabeçalho do documento HTML (<head>).
- Inline: quando o CSS é aplicado diretamente no elemento HTML, através do atributo style.
No fragmento de código apresentado na questão, o CSS está sendo aplicado diretamente aos elementos HTML usando o atributo style. Por exemplo, no trecho <p style="color:blue;">Parágrafo azul</p>, a propriedade CSS color é aplicada diretamente ao elemento <p> para mudar a cor do texto para azul. Isso caracteriza o uso de CSS inline, justificando a escolha da alternativa E.
É importante lembrar que, embora o uso de CSS inline seja útil para estilos rápidos e específicos, ele não é considerado uma boa prática para a gestão de estilos em um site inteiro, pois pode tornar a manutenção mais difícil e o código menos legível.
Clique para visualizar este gabarito
Visualize o gabarito desta questão clicando no botão abaixo
Comentários
Veja os comentários dos nossos alunos
Existem 3 tipos, inline, interno e externo. nessa questão a resposta é o inline.
https://www.hostinger.com.br/tutoriais/diferenca-entre-estilos-css#:~:text=Existem%20tr%C3%AAs%20tipos%20de%20CSS,estilo%20a%20uma%20%C3%BAnica%20p%C3%A1gina.
e-
inline é css direto nas tags html. tb pode estar no <head> em <style> e externo, por arquivo style.css
o seguinte html demonstra essa feature, com um loop em javascript para mostrar outras cores para o estilo de paragrafo:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-weight: bold;
}
</style>
</head>
<body>
<!-- Content-->
<script>
// JavaScript
var colors = ["blue", "beige", "green", "thistle", "orange", "navy", "fuchsia", "dodgerblue", "crimson", "rebeccapurple"];
function displayParagraphWithColor(index) {
var paragraph = document.createElement("p");
paragraph.style.color = colors[index];
paragraph.textContent = "Parágrafo " + colors[index];
document.body.appendChild(paragraph);
}
// DOM
document.addEventListener("DOMContentLoaded", function() {
for (var i = 0; i < colors.length; i++) {
displayParagraphWithColor(i);
}
});
</script>
</body>
</html>
Clique para visualizar este comentário
Visualize os comentários desta questão clicando no botão abaixo