Olá, aluno(a)! Na lição anterior, aprendemos sobre o que é a linguagem CSS, seletores, propriedades, valores e como configurar o diretório para o desenvolvimento de sistemas voltados ao Front-End. Nesta lição, entenderemos e praticaremos novas extensões na linguagem CSS, como os atributos (ID, Classes, incorporados em tags HTML). O ideal é ter uma noção sobre os elementos para renderizar conforme a equipe de design fabrica os layouts. 

Como toda regra existe sua exceção, não são todos os layouts desenvolvidos pelos projetistas que podemos codificar em HTML e CSS. Para alguns navegadores (browser) fica difícil a interpretação ou a sua compatibilidade. Assim, o interessante é sempre testar em outros navegadores, por isso, a importância de desenvolver e testar seu documento, e estes testes, preferencialmente, devem ser realizados por outro colaborador.

A linguagem CSS possui elementos que renderizam o seu documento em HTML. A invenção desta linguagem facilitou muito para os programadores e desenvolvedores Front-End. Entretanto suas extensões, em alguns navegadores (browser), não se aplicam a tais efeitos de personalização. O problema que muitos desenvolvedores se deparam é: contornar tais situações. A exemplo, temos as versões do navegador Internet e/ou Edge. Nas versões do navegador Internet Explorer 6, 7 e 8, era complicado algumas renderizações, como efeitos de sombra, cantos de caixas em formato de retângulos arredondados, entre outros. 

Hoje, você, futuro(a) desenvolvedor(a), está preparado(a) para lidar com essas situações? Provavelmente, totalmente preparado(a), ainda, não, estou certo? Por isso, a importância de praticar e estudar as causas e os efeitos que esta linguagem proporciona. Uma dica é: sempre que for desenvolver uma página de internet e precise utilizar os seletores e suas extensões em CSS, não esqueça de validar seu código no site W3C. Toda organização está à procura de pessoas que buscam se aperfeiçoar, sejam proativas e eficazes profissionalmente, e a melhor forma de obter essas qualidades é estudar. Portanto, desejo a você, caro(a) estudante, um excelente aprendizado.

Nesta lição, aprofundar-nos-emos em algumas extensões da linguagem CSS. O nosso objetivo é aprender sobre como utilizar as extensões do CSS para personalizar os documentos em HTML, complementando, assim, a necessidade de exibir a informação que, na maioria, é de suma importância para o cliente. Continuaremos a aplicar a estilização do layout, focado, agora, no menu de navegação da página do site desenvolvida pela equipe de projetistas em designer. Desse modo, entenderemos como os links aplicados no menu mudaram de vertical para horizontal. Outra estilização que trataremos é a logo do site, que está posicionada no centro da página independentemente da posição do menu. Para isso, estudaremos a propriedade position, nesta lição.

Como já implementamos as tags de HTML na lição anterior, estilizaremos o menu de navegação e estudaremos as suas propriedades com foco na prática. Assim, o nosso objetivo é renderizar o documento HTML criado, para que tenha um estilo personalizado. Relembrando o código HTML a seguir:

No código em HTML, o importante é entender a renderização dentro do elemento <header></header>. Na linha 12, temos a propriedade id, sempre que aplicar esta tag, lembre-se que ela é única, só aplicamos quando não estilizaremos a página em outro bloco. Este menu tem essa característica e, quando renderizar, só será aplicado neste elemento <ul>. O id é uma forma de identificação única no seu código. Já o elemento class conseguimos identificar um grupo de elementos e, no documento HTML, pode haver diversas class. Já o elemento id é um identificador isolado, sendo que sua repetição não existe no documento (LEPSEN, 2018).

