En estas página los estilos aplicados en linea a cada ejemplo alteran los estilos del menú y los enlaces a redes sociales
Este ejemplo aplica un contorno sólido de 3 píxeles de color verde con un desplazamiento de 5 píxeles desde el borde del botón.
En este ejemplo hemos realizado una aplicacion completa de estilos
.button: Aplica un contorno sólido rojo de 2 píxeles alrededor del botón.
.button-dashed: Aplica un contorno discontinuo azul de 3 píxeles alrededor del botón.
.button-offset: Aplica un contorno sólido verde de 3 píxeles con un desplazamiento de 5 píxeles alrededor del botón.
.input-focus: Aplica un contorno sólido de 5 píxeles de color azul con un desplazamiento de 5 píxeles. Cuando se hace clic en el, cambia el color del borde a naranja, con un espesor de 5px y desplazado 5px del input. Un clic fuera del boton lo devuelve
a su color original
Este texto está alineado a la izquierda.
Este texto está alineado a la derecha.
Este texto está centrado.
Este texto está justificado. La justificación asegura que el texto se alinee uniformemente a ambos lados, agregando espacio adicional entre las palabras según sea necesario. Esto puede hacer que los bloques de texto se vean más ordenados y alineados.
La propiedad text-align se utiliza para establecer la alineación horizontal de un texto.
Un texto puede estar alineado, centrado o justificado hacia la izquierda o hacia la derecha.
El ejemplo muestra los textos alineados dejando un espacio entre los contenedores div de 20px.
la alineación a la izquierda es la predeterminada si la dirección del texto es de izquierda a derecha
y la alineación a la derecha es la predeterminada si la dirección del texto es de derecha a izquierda
Estilos aplicados sobre enlaces y los efectos que se crean
Al hacer foco en el primer link el texto cambia a naranja y con un clic aparece una linea de puntos que rodea la caja del enlace.
En el segundo enlace al hacer foco el texto cambia a color marron y las letras remarcadas. Al hacer clic aparce una perimetro en rojo y el texto cambia a verdoso con letras inclinadas.
En el tercer vínculo al acercar el mouse, aparece el texto subrayado. Al hacer clic el texto cambia a naranja y aparece alrededor del botón lineas punteadas de color negro.
Enlace Estilo 1Estilos Generales: Se aplica un conjunto de estilos generales a todos los enlaces
para asegurar una transición suave y sin subrayado por defecto.
Clases Específicas: Se definen clases específicas (.link-style1, .link-style2, .link-style3) para
aplicar estilos diferenciados a los enlaces en diferentes estados (:visited, :hover, :active, :focus).
Transiciones: Las transiciones suaves para el color y la decoración del texto
mejoran la experiencia del usuario.
Outline: El uso de outline para el estado :focus ayuda a mejorar la accesibilidad, indicando claramente cuál enlace está enfocado.
| Columna 1 | Columna 2 |
|---|---|
| Fila 1, Columna 1 | Fila 1, Columna 2 |
| Fila 2, Columna 1 | Fila 2, Columna 2 |
| Fila 3, Columna 1 | Fila 3, Columna 2 |
Este código crea una tabla estilizada con bordes, colores de fondo alternativos para las filas y un efecto de resaltado al pasar el cursor sobre las filas.
| Columna 1 | Columna 2 |
|---|---|
| Fila 1, Columna 1 | Fila 1, Columna 2 |
| Fila 2, Columna 1 | Fila 2, Columna 2 |
| Fila 3, Columna 1 | Fila 3, Columna 2 |
| Fila 4, Columna 1 | Fila 4, Columna 2 |
En este ejemplo la tabla incluye divisores horizontales, color de fondo para los encabezados, con un subrayado en la parte inferior de las filas, resaltado las filas alternas al pasar el cursor y un efecto de rayas de cebra. Los colores son intensos con el objetivo de destacar la funcionalidad del código.
background-color: #f0f0f0;: Establece el color de fondo del dropdown a un azul claro.
Puedes ajustar el valor hexadecimal (#f0f0f0) para obtener un tono de azul más claro o más oscuro
según tus preferencias.
padding: 10px;: Agrega espacio de relleno (padding) alrededor del contenido del dropdown,
creando un margen entre el borde y el texto. Puedes ajustar el valor (10px) para aumentar o disminuir
el espacio de relleno.
border-radius: 5px;: Aplica bordes redondeados al dropdown, dándole un aspecto más suave y moderno.
Puedes ajustar el valor (5px) para obtener bordes más o menos redondeados.
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) Crea una sombra alrededor de la caja del link
Los selectores CSS proporcionan una gran flexibilidad y precisión para aplicar estilos a los elementos HTML. Al utilizar los diferentes tipos de selectores, puedes diseñar layouts complejos y específicos que respondan a diversas necesidades de diseño y funcionalidad en una página web.
La propiedad de CSS determina el orden de apilamiento de los elementos
posicionados (aquellos con position establecido en absolute, relative,
fixed o sticky) en una página web.
En este ejemplo se muestra como se superponen los contenedores 1, 2 y 3
utilizando la propiedad z-index
A continuación se muestran los estilos CSS aplicados a los contenedores anteriores donde definimos el orden de apilamiento con la propiedad z-index
.container-z { position: relative; width: 200px; height: 200px; }
.box-z-1 { background-color: red; top: 20px; left: 20px; position: absolute; width: 100px;
height: 100px; color: white; text-align: center; line-height: 100px; z-index: 2; }
.box-z-2 {background-color:rgb(0, 128, 0, 0.6);top:80px; left:80px; position:absolute; width:100px;
height: 100px; color: white; text-align:center; line-height:100px; z-index:4; }
.box-z-3 {background-color: rgb(0, 0, 255,0.5); top: 160px; left: 160px; position: absolute; width: 100px;
height: 100px; color: white; text-align: center; line-height: 100px; z-index: 3; }
En este ejemplo, Box 1 estará al fondo.
Box 3 al frente de Box 1,
y finalmente Box 2 que estará al frente de Box 1 y Box 3.