Introducción a CSS (II)
Curso de introducción al desarrollo web
Creado por Jorge García para twitch.tv/jorchg 
Text formatting
CSS tiene bastantes propiedades para formatear texto
- Color
- Align
- Decorations
- Transformation
- Spacing
- Shadow
La propiedad "text-align" se usa para alinear horizontalmente el texto
EL texto puede estar alineado a la izquierda, a la derecha, centrado o justificado
La propiedad "vertical-align" se utiliza para alinear texto verticalmente.
Por ejemplo, el texto respecto a una imagen
La propiedad "text-decoration" se usa para poner o quitar decoraciones de elementos
Por ejemplo, el underline de los links
La propiedad "text-transform" se utiliza para especificar mayúsculas o minúsculas en un texto
Se puede utilizar para poner un texto todo a mayúsculas, todo a minúsculas o capitalizar la primera letra
Existen varias propiedades para controlar la indentación del texto
- text-indent
- letter-spacing
- line-height
- word-spacing
- white-space
La propiedad "text-shadow" se utiliza para añadir sombras a los textos
Se puede definir con hasta 4 parámetros: Tamaño horizontal, tamaño vertical, blur y color
Posicionamiento de elementos
Podemos utilizar la propiedad "position" para controlar cómo se van a posicionar los elementos en nuestra página
- static: flujo normal de los elementos
- relative: afectada por top, right, bottom, left
- fixed: relativo al viewport
- absolute: relativo al posicionamiento de su ancestro más cercano
- sticky: mix de relative y fixed
Con la propiedad z-index posicionamos delante o detrás elementos solapados 
Maquetación responsive
Hoy en día, casi todas las páginas web de dominio público deben funcionar correctamente para diferentes tamaños de navegador, principalmente móviles. La forma correcta de hacerlo hoy en día es utilizar diseños fluidos y maquetarlos en concordancia.
Cuando necesitamos que un contenedor funciona correctamente en diferentes resoluciones, en vez de dar un tamaño fijo a ese contenedor podemos utilizar la propiedade "max-wdith"
Si además utilizamos el valor "auto" para la propiedad "margin" podremos centrarlos fácilmente
Para controlar qué ocurre con contenido que es demasiado grande para el área en el que debería encajar se utiliza la propiedad "overflow"
El overflow horizontal y vertical se pueden controlar por separado con "overflow-x" y "overflow-y"
Media queries
Las "media queries" se utilizan para modificar el documento en función del tipo de dispositivo, ya sea pantalla o impresora o diferentes parámetros como la resolución de pantalla, la orientación del dispositivo, el aspect-ratio del dispositivo o la densidad de píxeles entre otros.
Referencia completa: MDN
Las media queries pueden aplicarse también al añadir una hoja de estilos mediante "<link>" con el atributo media
Para que todo funcione correctamente en dispositivos móviles, necesitamos añadir una etiqueta meta a nuestro documento, para que el móvil no simule un tamaño de pantalla superior
Display property
La propiedad "display" es la propiedad más importante para controlar el layout.
ESpecifica cómo un elemento debe ser mostrado
- block
- inline
- flex
- inline-flex
- inline-block
- ...
CSS combinators
Los "combinators" se usan en selectores y se utiliza para seleccionar elementos basados en relaciones
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
Selector de valor de atributo