18:52
Erick
Continuando aonde paramos na ultima aula
criamos a nossa primeira página com cor de fundo CINZA (#E9E9E9).
Esse código seguido do símbolo # se chama de HEXADECIMAL (HEX).
Ex:
#ffffff (Branco), #000000 (Preto)
Existem muito mais de 1000 Hex. e decorar todos seria impossível para nós
meros mortais.Portanto disponibilizei uma ¨TABELA DE CORES HEXADECIMAL¨
Com algumas das cores que eu mais utilizo.
Pela Web afora você pode encontrar tabelas bem mais completas caso precise.
Para aqueles que perderam ou não se recordam como mudar a cor de fundo da
nossa página, deixo o LINK AQUI:
Pois nessa aula utilizaremos exactamente o mesmo conceito anterior mas um pouco
mais ¨aprimorado¨.
Imaginem que dessa vez, queremos colorir a nossa página da cor azul.
E o tom que desejo utilizar, de acordo a tabela acima seria #0000ff .
Ao invéz do Hex também posso simplesmente escrever a cor em Inglês.
Ex em Hex:
<body style="background-color:#0000ff;">
Ex com o nome da cor em Inglês:
<body style="background-color:blue;">
No meu caso eu vejo duas dificuldades em utilizar o Inglês para renderizar as cores.
1º Meu Inglês de ensino publico é uma porcaria. ^^
2º Mesmo escrevendo BLUE, é pouco especifico correto?
existe uma infinidade de tons de AZUL.
Em geral utilizaremos os atributos em TAGS como as que vão entre <body> e </body>
e existem as que dispensam qualquer tipo de informação adicional como a <br />
Que seria especificamente para pular uma linha.
Acompanhem na imagem abaixo:
O ¨esqueleto¨, utilizado nessa página será:
<html>
<head>
<title>Estilizando a Página</title>
</head>
<body style="background-color:#E9E9E9;">
<p style="background-color:red;color:blue">
Parágrafo com fundo vermelho e letra azul
</p>
</body>
</html>
Vamos agora à explicar a composição dele.
<body style="background-color:#E9E9E9;">
(Significa que o corpo todo da página terá cor de fundo CINZA #E9E9E9).
<p style="background-color:red;color:blue">
(O <p> e </p> Significa parágrafo correto?Portanto...Eu como quero
um paragrafo ¨estilizado¨, utilizo o P STYLE.
E indico que a cor de fundo deste paragrafo será vermelho, escrevendo
"background-color:red
Em seguida, neste mesmo paragrafo quero que as letras sejam AZUL.
acrescento o PONTO e VIRGULA que se utiliza em informações adicionais recordam?
Após o PONTO e VIRGULA incluo o color:blue">
Em base seria:
<p style= + (mais) "background-color:red + (mais) ;color:blue">
Oque sublinhei em AZUL é apenas para destacar ok?Não vão me escrever isso
dentro de seu HTML.Rs
Resultado:
Parágrafo com fundo vermelho e letra azul
Acompanhem na imagem abaixo:
Notaram que agora criamos uma página CINZA com um paragrafo VERMELHO
e cor das fontes (letras) em AZUL?
Poderíamos ter utilizado em valores Hex:
Cinza: #E9E9E9
Vermelho: #FF0000
Azul: #0000FF
Ou em Inglês:
Cinza: gray
Vermelho: red
Azul: blue
Ps:Sei bem que a composição de cinza,vermelho e azul ficou horrorosa
eram apenas para dar destaque.^^
Postagens
0 comentários:
Postar um comentário