Recientemente comencé a usar NetBeans IDE (6.9.1) y lo he usado para agregar una hoja de estilo a mi sitio en progreso.¿Qué es el elemento css/html `root`?
Para mi sorpresa, un elemento se añadió de forma automática:
root {
display: block;
}
Mirando a su alrededor, que podría encontrar alguna información sobre la pseudo-clase :root pero nada sobre el elemento root sí.
¿Qué es el elemento root y tiene algún uso?
No hay ningún elemento llamado raíz en HTML. El elemento html en sí mismo es "el elemento raíz" (que es el término dado al elemento que es el ancestro de todos los demás elementos en el documento), pero esto se correspondería con html { }.
Sin embargo, vea the :root pseudo-class (con dos puntos).
A partir de aquí: http://www.quirksmode.org/css/root.html
El: root pseudo-elemento selecciona el raíz de todos los bloques en la página, es decir. el bloque que contiene inicial. En HTML esto es obviamente el elemento
<html>hoja de estilo de la prueba:
:root {
background-color: #6374AB;
padding: 50px;
}
Si el: root selector funciona las columnas izquierda y derecha de la página son de color azul, y la blanco la columna del medio se compensa con 50 píxeles.
root es un marcador de posición para cualquier elemento en la plantilla de la hoja de estilo de NetBeans IDE. Es como una variable ficticia en cálculo. Coloque el cursor en y: en el root { display: block; } delete y: y escriba y. IDE aparece en la ventana de instrucciones que brinda información valiosa. Conducen a tal significado para la raíz como solo una variable ficticia. Los ejemplos son em {display: inline; } Además, raíz es el punto donde comienza, el antepasado más profundo del árbol html con ramas y hojas. Así que al principio tienes un cuadro por defecto y todas las ramas y hojas siguen ese valor predeterminado a menos que cambies su visualización predeterminada, cuando ocurra, a otros valores como, por ejemplo, en línea.
El elemento :root es el elemento que no tiene padres, así que supongo que el único elemento raíz en HTML es el elemento <html> .. Así que cuando se utiliza el selector de :root de estilo, que será el estilo de todo el documento.
(Encontré más información aquí: http://webdesign.about.com/cs/css/qt/tipcsschild.htm y aquí: http://www.w3schools.com/cssref/sel_root.asp).
Existe una diferencia entre root y html, la pseudoclase raíz es una entidad CSS3 y no afecta a navegadores antiguos (MSIE 8 o inferior, Opera 9.4 o menos)
html /* for all web browsers */
{
color:red;
}
Tienes que poner dos puntos antes de la palabra raíz de la siguiente manera ...
:root /* for CSS3 web browsers: Chrome, Firefox, MSIE 9+, Safari, Opera 9.5+ */
{
color:blue;
}
Si ha utilizado estas dos líneas de CSS, versión MSIE 8 o menos (o MSIE 9+ cuando se ejecuta en modo compatibilidad, lo que hace que MSIE 7) muestre texto rojo, la mayoría de los otros navegadores mostrarán texto azul.
Documentación y especificaciones de 'raíz' se pueden encontrar en el Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS/:root
por si alguien encuentra esta vieja pregunta y las necesidades de información, :root se utiliza a menudo en los ejemplos de declarar CSS Propiedades personalizadas o "variables" que están disponibles en todo el documento, por ejemplo:
:root {
--darkGreen: #051;
--myPink: #fce;
}
section {
color: var(--darkGreen);
background: var(--myPink);
}
article h3 {
color: var(--darkGreen);
}
Sin embargo, cualquier elemento se puede usar como el selector para variables CSS (no solo :root) así que html o body también permitirán que cualquier elemento de la página acceda a ellos. Si alguien tiene una buena razón para usar :root, me gustaría saberlo.
Gracias, eso es lo que he encontrado, así, pero me preguntaba acerca de la 'elemento root' que NetBeans insertados, no el pseudo-elemento. – jeroen
Dado que no existe dicha etiqueta html, y no parece estar documentada en ningún lugar donde pueda encontrarla, voy a adivinar que se trata de un código de muestra para mostrarle cómo se supone que css busca novatos. Todo lo que puedo decirle es que definitivamente está en la plantilla, y puede editar la plantilla usted mismo si no le gusta en "herramientas - plantillas" y luego vaya a la carpeta "Web". No lo consideraría un "error", ya que obviamente es intencional. Más como una "característica inútil indocumentada". – David
Supongo que tienes razón, no es realmente un error; Cambié la plantilla para no volver a verla. – jeroen