Conceptos de CSS

Elemento	Definición
padding	Es el espacio que hay entre el elemento y el borde (border).

Función	Propiedad
Píxeles (Unidad de longitud)	px
Porcentaje del tamaño de letra del contenedor padre directo	em
Porcentaje del tamaño de letra de body	rem
Ocupa todo el espacio horizontal disponible, crea una línea nueva y tiene un ancho y alto	Elemento tipo bloque
Ocupa sólo el espacio necesario para su contenido y no tiene dimensiones (a excepción de las imágenes)	Elemento inline
Convertir elemento a tipo bloque	display: block
Convertir elemento a tipo inline	display: inline
Convertir elemento a tipo inline y bloque	display: inline-block
Ocultar elemento	display: none
Definir una separación externa	margin: margin-top: margin-right: margin-bottom: margin-left:
Definir una separación interna	padding: padding-top: padding-right: padding-bottom: padding-left:
Escribir un comentario	/* COMENTARIO */
Seleccionar ID	#
Seleccionar clase	.
Selector universal	*
Selector hijo directo	>
Selector de hermano siguiente	+
Selector de hermanos siguientes	~
Selector de atributos	[ ]
Selector de atributos con comodines que comienzan con	[ ^ ]
Ejemplo de selector de atributos con comodines que comienzan con	a[href^="http://"] {valores}
Selector de atributos con comodines que terminan con	[ $ ]
Ejemplo de selector de atributos con comodines que terminan con	a[href$=".mp4"] {valores}
Selector de atributos con comodines que contienen	[ * ]
Ejemplo de selector de atributos con comodines que contienen	a[href*="texto"] {valores}
Definir el color	color: COLOR;
Definir el color de fondo	background: COLOR;
Raíz o elemento que representa la etiqueta html	:root { }
Ejemplo de uso de una variable	:root { --color: purple; } h1 { color: var(--color); }
Puntaje de especificidad	Etiquetas y pseudoelementos: 1 Clases, atributos y pseudoclases: 10 ID: 100 Estilos en línea: 1000
Definir como prioridad	!important
Heredar	inherit
No heredar sino usar valor inicial	initial
Añadir borde	border:
Definir ancho del borde	border-width:
Definir estilo del borde	border-style:
Definir color del borde	border-color:
Agregar borde arriba	border-top:
Agregar borde derecho	border-right:
Agregar borde abajo	border-botton:
Agregar borde izquierdo	border-left:
Redondear bordes	border-radius:
La propiedad CSS "outline" se utiliza para agregar un borde visual alrededor de un elemento HTML cuando está enfocado o activo. A diferencia de la propiedad "border", el "outline" no afecta al tamaño o diseño del elemento y se muestra por encima de otros estilos. Es útil para resaltar elementos que están siendo seleccionados o enfocados, y es especialmente importante para mejorar la accesibilidad de sitios web, ya que ayuda a los usuarios que navegan a través del teclado o utilizan lectores de pantalla a identificar los elementos enfocados. Asignale los atributos como si fuera un "border:".	outline:
Definir cómo se debe calcular las medidas de un elemento	box-sizing:
Propiedad del box-sizing para hacer que el valor del padding y el border pasen a formar parte del cálculo de ancho y alto de la caja en vez de sumar su valor	border-box
Cambiar el box-sizing	*, *:before, *:after { }
Agregar sombra o copia del elemento	box-shadow: h-offset v-offset blur spread color | inset
Propiedades del box-shadow	h-offset: desplazamiento en horizontal v-offset: desplazamiento en vertical blur: desenfoque spread: expandir o contraer inset: sombra interna
Agregar transición	transition: all tiempo
Propiedad para definir la altura de línea dentro de un bloque de texto. Controla la cantidad de espacio vertical entre líneas de texto en un elemento. También se traduce en interlineado.	line-height:
Colocar imagen de fondo	background: black url('../imagenes/Fondo1.jpg')
Cubre completamente el contenedor sin importar si parte de la imagen queda fuera.	background-size: cover
Ajusta completamente la imagen dentro del contenedor, asegurándose de que toda la imagen sea visible.	background-size: contain
Mantener la imagen fija en su posición mientras el contenido del elemento se desplaza, creando un efecto de paralaje. Esto significa que la imagen de fondo permanecerá en su lugar original con respecto a la ventana del navegador, independientemente de cómo se desplace el resto del contenido.	background-attachment: fixed
se utiliza para indicar que la imagen de fondo no se debe repetir y que solo debe mostrarse una vez en el fondo del elemento. Si la imagen de fondo es más pequeña que el área del elemento, se colocará una sola vez en el centro del fondo. Si la imagen de fondo es más grande que el área del elemento, se recortará para que solo se muestre una vez.	background-repeat: no-repeat
Indica que la imagen de fondo debe colocarse en el centro tanto en el eje horizontal como en el eje vertical del elemento. Esto asegura que la imagen de fondo esté centrada dentro del contenedor sin importar su tamaño o el tamaño del contenedor.	background-position: center
Se utiliza para controlar cómo se ajusta y escala un elemento "img" o "video" dentro de su contenedor. Esto es especialmente útil cuando las dimensiones del contenedor difieren de las dimensiones naturales del contenido, lo que puede resultar en recortes o distorsiones no deseadas.	object-fit
El contenido se estira para llenar completamente el contenedor, lo que puede causar distorsión de la relación de aspecto original.	object-fit: fill
El contenido se escala para que se ajuste dentro del contenedor sin distorsionar la relación de aspecto original. Puede haber espacios en blanco alrededor del contenido si las proporciones son diferentes.	object-fit: contain
El contenido se escala para cubrir completamente el contenedor, recortando cualquier exceso que quede fuera del área del contenedor.	object-fit: cover
El contenido no se escala y mantiene su tamaño original, lo que puede provocar que el contenido se desborde o recorte si no cabe dentro del contenedor.	object-fit: none
El contenido se escala de manera similar a none o contain, seleccionando la opción que resulte en una escala más pequeña.	object-fit: scale-down
Se utiliza junto con la propiedad object-fit para controlar la posición en la que se coloca un elemento "img" o "video" dentro de su contenedor, cuando el contenido es escalado o ajustado mediante object-fit. La propiedad object-position acepta dos valores: el primero especifica la posición horizontal (izquierda, derecha o centro) y el segundo la posición vertical (arriba, abajo o centro). Puedes utilizar valores numéricos, porcentajes o palabras clave para definir estas posiciones.	object-position
Ejemplo de object-position.	object-position: center top
Divide el contenido de un elemento en múltiples columnas. Permite especificar el número de columnas en las que se distribuirá el contenido de manera automática, creando un diseño en forma de columna similar a un periódico o una revista. Esta propiedad es particularmente útil para mejorar la legibilidad y la presentación de bloques de texto largo, como artículos, párrafos extensos o listas, al distribuir el contenido de manera más eficiente en el espacio disponible. column-count es útil para crear diseños de columnas sencillos, en algunos casos más complejos o en diseños responsivos, puede ser necesario combinar column-count con otras propiedades relacionadas, como column-width, column-gap y break-inside, para lograr el diseño deseado y asegurarse de que el contenido se muestre correctamente en diferentes tamaños de pantalla.	column-count
Ejemplo de column-count	column-count: 3
Se utiliza para establecer el espacio entre las columnas en un diseño de columnas creado con la propiedad column-count o column-width. Permite controlar la distancia horizontal entre las columnas de contenido en un elemento contenedor que ha sido dividido en múltiples columnas. Cuando se crea un diseño de columnas utilizando column-count o column-width, el espacio entre las columnas puede ser ajustado mediante column-gap para mejorar la legibilidad y la apariencia visual del diseño.	column-gap
Ejemplo de column-gap	column-gap: 20px
Se utiliza para definir una línea decorativa entre las columnas en un diseño de múltiples columnas creado con las propiedades column-count o column-width. Proporciona un estilo visual adicional para separar y distinguir las columnas de contenido en un elemento contenedor. La propiedad column-rule se compone de tres subpropiedades: column-rule-width: Define el ancho de la línea entre las columnas. column-rule-style: Especifica el estilo de la línea (por ejemplo, sólido, punteado, etc.). column-rule-color: Establece el color de la línea.	column-gap
Ejemplo de column-rule	column-rule: 2px solid #ccc
se utiliza para definir la forma que el flujo de texto debería seguir alrededor de un elemento no rectangular, como una imagen o un elemento "div". Permite controlar cómo el contenido textual se ajusta y se envuelve alrededor de un objeto con una forma específica. Esta propiedad es especialmente útil para crear diseños de páginas web más interesantes y atractivos, donde el texto puede fluir alrededor de elementos con formas personalizadas en lugar de simplemente rodear un rectángulo. El valor de shape-outside puede ser en forma de una forma geométrica básica, como un círculo, un óvalo o un polígono, o puede ser establecido utilizando imágenes para definir la forma. También se puede combinar con las propiedades float, clear y margin para controlar aún más la posición y el flujo del contenido.	shape-outside
Ejemplo de shape-outside	shape-outside: circle(50% at 50% 50%)
se utiliza para definir la forma que el flujo de texto debería seguir alrededor de un elemento no rectangular, como una imagen o un elemento "div". Permite controlar cómo el contenido textual se ajusta y se envuelve alrededor de un objeto con una forma específica. Esta propiedad es especialmente útil para crear diseños de páginas web más interesantes y atractivos, donde el texto puede fluir alrededor de elementos con formas personalizadas en lugar de simplemente rodear un rectángulo. El valor de shape-outside puede ser en forma de una forma geométrica básica, como un círculo, un óvalo o un polígono, o puede ser establecido utilizando imágenes para definir la forma. También se puede combinar con las propiedades float, clear y margin para controlar aún más la posición y el flujo del contenido.	shape-outside
Crear borde y definir 3 subpropiedades	border: border-width border-style border-color

