Untitled

<!DOCTYPE html>
<html>
	<head>

		<!--#Titulo-->
		<title> </title>
		<meta name="author" content=""/>

		<!--#Etiqueta para que se muestren los carácteres UTF-8 correctamente-->
		<meta charset="UTF-8" />

		<!--#Etiqueta para poner CSS en el archivo HTML-->
		<style>
			p {color:teal;}

		</style>

	<head/>
	<!--# -->
	<body>

		<!--#Sintaxis CSS

				Se divide en selector: 		 y declaración:
										h1              {    color:azul }
													Propiedad^       ^Valor

				Los selectores aparte de elementos pueden ser de "id"s
				#menu {
					text-align: center;
					color: red;
						}


				Los selectores pueden ser clases (todo elemento que lleve la clase .center tendrá
				Estas propiedades, ejemplo <p class=center>
				.center {
					text-align: center;
					color: red;
						}


				Los selectores pueden ser clases que solo se apliquen a ciertos elementos
				Ejemplo:
				p.center {
					text-align: center;
					color: red;
						}
				Solo los <p> que contengan la clase center seran afectados.


				Se pueden agrupar los Selectores si suspropiedades son las mismas
				Ejemplo:
				h1, h2, p {
					text-align: center;
					color: red;
						}


		################################################################################-->

		<!--#Colores en CSS para el valor color:

				aqua | black | blue | fuchsia | gray | green |
				lime | maroon | navy | olive | orange | purple |
				red | silver | teal | white | yellow

				Ejemplo:
				p {color:teal}

			Colores usando RGB
				Números
				p { color: rgb(71, 98, 176); }

				Decimales
				p { color: rgb(27%, 38%, 69%); }

				Hexadecimal
				p { color: #C00; }


		################################################################################-->


		<!-- Que es el box model
		┌--------------------------------margin------------------------------┐
		│																	 │ margin: Margen entre el borde
		│		╔════════════════════════border═════════════════════╗		 │ border: borde
		│       ║													║	 	 │ padding: espaciado entre
		│		║						padding						║		 │          borde y el contenido
		│		║													║        │ content: el contenido
		│		║   ┌-----------------------------------------┐		║        │
		│		║   │										  │ 	║		 │ background-image: poner una
		│		║   │                   content               │ 	║		 │					 img de fondo
		│		║   │				  <p>Hola</p>			  │ 	║		 │ background-color: poner un color
		│																	 │					 de fondo
		│																	 │

		################################################################################-->


		<!-- Que es DIV y SPAN

		#El tag *div* es un contenedor en bloque (block)
																* Existen dos tipos de cajas: block e inline.
																Los elementos block rompen el ﬂujo de maquetación.
																Es decir, aparecen solos, insertando “saltos de línea”.
		#El tag *span* es un contenedor en linea (inline)		Los elementos inline siguen el ﬂujo y están contenidos
																dentro de elementos de bloque.


			Ejemplo SPAN: -->

			<!--# En el head: -->
			<style>
				.destacado-en-rojo {
					color:red;
				}
				.destacado-en-verde {
					color:red;
				}
			</style>
			<!--# En el body: -->
			<p>Ejemplo SPAN: El que pronto se acuesta y pronto se levanta, es hombre
			<span class="destacado-en-rojo">saludable</span>,
			<span class="destacado-en-verde">rico</span> y
			<span class="destacado-en-rojo">sabio</span>.</p>


			<!-- Ejemplo DIV:

			En el head: -->
			<style>
				#caja {
				height: 180px;
				width: 180px;
				background-color: black;
				margin: 20px;
				padding: 50px;
					}
			</style>
			<!--# En el body: -->
			<div id="caja">
				<p>Ejemplo DIV</p>
			</div>


		<!--###############################################################################-->


		<!--# Tipos de Margin / Padding / Border

			Margin: margin-top      Padding: padding-top      Border: dotted	dashed
					margin-rigth    		 padding-right			  solid		double
					margin-bottom  			 padding-bottom			  groove	ridge
					margin-left     		 padding-left			  inset     outset

			Ejemplo:
		-->


		<p> hola <p>

	</body>
</html>