馃Gaby

LISTADO DE ETIQUETAS

TIPOS DE ETIQUETAS


En HTML y CSS tenemos diferentes tipos de etiquetas cada uno con un proposito en particular una etiqueta se puede componer de dos maneras.


ESTRUCTURA DE ETIQUETAS
Etiquetas que solo se apertura Etiquetas que tienen una apertura y un sierre
Este tipo de etiqueta com煤n mente se utilizan para indicar una direccion u origen se componen por argumento u opciones tales como src href. Este tipo de etiquetas comun mente se utilizan para encerrar un contenido tales como texto img entre otros.

ETIQUETAS HTML


馃専LISTA DE ETIQUETAS DIRIGIDAS AL TEXTO

ETIQUETAS DEFINICI脫N PROPIEDADES
<a></a> Se utiliza para incluir enlaces hacia otras p谩ginas color, text-decoration, font-size, font-family
<br></br> Se utiliza para dar un salto de linea ----------
<h1></h1><h6></h6> Crea un encabezado o t铆tulo de primer a sexto nivel para una secci贸n del documento color, font-size, background-color, text-align text-decoration, font-family
<p></p> Se utiliza para colocar un parrafo color, font-size, background-color, text-align text-decoration, font-family
<title></title> Define un titulo en el documento color, font-size, background-color, text-align text-decoration, font-family

馃専LISTA DE ETIQUETAS DIRIGIDAS A FORMULARIOS

ETIQUETAS DEFINICI脫N PROPIEDADES
<form></form> Define un formulario margin || padding || background-color
<label></label> Define el r贸tulo para un elemento <input> font-family || font-size || color || background-color
<input></input> Define un control de entrada de texto background-color || margin || border || width || height || font-family || font-size
<button></button> Define un bot贸n margin || padding || width || height || bordeer || font-size font-family || background-color

馃専LISTADO DE ETIQUETAS DIRIGIDAS A IMAGENES

ETIQUETAS DEFINICI脫N PROPIEDADES
<img></img> Coloca una imagen width, height, border, border-radius, margin, padding
ATRIBUTOS
alt, src, usemap, ismap, width, height

馃専LISTA DE ETIQUETAS DIRIGIDAS A MAQUETACION

ETIQUETAS DEFINICI脫N PROPIEDADES
<DOCTYPE> Define el cuerpo del documento __________
<head></head> Provee informaci贸n general acerca del documento __________
<body></body> Define el cuerpo del documento heigh || width || background-color || margin
<div></div> Define una secci贸n en un documento width || height || margin || padding || display || justify-content || flex-direction || background-color
<footer></footer> Define el pie de p谩gina de un documento width || height || margin || padding || display | justify-content || flex-direction || background-color
<header></header> Define la secci贸n de encabezado del documento width || height || margin || padding || display || justify-content || flex-direction || background-color
<section></section> Define una secci贸n de un documento width || height || margin || padding || display || justify-content || flex-direction || background-color
<nav></nav> Agrupa una serie de enlaces pertenecientes a la web. list-style || color || margin || padding

馃専LISTA DE ETIQUETAS DIRIGIDAS A LISTAS

ETIQUETAS DEFINICI脫N PROPIEDADES
<ol> </ol> Define una lista ordenada list-style || color || text-align || font-family || font-size
<ul></ul> Define una lista desordenada list-style || color || text-align || font-family || font-size
<li> </li> Define los elementos de una lista list-style || color || text-align || font-family || font-size

馃専LISTA DE ETIQUETAS DIRIGIDAS A TABLAS

ETIQUETAS DEFINICI脫N PROPIEDADES ATRIBUTOS
<table></table> Define una tabla text-align || height || width || Border || padding background-color || color || margin || padding || font-size || transition border
<tr></tr> Define una fila en una tabla border || padding || background-color || text-align || margin || border || border-collapse || font-size
<td></td> Define una celda en una tabla border || padding || background-color || text-align || margin || width || height || transition || text-align || font-size || font-family colspan, rowspan
<th></th> Define una celda de encabezado en una tabla border || padding || background-color || text-align || margin || text-align || font-size

