Etiquetas:
Em: Se marca el texto de mayor relevancia del párrafo. (texto leído con mayor énfasis)
Strong: Se marca la porción más importante del texto. (se aumenta el tono de lectura)
Br: Hacer salto de línea adentro de un párrafo. (Cortan oraciones y separan párrafos)
H1-H6: Encabezado / sección del documento.
Abbr: Abreviatura ej: <abbr title=“familia”>flia.</abbr>
Etiquetas para citar:
“q”
“cite”
“blockquote”
Listas:
ol: Lista numerada
ul: Lista de viñetas. (las dos llevan adentro una etiqueta li)
3 etiquetas para indicar un término y sus significados:
dt: El término.
dd: Especificación del término.
Van dentro de un dl. Luego de un dt pueden venir uno o varios dd.
Imágenes.
Img: Puede estar dento de un div o un figure, no puede estar suelta.
Width: Ancho de la img, en px.
Height: Alto de la img, en px.
Tilte =” tooltip”: Etiqueta que aparece al dejar el mouse sobre la img.
Figure: Puede contener una o varias img. Contiene un figcaption.
Figcaption: Descripción de img. Tiene que ser el primer o último hijo del figure. Tiene que
haber solo un figcaption por figure. Aunque éste contenga varias imágenes dentro.
Vínculos:
Se agregan con la etiqueta a.
Se puede forzar una descarga de un archivo con el atributo download. Ej:
Para mandar mail:
Elementos de línea/bloque:
En línea: ocupan solo el ancho de su contenido, se ubican uno al lado del otro. Ej: strong, em,
img, a, span.
En bloque: ocupan el 100% del ancho del contendor, se ubican uno abajo del otro. Ej; p, div,
encabezados.
Div: de bloque. Establece divisiones en el contenido de la página para su maquetación.
Contenedor de los elementos de la pág.
Span: De línea. Contenedor de pequeñas porciones de texto.
Main: describe el contenido principal de la página. Puede no estar.
Footer.
Nav: Barra de navegación principal. Puede existir más de uno en un mismo documento.
Article. Porción del documento que podría ser leída independientemente. Pueden haber
varios. Puede tener su propio header y footer.
Section: Grupo de contenidos. Puede contener varios articles.
Aside: Contenido aparte dentro del contexto. Podría no existir y sería lo mismo.
CSS.
Identificador: # - id ej. Css: #rojo html: id=rojo
De clase: . – class ej. Css: .rojo html: class=rojo
De etiqueta: Se pone solo la etiqueta y abarca todo. Ej: h1{
Se linkea con el html bajo el atributo: link en el head.
Font-size: Tamaño del texto.
Font-weight: Peso de la fuente. (normal o bold)
Font-style: Estilo de la fuente.
Font-variant: Variante.
Font-family: Familia tipográfica.
Text-decoration: Tipo de subrayado.
text-transform: Mayúsculas/Minúsculas.
Text-align: Alineación del texto.
Text-indent: Tabulación de la primera línea.
Line-height: Interlineado.
Decoración de Vínculos.
a : link{} vinculo en reposo.
a : hover{} El puntero del mouse está encima de él.
a : active{} Mientras el usuario mantiene el click.
a : visited{} El vínculo ya fue visitado.
Cajas de CSS:
Width: Espacio declarado para el ancho del contenido de la caja.
Height: Espacio declarado para el alto del contendio.
Border: Tipo de línea que envuelve a la caja.
Padding: Separación entre el borde y el contenido de la caja.
Margin: Separación entre el borde y el afuera de la caja.
Margin, border, padding:
1 solo valor: Aplica a los 4 lados.
2: top y bottom.
4: top, right, bottom, left.
Fondo de la caja:
Background-color: Color de fondo.
Background-image: Imagen de fondo.
Background-repeat: Repetir img a rellenar.
Background-position.
Background-attachment. Si hay scroll se determina si la img se mueve o se queda fija. [scroll],
fixed.
background-size: Tamaño de la img de fondo.
Contain: escala para cubrir el ancho O alto de la caja.
Cover: escala para cubrir el ancho Y el alto de la caja
Propiedad float.
Acepta dos valores: Left, Right.
Se puede aplicar: padding, margin, border.
Si necesitamos que un elemento que sigue a los flotados se ubique a continuación y no por
debajo, se aplica: Clear.
Clear: left
Clear: right
Clear: both
Propiedad position.
4 valores:
Static: Normal.
Relative: Relativo.
Absolute: Absoluto.
Fixed: Fijo.
Cualquiera se puede desplazar menos static. Lo hacen mediante: top – left – right – bottom.
Aceptan valores positivos (derecha o arriba) y negativos (izquierda o abajo).
Propiedades Display:
Display: flex o inline-flex
Dirección: Flex-direction: row, row-reverse, column, column-reverse.
Cantidad de líneas: Flex-wrap: Wrap, no-wrap, wrap-reverse.
flex-flow: Combinación. Ej: row wrap;
Alineación:
Justify-content: flex-start, flex-end, center, space-between, space-around.
align-items: flex-start, flex-end, center, baseline, stretch.
Order: orden en que se muestran.
Align-self: Se alinea a sí mismo.
Estructura semántica:
Header-Main-Footer-Nav-Article-Section-Aside-Figure-FigureCaption-
No Semanticos:
Div-Span
