Alerta de CSS
Ejemplo 1:
Primero, tenemos que crear el archivo HTML para crear mi cuadro de alerta y luego crear el archivo CSS para diseñar el cuadro de alerta. Vamos a demostrar estos códigos en el estudio de código visual. Estamos creando un nuevo archivo con cualquier nombre de archivo y utilizando el ".Extensión del archivo HTML "para guardar este archivo HTML. Luego, comience a escribir el código dado en este archivo HTML.
Aquí, mencionamos el tipo de documento "HTML". Luego abra la etiqueta "". Tienes que cerrar todas las etiquetas que usas aquí. Entonces, cerramos esta etiqueta "" usando "" al final. Abra la etiqueta "". En la etiqueta "", hay una nueva etiqueta "meta". El "nombre" aquí especifica el nombre, y el "contenido" define los valores. Esta línea se usa para establecer la "ventana gráfica" para que nuestra página de alerta se vea bien en cada dispositivo.
Ahora, vincule este archivo HTML al archivo "CSS" llamado "Styling.CSS ". La etiqueta "Enlace" y la "Rel" definen la conexión entre la página vinculada y esta página. El "href" es para dar el nombre del archivo "CSS" .El archivo "CSS" es "Styling.CSS ". Después de este cierre, la etiqueta usando esta etiqueta "". Ahora tenemos que abrir la etiqueta "". El cuerpo contiene la etiqueta de encabezado
y hay un encabezado en esta etiqueta. Después de cerrar esto, hemos usado una clase Div y para esto, la etiqueta se usa aquí. Hemos creado una clase Div "Alerta" que se usa como un contenedor y una clase de span llamada "CloseBtn".
Aquí, agregamos una clase con una propiedad "OnClick" que se usa para ocultar el elemento principal. Cuando hace clic en él que está en el . El "& Times" se usa para crear la letra "X". El ""La etiqueta está ahí para que el texto se muestre como en negrita. Después de esto, cierre todas las etiquetas. Ahora, guárdelo. Luego, cree el archivo CSS para dar estilo a este cuadro de alerta. El código del archivo CSS también está aquí a continuación.
Primero, aplique el estilo al "Alerta". Establezca su "posición" como absoluta, lo que significa que podemos colocar elementos en cualquier lugar donde queramos. El relleno está aquí para crear espacios adicionales dentro de un elemento. El valor del relleno es "20px". El color del fondo es rojo. El código de color rojo es "#F44336". El color del texto es blanco. Luego, aplique el estilo en "CloseBtn" en el que arreglamos el margen izquierdo "15px" y el color es "blanco".
El peso del pliegue dice cuán gruesa o delgada es la fuente o delgada. En este CAE, es "audaz". La familia de fuentes se usa para el estilo de fuente, que es la fuente "Cambria". El color de "x" es "marrón" y "flota" al lado derecho de la caja de alerta. El tamaño de la fuente se establece como "22px" y la "altura de línea" es "20px". El "cursor" está aquí como un "puntero". Esto se usa para especificar el tipo de cursor. Aquí, el tipo de cursor se establece como "puntero" para que el puntero se muestre al usuario. Aplicamos el estilo a mi cuadro de alerta en este archivo CSS y también vinculamos este archivo al archivo HTML. Luego, genere la salida en el navegador. Vea la salida en la imagen:
Ejemplo # 2:
Vamos a crear más de un cuadro de alerta al mismo tiempo cambiando el código anterior. Puede ver cómo creamos cuadros de alerta en este código a continuación.
El código HTML es el mismo que se explica en el primer ejemplo. Tenemos que mostrar el encabezado "Mensajes de alerta", así que para esto estamos utilizando el
> Etiqueta. Luego, un párrafo es Displaye que está escrito dentro "
""
"Etiquetas. Luego, use las etiquetas "" y "" que hemos explicado en el primer ejemplo. Este cuadro de alerta mostrará "peligro". Creamos cuatro cuadros de alerta utilizando el mismo método aquí en este código.Ahora, aquí estamos diseñando los cuadros de mensaje de alerta usando CSS. Primero, tenemos que alinear el texto al centro de la pantalla. Entonces, Forithis usamos "Text-Align: Center". Ahora usa ".alerta.Danger "que aplica todo el estilo dado en los aparatos ortopédicos de esto a la caja de alerta de" peligro ". Aquí, puede ver que el color de fondo se establece como "rojo". Cuando aparezca este cuadro de alerta, el color de esto será "rojo". El texto escrito dentro de esto será de estilo "argelino".
Aquí, para aplicar el estilo de fuente, utilizamos la "Fuera de la fuente". El color de la fuente o el texto se establece como "negro". Después de esto, el color de la siguiente caja de alerta es "púrpura". La caja de alerta de "éxito" y el estilo de la fuente es "Times New Roman". Además, tenemos que cambiar el color del texto con la ayuda de "color" y establecerlo como "naranja". Entonces, tenemos que diseñar el tercer cuadro de alerta, "Alerta.información ". Elegimos el color de color azul claro y el código para esto es "#219643". El estilo de fuente que elegimos esta vez es "Arial" y el color para esto es "azul".
Además, tenemos el cuarto cuadro de alerta llamado "Advertencia". El color del fondo de esta caja de alerta de advertencia es "negro", "Font-Family" es "Georgia", y el color es "blanco". Fondo negro y texto o fuente blanca. Ahora, es hora de diseñar el botón de cierre. Para esto, hemos usado ".CloseBtn ". En esto, tenemos que diseñar este botón cercano. Establezca el "margen-izquierda" como "15px" y el color en "blanco". El peso de la fuente se usa aquí que hemos discutido en el código anterior. Usamos el peso de la fuente como "en negrita" y lo flotamos a la "derecha". El "tamaño de fuente" y la "altura de la línea" son "22px" y "20px" respectivamente. El tipo de "cursor" es "puntero".
En la salida, puede ver que el texto sobre los cuadros de alerta está centrado y todos los cuadros de alerta son de diferentes colores. El estilo de fuente y el color de fuente también son diferentes en cada caja de alerta. Todos estos estilos se realizan con CSS.
Conclusión:
En este tutorial, hemos discutido los mensajes de alerta en detalle. Hemos explicado cómo crear el cuadro de alerta en HTML, cómo diseñar el cuadro de alerta usando CSS y cómo vincular el archivo HTML con el archivo CSS. Hemos demostrado ejemplos aquí en este tutorial y también mostramos la salida de los códigos que hemos escrito en HTML y CSS. También explicamos cada línea de estos códigos para que le resulte fácil aprender este concepto. Este tutorial será útil para usted en el estilo y la creación de las cajas de alerta en sus sitios web.