Inicio
Software
Programación
HTML Programación - PHP (ini) Programación - PHP POO Programación - PHP / HTML SQL Java
Hardware
Desarrollos
Quién soy Mapa del sitio

HTML - 14ta Colores y CSS

Imprimir
Categoría: HTML
Escrito por Ch4rl1X Visitas: 1211

Atributos de color. Como venimos viendo en los ejemplos un atributo es una característica que pueden tener las etiquetas:

Veamos un ejemplo de como aplicar atributos al cuerpo de una página:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ES">
<head>

<title>Colores</title>
<meta name="description" content="Como usar los colores correctos y aplicarlos.">
<meta name="keywords" content="Color, colores, RGB">
<meta name="languaje" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body text="#00FF00" bgcolor="#000000" link="#FFFF40" vlink="#4040FF" alink="#FFFFFF">

<a href="http://www.charlesweb.com.ar/">Acá vamos a ver cambiado el color del enlace</a>

</body>
</html>

Resultado->Click Aquí

Insertamos las propiedades en la etiqueta del cuerpo y luego creamos un hipervínculo para apuntarlo.

Existe otra forma de darle atributos a nuestro contenido HTML y se trata de las Hojas de Estilo en Cascada o CSS. Sin ir a definiciones más complejas para el significado, básicamento se usan las etiquetas definidas en nuestro HTML para darle formato. Existen 2 tipos las hojas de estilo, interna y externa. Veamos unos ejemplos

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ES">
<head>

<title>Hojas de estilos css</title>
<meta name="description" content="Como integrar hojas de éstilo a nuestra web.">
<meta name="keywords" content="Estilos, estilo, color, fuente, ancho, alto, largo">
<meta name="languaje" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

 h2 { color: blue; font-family: Arial; }
 p  { color: orange; font-family: Verdana; }
 
</style>

</head>

<body>

<h2>Éste es el título de nuestro documento CSS.</h2>

<p>Aquí está la información enmnarcada en un párrafo</p>

</body>
</html>

En el anterior se ve como haciendo referencia a la etiqueta se indica su propiedad y valor dándole el formato deseado. La idea de CSS es que podamos centralizar todo el código de nuestra página en un archivo de estilos por separado. Sólo vamos a usar el código de nuestro CSS internamente cuando enviemos un correo electrónico con formato CSS; ya que la mayoría de los clientes de correo electrónico no soportan externos.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ES">
<head>

<title>Hojas de estilos css</title>
<meta name="description" content="Como integrar hojas de éstilo a nuestra web.">
<meta name="keywords" content="Estilos, estilo, color, fuente, ancho, alto, largo">
<meta name="languaje" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

 h2 { color: blue; font-family: Arial; }
 p  { color: orange; font-family: Verdana; }
 
</style>

</head>

<body>

<h2>Éste es el título de nuestro documento CSS.</h2>

<p>Aquí está la información enmnarcada en un párrafo</p>

</body>
</html>

Resultado->Click Aquí.

Veamos como se aplica a un HTML con un CSS externo.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ES">
<head>

<title>Hojas de estilos css en otro documento</title>
<meta name="description" content="Como integrar hojas de éstilo a nuestra web.">
<meta name="keywords" content="Estilos, estilo, color, fuente, ancho, alto, largo, documento">
<meta name="languaje" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="/estilo.css" media="screen"/>

</head>

<body>

<h1>Éste es el título de nuestro documento CSS.</h1>

<p>Aquí está la información enmnarcada en un párrafo</p>

</body>
</html>

La etiqueta <link rel> es la que nos dice en donde se va a encontrar nuestra hoja de estilos.

Hoja de Estilos:

<style type="text/css">

 h1 { font-family: Verdana; font-size: Large; }
 p  { color: red; font-family: Verdana; font-size: Small; }
</style>

Resultado->Click Aquí.

Aquí vemos que no es muy diferente a lo aplicado con CSS interno, levantamos la etiqueta <style> indicamos la etiqueta a la que se le quiera modificar su propiedad o valor y listo :) .

Hasta aquí con éste tema que se puede extender muchísimo más, pero lo importante es conocer la herramienta después cada uno podrá ir "especializándose" en su uso.

Saludos, espero que sirva, Ch4rl1X!