Tradicionalmente, puede agregar CSS de tres maneras:
<link rel="stylesheet" href="foo.css"><style> h1 { ... } en el elemento <head>style="..." en elementos específicos El CSS en línea tiene el inconveniente de que no puedo usar clases de CSS, que es algo que debo hacer. ¿Hay alguna manera de definir CSS interno (por ejemplo, un fragmento <style></style> en el elemento <body> ?
Esto sería mucho más fácil para mí porque podría crear un fragmento de HTML autónomo con un método en el código de mi servidor. Este tipo de método es necesario porque no controlo la sección <head> . Es propiedad de un producto comercial. Solo puedo insertar contenido dentro del <body> .
Ejemplo:
<div> <style> .myclass {...} </style> <div class="myclass">...</div> </div>Relacionado: https://htmx.org/essays/locality-of-behaviour/
He visto otros sitios web (como https://amazon.com ) donde parecen tener varias etiquetas de estilo dentro del <body> .
Hay una gran brecha entre la teoría y la práctica. Muchos sitios usan <style> en el cuerpo.
Los editores decidieron no hacerlo. Pero tal vez haya un cambio en el futuro: https://github.com/whatwg/html/issues/1605
Funcionará en html5, incluso si se considera inválido en html4.
Tengo un ejemplo de donde trabajo ahora.
Estamos agregando una presentación de diapositivas para algunos libros en un catálogo de biblioteca y debido a que esto se hace con un complemento, la única forma posible de diseñar esto es incluir un bloque <style> con el html, ya que este complemento no tiene y no debería tener acceso a <head> del CMS para el que está diseñado.
Sin embargo, esta solución es el último recurso debido a las limitaciones de cómo se construye el CMS y debe evitarse.
Bajo la premisa, no le importa el HTML no válido en relación con <style> dentro de <body> (que no es tan poco común), puede asignar un identificador único, es decir:
<style> .my-class-1 { color: gold; } </style> <div class="my-class-1">Fragment Content</div> <style> .my-class-2 { color: tomato; } </style> <div class="my-class-2">Fragment Content</div> <div class="my-fragment-1"> <style> .my-fragment-1 .my-class { color: teal; } </style> <div class="my-class">Fragment Content</div> </div> <div class="my-fragment-2"> <style> .my-fragment-2 .my-class { color: hotpink; } </style> <div class="my-class">Fragment Content</div> </div> <style id="my-style-1"> #my-style-1 + div { color: orangered; } </style> <div>Fragment Content</div> <style id="my-style-2"> #my-style-2 + div { color: indigo; } </style> <div>Fragment Content</div>¿No podría apuntar al elemento principal con Javascript e insertar un estilo mediante programación?
<script> var head = document.querySelector('head')[0]; var css = 'div { background: red; }', var style = document.createElement('style'); style.appendChild(document.createTextNode(css)); head.appendChild(style) ; </script>Por lo que puedo entender de la descripción que proporcionó, no tiene acceso al elemento <head>...</head> , pero puede editar el cuerpo. Además, desea usar clases CSS3, pero con CSS en línea, no puede.
No puedo encontrar una forma en HTML/CSS puro, por lo que le sugiero que use JQuery.
<script async src="https://cdn.statically.io/libs/jquery/3.6.0/jquery.min.js" /> <script>$('head').append('<style>/*Your styles here*/</style></script>');
Ahora, agregue clases a los elementos html y edite el contenido entre la etiqueta <style /> .
Además, coloque este script al final de <body> para que pueda evitar los posibles problemas extraños causados al colocar esto en el medio. XDD
Pero recuerda, esto cambiará el encabezado después de que el usuario haya cargado la página. Entonces, en teoría, los usuarios primero verán una página html fea sin estilos, luego se cargarán los estilos y verán la página con estilos.
Para obtener más explicaciones, consulte la documentación oficial: https://api.jquery.com/append/
la respuesta más simple a su pregunta es "Sí" y explicaré esto con varios ejemplos a continuación. Una etiqueta <style> funcionará donde sea que la coloques dentro de <head> o <body> .
Una etiqueta de estilo colocada en la etiqueta <body> técnicamente viola las reglas de sintaxis HTML, es sorprendentemente común en la práctica, incluso entre algunas corporaciones más grandes.
Hay varios métodos diferentes para incluir etiquetas <body> -level <style> en su proyecto.
<style> (el método estático) Si ya tiene escritos todos los estilos que necesita y no se necesitan piezas dinámicas, simplemente puede escribir esos estilos en una etiqueta <style> de forma estática e incluirlos en el código, como se ve en este ejemplo a continuación:
<html> <head></head> <body> <div class="custom-widget"> <h1>This is a title</h1> <p>This is some text.</p> <style> .custom-widget { display: block; padding: 20px; border: 5px double red; } .custom-widget h1 { text-transform: uppercase; } .custom-widget h1::first-letter { font-size: 150%; } .custom-widget p { font-style: italic; } </style> </div> </body> </html><style> como texto usando JavaScript Si necesita cargar los estilos en su etiqueta <style> dinámicamente y simplemente necesita estilos de texto sin formato, no necesitará cambiar mucho después de crearlos. Puede crear el bloque <style> y luego inyectar los estilos CSS como texto sin formato, como se ve en este ejemplo a continuación:
const counter = document.getElementById('counter'); let count = +counter.dataset.count; const customWidgetStyle = document.querySelector('.custom-widget style'), countdown = setInterval(() => { if (count--) { counter.innerText = `Importing CSS in ${count}…`; } else { clearInterval(countdown); counter.remove(); customWidgetStyle.innerHTML = ` .custom-widget { display: block; padding: 20px; border: 5px double red; } .custom-widget h1 { text-transform: uppercase; } .custom-widget h1::first-letter { font-size: 150%; } .custom-widget p { font-style: italic; } `; } }, 1000); <html> <head></head> <body> <div class="custom-widget"> <h1>This is a title</h1> <p>This is some text.</p> <style></style> </div> <span id="counter" data-count="3">Importing CSS in 3…</span> </body> </html><style> usando el método JavaScript CSSStyleSheet.insertRule() Si necesita aún más flexibilidad con la forma en que agrega sus estilos, puede usar CSSStyleSheet.insertRule() (Documentos de MDN ), que le permitirá agregar y administrar los estilos de manera más granular de forma dinámica. Esto puede ser excesivo para su necesidad específica, pero hay mucho poder, flexibilidad y control cuando se trabaja con el CSSOM.
Aquí hay un ejemplo de este método, en el que uso un ejemplo de función addStylesheetRules definido en la página de documentos de MDN para insertRule bajo el encabezado Ejemplos , aquí :
const addStylesheetRules = (rules, stylesheet) => { if (stylesheet === undefined) { const style = document.createElement('style'); stylesheet = style.sheet; document.head.appendChild(style); } for (let i = 0; i < rules.length; i++) { let j = 1, propStr = ''; rule = rules[i]; const selector = rule[0]; if (Array.isArray(rule[1][0])) { rule = rule[1]; j = 0; } for (let pl = rule.length; j < pl; j++) { const prop = rule[j]; propStr += prop[0] + ': ' + prop[1] + (prop[2] ? ' !important' : '') + ';\n'; } stylesheet.insertRule(selector + '{' + propStr + '}', stylesheet.cssRules.length); } } const customWidget = document.querySelector('.custom-widget'), customWidgetStyleTag = document.createElement('style'); customWidget.appendChild(customWidgetStyleTag); const customWidgetStylesheet = customWidgetStyleTag.sheet; addStylesheetRules([ ['.custom-widget', ['display', 'block'], ['padding', '20px'], ['border', '5px double red'] ], ['.custom-widget h1', ['text-transform', 'uppercase'] ], ['.custom-widget h1::first-letter', ['font-size', '150%'] ], ['.custom-widget p', ['font-style', 'italic'] ] ], customWidgetStylesheet); <html> <head></head> <body> <div class="custom-widget"> <h1>This is a title</h1> <p>This is some text.</p> </div> </body> </html>Avíseme si hay más contexto que pueda agregar para responder mejor a su pregunta.
Tu ejemplo debería funcionar. Trabajo con WordPress usando html personalizado donde todo el código personalizado va en una etiqueta <body> , y el estilo debería funcionar dentro de cada página (agregué más divs solo para mostrar un ejemplo de que una etiqueta de estilo puede contener clases para todos los divs dentro de un división):
<div> <style> .className { ... } .classNameTwo{ ... } .classNameThree{ ... } </style> <div class="className"></div> <div class="classNameTwo"> <div class="classNameThree"></div> </div> </div>