24/25 Q04: Etiquetas HTML y propiedades CSS

Etiquetas HTML y propiedades CSS trabajadas en clase en el curso 2024/25 hasta la quincena Q04.

Etiquetas HTML

Elemento raíz
Etiqueta Descripción Atributos principales
!DOCTYPE tipo de documento (versión de html empleada)
html engloba todo el documento lang
<!-- ... --> comentario (sólo visible en el código fuente)
Metadatos
Etiqueta Descripción Atributos principales
head delimita el encabezado del documento
title título del documento (se muestra en la pestaña del navegador)
link enlace a otros archivos (hoja de estilo, etc.) href, rel, media, type, title
meta metainformación sobre el documento name, content, charset
style hoja de estilo incluida en el documento type, type, title
Secciones
Etiqueta Descripción Atributos principales
body delimita el cuerpo del documento
h1 a h6 encabezado (de nivel 1 a 6)
address dirección (información sobre el autor)
Bloques de contenido
Etiqueta Descripción Atributos principales
p párrafo
hr separador
div división
blockquote cita larga (que incluye varios párrafos) cite
pre texto preformateado
Texto (en línea)
Etiqueta Descripción Atributos principales
br salto de línea
span contenedor de texto genérico
strong importante
em énfasis
Interactivos
Etiqueta Descripción Atributos principales
details desplegable open, name
summary leyenda para <details>

Propiedades CSS

Tipos
Propiedad Descripción Valores
familia-genérica Familia genérica de fuente cursive | fantasy | monospace | serif | sans-serif
Tipo de letra (fuente)
Propiedad Descripción Valores
font-family tipo de letra (fuente) [ nombre-fuente | familia-genérica ] [, nombre-fuente | familia-genérica ]*
font-size tamaño tamaño-absoluto | tamaño-relativo | distancia | porcentaje
font-style inclinación (cursiva) normal | italic | oblique
font-weight grosor del trazo (negrita) normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Color
Propiedad Descripción Valores
color color del texto color
Texto
Propiedad Descripción Valores
letter-spacing espacio entre caracteres normal | distancia
line-height espaciado entre líneas normal | número | distancia | porcentaje
text-align alineación del texto center | justify | left | right
text-decoration decoración del texto none | blink | line-through | overline | underline
text-indent sangría de la primera línea distancia | porcentaje
text-transform mayúsculas / minúsculas none | capitalize | lowercase | uppercase
text-shadow sombreado desplazamiento horizontal, desplazamiento vertical, tamaño desenfoque, color
word-spacing espacio entre palabras normal | distancia
Bordes
Propiedad Descripción Valores
border cuatro bordes simultáneamente border-color || border-width || border-style
border-top borde superior border-color || border-width || border-style
border-right borde derecho border-color || border-width || border-style
border-bottom borde inferior border-color || border-width || border-style
border-left borde izquierdo border-color || border-width || border-style
border-radius esquinas redondeadas [ distancia | porcentaje ] {1, 4}
border-top-right-radius esquina superior derecha redondeada distancia | porcentaje
border-bottom-right-radius esquina inferior derecha redondeada distancia | porcentaje
border-bottom-left-radius esquina inferior izquierda redondeada distancia | porcentaje
border-top-left-radius esquina superior izquierda redondeada distancia | porcentaje
border-color color de los bordes [ color | transparent ] {1, 4}
border-width grosor de los bordes [ medium | thick | thin | distancia ] {1, 4}
border-style estilos de los bordes [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-top-color color del borde superior [ color | transparent ] {1, 4}
border-top-width grosor del borde superior [ medium | thick | thin | distancia ] {1, 4}
border-top-style estilo del borde superior [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-right-color color del borde derecho [ color | transparent ] {1, 4}
border-right-width grosor del borde derecho [ medium | thick | thin | distancia ] {1, 4}
border-right-style estilo del borde derecho [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-bottom-color color del borde inferior [ color | transparent ] {1, 4}
border-bottom-width grosor del borde inferior [ medium | thick | thin | distancia ] {1, 4}
border-bottom-style estilo del borde inferior [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
border-left-color color del borde izquierdo [ color | transparent ] {1, 4}
border-left-width grosor del borde izquierdo [ medium | thick | thin | distancia ] {1, 4}
border-left-style estilo del borde izquierdo [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
Márgenes
Propiedad Descripción Valores
margin cuatro márgenes exterior simultáneamente [ auto | distancia | porcentaje ] {1, 4}
margin-top margen exterior superior auto | distancia | porcentaje
margin-right margen exterior derecho auto | distancia | porcentaje
margin-bottom margen exterior inferior auto | distancia | porcentaje
margin-left margen exterior izquierdo auto | distancia | porcentaje
padding cuatro márgenes interiores simultáneamente [ distancia | porcentaje ] {1, 4}
padding-top margen interior superior distancia | porcentaje
padding-right margen interior derecho distancia | porcentaje
padding-bottom margen interior inferior distancia | porcentaje
padding-left margen interior izquierdo distancia | porcentaje
Fondos
Propiedad Descripción Valores
background-color color de fondo transparent | color
Modelo de caja / Tamaño
Propiedad Descripción Valores
box-sizing posición del borde y márgenes border-box | content-box