HTML Estilos - CSS

CSS (Cascading Style Sheets) se utiliza para renderizar el estilo de las etiquetas de elementos HTML.

Pruébalo - Ejemplos

Este ejemplo demuestra cómo dar formato a HTML utilizando la información de estilo añadida en la sección <head>.

Este ejemplo demuestra cómo usar el atributo style para hacer un enlace sin subrayado.
Cómo usar el atributo style para crear un enlace sin subrayado.

Este ejemplo demuestra cómoLa etiqueta enlaza a una hoja de estilo externa.

Cómo usar CSS

CSS comenzó a usarse en HTML 4 y se introdujo para renderizar mejor los elementos HTML.

CSS se puede agregar a HTML de las siguientes maneras:

• Estilo en línea - Usar 'style' en elementos HTMLatributo
• Hoja de estilo interna - Usar <style> en la sección <head> del documento HTMLelementopara incluir CSS
• Referencia externa - Usar CSS externoarchivo

La mejor manera es mediante la referencia externa a un archivo CSS.

En el tutorial de HTML de este sitio, usamos estilos CSS en línea para presentar los ejemplos. Esto es para simplificar los ejemplos y que puedas editar el código en línea y ejecutar los ejemplos más fácilmente.

Puedes, a través delTutorial de CSSaprender más sobre CSS.

Estilos en línea

Cuando se necesita aplicar un estilo especial a un elemento individual, se puede usar el estilo en línea. La forma de usar el estilo en línea es emplear el atributo style en la etiqueta correspondiente. El atributo style puede contener cualquier propiedad CSS. El siguiente ejemplo muestra cómo cambiar el color y el margen izquierdo de un párrafo.

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

Para aprender más sobre estilos, visitaTutorial de CSS.

Ejemplo de estilo HTML - Color de fondo

La propiedad de color de fondo (background-color) define el color de fondo de un elemento:

Antes, la propiedad de color de fondo (background-color) se definía usando el atributo bgcolor.

Pruébalo: forma de configurar el fondo en HTML antiguo

Ejemplo de estilo HTML - Fuente, color de fuente, tamaño de fuente

Podemos usar las propiedades font-family (fuente), color (color) y font-size (tamaño de fuente) para definir el estilo de la fuente:

Ahora normalmente se utilizan las propiedades font-family (fuente), color (color) y font-size (tamaño de fuente) para definir el estilo del texto, en lugar de usar la etiqueta <font>.

Ejemplo de estilo HTML - Alineación de texto

Usa la propiedad text-align (alineación de texto) para especificar la alineación horizontal y vertical del texto:

La propiedad de alineación de texto text-align reemplaza a la antigua etiqueta <center>.

Pruébalo

Hoja de estilo interna

Cuando un solo archivo necesita un estilo especial, se puede usar una hoja de estilo interna. Puedes definir una hoja de estilo interna en la sección <head> mediante la etiqueta <style>:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

Hoja de estilo externa

Cuando los estilos necesitan aplicarse a muchas páginas, la hoja de estilo externa es la opción ideal. Con una hoja de estilo externa, puedes cambiar la apariencia de todo el sitio modificando un solo archivo.

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

Etiquetas de estilo HTML

Etiquetas y atributos obsoletos

En HTML 4, las etiquetas y atributos que originalmente soportaban la definición de estilos de elementos HTML quedaron obsoletos. Estas etiquetas no son compatibles con las nuevas versiones de HTML.

Las etiquetas desaconsejadas son: <font>, <center>, <strike>

Los atributos desaconsejados son: color y bgcolor.