Styles - CSS
CSS (Cascading Style Sheets) se utiliza para los elementos HTML de estilo.
¡Mira! Estilos y colores
Manipular texto
Los colores, las Cajas
y mucho más ...
Pruébelo usted mismo - Ejemplos
Utilización de estilos en HTML
Cómo añadir información de estilo dentro de la sección <head>.
Cómo añadir información de estilo dentro de la sección <head>.
Enlace que no está subrayado
Cómo hacer un vínculo que no está subrayado, con el atributo de estilo.
Cómo hacer un vínculo que no está subrayado, con el atributo de estilo.
Vinculación a una hoja de estilos externa
Cómo utilizar la etiqueta <link> vincular a una hoja de estilos externa.
Cómo utilizar la etiqueta <link> vincular a una hoja de estilos externa.
Aplicar estilos a HTML con CSS
CSS se introdujo junto con HTML 4, para proporcionar una mejor manera de estilizar elementos HTML.
CSS se puede añadir a HTML de las siguientes maneras:
- Inline - utilizando el estilo de atributo en los elementos HTML
- Interno - utilizando el <style> elemento en la sección <head>
- Externo - usando una CSS externa de archivos
La mejor forma de añadir CSS a HTML, es poner la sintaxis CSS en archivos CSS separados.
Sin embargo, en este tutorial HTML vamos a presentarles a CSS mediante el atributo de estilo. Esto se hace para simplificar los ejemplos. También hace que sea más fácil para que se modifique el código y probarlo usted mismo.
Usted puede aprender todo sobre CSS en nuestro Tutorial CSS .
Estilos en línea
Un estilo en línea se puede utilizar si un estilo único se va a aplicar a una sola ocurrencia de un elemento.
Para utilizar los estilos en línea, utilice el atributo de estilo en la etiqueta correspondiente. El atributo style puede contener cualquier propiedad CSS. El siguiente ejemplo muestra cómo cambiar el color del texto y el margen izquierdo de un párrafo:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
Para obtener más información sobre las hojas de estilo, visite nuestro tutorial CSS .
HTML Style Ejemplo - Color de fondo
La propiedad background-color define el color de fondo de un elemento:
Ejemplo
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
Pruebe usted mismo »
La propiedad background-color hace que el "viejo" bgcolor atributo obsoleto.
Estilo HTML Ejemplo - fuente, color y tamaño
La familia de la fuente, el color y las propiedades font-size define el tipo de letra, color y tamaño del texto de un elemento:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
Pruebe usted mismo »
Las fuentes de la familia, el color y las propiedades font-size hacen la vieja etiqueta <font> obsoleto.
HTML Style Ejemplo - Alineación de texto
La propiedad text-align especifica la alineación horizontal del texto en un elemento:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Pruebe usted mismo »
La propiedad text-align hace la vieja etiqueta <center> obsoleto.
Hoja de estilo interna
Una hoja de estilo interna se puede utilizar si un solo documento tiene un estilo único. Estilos internos se definen en la sección <head> de una página HTML, utilizando la etiqueta <style>, así:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
Hoja de estilos externa
Una hoja de estilos externa es ideal cuando se aplica el estilo a muchas páginas. Con una hoja de estilos externa, puede cambiar el aspecto de un sitio Web completo, cambiando un solo archivo. Cada página debe enlazar con la hoja de estilo con la etiqueta <link>. La etiqueta <link> va dentro de la sección <head>:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Estilo HTML Etiquetas
| Tag | Description |
|---|---|
| <style> | Defines style information for a document |
| <link> | Defines the relationship between a document and an external resource |
Tags y atributos desaprobados
En HTML 4, varias etiquetas y atributos fueron utilizados para los documentos de estilo. Estas etiquetas no son compatibles con las nuevas versiones de HTML.
Evite el uso de los elementos: <font>, <center> y <strike> y los atributos: color y bgcolor.
No hay comentarios:
Publicar un comentario