Editar | Versões | Fórum de Discussão
Prazos para Envio
Estilizando com CSS
Introdução
Nesse ponto vamos aplicar alguns estilos aos elementos que inserimos no passo anterior utilizando o CSS. Você deverá aprender a estilizar elementos, margens, preenchimentos tamanhos e modificar posicionamentos.
Para adicionar folhas de estilos, você precisa inserir a tag <style> no seu cabeçalho. Todos os estilos estarão contidos entre <style> </style>.
Modificando a fonte da página
Para modificar a fonte, vamos inserir uma regra CSS sobre o elemento <html>, que contém toda a página. Insira a regra abaixo:
O seletor é html seleciona essa tag e todos os elementos contidos nela. Com isso, modificamos a família de fontes de todos os elementos da página para “sans-serif”.
Ajustando Bordas, Margens e Preenchimentos
Antes de mergulharmos na codificação, precisamos compreender o que são margens, bordas e preenchimentos. O CSS funciona basicamente como um modelo de caixas, onde podemos definir características de tamanho (largura e altura), margem, bordas, planos de fundo e preenchimentos dessas caixas. São três propriedades que normalmente utilizamos para modificar o visual dessas partes: margin, border e padding. Veja abaixo as partes da página que essas propriedades modificam.
Iniciando da propriedade padding (preenchimento), verificamos que ela modifica a distância entre o conteúdo da página e a sua borda. Já a propriedade border permite a modificação das características das bordas da página. Por último, a propriedade margin, permite a modificação da distância entre a borda e as extremidades da página.
Nós podemos modificar individualmente margens, bordas e preenchimentos da direita (right) da esquerda (left), da parte inferior (bottom) e da parte superior (top).
Estilizando a Largura do Corpo da Página
Vamos modificar o corpo da nossa página para cobrir somente 50% do tamanho total. Também vamos definir larguras máximas e mínimas em tamanhos de pixels. Insira o código abaixo:
Repare que a regra CSS começa com o seletor do elemento pelo seu tipo, no nosso caso body { … }. Desse modo, todas as regras que digitarmos entre as chaves será aplicado exclusivamente aos elementos de <body>.
Agora, vamos ajustar as margens para centralizarmos todos os elementos do <body> na página. Para isso, vamos utilizar um recurso de margem automática na direita e esquerda. Insira o código abaixo no css body
Salve e confira o resultado das margens:
Estilizando a div do Cabeçalho
Nessa div vamos colocar uma imagem de fundo e uma camada mais escura sobre a imagem para destacar os textos. Modificaremos a cor e a posição dos textos da <h1> e do primeiro parágrafo <p>. Veja como vai ficar:
Vamos fazer um pequeno setup para estilizarmos o cabeçalho. Siga os passos abaixo:
1 - baixe a imagem de fundo do link: https://unsplash.com/photos/i3WlrO7oAHA/download?force=true
2 - Mova a imagem para a mesma pasta do arquivo jogo.html
3 - Renomeie o arquivo da imagem para img.jpg
Agora vamos aos estilos!
Passo 1 - Esitilizando a div de classe “header
1 - Insira o conjunto de regras abaixo:
2 - Adicione as regras e observe a função de cada uma na imagem abaixo.
A propriedade background-image é definida a partir das funções linear-gradient(), rgba() e url(). A função url(“img.jpg”) define o caminho para a imagem de fundo, que você adicionou à pasta do projeto. A função rgba() define uma cor e uma transparência para a cor. Já a função linear-gradient() é utilizada para definir gradientes de cores em CSS a partir de uma cor inicial e uma cor final. Veja alguns exemplos de gradientes abaixo.
No nosso caso, vamos utilizar a função linear-gradient para adicionar uma camada escura sobre a imagem de fundo, para melhorar a visualização dos textos. Veja a composição da função abaixo.
Repare que usamos a função rgba(r, g, b, a), onde, informamos os números dos canais de cores vermelho (r), verde (g) e azul (b) e a função nos retorna uma cor que desejamos. Quando colocamos os parâmetros r, g e b com valor 0, estamos definindo a cor preta (ou ausência de cor). Se colocarmos todos os três com valor 255 (rgba(255, 255, 255)), definimos a cor branca. Todas as cores são variações desses três canais. O último parâmetro da função é o canal da transparência da cor. No caso, 0.5 indica uma transparência de 50% para a cor preta: rgba(0, 0, 0, 0.5).
Desse modo o gradiente sobre a imagem de fundo que definimos vai do preto ao preto, ou seja sem variação de tonalidade de cor, porém com uma transparência de 50%. Observe o efeito com e sem o gradiente abaixo:
Repare como ficou melhor para ler o texto claro com a camada escura adicionada pelo linear-gradient.
Um Pouco Mais Sobre Cores
A maioria das cores na computação são definidas como variações de tonalidades de três cores básicas, o vermelho (red) o verde (green) e o azul (blue). chamamos esse padrão de RGB. Em CSS, podemos definir as cores pelo seu nome em inglês (“white”, “black”, “red”, “green”, etc.) mas o mais comum é definirmos usando a função rgb(r, g, b) (ou rgba) ou o seu código em hexadecimal precedido de hashtag, como #000000 ou #FFFFFF. Veja abaixo como funciona esses dois padrões para definir a cor vermelha.
Repare que as duas formas acima obedecem o mesmo padrão, porém, de formas diferentes. Sempre, o primeiro canal é o Vermelho, o segundo canal é o Verde e o terceiro canal é a tonalidade de Azul.
A diferença da função rgb para a rgba, que utilizamos, é que esta última possui um quarto parâmetro que nos permite definir também uma transparência para a cor.
Passo 2 - Estilizando os Textos do Cabeçalho
Para realizar esse passo vamos utilizar a classe da div “header-text” contida na div “header” utilizando as propriedades text-align, position e color Insira as regras CSS abaixo:
Tudo pronto! Você acaba de finalizar a estilização do cabeçalho do jogo. Salve e confira o resultado!
Estilizando a Div “form”
Nesse ponto, vamos modificar um pouco a div que contém a caixa de texto e o botão de envio. Vamos utilizar as propriedades margin-top, background, padding e border-left para isso. Vamos deixar nossa div com essa carinha aqui:
Digite o código abaixo e repare nas anotações em cada propriedade.
Observe que definimos as distâncias da margem superior, uma cor para o plano de fundo, o preenchimento (distância do conteúdo para a borda) e, por fim, a borda esquerda. com o margin-top damos uma distância de 20 pixels de margem para o elemento acima, que é o nosso cabeçalho.
A propriedade background aceita um código de cor em hexadecimal, que é uma outra forma de definirmos valores para os canais vermelho, verde e azul (RGB), que formam todas as cores. Veja o esquema abaixo
Fonte: http://web.simmons.edu/~grovesd/comm244/notes/week3/css-colors
A propriedade padding define a distância dos elementos de dentro da div para a borda da mesma, por isso tem esse espaço “sobrando” em azul nas partes superior/inferior e esquerda/direita. Por último, a propriedade border-left define uma borda diferenciada à esquerda.
Estilizando a Div “resultado”
Essa Div é onde apresentaremos o resultados do palpite emitido com dicas se está muito alto ou muito baixo. Vamos melhorar a sua aprência para ficar desse jeito:
Insira o conjunto de regras abaixo e leia antetamente as explicações:
Passo 1 - Alinhando os textos e adicionando uma borda retangular
Passo 2 - Adicionando o Arredondamento às Bordas
Passo 3 - Adicionando uma Margem ao Topo da DIv
Salve e observe o resultado do seu jogo estilizado!!
Finalizando
Para praticar as habilidades hackers que você acabou de adquirir nesse tutorial, tente fazer os exercícios propostos abaixo.