No nosso exemplo, usamos duas listas não-ordenadas por meio do elemento <ul>, conhecida como Unordered List. Se fomos aplicar a estilização apenas no elemento <ul>, o estilo seria duplicado para as duas listas. É por isso que, para diferenciar os estilos, inserimos o elemento id. Como só utilizarei o menu de navegação no topo, a inserção do estilo recebeu o nome de menu-esquerda e menu-direita. Para renderizarmos o menu, uma das opções é aplicar o seguinte código:

Analisemos o conteúdo das linhas: 

• Linha 1 a 7: na primeira linha, utilizamos, no seletor, o sinal header nav, pois estamos aplicando no elemento nav, que está dentro da tag <header>. Na segunda linha, a propriedade display é utilizada para alinhar todos os elementos em uma linha, como blocos ou contêiner. Na terceira linha, é inserida a propriedade background, alterando o valor de fundo do menu para a tonalidade de verde escuro em:  rgb(20, 54, 40), em que r corresponde ao red (vermelho), g, ao green (verde) e b, ao blue (azul), os valores que estão entre parênteses quer dizer: estou utilizando apenas 20% da cor vermelho e assim por diante. Na quarta linha, aplica-se a propriedade justify-content: center, que significa que o conteúdo deve ficar justificado de forma centralizada. Na quinta linha, os itens devem ser alinhados na linha de base do contêiner. Na sexta linha, foi aplicada uma margem apenas no topo, o restante atribui valor zero, pois não serão modificados (UZAYR, 2022).

• Linha 8 a 11:  modificaremos o seletor header nav ul, alterando a propriedade display, para que possam ficar alinhados em blocos. Na décima linha, foi aplicada a propriedade list-style: none, neste caso, é ocultado o estilo de lista. A marcação da lista fica sem o símbolo ●. Na décima primeira linha, fechamos o bloco do CSS header nav ul com o símbolo de chave: }.

• Linha 12 a 14: foi aplicada a propriedade padding para definir a distância entre o conteúdo de um elemento em relação a suas bordas. Sendo o seu valor de topo = 0; direita: 10 pixels; abaixo = 0; e esquerda = 10 pixels. Quando aplicamos a propriedade padding, os valores seguem o comportamento horário do relógio (MDN, 2022a).

• Linha 15 a 17: na décima quinta linha, inicia chamando o elemento id com o símbolo # e, então, sugerimos o nome do seletor, que é menu-esquerda. A propriedade margin-left: 10px significa que configuramos a margem à esquerda, com o valor de 10 pixels (MDN, 2022b).

• Linha 18 a 20: na décima oitava linha, chamamos o elemento id com o nome de #menu-direita, ou seja, estamos estilizando o menu da direita conforme o código que está localizado entre as linhas 21 e 24, do documento HTML. Assim, foi aplicada a margin-left: 125px, conforme o layout preparado pelo designer, pois, entre os menus, temos a logo que está centralizada com o corpo da página do site (SILVEIRA; ALMEIDA, 2013).

• Linha 21 a 29: a linha vigésima primeira linha inicia-se com o nome de seletor header nav ul li a, que serve para a configuração e estilização do link. Repare, no layout do designer, que não temos a cor azul e o sublinhado nos itens do menu: Home, Cardápio, Pedidos, entre outros. Assim, aplicaremos o mesmo estilo proposto pela equipe de designer ou o mais próximo disso. Na vigésima segunda linha, a propriedade utilizada foi o display: block;, que serve para exibir um elemento em forma de bloco, parecido com o elemento <p> em HTML. Na vigésima terceira linha, temos a propriedade color:#fff;, que altera a cor azul dos itens do menu para branco. Outra maneira de configurar a cor é utilizando as formas hexadecimais, no nosso caso, o valor da propriedade color é #fff, que é compatível com a cor branco. Na vigésima quarta linha, a propriedade aplicada é o text-decoration: none;, retirando, assim, o sublinhado dos itens do menu. Para reforçar, na vigésima quinta linha, adicionamos uma fonte de família com a propriedade font-family: system-ui, ... (W3SCHOOLS, [2022]). Na linha vigésima sexta linha, utilizamos a propriedade padding: 20px;, que cria um afastamento em relação às bordas no bloco dos itens do menu, em todas as direções (topo, abaixo, esquerda e direita). Na vigésima sétima linha, alteramos de letras minúsculas para letras maiúsculas, por meio da propriedade text-transform:uppercase;. Por fim, nas linhas vigésima oitava e vigésima nona, configura-se o estilo da fonte para o valor normal e fechamos o bloco do seletor header nav ul li a.

