Q07: Etiquetas HTML y propiedades CSS

Las tablas siguientes resumen las etiquetas HTML y las propiedades CSS trabajadas en clase en el curso 2017/18 hasta la quincena Q07.

Etiquetas HTML

Elemento raíz
Etiqueta Descripción Atributos principales
html engloba todo el documento lang
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
article artículo
section sección
nav navegación
aside lateral
h1 a h6 encabezado (de nivel 1 a 6)
header cabecera
footer pie
address dirección (información sobre el autor)
Contenido (bloques)
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
Contenido incrustado
Etiqueta Descripción Atributos principales
img / imagen alt, src, usemap, ismap, width, height
Interactivos
Etiqueta Descripción Atributos principales
details (5.1) desplegable
summary (5.1) leyenda para <details>
Otros
Etiqueta Descripción Atributos principales
!DOCTYPE tipo de documento (versión de html empleada)
<!-- ... --> comentario (sólo visible en el código fuente)

Propiedades CSS

Tipos
Propiedad Descripción Valores
familia-genérica Familia genérica de fuente cursive | fantasy | monospace | serif | sans-serif
Reglas arroba
Propiedad Descripción Descriptores / Características
@import Importar recurso url(...)
@font-face Fuente web font-family, src, font-style, font-weight, font-stretch, unicode-range, font-variant, font-feature-settings
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
Texto
Propiedad Descripción Valores
color color del texto color
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(3) sombreado desplazamiento horizontal, desplazamiento vertical, tamaño desenfoque, color
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(3) esquinas redondeadas [ distancia | porcentaje ] {1, 4}
border-top-right-radius(3) esquina superior derecha redondeada distancia | porcentaje
border-bottom-right-radius(3) esquina inferior derecha redondeada distancia | porcentaje
border-bottom-left-radius(3) esquina inferior izquierda redondeada distancia | porcentaje
border-top-left-radius(3) 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}
Margen exterior
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
Margen interior
Propiedad Descripción Valores
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 propiedad compuesta background-attachment || background-color || background-image || background-position || background-repeat
background(3) fondos múltiples separados por comas
background-attachment ligadura de la imagen fixed | scroll
background-color color de fondo transparent | color
background-image imagen de fondo none | uri
background-position posición de la imagen de fondo [ [ left | center | right | distancia | porcentaje] [ top | center | bottom | distancia | porcentaje] ]? | [ [ left | center | right ] || [ top | center | bottom ] ]
background-repeat repetición de la imagen de fondo no-repeat | repeat | repeat-x | repeat-y | space(3) | round(3)
background-size(3) tamaño de la imagen de fondo auto | [ distancia | porcentaje ] {2} | contain | cover
Tamaño
Propiedad Descripción Valores
width anchura auto | distancia | porcentaje
height altura auto | distancia | porcentaje
overflow si el contenido desborda al elemento auto | hidden | scroll | visible
Posicionamiento
Propiedad Descripción Valores
float modo de posicionamiento flotante none | left | right
clear lado en el que no puede haber elementos flotantes none | both | left | right
position modo de posicionamiento absolute | fixed | relative | static
top posición del borde superior del elemento auto | distancia | porcentaje
right posición del borde derecho del elemento auto | distancia | porcentaje
bottom posición del borde inferior del elemento auto | distancia | porcentaje
left posición del borde izquierdo del elemento auto | distancia | porcentaje
z-index apilamiento auto | número-entero
Pseudo-elementos
Nombre Descripción Valores
::first-letter primera letra
:first:line primera línea de texto
Pseudo-clases
Nombre Descripción Valores
:link enlaces no visitados
:visited enlaces ya visitados