Comentarios, colores y div en Css

En este módulo estudiaremos para qué nos sirven los comentarios en Css, los tipos de colores que podemos manejar y la importancia de los Div.

Los comentarios:

Para realizarlos simplemente colocamos /* y cerramos el comentarios con */ , esto en una hoja de estilos.css , ejemplo:

/* Esto es un comentarios en Css */

La gracia de esta herramienta es que el navegador web no los lee, por lo tanto alguién que esté visitando tu sitio web no se enterará de todos los comentarios que tú utilizaste. Además puedes comentar códigos así no tendrás que eliminarlos. Pero no tienes que abusar ya que la gracias es siempre tener un código ordenado.

Colores en Css:

Exiten varias formas para utilizar los colores, puedes escribir su nombre, colocar su hexadecimal o bien trabajarlos en Rgb o Rgba, la mayoría los trabaja en hexadecimal.

En el siguiente link tendrás una lista de los colores que puedes escribir en Css (escríbelos en minúsculas) http://www.w3schools.com/cssref/css_colors.asp

Ejemplos:

/* colores */
.colores-ejemplo{
	color:blue; /* Con su nombre */
	color:#0000FF; /* Hexadecimal */
	color:rgb(0,0,255); /* Rgb*/
	color:rgba(0,0,255,0.5); /* Rgba (el último digito es un alfa de transparencia) */
}

Rgba se trabaja del mismo modo que el Rgb pero tiene un último dígito que corresponde al porcentaje de transparencia que tu quieras decignarle al color, en el ejemplo anterior se otorgó un 50%.

Div:

La etiqueta Div es propia de Html y nos sirve para agrupar divisiones en nuestro sitio web, así podemos dividir el sitio con múltiples estilos propios, esto lo analizaremos y quedará claro en los ejercios que realizaremos en los siguientes apartados.

Cabe señalar que las nuevas etiquetas de Html5 son además “Div” por lo tanto se manejarán del mismo modo. (Puedes ver el video para que te quede aún más claro)

Códigos utilizados en el Video:

Html

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Incluir los Css</title>
	<link rel="stylesheet" href="estilos.css" type="text/css">

</head>
<body>
<div class="divisor">
	<p class="rojo">Este párrafo será de color Rojo</p>
	<p class="azul grande">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et cupiditate fuga dolores. Dolores, fugiat a, aut ex beatae alias minima aspernatur at illo dignissimos obcaecati debitis cumque est, aperiam quod.</p>
</div>
<footer>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni sit suscipit numquam, libero adipisci, vitae aspernatur fuga eius odio, veniam porro repudiandae nam dolorem error excepturi dolor doloribus minima voluptates.</p>
</footer>
</body>
</html>

Css

.rojo{
	color:red;
	/*background: blue;*/
}
/* estilos para azul */
.azul{
	color: rgb(210,105,30);
	font-size: 20px;
	/*background: coral;*/
}
.divisor{
	background: chartreuse ;
}
footer{
	background: crimson ;
}