En HTML y CSS tenemos diferente tipos de etiquetas cada uno con un propósito en particular.
Una etiqueta se puede componer de dos maneras:
| ESTRUCTURA DE ETIQUETAS | |
| Etiquetas que solo aperturan | Etiquetas que tienen apertura y cierre |
| Este tipo de etiqueta comúnmente se utilizan para indicar una dirección u origen. Se componen por argumento u opciones tales como src href. |
Este tipo de etiquetas comúnmente se utilizan para encerrar un contenido tales como texto img, entre otros. |
Lista de etiquetas dirigidas al texto
⇝ Títulos
Un título es exactamente lo que parece: un título o un subtitulo real que encabezan los temas. Los títulos pueden tener dimensiones entre 1 y 6, siendo 1 la más grande y 6 la más pequeña.
Podemos crear títulos tanto para el body como para el head.
HEAD
BODY
⇝ Párrafos
Un párrafo se abre y se cierra con la etiuqueta "p". Para crear varios párrafos tenemos que abir esta etiqueta las veces que lo necesitemos para cambiar de uno a otro.
BODY
⇝ Listado y viñetas
Las etiquetas utilizadas para crear un listado seran ol y li las cuales las solemos para una enumeración de cosas, personas, cantidades, etc.
Para las viñetas utilizaremos la etiqueta ul
BODY
| PROPIEDADES CSS | ||
| Propiedad | Opciones | Ejemplo |
| Color | Nombre del color | color: Grey; |
| Código hexadecimal | color: #008000; | |
| Código RGB | color: rgb(47, 79, 79); | |
| Código RGBA | color: rgba(128, 151, 206, 0.5); | |
| Código HSL | color: hsl(180, 50%, 50%); | |
| Variable | color: var(--nombrevariable); | |
| Font-size | Palabras clave | font-size: xx-small; font-size: x-small; font-size: small; font-size: large; font-size:x-large; font-size: xx-large; |
| Longitud | font-size: 15px; | |
| Porcentaje | font-size: 250%; | |
| Font-family | Nombre de la tipografía | font-family: sans-serif; font-family: serif; font-family: monospace; font-family: fantasy; font-family: cursive; |
| Nombre de la familia y la familia genérica |
font-family: 'Noto Sans HK', sans-serif; | |
| Text-aling | Orientación | text-align: center; text-align: left; text-align: right; text-align: justify; |
| Text-decoration | Aplicar decoración del texto | text-decoration: overline; text-decoration: line-through; text-decoration: underline; |
| List-style-tipe | Aplicar el estilo de las viñetas | list-style-tipe: circle; list-style-tipe: square; list-style-tipe: upper-roman; list-style-tipe: lower-alpha; |
| Eliminar viñeta | list-style:none; | |
| List-style-position | Aplicar viñetas dentro del margen | list-style-position: inside; |
| Aplicar viñeta fuera del margen | list-style-position: outside; | |
Lista de etiquetas dirigidas a tablas
⇝ Tablas
Las tablas son estructuras útiles y a menudo fáciles de interpretar para relacionar datos e información de manera pertinente. Y para crearlas necesitamos de las siguientes etiquetas, siendo la principal "table", la cual va a tener columnas y filas.
BODY
ATRIBUTOS DIRIGIDOS A LA ETIQUETA TABLA
ATRIBUTOS DIRIGIDOS A LA ETIQUETA <TD>
Lista de etiquetas dirigidas a objetos
⇝ Estructuras
Estas etiquetas pueden ser redimensionadas tanto en ancho y como en alto. A estas etiquetas también las conocemos como cajas.
BODY
ATRIBUTOS DIRIGIDOS A LA ETIQUETA < img >
| PROPIEDADES CSS | ||
| Propiedad | Opciones | Ejemplo |
| background-color | Nombre del color | background-color: Green; |
| Código hexadecimal | background-color: #008000; |
|
| Código RGB | background-color: rgb(47, 79, 79); |
|
| Código RGBA | background-color: rgba(128, 151, 206, 0.5); |
|
| Código HSL | background-color: hsl(180, 50%, 50%); |
|
| Variable | background-color: var(--nombrevariable); |
|
| background-image | Dirección de carpeta donde están todos nuestros archivos para construir el html |
background-image: url(../img/logo.jpg); |
| background-size | Escalar la imagen lo más grande posible dentro de su contenedor sin recortar ni estirar la imagen |
background-size: contain; |
| Escalar la imagen lo más grande posible para llenar el contenedor, estirando la imagen si es necesario |
background-size: cover; |
|
| Escalar la imagen de fondo en la dirección correspondiente de modo que se mantengan sus proporciones |
background-size: auto; |
|
| Escalar la imagen en pixeles | background-size: 30px; |
|
| Escalar la imagen en porcentaje | background-size: 300%; |
|
| : hover | Transición de color | etiqueta o variable: hover { background-color: black; } |
| width | Porcentaje | width: 60%; |
| Pixeles | width: 15px; | |
| El navegador calcula y selecciona un ancho para un elemento especificado |
width: auto; | |
| heigth | Porcentaje | heigth: 60%; |
| Pixeles | heigth: 15px; | |
| El navegador calcula y selecciona un alto para un elemento especificado |
heigth: auto; | |
| Eslito del borde | Eliminar borde | border: none; |
| Punteado | border: dotted; | |
| Guiones cortos | border: dashed; | |
| Solido | border: solid; | |
| Doble | border: double; | |
| Apariencia tallada | border: groove; | |
| Apariencia extruida | border: ridge; | |
| Apariencia de elemento incrustado | border: inset; | |
| Apariencia de elemento en relieve | border: outset; | |
| Grosor del borde | Pixeles | border: 12px; |
| Palabra clave | border: thin; border: medium; border: thick; |
|
| Color del borde | Nombre del color | border: Green; |
| Código hexadecimal | border: #008000; | |
| Código RGB | border: rgb(47, 79, 79); |
|
| Código RGBA | border: rgba(128, 151, 206, 0.5); |
|
| Código HSL | border: hsl(180, 50%, 50%); |
|
| Variable | border: var(--nombrevariable); |
|
| border-radius | Pixeles | border-radius: 12px; |
| Porcentaje | border-radius: 15%; | |
| display | Generar una caja de elemento de bloque |
display: block; |
| Generar uno o más cuadros de elementos en línea |
display: inline; | |
| Mostrar los elemento como los de bloque y presenta su contenido de acuerdo con el modelo flexbox |
display: flex; | |
| flex | Absorber cualquier espacio libre adicional en el contenedor y encogerse a su tamaño mínimo para adaptarse al contenedor |
flex: auto; |
| Encoger a su tamaño mínimo para adaptrse al contenedor, pero no crece para absorber ningún espacio libre adicional |
flex: initial; | |
| Inflexible | flex: none; | |
| flex-basis | Automático | flex-basis: auto; |
| Porcentaje | flex-basis: 40%; | |
| Pixeles | flex-basis: 50px; | |
| flex-direction | Dirección del eje principal en horizontal |
flex-direction: row; |
| Dirección del eje principal en horizontal invertido |
flex-direction: row-reverse; |
|
| Dirección del eje principal en veritcal |
flex-direction: column; |
|
| Dirección del eje principal en veritcal invertido |
flex-direction: column-reverse; |
|
| flex-wrap | Establece los ítem en una sola línea (no permite que se desborde del contenedor) |
flex-wrap: nowrap; |
| Establece los ítems en modo multilínea (permite que se desoborden del contenedor) |
flex-wrap: wrap; |
|
| Establece los ítems en modo multilínea, pero en dirección inversa |
flex-wrap: wrap-reverse; |
|
| justify-content | Agrupa los ítem al principio del eje principal |
justify-content: flex-start; |
| Agrupa los ítems al final del eje principal |
justify-content: flex-end; |
|
| Agrupa los ítems al centro del eje principal |
justify-content: center; |
|
| Distribuye los ítems dejando el máximo espacio para separarlos |
justify-content: space-between; |
|
| Distribuye los ítems dejando el mismo espacio para separarlos |
justify-content: space-around; |
|
| Distribuye los ítems dejando el mispo espacio a izquierda y derecha |
justify-content: space evenly; |
|
| box-sizing | Los elemento abarca todo el ancho de la caja que lo contiene |
box-sizing: content-box; |
| Los elementos toman en cuenta los bordes y rellenos, por lo cual el contenido se encogerá para absorber el ancho adicional |
box-sizing: border-box; |
|
Lista de etiquetas dirigidas a enlaces de hipertextos
⇝ Hipertextos
Son el elemento característico de la web porque permiten que las páginas se relacionen entre sí. La sencillez y libertad con que se pueden enlazar páginas situadas en servidores distintos son el motivo del éxito de la web.
BODY
ATRIBUTOS DIRIGIDOS A LA ETIQUETA < a >
| PROPIEDADES CSS | ||
| Propiedad | Opciones | Ejemplo |
| Text-decoration | Eliminar línea de hipertexto | text-decoration: none; |
Lista de etiquetas dirigidas a formularios
⇝ Formularios
Su propósito es el de recolectar información proporcionada por los visitantes del sitio, la cual es luego enviada nuevamente al servidor
BODY
Conectar HTML con CSS
⇝ ETIQUETA A UTILIZAR
Para conectar un css a html utilizamos la etiqueta - link rel="stylesheet" href="css/css.css" -
Dentro de href debemos escribir el nombre la carpeta donde guardamos nuestro css a utilizar seguido de / y nuestro css.
Conectar TIPOGRAFÍAS DE INTERNET con CSS
⇝ ETIQUETA A UTILIZAR
Para conectar una tipografía a css solamente debemos ir a alguna página en Internet que nos permita copiar los links para que nos conecte con css y luego copiar y pegar en nuestro html
Después de eso debemos copiar el css que nos aparece debajo de los links.
Listado de propiedades generales de CSS
Su función es definir la estética o la presentación de una página web en general
GENERALES
| PROPIEDADES CSS | ||
| Propiedad | Opciones | Ejemplo |
| margin | Automático | margin: auto; |
| Pixeles | margin: 30px; | |
| Porcentaje | margin: 60%; | |
| Margen inferior | margin-bottom: 60%; margin-bottom: 30px; margin-bottom: auto; |
|
| Margen izquierdo | margin-left: 60%; margin-left: 30px; margin-left: auto; |
|
| Margen derecho | margin-right: 60%; margin-rigth: 30px; margin-rigth: auto; |
|
| Margen superior | margin-top: 60%; margin-top: 30px; margin-top: auto; |
|
| padding | Automático | padding: auto; |
| Pixeles | paddind: 30px; | |
| Porcentaje | padding: 60%; | |
| Altura inferior | padding-bottom: 60%; padding-bottom: 30px; padding-bottom: auto; |
|
| Ancho izquierdo | padding-left: 60%; padding-left: 30px; padding-left: auto; |
|
| Ancho derecho | padding-right: 60%; padding-rigth: 30px; padding-rigth: auto; |
|
| Altura superior | padding-top: 60%; padding-top: 30px; padding-top: auto; |
|
Listado de propiedades dirigidas al texto
Nos permiten controlar el texto como bloque, es decir, afectan al interlineado, a la separación entre palabras, al tabulado, color, fuente, etc
TEXTO
Listado de propiedades dirigidas a cajas
Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS o para alinear elementos con otros elementos.
CAJAS