terça-feira, 10 de julho de 2012

Tutorial html

       Eu sempre estou procurando por THEMES legais para o tumblr, mais o próprio tumblr não oferece themes legais a não sei que você pague e como a maioria não quer tirar do próprio bolso precisa mexer no HTML, pra alguns isso é um terror9 eu sou um dele) e acaba fazendo alguma coisa errado e destrói todo o seu trabalha, por isso resolvi trazer um tutorial que ajuda quem não está habituado com o html.

A propriedade background define as características (os valores na regra CSS) do fundo dos elementos HTML.
As propriedades background são as listadas abaixo:
  • background-color............... cor do fundo;
  • background-image............. imagem de fundo;
  • background-repeat............. maneira como a imagem de fundo é posicionada;
  • background-attachment.......se a imagem de fundo "rola" ou não com a tela;
  • background-position............como e onde a imagem de fundo é posicionada;
  • background........................maneira abreviada para todas as propriedades;

Valores válidos para as propriedades do fundo

  • background-color:
    1. código hexadecimal: #FFFFFF
    2. código rgb: rgb(255,235,0)
    3. nome da cor: red, blue, green...etc
    4. transparente: transparent
  • background-image:
    1. URL: url(caminho/imagem.gif)
  • background-repeat:
    1. não repete: no-repeat
    2. repete vertical e horizontal: repeat
    3. repete vertical: repeat-y
    4. repete horizontal: repeat-x
  • background-attachment:
    1. imagem fixa na tela: fixed
    2. imagem "rola" com a tela: scroll
  • background-position:
    1. x-pos y-pos
    2. x-% y-%
    3. top left
    4. top center
    5. top right
    6. center left
    7. center center
    8. center right
    9. bottom left
    10. bottom center
    11. bottom right





Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.
Como estudar e entender os exemplos
Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.
A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.
01.<html>
02.<head>
03.<style type="text/css">
04.body { background-image: url("/images/css.gif");}
05.</style>
06.</head>
07.<body>
08.</body>
09.</html>
Este é o efeito da folha de estilo acima:Repetir verticalmente a imagem de fundo

01.<html>
02.<head>
03.<style type="text/css">
04.body {
05.background-image: url("/images/css.gif");
06.background-repeat: repeat-y;
07.}
08.</style>
09.</head>
10.<body>
11.</body>
12.</html>

Repetir horizontalmente a imagem de fundo

01.<html>
02.<head>
03.style type="text/css">
04.body {
05.background-image: url("/images/css.gif");
06.background-repeat: repeat-x;
07.}
08.</style
09.</head>
10.<body>
11.</body>
12.</html>
Este é o efeito da folha de estilo acima:

Posicionar uma imagem de fundo


01.<html>
02.<head>
03.<style type="text/css">
04.body {
05.background-image: url("/images/css.gif");
06.background-repeat: no-repeat;
07.background-position: 200px 70px;
08.}
09.</style>
10.</head>
11.<body>
12.</body>
13.</html>
Este é o efeito da folha de estilo acima: a imagem esta posicionada a 200 pixel da margem esquerda e 70 pixel da margem superior

Ajustar uma imagem de fundo fixa, que não "rola" com a tela

01.<html>
02.<head>
03.<style type="text/css">
04.body {
05.background-image: url("/images/css.gif");
06.background-repeat: no-repeat;
07.background-attachment: fixed;
08.}
09.</style>
10.</head>
11.<body>
12.</body>
13.</html>
Este é o efeito da aplicação das regras CSS acima em uma página web.

Todas as propriedades do fundo em uma declaração única

Esta é a maneira abreviada de você escrever uma regra para as propriedades do fundo.
Você pode declarar todas ou algumas das propriedades estudadas em uma regra única:
A sintaxe geral é esta:
background: color image repeat attachment position; 
em qualquer ordem, podendo ser omitido um mais valores.
Veja o exemplo abaixo:
01.<html>
02.<head>>
03.<style type="text/css">/>
04.body {
05.background: #00FF00 url("css.gif")
06.no-repeat fixed 200px 70px;
07.}
08.</style>
09.</head>
Você poder fazer uso de um excelente editor para a propriedade background e descobrir mais efeitos.

Nenhum comentário:

Postar um comentário