Alerta CSS
Exemplo 1:
Primeiro, temos que criar o arquivo html para criar minha caixa de alerta e depois criar o arquivo CSS para modelar a caixa de alerta. Vamos demonstrar esses códigos no Visual Code Studio. Estamos criando um novo arquivo com qualquer nome de arquivo e usando o “.Extensão do arquivo html ”para salvar este arquivo html. Em seguida, comece a digitar o código fornecido neste arquivo html.
Aqui, mencionamos o tipo de documento "html". Em seguida, abra a tag "". Você tem que fechar todas as tags que você usa aqui. Então, fechamos esta tag "" usando "" no final. Abra a tag "". Na tag "", há uma nova tag "meta". O "nome" aqui especifica o nome, e o "conteúdo" define os valores. Esta linha é usada para definir a “viewport” para que nossa página de alerta fique bem em todos os dispositivos.
Agora, vincule este arquivo HTML ao arquivo "CSS" chamado "Styling.CSS ”. A tag "Link" e a "rel" definem a conexão entre a página vinculada e esta página. O "href" é para dar o nome do arquivo "css" .O arquivo "CSS" é "estilo.CSS ”. Depois disso, a tag usando esta tag "". Agora, temos que abrir a tag "". O corpo contém a tag de título
E há um título nesta etiqueta. Depois de fechar isso, usamos uma classe div e, para isso, a tag é usada aqui. Criamos uma classe div "Alert" que é usada como um contêiner e uma classe de span chamada "Closebtn".
Aqui, adicionamos uma aula com uma propriedade "OnClick" usada para ocultar o elemento pai. Quando você clica nele que está no . O "& Times" é usado para criar a letra "X". O "”A tag está lá para que o texto seja exibido como ousado. Depois disso, feche todas as tags. Agora, salve. Em seguida, crie o arquivo CSS para dar estilo a esta caixa de alerta. O código do arquivo CSS também está aqui abaixo.
Primeiro, aplique o estilo ao "alerta". Defina sua "posição" como absoluta, o que significa que podemos colocar elementos em qualquer lugar que queremos. O preenchimento está aqui para criar espaçamento extra dentro de um elemento. O valor do preenchimento é "20px". A cor do fundo é vermelha. O código de cor vermelha é "#f44336". A cor do texto é branca. Em seguida, aplique o estilo em "Closebtn", no qual corrigimos a margem esquerda "15px" e a cor é "branca".
O peso da dobra diz o quão grosso ou fino é a fonte ou fino. Neste Cae, é "ousado". A família de fontes é usada para o estilo de fonte, que é a fonte "Cambria". A cor de "X" é "marrom" e "flutua" para o lado direito da caixa de alerta. O tamanho da fonte é definido como "22px" e a "altura da linha" é "20px". O "cursor" está aqui como um "ponteiro". Isso é usado para especificar o tipo de cursor. Aqui, o tipo de cursor é definido como "ponteiro", para que o ponteiro seja exibido para o usuário. Aplicamos o estilo à minha caixa de alerta neste arquivo CSS e também vinculamos este arquivo ao arquivo html. Em seguida, gerar a saída no navegador. Veja a saída na imagem:
Exemplo # 2:
Vamos criar mais de uma caixa de alerta ao mesmo tempo, alterando o código acima. Você pode ver como criamos caixas de alerta neste código abaixo.
O código HTML é o mesmo que explicado no primeiro exemplo. Temos que exibir as “mensagens de alerta” do cabeçalho, por isso estamos usando o
> tag. Então, um parágrafo é exibido que está escrito dentro “
”“
" Tag. Em seguida, use as tags "" e "" que explicamos no primeiro exemplo. Esta caixa de alerta exibirá "perigo". Criamos quatro caixas de alerta usando o mesmo método aqui neste código.Agora, aqui estamos estilizando as caixas de mensagens de alerta usando CSS. Primeiro, temos que alinhar o texto ao centro da tela. Então, forithis, usamos “Alinhamento de Texto: Centro”. Agora usa ".alerta.perigo ”, que aplica todo o estilo dado nos aparelhos encaracolados disso à caixa de alerta de“ perigo ”. Aqui, você pode ver que a cor do fundo é definida como "vermelha". Quando esta caixa de alerta aparecer, a cor disso será "vermelha". O texto escrito dentro disso será de estilo "argelino".
Aqui, para aplicar o estilo de fonte, usamos a “família da fonte”. A cor da fonte ou texto é definida como "preta". Depois disso, a cor da próxima caixa de alerta é "roxa". A caixa de alerta "Sucesso" e o estilo da fonte são "Times New Roman". Além disso, temos que mudar a cor do texto com a ajuda de "cor" e defini -la como "oranguejada". Então, temos que estilizar a terceira caixa de alerta, “Alerta.informação ”. Escolhemos a cor de fundo azul claro e o código para isso é "#219643". O estilo da fonte que escolhemos desta vez é "Arial" e a cor para isso é "azul".
Além disso, temos a quarta caixa de alerta chamada "aviso". A cor do fundo desta caixa de alerta de aviso é "preta", "Font-Family" é "Geórgia", e a cor é "branca". Fundo preto e texto branco ou fonte. Agora, é hora de estilizar o botão Fechar. Para isso, nós usamos “.Closebtn ”. Nisso, temos que estilizar este botão de fechamento. Defina o "margem-esquerda" como "15px" e a cor como "branco". O peso da fonte é usado aqui que discutimos no código acima. Usamos o peso da fonte como "ousado" e o flutuam para o "direito". O "tamanho da fonte" e a "altura da linha" são "22px" e "20px", respectivamente. O tipo de "cursor" é "ponteiro".
Na saída, você pode ver que o texto acima das caixas de alerta está centrado e todas as caixas de alerta são de cores diferentes. O estilo da fonte e a cor da fonte também são diferentes em cada caixa de alerta. Todos esses estilos são feitos usando CSS.
Conclusão:
Neste tutorial, discutimos as mensagens de alerta em detalhes. Explicamos como criar a caixa de alerta em HTML, como estilizar a caixa de alerta usando CSS e como vincular o arquivo HTML ao arquivo CSS. Demonstramos exemplos aqui neste tutorial e também mostramos a saída dos códigos que escrevemos em HTML e CSS. Também explicamos cada linha desses códigos para que seja fácil para você aprender esse conceito. Este tutorial será útil para você no estilo e na criação das caixas de alerta em seus sites.