Pseudoclases

Elementos HTML

Posicionamiento de elementos

Limpiar floats (método 1)

La siguiente propiedad se usa para cuando se han aplicado propiedades de float a cajas dentro de un contenedor. Al trabajar con float el contenedor padre no tendrá en cuenta la altura de los elementos flotantes hijos, lo cual resultará en un diseño desordenado. Para solucionar esto, se puede usar la clase .clear y aplicar la propiedad clear:both en el CSS. La propiedad clear con el valor "both" indica que el elemento no debe permitir que otros elementos floten a su izquierda o derecha. Es decir, crea un espacio debajo del último elemento flotante dentro del contenedor, asegurándose de que el contenedor se ajuste correctamente a la altura de los elementos flotantes.

      
      	<div class="container"> 
        	<div class="elemento-float"> </div>
            <div class="elemento-float"> </div>
            <div class="clear"> </div>
        </div>
      
    

      
      	.elemento-float {
        	float: left;
            width: 50%;
        }
        
        .clear {
        	clear: both;
        }
      
    

En este ejemplo, '.elemento-float' es una clase que se aplica a los elementos que se desean flotar, y '.clear' es una clase que se coloca después de los elementos flotantes para limpiarlos y asegurarse de que el contenedor '.container' tenga en cuenta la altura de los elementos flotantes.

Control del desbordamiento de contenido

Limpiar floats (método 2)

La propiedad overflow: hidden dentro del contenedor padre también permite solucionar el problema de los elementos flotantes sin necesidad de agregar un div hermano con la clase clear.

      
      	<div class="container"> 
        	<div class="elemento-float"> </div>
            <div class="elemento-float"> </div>
        </div>
      
    

      
      	.elemento-float {
        	float: left;
            width: 50%;
        }
        
        .container {
        	overflow: hidden;
        }
      
    

Al usar esta propiedad el contenedor padre ahora se ajustará automáticamente a la altura de los elementos flotantes y recorta cualquier contenido que se desborde del contenedor. Esto significa que si los elementos flotantes exceden el tamaño del contenedor padre, se recortarán y no serán visibles fuera del contenedor.

Visualización de elementos

Alineación de elementos

Alineación de texto

Diseño responsivo

Gracias a los media queries podemos aplicar estilos dependiendo de la pantalla donde se esté cargando el sitio web.