TIPOS DE ETIQUETAS
En HTML y CSS tenemos diferente tipos de etiquetas cada uno con un propósito en particular
Una etiqueta se puede componerse de dos maneras:
| ESTRUCTURA DE ETIQUETAS |
| Etiquetas que solo aperturan |
Etiquetas que tinen apertura y cierre |
| Este tipo de etiqueta común mente se utilizan para indicar una dirección u origen. Se componen por argumento u opciones tales como src href. |
Este tipo de etiqueta comunmente se utilizan para indicar una dirección u origen. Se componen por argumento u opciones tales como src href. |
LISTA DE ETIQUETAS DIRIGIDAS AL TEXTO
TITULOS
Hay hasta 6 etiquetas en HTML para definir títulos o secciones. Todas ellas llevan por defecto el texto en negrita, y son:
<h1> <h2> <h3> <h4> <h5> <6>.
Es posible crear titulos para head y para body
HEAD
- <title></title>Permite darle un título a una página web. Este título se puede encontrar en la barra de título del navegador, así como en las páginas de resultados de los buscadores
BODY
- <h1></h1> etiqueta que se utiliza para colocar el título pricipal de nivel 1
- <h2></h2> etiqueta que se utiliza para colocar títulos de nivel 2
- <h3></h3> etiqueta que se utiliza para colocar títulos de nivel 3
- <h4></h4> etiqueta que se utiliza para colocar títulos de nivel 4
- <h5></h5> etiqueta que se utiliza para colocar títulos de nivel 5
- <h6></h6> etiqueta que se utiliza para colocar títulos de nivel 6
PARRAFOS
Para los párrafos HTML proporciona las etiquetas. <p></p> Cada párrafo de la página se debe encerrar entre este par de etiquetas y entre cada párrafo se mostrará un espaciado.
- <!--...--> Se utiliza para agregar comentario dentro del código
- <p></p> La etiqueta p (párrafo) es el apropiado para distribuir el texto en párrafos.
- <br> (Solo se apretura) Se utiliza para crear espacio entre parrafos
- <b></b> Se utiliza para convertir el texto en negritas
- <spam></spam> Sirve para darle estilos a una parte del texto.
HIPERENLACES
es un elemento de un documento electrónico que hace referencia a otro recurso, como por ejemplo un punto específico de un documento o de otro documento.
- <a></a> Representa un hiperenlace, a este le podemos agregar un nombre. Tenemos que utilizar el atributo href.(href="")
TABLAS
Nos permiten almacenar los datos de forma ordenada.
Se utiliza el atributo colspan para unir casillas. Se utiliza el atributo rowspan para unir columnas.
- <table></table> La etiqueta table define una tabla. Una tabla va a poder tener diferentes filas y dentro de cada fila vamos a poder definir diferentes celdas.
- <tr></tr> Se utiliza para indecar las filas
- <td></td> Se utiliza para indecar las celdas
LISTADOS
- <ul></ul> etiqueta que se utiliza para crear las viñetas
- <ol></ol> etiqueta que se utiliza para crear un listado ordenado
- <li></li> etiqueta que se utiliza para crear un listado no ordenado
LISTA DE ETIQUETAS DIRIGIDAS A OBJETOS
ESTRUCURAS
Las etiquetas de estructura son de tipo objeto ya que pueden ser redimensionadas tanto en ancho y en alto estas etiquetas también son conocidas como cajas.
- <html></html> El texto en una página web está «marcado» con estos códigos para dar instrucciones al navegador web sobre cómo mostrar el texto.
- <header></header> Se utiliza para crear un encabezado
- <nav></nav>representa una sección de una página cuyo propósito es proporcionar enlaces de navegación, ya sea dentro del documento actual o a otros documentos.
- <div></div>Sirve para crear secciones o agrupar contenidos.
- <section><section>representa una sección genérica de un documento. Sirve para determinar qué contenido corresponde a qué parte de un esquema.
- <footer></footer> representa un pie de página para el contenido de sección más cercano o el elemento raíz de sección
IMAGENES
- <img></img> Se utiliza para colocar una imagen acompañado del atributo src que indica la dirección de la imagen.
PROPIEDADES CSS
PROPIEDADES CSS DIRIGIDAS AL TEXTO
| TEXTO |
| PROPIEDAD |
DESCRIPCIÓN |
VALORES |
| Text-aling |
Alineamiento del texto |
left - right - center - justify |
| Text-decoration |
Indica el tipo de subrayado (decoración) |
none - underline - overline - line-through |
| Text-indent |
Desplazamiento de la primera línea del texto |
longitud - porcentaje |
| Letter-spacing |
Espacio entre caracteres |
normal - longitud |
| word-spacing |
Espacio entre palabras |
normal - longitud |
| FUENTES |
| PROPIEDAD |
DESCRIPCIÓN |
VALORES |
| Font-family |
Familias de fuentes |
nombre-familia - nombre-familia-genérica |
| Font-style |
Estilo de la fuente |
normal - italic - oblique |
| Font-size |
Tamaño de la fuente |
xx-small - x-small - small - medium - large - x-large - xx-large - larger - smaller - longitud - porcentaje |
| Font-variant |
Convierte a mayúsculas manteniendo un tamaño inferior |
normal | small-caps |
| Font-weight |
Anchura de los caracteres. Normal = 400, Negrita = 700 |
normal - bold - bolder - lighter - 100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900
|
| COLORES Y FONDOS |
| PROPIEDAD |
DESCRIPCIÓN |
VALORES |
| background-size |
Tamaño de la imagen de fondo |
|
| background-position |
Posición de la imagen de fondo |
percentage - length - left - center - right |
| background-attachment |
Desplazamiento de la imagen de fondo |
scroll - fixed |
| background-repeat |
Repetición de la imagen de fondo |
repeat - repeat-x - repeat-y - no-repeat |
| background-image |
Imagen de fondo |
url(…) - none |
| background-color |
Color de fondo |
Nombre:white - HEX:#FFFFFF - RGB:255,255,255 |
| color |
Color del texto |
Nombre:black - HEX:#000000 - RGB:0,0,0 |
| TABLAS |
| PROPIEDAD |
DESCRIPCIÓN |
VALORES |
| border-collapse |
Selección del modelo de los bordes |
collapse - separate |
| empty-cells |
Visibilidad de los bordes de celdas sin contenido |
show - hide |
| border-spacing |
Espaciado entre los bordes de celdas adyacentes |
longitud |
| table-layout |
Formato de las celdas, filas y columnas |
auto - fixed |
| caption-side |
Posición del título respecto la tabla |
top - bottom |
| LISTAS |
| PROPIEDAD |
DESCRIPCIÓN |
VALORES |
| list-style |
propiedad compuesta |
list-style-image - list-style-position - list-style-type |
| list-style-image |
imagen del marcador |
none - uri |
| list-style-position |
posición del marcador |
inside | outside |
| list-style-type |
tipo de marcador |
none - circle - disc - square - decimal - decimal-leading-zero - lower-alpha - upper-alpha - lower-greek - lower-latin - upper-latin - lower-roman - upper-roman - armenian - georgian - hebrew(-) - cjk-ideographic(-) - hiragana(-) - katakana(-) - hiragana-iroha(-) - katakana-iroha(-) |
PROPIEDADES CSS DIRIGIDAS A OBJETOS
MODELO DE CAJAS
El modelo de caja es la manera en que se representan todos los elementos html en una página. Cada elemento genera una caja, el comportamiento de esa caja depende de su clasificación: si es de línea o de bloque.
A todas las cajas se les puede aplicar las siguientes propiedades: width, height, padding, margin, border, background. Lo particular de este concepto es que por defecto el width se refiere al ancho del contenido de un elemento (no al ancho total, de borde a borde).
En el gráfico muestro cómo se comporta cada una de las propiedades:
| Margin |
| PROPIEDAD |
DESCRIPCIÓN |
VALORES |
| margin-top |
Tamaño del margen superior |
longitud - porcentaje - auto |
| margin-bottom |
Tamaño del margen inferior |
longitud - porcentaje - auto |
| margin |
Tamaño del margen |
longitud - porcentaje (1...4) |
| margin-right |
Tamaño del margen derecho |
longitud - porcentaje - auto |
| margin-left |
Tamaño del margen izquierdo |
longitud - porcentaje - auto |
| PADING |
| PROPIEDAD |
DESCRIPCIÓN |
VALORES |
| padding-top |
Tamaño del relleno superior |
longitud - porcentaje |
| padding-right |
Tamaño del relleno derecho |
longitud - porcentaje |
| padding-bottom |
Tamaño del relleno inferior |
longitud - porcentaje |
| padding-left |
Tamaño del relleno izquierdo |
longitud - porcentaje |
| padding |
Tamaño del relleno |
longitud | porcentaje (1...4) |
| BORDES |
| PROPIEDAD |
DESCRIPCIÓN |
VALORES |
| border |
cuatro bordes simultáneamente |
border-color - border-width - border-style |
| border-right |
borde derecho |
border-color - border-width - border-style |
| border-left |
borde izquierdo |
border-color - border-width - border-style |
| border-top |
borde superior |
border-color - border-width - border-style |
| border-bottom |
borde inferior |
border-color - border-width - border-style |
| CONTENEDORES |
| PROPIEDAD |
DESCRIPCIÓN |
VALORES |
| display |
Comportamiento del contenedor |
inline - block - inline-block - none |
| position |
Esquema de posicionamiento |
static - relative - absolute - fixed |
| top - right - bottom - left |
Desplazamiento de la caja respecto al borde superior, derecho, inferior o izquierdo |
longitud - porcentaje - auto |
| float |
Posicionamiento flotante |
left - right - none |
| clear |
Control de cajas adyacentes a las float |
none - left - right - both |
| z-index |
Nivel de la capa |
auto - número entero |
| box-sizing |
Control de bordes y relleno en el comportamiento del contenedor |
content-box - border-box |
| visibility |
Muestra u oculta un elemento ocupando el espacio |
visible - hidden |
PROPIEDADES CSS DIRIGIDAS A ELEMENTOS
cada etiqueta HTML tiene un tipo de representación visual en un navegador, lo que habitualmente se suele denominar el tipo de caja.En principio, se parte de dos tipos básicos: inline y block.
| TIPOS DE CONTENEDORES |
| PROPIEDAD |
DESCRIPCIÓN |
VALORES |
| inline |
Elemento en línea |
El elemento se coloca en horizontal (un elemento a continuación del otro). |
| block |
Elemento en bloque |
El elemento se coloca en vertical (un elemento encima de otro). |
Atributos más importantes que puede tomar la propiedad CSS display:
| OTROS TIPOS DE CONTENEDORES |
| TIPOS DE CAJAS |
DESCRIPCIÓN |
| block |
Se apila en vertical. Ocupa todo el ancho disponible de su etiqueta contenedora. |
| inline |
Se coloca en horizontal. Se adapta al ancho de su contenido. Ignora width o height. |
| inline-block |
Combinación de los dos anteriores. Se comporta como inline pero no ignora width o height. |
| flex |
Utiliza el modelo de cajas flexibles Flexbox. Muy útil para diseños adaptables. |
| inline-flex |
La versión en línea (ocupa sólo su contenido) del modelo de cajas flexibles flexbox. |
| none |
Hace desaparecer visualmente el elemento, como si no existiera. |
FLEXBOX
Flexbox es un sistema de elementos flexibles que llega con la idea de olvidar estos mecanismos y acostumbrarnos a una mecánica más potente, limpia y personalizable, en la que los elementos HTML se adaptan y colocan automáticamente y es más fácil personalizar los diseños. Está especialmente diseñado para crear, mediante CSS, estructuras de una sóla dimensión.
| DIRECCIÓN DE LOS EJES |
| PROPIEDAD |
DESCRIPCIÓN |
VALORES |
| flex-direction |
Cambia la orientación del eje principal. |
row - row-reverse - column - column-reverse |
| flex-wrap |
Evita o permite el desbordamiento (multilinea). |
nowrap - wrap - wrap-reverse |
COMO CONECTAR UN CSS CON EL HTML
Para enlazar una hoja de estilo utilizamos la etiqueta <link> se coloca en la cabecera HEAD del documento. Se coloca el argumento rel="stylesheet" seguido del argumento href="css/css.css (carpeta donde se encuentra el documento/css.css) para una hoja de estilo en cascada. Esta etiqueta solo se apertura.