html - style - lista de codigos css

Etiquetas<style> en línea vs. propiedades CSS en línea

Question

¿Cuál es el método preferido para establecer las propiedades de CSS?

Propiedades de estilo en línea:

<div style="width:20px;height:20px;background-color:#ffcc00;"></div>

Propiedades de estilo en etiquetas <style>...</style> :

<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>

Answer 1

Aquí hay un aspecto que podría marcar la diferencia:

Si cambia el estilo de un elemento en JavaScript, está afectando el estilo en línea. Si ya hay un estilo allí, lo sobrescribe permanentemente. Sin embargo, si el estilo se definió en una hoja externa o en una etiqueta <style> , al configurar la línea en "" restaura el estilo de esa fuente.

Answer 2

Depende.

El punto principal es evitar el código repetido.

Si el mismo código necesita ser reutilizado 2 veces o más, y debe estar sincronizado cuando cambie, use una hoja de estilo externa.

Si solo lo usa una vez, creo que en línea está bien.

Answer 3

Desde el punto de vista de la mantenibilidad, es mucho más simple administrar un elemento en un archivo, que administrar varios elementos en posiblemente varios archivos.

Separar su estilo le ayudará a hacer su vida mucho más fácil, especialmente cuando los deberes del trabajo se distribuyen entre diferentes personas. La reutilización y la portabilidad le ahorrarán mucho tiempo en el futuro.

Al usar un estilo en línea, eso anulará cualquier propiedad externa que se establezca.

Answer 4

Estoy de acuerdo con la opinión de la mayoría de que las hojas de estilo externas son el método preferido.

Sin embargo, aquí hay algunas excepciones prácticas:

• Imágenes de fondo dinámicas Las hojas de estilo CSS son archivos estáticos, por lo que debe usar un estilo en línea para agregar un estilo de background-image dinámico (desde una base de datos, CMS, etc.).

• Si un elemento necesita ocultarse cuando se carga la página, no es práctico usar una hoja de estilo externa, ya que siempre habrá un poco de retraso antes de que se procese la hoja de estilo y el elemento estará visible hasta que eso suceda. style="display: none;" es la mejor manera de lograr esto.

• Si una aplicación le dará al usuario un control fino sobre un valor de CSS particular, por ejemplo, el color del texto, entonces puede ser necesario agregar esto a los elementos de style línea o a los bloques dentro de la página <style></style> . Ej style="color:#{{ page.color }}" , o <style> p.themed { color: #{{ page.color }}; }</style> <style> p.themed { color: #{{ page.color }}; }</style>

Answer 5

Las reglas de estilo se pueden adjuntar usando:

• Archivos Externos
• Etiquetas de estilo en la página
• Atributo de estilo en línea

En general, prefiero usar hojas de estilo vinculadas porque:

• pueden ser almacenados en caché por los navegadores para el rendimiento; y
• son mucho más fáciles de mantener desde una perspectiva de desarrollo.

Sin embargo, su pregunta es preguntar específicamente sobre la etiqueta de style frente a los estilos en línea. Prefiere usar la etiqueta de style , en este caso, porque:

• proporciona una clara separación de marcado del estilo;
• produce un marcado HTML más limpio; y
• es más eficiente con los selectores para aplicar reglas a múltiples elementos en una página mejorando la administración y reduciendo el tamaño de la página.

Los elementos en línea solo afectan a su elemento respectivo.

Una diferencia importante entre la etiqueta de style y el atributo en línea es la especificidad. La especificidad determina cuándo un estilo prevalece sobre otro. Generalmente, los estilos en línea tienen una especificidad más alta.

Lee CSS: Specificity Wars para una mirada entretenida sobre este tema.

¡Espero que eso ayude!

Answer 6

Para responder a su pregunta directa: ninguno de estos es el método preferido. Use un archivo separado.

Los estilos en línea solo se deben usar como último recurso o se deben configurar mediante un código JavaScript. Los estilos en línea tienen el más alto nivel de especificidad, por lo tanto, anule sus hojas de estilo reales. Esto puede dificultar el control (¡debe evitar !important también por la misma razón).

No se recomienda un bloque de <style> incrustado porque se pierde la capacidad del navegador de almacenar en caché la hoja de estilo en varias páginas de su sitio.

En resumen, siempre que sea posible, debe poner sus estilos en un archivo CSS separado.

Answer 7

Puede configurar CSS utilizando tres formas diferentes, como se menciona a continuación:

1.External style sheet
2.Internal style sheet
3.Inline style

La forma preferida / ideal de configurar el estilo css es utilizar como hojas de estilo externas cuando el estilo se aplica a muchas páginas. Con una hoja de estilo externa, puede cambiar el aspecto de un sitio web completo al cambiar un archivo.

el uso de la muestra puede ser:

<head>
    <link rel="stylesheet" type="text/css" href="your_css_file_name.css">
</head>

Si desea aplicar un estilo único a un solo documento, puede usar la hoja de estilo interna.

No utilice hojas de estilo en línea, ya que mezcla el contenido con la presentación y pierde muchas ventajas.

Answer 8

Puede haber diferentes razones para elegir una forma sobre la otra.

• Si necesita especificar css a elementos que se generan mediante programación (por ejemplo, modificar css para imágenes de diferentes tamaños), puede ser más fácil de usar utilizar css en línea.
• Si alguna CSS es válida solo para la página actual, debería utilizar la etiqueta de script en lugar de un archivo .css por separado. Es bueno si el navegador no tiene que hacer demasiadas solicitudes http.

De lo contrario, como se dijo, es mejor usar un archivo css por separado.

Answer 9

Siempre que sea posible, es preferible usar la clase .myclass{} y el identificador #myclass{} , por lo tanto, utilice un archivo css dedicado o una etiqueta <style></style> dentro de un html . El estilo en línea es bueno para cambiar la opción css dinámicamente con javascript.