馃専LISTA DE ETIQUETAS DIRIGIDAS A OBJETOS

ETIQUETAS DEFINICI脫N ATRIBUTOS
<link> enlaza a otros archivos (hoja de estilo, etc.) href, rel, media, type, title
<style> hoja de estilo incluida en el documento type, title
<meta> Metainformaci贸n sobre el documento name, content, charset

PROPIEDADES CSS


馃専LISTADO DE PROPIEDADES CSS DIRIGIDAS A TEXTO

PROPIEDADES DEFINICI脫N VALORES
text-align Alinea el texto center | justify | left | right
text-decoration Decoracion del texto none | blink | line-through | overline | underline
background-color Define los fondos de un objeto transparent | color
font-family Cambia la fuente del texto nombre-fuente
color Cambia el color del texto color
font-size cambia el tama帽o del texto n煤mero

馃専LISTADO DE PROPIEDADES DIRIGIDAS A OBJETOS

PROPIEDADES DEFINICI脫N VALORES
PROPIEDADES PRINCIPALES
Height Define la altura de la caja. auto || porcentajes || distancia
Width Ancho de la caja.
BORDES
Border Establece simult谩neamente los cuatro bordes. border-color || border-width || border-style
Border-radius Establece esquinas redondeadas porcentaje || distancia
Border-top Establece un borde superior border-color || border-width || border-style
Border-right Establece un borde derecho
Border-bottom Establece un borde izquierdo
Border-Color Establece colores de los bordes color || transparent
MARGENES
margin Establece el margen para los cuatro lados. auto || distancia || porcentaje || n煤mero
margin-top Establece el margen exerior superior
margin-right Establece el margen exerior derecho
Margin-bottom Establece el margen exerior inferior
Margin-left Establece el margen exterior izquierdo
MARGEN INTERIOR
Padding Cuatro m谩rgenes interiores simult谩neamente numero || porcentaje || auto || distancia
Padding-top Establece el margen interior superior
Padding-right Establece el margen interior derecho
Padding-bottom Establece el margen interior inferior
Padding-left Establece el margen interior izquierdo
FONDOS
Background-color Establece un color de fondo transparent || color
Background-image Establce una imagen de fondo url || none
Background-size Determina el tama帽o de la imagen de fondo auto || distancia || porcentaje || contain || cover
MODELO DE CAJA
Display Establece el tipo de caja none || block || inline || inline-block || inline-table || list-item || marker || run-in || table || table-caption || table-cell || table-column || table-row || flex || inline-flex
box-sizing Determia la posici贸n del borde y m谩rgenes border-box || contnt-box

FLEX-BOX


Flex nos permite maquetar nuestras p谩ginas web de una manera mucho mas f谩cil de lo que se hac铆a con la forma tradicional. Se llama Flex porque tenemos un contenedor, llamado contenedor Flex, que es el elemento que contiene la propiedad display: flex.


Desde ese contenedor vamos a poder especificar la alineaci贸n de los elementos que hay dento, el tama帽o de los elementos que contienen y distribuir el espacio restante que hay entre los elementos del contenedor Flex, y todo esto en una sola direcci贸n, ya sea horizontal o vertical.


PROPIEDADES DEFINICI脫N ATRIBUTOS
display Determina el tipo de caja flex || inline-flex
flex-direction Determina la direcci贸n row || row-reverse || column || column-reverse
flex-wrap Establece un ajuste de linea wrap || no-wrap || wrap-reverse
flex Indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. flex-grow || flex-shrink || flex-basis || initial || auto || none || n煤mero
justify-content Determina la alineaci贸n flex-start || flex-end || center || baseline || stretch