.
Selector hijo directo: Selecciona elementos que son hijos directos de otro elemento. div > p { color: green; } Selector de hermanos adyacentes: Selecciona un elemento que es el siguiente hermano inmediato de otro. h1 + p { font-style: italic; } Selector de hermanos generales: Selecciona todos los hermanos de un elemento. h1 ~ p { color: gray; }
- Selectores de Atributos Permiten seleccionar elementos en función de sus atributos. Selector de atributo simple: [type="text"] { border: 1px solid black; } Aplica el estilo a todos los elementos con type="text". Selector de atributo que contiene un valor: [class*="boton"] { background-color: blue; }
Propiedades CSS para Tamaños y sus Unidades de Medida En CSS, las propiedades relacionadas con tamaños (como width, height, font-size, margin, padding, etc.) permiten definir dimensiones y espaciados de los elementos. Estas propiedades aceptan valores que pueden expresarse en diferentes unidades de medida, las cuales se dividen en absolutas y relativas. Propiedades CSS para Tamaños Algunas de las propiedades más comunes para definir tamaños en CSS son: width y height: Definen el ancho y alto de un elemento. div { width: 200px; height: 100px; } min-width y min-height: Establecen el ancho y alto mínimos requeridos para un elemento. Si el contenido es menor que estos límites, el elemento se expandirá automáticamente. div { min-width: 300px; min-height: 150px; } max-width y max-height: Establecen el ancho y alto máximos permitidos para un elemento. div { max-width: 500px; max-height: 300px; } font-size: Define el tamaño de la fuente. p { font-size: 16px; }
margin y padding: Controlan los espacios externos e internos de un elemento, respectivamente. div { margin: 20px; padding: 10px; } Unidades de Medida en CSS Las unidades de medida en CSS se dividen en absolutas y relativas.
- Unidades Absolutas Estas unidades tienen un tamaño fijo y no dependen de otros elementos o del tamaño de la pantalla. Son útiles para diseños que no necesitan ser responsivos. px (píxeles): Unidad más común para definir tamaños. Representa un punto en la pantalla. div { width: 300px; } cm (centímetros) y mm (milímetros): Basadas en medidas físicas reales. div { width: 10cm; } in (pulgadas): 1 pulgada equivale a 2.54 cm. div { width: 2in; } pt (puntos): 1 punto equivale a 1/72 de pulgadas.
div { width: 50vw; /* 50% del ancho de la ventana / height: 50vh; / 50% de la altura de la ventana / } vmin y vmax: Relativos al menor o mayor tamaño entre el ancho y la altura de la ventana. div { width: 10vmin; / 10% del menor lado de la ventana / } ¿Cuándo usar cada unidad? Usa unidades absolutas (px, cm, etc.) para elementos que no necesitan ser responsivos. Usa unidades relativas (%, em, rem, vw, etc.) para diseños adaptables y responsivos. rem es ideal para mantener consistencia en tamaños de texto, ya que depende del tamaño base definido en :root. vw y vh son útiles para diseños que deben ajustarse al tamaño de la pantalla. Propiedades CSS para Texto Las propiedades de texto en CSS permiten controlar y personalizar la apariencia y el comportamiento del texto en una página web. Estas propiedades afectan aspectos como la alineación, el espaciado, la transformación, el color, y más. Propiedades Principales para Texto: Color: Define el color del texto. Puedes usar nombres de colores, valores hexadecimales, RGB, HSL, etc. p { color: #333333; / Color gris oscuro */ } font-size: Establece el tamaño de la fuente.
h1 { font-size: 24px; /* Tamaño de fuente en píxeles / } font-family: Define la familia tipográfica del texto. Puedes especificar varias fuentes como respaldo. body { font-family: Arial, Helvetica, sans-serif; } font-weight: Controla el grosor del texto. Los valores comunes son normal, bold, o números como 100, 400, 700. p { font-weight: bold; / Texto en negrita / } text-align: Alinea el texto horizontalmente. Los valores comunes son left, right, center, y justify. div { text-align: center; / Texto centrado / } line-height: Ajusta el interlineado (espacio entre líneas de texto). p { line-height: 1.5; / Espaciado de 1.5 veces el tamaño de la fuente / } letter-spacing: Controla el espaciado entre caracteres. h2 { letter-spacing: 2px; / Espaciado adicional entre letras */ } word-spacing: Ajusta el espaciado entre palabras.
h1 { text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra negra con desenfoque / } overflow-wrap: Controla cómo se comporta el texto cuando no cabe en su contenedor. p { overflow-wrap: break-word; / Permite dividir palabras largas / } text-align-last: Alinea la última línea del texto. p { text-align-last: justify; / Justifica la última línea */ } Ejemplo Completo: p { color: #444; font-size: 16px; font-family: 'Arial', sans-serif; font-weight: normal; text-align: justify; line-height: 1.6; letter-spacing: 1px; word-spacing: 2px; text-transform: capitalize; text-decoration: none; text-indent: 20px; } Propiedades CSS para Imágenes
CSS ofrece una variedad de propiedades para controlar y personalizar la apariencia de las imágenes en una página web. Estas propiedades permiten ajustar el tamaño, la posición, el estilo y el comportamiento de las imágenes. Propiedades Básicas para Imágenes width y height: Controlan el ancho y alto de una imagen. Puedes usar valores en píxeles, porcentajes o unidades relativas. img { width: 100%; /* Imagen ocupa el 100% del contenedor / height: auto; / Mantiene la proporción de la imagen / } Estas propiedades son esenciales para hacer imágenes responsivas. max-width y max-height: Establecen el tamaño máximo que puede tener una imagen. img { max-width: 500px; / Ancho máximo de 500 píxeles / max-height: 300px; / Alto máximo de 300 píxeles / } object-fit: Define cómo se ajusta una imagen dentro de su contenedor. Los valores comunes son: contain: La imagen se escala para caber dentro del contenedor sin recortarse. cover: La imagen llena el contenedor, pero puede recortarse. fill: La imagen se estira para llenar el contenedor. img { object-fit: cover; / La imagen llena el contenedor / } Esto es útil para evitar que las imágenes se desborden de su contenedor. object-position Ajusta la posición de la imagen dentro de su contenedor cuando se usa object-fit. img { object-fit: cover; object-position: center; / Centra la imagen */
Propiedades de Fondo para Imágenes background-image: Define una imagen como fondo de un elemento. div { background-image: url('imagen.jpg'); } background-size: Controla cómo se escala la imagen de fondo. div { background-size: cover; /* La imagen llena el contenedor / } Esto es útil para crear diseños responsivos. background-position: Ajusta la posición de la imagen de fondo. div { background-position: center; / Centra la imagen de fondo / } background-repeat Define si la imagen de fondo se repite. div { background-repeat: no-repeat; / No repetir la imagen / } Propiedades Avanzadas image-rendering: Controla cómo se renderiza una imagen (por ejemplo, para gráficos pixelados). img { image-rendering: pixelated; / Renderizado nítido para pixel art */ } Esto es útil para imágenes con detalles específicos, como gráficos retro. clip-path: Recorta la imagen en formas personalizadas.
img { clip-path: circle(50%); /* Imagen recortada en forma circular */ } Ejemplo Completo: img { width: 100%; max-width: 500px; height: auto; object-fit: cover; border: 2px solid #ccc; border-radius: 10px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); filter: grayscale(50%); } Conclusión Las propiedades CSS para imágenes permiten un control total sobre su tamaño, estilo y comportamiento. Desde ajustes básicos como width y height hasta efectos avanzados como filter y clip-path, estas herramientas son esenciales para crear diseños visualmente atractivos y responsivos. Propiedades CSS para Enlaces Los enlaces son elementos fundamentales en la web, y CSS ofrece diversas propiedades para personalizar su apariencia y comportamiento. A continuación, se presentan las propiedades más comunes que puedes utilizar para estilizar enlaces. Propiedades Básicas Color: Cambia el color del texto del enlace. a {
a:link { color: blue; /* Color para enlaces no visitados / } :visited Estilo para enlaces que han sido visitados. a:visited { color: purple; / Color para enlaces visitados / } :hover Estilo que se aplica cuando el cursor está sobre el enlace. a:hover { color: red; / Color al pasar el mouse / text-decoration: underline; / Subrayado al pasar el mouse / } :active Estilo que se aplica cuando el enlace está siendo clicado. a:active { color: green; / Color al hacer clic / } Propiedades Avanzadas padding y margin: Controlan el espacio alrededor del enlace. a { padding: 10px; / Espacio interno / margin: 5px; / Espacio externo */ } background-color: Cambia el color de fondo del enlace.
a { background-color: yellow; /* Color de fondo / } Border: Agrega un borde alrededor del enlace. a { border: 1px solid black; / Borde negro / } border-radius: Redondea las esquinas del borde del enlace. a { border-radius: 5px; / Esquinas redondeadas */ } Ejemplo Completo a { color: blue; text-decoration: none; font-weight: bold; font-size: 16px; padding: 10px; border: 1px solid transparent; border-radius: 5px; } a:link { color: blue; } a:visited { color: purple; }
