CSS
Agora temos o CSS, ou seja, o estilo da nossa página. Para modificar cada elemento em nosso arquivo HTML, podemos selecioná-los usando ids, classes ou os próprios nomes de tag, embora a última opção seja desencorajada. Você vê, os estilos de seletores CSS mais específicos sobrescrevem os estilos de outros menos específicos. Por exemplo, os estilos de um seletor de id sobrescrevem aqueles de um seletor de classe, e os estilos do seletor de classe sobrescrevem aqueles de um seletor de nome de tag. Em outras palavras, sempre faça seus seletores CSS o mais específicos possível para afetar apenas os elementos que você deseja que sejam afetados.
E não se esqueça, enquanto os seletores de nome de tag precisam apenas do nome das tags, os seletores de id começam com o sinal de sustenido (#) e os seletores de classe começam com um ponto (.). Se um elemento tem um id “test-id”, então ele pode ser selecionado no CSS por seu id usando # test-id. Se um elemento tem uma classe “test-class”, então ele pode ser identificado como .test-class.
Com isso dito, você ainda pode usar seletores de nome de tag. Por exemplo, observe o início da essência do código. Os nomes das tags e foram usados como seletores. Porém, não se esqueça de que há apenas um de cada um desses dois elementos em um arquivo HTML … Neste caso, usamos esses dois primeiros conjuntos de regras (seletor mais tudo dentro dos colchetes) para fazer modificações em toda a página. Definir a altura de e para 100% faz com que a página use toda a tela e definir a margem de como 0 remove qualquer rolagem vertical que possa aparecer devido aos estilos padrão deste elemento.
Ainda no , fazemos com que ele use uma exibição de grade para centralizar seu conteúdo vertical e horizontalmente (com itens de alinhamento e itens de justificação, respectivamente). Em outras palavras, ele pega o conteúdo de , que é apenas o elemento
, e posiciona e seu conteúdo no centro morto da tela. Isso é chamado de layout de grade CSS e se você não estiver familiarizado com ele, escrevi um artigo introdutório rápido sobre isso aqui, caso você queira saber mais.
Usaremos apenas os casos de uso de layout de grade mais simples, ou seja, para fazer um elemento usar exibição de grade e, em seguida, posicionar seu conteúdo de acordo, mas eu recomendo olhar para o Layout de grade quando puder. É uma ferramenta simples, mas poderosa para posicionar elementos em suas páginas.
Para, conhecido por seu id main-holder (linha 15 da essência do código acima), ajustamos seu tamanho e brincamos com seu estilo para destacá-lo do fundo escuro. Também transformamos em uma grade para facilitar o posicionamento de seus conteúdos que são apenas três elementos: um , um e um . Assim, por padrão, o CSS torna esta grade de três linhas, uma para cada um dos elementos. Em outras palavras, pense no retângulo branco como uma grade de três linhas.
A primeira linha da grade, o título, permanece como está. A única modificação que consegue é ser centralizado, como consequência do conteúdo do suporte principal ser centralizado.
A segunda linha, por outro lado, recebe algumas modificações (linhas 26 a 49), pois precisamos modificar a própria linha que contém a mensagem de erro e, em seguida, a própria mensagem de erro. Usamos o layout de grade mais uma vez para centralizar a mensagem dentro da segunda linha e fazer o
ocupar todo o espaço disponível em sua linha (lembre-se, por padrão, um tem o mesmo tamanho dos elementos que contém, então, para torná-lo maior, você precisa especificar sua altura e / ou largura).
Para a mensagem de erro, apenas brincamos com seu tamanho e estilos. Observe que inicialmente sua opacidade é definida como 0, ou seja, não é visível. Este valor será alterado usando JavaScript quando o usuário inserir credenciais inválidas.
Também alteramos a exibição de metade do texto na mensagem de erro. Se você olhar novamente para o elemento da mensagem no HTML, temos:
<p id="login-error">Nome e/ou senha invalidos</p>Observe que o elemento que envolve metade do texto. é bastante útil quando você deseja estilizar apenas parte do texto em um elemento. Como queremos que a mensagem de erro seja dividida em duas linhas de texto, “Nome de usuário inválido” e “e / ou senha”, fazemos com que a segunda metade seja exibida como uma nova linha de texto, definindo a exibição de para bloquear (# mensagem de erro de segunda linha {display: block;}).
Agora, só precisamos passar pelos conjuntos de regras do
, a terceira linha da grade , para encerrar o CSS (linha 71 até o final). Começamos usando o layout da grade uma última vez para transformar o em uma grade. Porém, também fazemos uso de outra propriedade de grade em seu conjunto de regras, # login-form. Como o é um item de grade do contêiner de grade do elemento , podemos dizer como esse item de grade deve ser posicionado dentro de sua própria linha. Portanto, dizemos que ele deve ser alinhado verticalmente no topo de sua linha com align-self: flex-start. Nada mais nada menos.
Em seguida, estilizamos os campos do formulário. Como queremos que os dois campos (nome de usuário e senha) tenham a mesma aparência, criamos um único conjunto de regras que seleciona a classe dada a ambos os elementos, login-form-field. Em vez de selecionar cada elemento individual por seu id apenas para repetir o CSS, escrevemos o CSS uma vez em uma única classe e, em seguida, atribuímos essa classe a ambos os elementos.
Para as modificações de estilo, essas foram algumas pequenas alterações para fazer esses dois elementos
parecerem melhores. Para manter o estilo do texto do espaço reservado em linha com o estilo s ‘, também alteramos as cores desses espaços reservados com o pseudoelemento :: espaço reservado. Mas, em vez de torná-lo geral e escrever :: placeholder {…}, especificamos que queremos apenas alterar os placeholders de elementos que têm a classe .login-form-field como: .login-form-field: : placeholder {…}. Novamente, tente tornar seus seletores CSS o mais específicos possível.
Por último, alteramos o estilo do botão de login para torná-lo mais bonito. Nada de novo aqui, exceto para cursor: ponteiro que transforma o cursor em um ponteiro ao passar o mouse sobre o botão.
Ok, passamos pelo HTML e acabamos de terminar o CSS. Agora estamos na reta final com o JavaScript.
Continue lendo Primeira página de login com HTML, CSS e JavaScript – Parte 3
Se você deseja brincar com uma demonstração ao vivo, pode encontrar o código completo no GitHub aqui.