• Linha 30 a 32:  na trigésima linha, utilizamos o seletor :hover, que altera o estilo ao navegar com o mouse entre os itens do menu. Assim, a propriedade que altera a opacidade da cor é a propriedade background-color: rgba(153, 179, 155, 0.2);. Note que o último valor se trata da opacidade transparente de 20%, fica a seu critério, caso queira modificar este valor.

Codificaremos, também, a logo e o conteúdo principal do site. Para isso, utilizaremos, ainda, a linguagem CSS para personalizar. Assim, o bloco de codificação fica com a seguinte estrutura:

Analisemos o conteúdo das linhas: 

• Linha 1 a 4: neste bloco de codificação CSS, personalizamos a logo do site que está implementada com o elemento id no documento HTML. Na segunda linha, utilizamos a propriedade position: absolute, que é definido como um elemento que pode ser sobreposto e posicionado em relação a um elemento antecessor relativo. No nosso caso, a logo precisa ficar sobreposta em relação aos itens do menu, por esta razão, utiliza-se a propriedade position com valor absolute (MDN, 2022c). Na terceira linha, é atribuída a margem com os valores margin: -40px 0 0 25px;. Ou seja, quando se aplica a propriedade position, note que a logo estará posicionada no canto superior esquerdo. Assim, temos que deslocar a logo. Então, para o topo, utiliza-se -40 pixels, as margens à direita e abaixo são valores 0 e, para a margem à esquerda, ficou valor 25 pixels.

• Linha 5 a 16:  no HTML, temos a classe conteúdo e, para utilizá-la no CSS, inserimos o símbolo de pontuação . (ponto) e o nome do seletor, desse modo: .conteudo. Na sexta linha, utiliza-se a propriedade border-radius: 15px;, que serve para arredondar a borda do bloco conteúdo em 15 pixels. Na sétima linha, inserimos um plano de fundo com a propriedade background: rgba(20, 15, 15, 0.40); e opacidade de transparência em 40% para destacar a imagem de fundo, que é a pizza. Na oitava e nona linhas, aplicamos a largura width: 830px; e a altura do conteúdo de height: 770px;. Observação: a altura do conteúdo está fixa, assim que inserir o conteúdo do site, o correto é remover esta propriedade. Nas próximas linhas, são configurados a margem, a distância entre as bordas e o conteúdo e a cor branco da fonte do texto para destacar.

• Linha 18 a 20: neste bloco, configura-se o título do conteúdo para ter destaque em relação ao texto do documento HTML. Para o tamanho da fonte, foi aplicada a propriedade font-size:28px; e, para a margem inferior, a propriedade margin-bottom:15px;.

• Linha 21 a 24: é configurado o parágrafo dos textos, por meio do nome seletor p, com tamanho de fonte em 16px e o alinhamento do texto com valor justificado justify.

Agora é a sua vez de personalizar o rodapé do site, utilize as propriedades que aprendeu nas lições para conseguir implementar o bloco de rodapé. Lembrando que o rodapé é dividido em três blocos: I) uma classe com o nome coluna-esquerda; II) uma com o nome da classe coluna-meio; e III) uma classe com o nome coluna-direita. Tente chegar o mais próximo possível do layout do site desenvolvido pela equipe de designer.

Qualquer dúvida em relação a montar o rodapé do site, entre em contato com a equipe de colaboradores da Instituição. Bons estudos e até a próxima!