CSS parte 2 – As propriedades de background

Philipe Monteiro — Sat, 20 Sep 2008 23:41:12 +0000

Bom pessoal, nesta segunda parte vou postar sobre as propriedades de background. Elas são utilizadas para personalização do fundo dos elementos. Ao total são 5:

- background-color
- background-image
- background-repeat
- background-attachment
- background-position

Abaixo exemplos da utilização de cada uma destas propriedades e os valores que podem ser atribuídos:

BACKGROUND-COLOR:

Pode ser utilizada para personalizar a cor de fundo do elemento. Os valores que lhe podem ser atribuídos são:

- Cores em código hexadecimal: #FFFFFF
- Cores em código RGB: rgb(255,235,0)
- Nome da cor: yellow, black, green, red e etc
- Transparente: transparent

Um exemplo de alteração da cor de fundo de um parágrafo:

Parágrafo com o fundo amarelo

Este efeito acima é resultado da seguinte folha de estilo:

p{
background-color: yellow;
}

BACKGROUND-IMAGE:

Possibilita inserir uma imagem de fundo no elemento. O único valor que lhe deve ser atribuído é a URL da imagem.

Sua sintaxe é:

body{
background-image: url(caminho/imagem.jpg);
}

BACKGROUND-REPEAT:

Define a maneira de repetição para o fundo. Os valores que lhe podem ser atribuídos são:

- no-repeat
- repeat
- repeat-y
- repeat-x

Ao utilizar “no-repeat”, a imagem de fundo aparece somente uma vez sem se repetir conforme a imagem abaixo:

Ao utilizar “repeat”, a imagem de fundo se repete por toda parte no elemento:

Ao utilizar “repeat-y”, a imagem de fundo se repetirá no eixo Y, ou seja, na vertical:

Ao utilizar “repeat-x”, a imagem de fundo se repetirá no eixo X, ou seja, na horizontal:

BACKGROUND-POSITION:

Define a forma de posicionamento da imagem no fundo do elemento. Os valores que lhe podem ser atribuídos são:

- top left (Posicionado no topo a esquerda)
- top center (Posicionado no topo e centralizado)
- top right (Posicionado no topo a direita)
- center center (Posicionado no centro)
- center left (Posicionado no centro a esquerda)
- center right (Posicionado no centro a direita)
- bottom left (Posicionado no fundo a esquerda)
- bottom center (Posicionado no fundo e centralizado)
- bottom right (Posicionado no fundo a direita)

BACKGROUND-ATTACHMENT:

Define o modo de comportamento da imagem de fundo. Os valores que lhe podem ser atribuídos são:

- fixed
- scroll

Ao definir “fixed”, a imagem de fundo ficará fixada na tela. O exemplo poderá ser visto neste site e também neste (reparem que ao “rolar” a página o fundo permance fixo).

Já com “scroll”, a imagem de fundo acompanhará a rolagem, como acontece na maioria dos sites. Exemplos: aqui e aqui.

Até a próxima!

CSS parte 2 – As propriedades de background Post Original de : Zoom Digital :: Podcast, iPhone, Tecnologia, Variedades e Humor

Posts Relacionados

13 de outubro de 2009 -- Faça uma busca e plante uma árvore
20 de maio de 2009 -- [Curso Photoshop] – Conhecendo e mudando a cor dos olhos
17 de maio de 2009 -- [Não tente fazer em casa] dd if=”qualquer arquivo ou pasta” of=/dev/sda
18 de abril de 2009 -- [Não tente fazer em casa] ls /outra/pasta

CSS parte 1 – Sintaxe e regras

Philipe Monteiro — Thu, 18 Sep 2008 01:59:37 +0000

E ae pessoal, sou o Juan Santos, irei postar artigos referentes a CSS aqui no Zoom Digital.

Bom vamos lá, vou começar do começo falando sobre a utilização do CSS, sua sintaxe e algumas regras.

Primeiramente dentro de seu arquivo HTML, mais precisamente entre as tags e poderá ser inserida a seguinte linha para vincular o arquivo CSS ao seu documento:

O browser lerá as regras de estilo do arquivo estilo.css, e formatará a página de acordo com elas.

Uma folha de estilo não deve conter nenhuma tag HTML. Devem ser sempre “salvas” com uma extensão .css

A sintaxe CSS é formada por seletor, propriedade e valor da seguinte forma:

seletor { propriedade:valor; }

Seletor: Trata-se do elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID. (por exemplo:

,
, .minhaclasse, #meuid …);

Propriedade: É o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, …).

Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, …)

Abaixo um exemplo para alterar do fundo da página toda, onde o seletor é o BODY, a propriedade é o fundo (BACKGROUND) e o valor é a cor azul (BLUE):

body {
background: blue;
}

Agrupando seletores

É possível também agrupar seletores, caso deseje definir uma mesma cor para um parágrafo e para um link ao invés de digitar duas vezes a mesma coisa, poderá agrupá-los desde que sejam separados por vírgula:

p, a{
font-color: blue;
}

Seletor Classe

As classes podem ser aplicadas para quaisquer elementos HTML, e na folha de estilo serão definidas as regras CSS.

Elas são inseridas nos elementos HTML da seguinte forma:

TEXTO

E no CSS ficam (Observem que deverá ser inserido sempre um ponto “.” antes do nome da classe definida):

.teste{
propriedade: valor;
}

Seletor ID

O seletor ID funciona de forma semelhante ao seletor classe, porém só podem ser definidos uma única vez dentro da página para um único elemento, enquanto as classes podem ser definidas para ilimitados elementos dentro da página.

Eles são inseridas nos elementos HTML da seguinte forma:

TEXTO

E no CSS ficam (Observem que deverá ser inserido sempre uma tralha “#” antes do nome do ID definido):

#teste{
propriedade: valor;
}

Por enquanto é isso, lembrando que os arquivos .css podem ser editados através de qualquer editor de texto, recomendo o Top Style Lite pois além de facilitar a criação, também mostra uma pré-visualização da edição e esta versão é gratuita.

Até a próxima !

CSS parte 1 – Sintaxe e regras Post Original de : Zoom Digital :: Podcast, iPhone, Tecnologia, Variedades e Humor

Posts Relacionados

20 de setembro de 2008 -- CSS parte 2 – As propriedades de background

Zoom Digital :: Podcast, iPhone, Tecnologia, Variedades e Humor » Curso CSS

CSS parte 2 – As propriedades de background

Posts Relacionados

CSS parte 1 – Sintaxe e regras

Posts Relacionados