texto - ¿Por qué el estilo*{display:*} está incluido en el cuerpo HTML?
parrafos en html ejemplos (1)
Es el estilo del elemento <head> y todo lo que contiene, incluido el elemento <style> el que reside su CSS, porque el CSS aparece como datos de caracteres dentro del elemento <style> . Por otro lado, un elemento <link> no tiene ningún contenido, sino que apunta a un recurso separado por completo, por lo que no hay nada dentro del elemento que se pueda mostrar.
La mayoría de los navegadores implementan <head> como display: none (y algunos propagan ese valor a todos los descendientes), que puede anular al seleccionarlos con un estilo de display . El resto de las propiedades aún se aplican a <head> y sus descendientes, independientemente de si haces esto, pero sin él, simplemente no se mostrarán en tu página, por lo que realmente no lo verás. Eso es todo lo que hay, no hay nada más especial sobre <head> o sus elementos relacionados.
En otras palabras, en lo que respecta a CSS, lo siguiente (sí, un elemento <style> con un atributo de style ...):
<style style="display: block; font-family: monospace">
p { color: red; }
</style>
No es diferente de esto:
<code style="display: block; font-family: monospace">
p { color: red; }
</code>
Cuando agrego este CSS en las etiquetas <style> :
* {
display:block;
}
Nunca se interpreta correctamente. En cambio, ¿qué veo? De alguna manera, todo dentro de <style> convierte en la parte del cuerpo html. P.ej:
* {
display:block;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>
Esto sucede en cualquier parte. Por primera vez, pensé que este es el problema con StackSnippets. (es decir, la demostración en vivo de Stack Overflow, la que he proporcionado anteriormente), pero luego verifiqué con el lápiz del código. Luego con jsfiddle. Luego seguí adelante e hice un archivo en mi servidor, dándole todo el contenido que inserté en el fragmento anterior.
El resultado es siempre el mismo. El CSS se incluye en el html, aunque se aplica. (la única solución es crear una hoja de estilo e incluirla usando <link> )
Lo más interesante, es que parece que solo ocurre con la display:* . Por ejemplo, los siguientes trabajos:
* {
color:green;
background:red;
border:2px solid orange;
border-radius:5px;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>
Pero una vez que puse los estilos de la última display:* fragmentos display:* , los estilos son, nuevamente, mágicamente incluidos en HTML.
* {
color:green;
background:red;
border:2px solid orange;
border-radius:5px;
display:inline-block;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>
¿Por que sucede?