Boys and Girls: 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.

<html>

<head>

<style type="text/css">

body { background-image: url("/images/css.gif");}

</style>

</head>

<body>

</body>

</html>

Este é o efeito da folha de estilo acima:Repetir verticalmente a imagem de fundo

<html>

<head>

<style type="text/css">

body {

background-image: url("/images/css.gif");

background-repeat: repeat-y;

}

</style>

</head>

<body>

</body>

</html>

Repetir horizontalmente a imagem de fundo

<html>

<head>

style type="text/css">

body {

background-image: url("/images/css.gif");

background-repeat: repeat-x;

}

</style

</head>

<body>

</body>

</html>

Este é o efeito da folha de estilo acima:

Posicionar uma imagem de fundo

<html>

<head>

<style type="text/css">

body {

background-image: url("/images/css.gif");

background-repeat: no-repeat;

background-position: 200px 70px;

}

</style>

</head>

<body>

</body>

</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

<html>

<head>

<style type="text/css">

body {

background-image: url("/images/css.gif");

background-repeat: no-repeat;

background-attachment: fixed;

}

</style>

</head>

<body>

</body>

</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:

<html>

<head>>

<style type="text/css">/>

body {

background: #00FF00 url("css.gif")

no-repeat fixed 200px 70px;

}

</style>

</head>

Você poder fazer uso de um excelente editor para a propriedade background e descobrir mais efeitos.

Páginas

terça-feira, 10 de julho de 2012

Tutorial html

Valores válidos para as propriedades do fundo

Repetir horizontalmente a imagem de fundo

Posicionar uma imagem de fundo

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

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

Nenhum comentário:

Postar um comentário