Colores CSS

CSS Color (RGB)

Los colores en CSS se muestran utilizando un nombre de color predefinido o una combinación de rojo, verde y azul..Los valores de color RGB se puede especificar en porcentaje decimal, hexadecimal o Usando este método, más de 16 millones de colores diferentes se pueden obtener.

Ejemplo:

<div style="background-color:

  rgb(255,0,0);">

</div>

La siguiente tabla muestra algunos de los nombres de los colores más comunes y sus equivalentes hexadecimales. Estos nombres de colores son reconocidos por el W3C como "web estándar".

Color	Name	Hex
	black	#000000
	navy	#000080
	blue	#0000ff
	green	#008000
	teal	#008080
	lime	#00ff00
	aqua	#00ffff
	maroon	#800000
	purple	#800080
	olive	#808000
	gray	#808080
	silver	#c0c0c0
	red	#ff0000
	fuchsia	#ff00ff
	yellow	#ffff00
	white	#ffffff

CSS Color (RGBA)
La especificación CSS3 añade la posibilidad de especificar el "alfa", o la opacidad de un color. El alfa es especificado como un número decimal entre 0.0 (transparente) y 1,0 (opaco).

Ejemplo:

<div style="background-color:

  rgba(255,0,0,0.2);">

</div>

Los siguientes cuadros muestran el color "rojo" en los niveles de alfa diferentes:

0.2

0.4

0.6

0.8

1.0

CSS Color (HSL)

La especificación CSS3 añade la posibilidad de especificar el color utilizando HSL (matiz, saturación y luminosidad). HSLtiene tres valores:

- Hue es el grado en el círculo cromático: 0= red, 120 = green, 240 is blue

- Saturation es un porcentaje, donde 100% es el color
- Lightness es un porcentaje, donde 0% es oscuro (black) y 100% es la luz (white)

Ejemplo:

<div style="background-color:

  hsl(0,100%,50%);">

</div>

Los siguientes cuadros muestran los tres colores básicos para la HSL.:

	hsl (0,100%,50%)
	hsl (120,100%,50%)
	hsl (240,100%,50%)

CSS Color (HSLA)
La especificación CSS3 añade la posibilidad de especificar el color utilizando HSLA (tono, saturación, luminosidad, Alpha).HSLA toma cuatro valores:.
- Hue es el grado en el círculo cromático: 0 = red, 120 = green, 240 is blue
- Saturation es un porcentaje, donde 100% es el color
- Lightness es un porcentaje, donde 0% es oscuro (black) y 100% es la luz (white)
- Alpha es un número decimal entre 0.0 (Trasnparente) y 1.0 (opaco)

Ejemplo

<div style="background-color:

  hsla(0,100%,50%,0.2);">

</div>

Los siguientes cuadros muestran el color "red", hsl (0,100%,50%), en los niveles de alfa diferentes:

0.2

0.4

0.6

0.8

1.0

CSS Nombre de los Colores

La siguiente tabla muestra los nombres de los colores con el apoyo de la mayoría de navegadores y sus equivalentes hexadecimales. A excepción de los que también figuran en el cuadro anterior, los nombres de colores no son reconocidos por el W3C como "web estándar"..

Color	Name	Hex
	AliceBlue	#f0f8ff
	AntiqueWhite	#faebd7
	Aqua	#00ffff
	Aquamarine	#7fffd4
	Azure	#f0ffff
	Beige	#f5f5dc
	Bisque	#ffe4c4
	Black	#000000
	BlanchedAlmond	#ffebcd
	Blue	#0000ff
	BlueViolet	#8a2be2
	Brown	#a52a2a
	BurlyWood	#deb887
	CadetBlue	#5f9ea0
	Chartreuse	#7fff00
	Chocolate	#d2691e
	Coral	#ff7f50
	CornflowerBlue	#6495ed
	Cornsilk	#fff8dc
	Crimson	#dc143c
	Cyan	#00ffff
	DarkBlue	#00008b
	DarkCyan	#008b8b
	DarkGoldenRod	#b8860b
	DarkGray	#a9a9a9
	DarkGreen	#006400
	DarkKhaki	#bdb76b
	DarkMagenta	#8b008b
	DarkOliveGreen	#556b2f
	Darkorange	#ff8c00
	DarkOrchid	#9932cc
	DarkRed	#8b0000
	DarkSalmon	#e9967a
	DarkSeaGreen	#8fbc8f
	DarkSlateBlue	#483d8b
	DarkSlateGray	#2f4f4f
	DarkTurquoise	#00ced1
	DarkViolet	#9400d3
	DeepPink	#ff1493

Introducción CSS

CSS Introducción

CSS, o Hojas de estilos, define la forma de mostrar HTML. Mientras que el HTML define el contenido de un documento, la hoja de estilos define la presentación de ese contenido. CSS. se añadió al HTML 4.0 y proporciona una forma de separar el contenido de la presentación.

CSS Sintaxis

Reglas de CSS se compone de dos partes, una selección, y las declaraciones de uno o más. El siguiente diagrama ilustra la siguiente sintaxis::

El Selector es el elemento HTML a ser de estilo:.

Cada Declaration se compone de property y un valor. La propiedad es el atributo de estilo para ser cambiado. The value es lo que el atributo se establece en. Los dos puntos (:) se utiliza para separar la propiedad y su valor.

Como se ilustra en el diagrama, las Declaraciones de terminar con el punto y coma (;) y están rodeadas por llaves ({y}).

CSS Selectores

Estilos se pueden aplicar a los elementos específicos de HTML especificando el elemento HTML, adjuntando los estilos dentro de llaves. El siguiente ejemplo muestra un estilo que se aplica al elemento (p) (Parrafo) .

p { color:blue; }

En este caso, todos los elementos del párrafo en el documento tendría un color de texto de color azul.
Hay muchos tipos diferentes de selectores que permiten una gran flexibilidad en la aplicación de estilos a los elementos.

CSS Clases & ID Selectores

Además de utilizar los selectores de elemento de HTML, Selectores personalizados también se pueden definir en la forma de los selectores de clase y de identificación. Esto permite que el elemento HTML mismo, pero de estilo diferente en función de su clase o ID. Un selector de ID puede ser utilizado para identificar un elemento, mientras que un selector de clase puede ser utilizada para identificar más de un elemento.

En CSS, un selector de clase es un nombre precedido por un punto (.) Y un selector ID es un nombre precedido por el signo numeral (#).

El siguiente código CSS muestra un selector de clase y un selector de ID.

  color:blue;

  font-weight:bold;

}

#codebox {

  background-color:#dddddd;

  padding:10px;

  border-style:solid;

  border-width:1px;

}

El siguiente ejemplo utiliza estos estilos en el código HTML:

 <p>

  'normal' text here

</p>

<p class="highlight">

  'highlight' text here

</p>

</div> 

CSS Comentarios

En CSS, un comentario comienza con / * y termina con * /. Los comentarios pueden ocupar varias líneas, pero no pueden anidarse.
El siguiente ejemplo muestra una sola línea y un comentario de varias líneas.

/* A single-line comment */

/* A comment that

   spans multiple lines */