Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

VocÊ perdeu algum post da série? Basta estar dando uma olhada aqui. Mas vamos ao que interessa, hoje iremos ver mais informações sobre a propriedade background, com ela você pode definir o fundo de um elemento com apenas uma linha:

background: #ffffff url(endereço_da_imagem) top left no-repeat fixed;

Valores

• attachment
• color
• image
• position
• repeat

Você também pode definir os valores individualmente.

Background Attachment

Se você estiver utilizando uma imagem de fundo em seu site, você pode definir em background attachment para que ele fique fixo, para parecer que o texto está flutuando sob o background ou scroll, para que ele role junto com a página.

Valores

• fixed
• scroll

Background Color

Para especificar a cor de fundo de um elemento, utilize-se da propriedade Background Color:

background-color: valor;

Valores

• Nome da cor
• Número hexadecimal
• Código da cor RGB
• Transparent

Background Image

Para especificar uma imagem de fundo para um elemento, utilize a propriedade Background Image:

background-image: url(endereço_da_imagem);

Valores

• url
• none

Background Position

Você pode posicionar a imagem utilizada no fundo de qualquer elemento, para isso utilize-se da propriedade Background Position:

background-position: value;

Valores

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• x-% y-%
• x-pos y-pos

Background Repeat

Você pode ajustar uma imagem de fundo usada em qualquer elemento para que ela se repita nos eixos x e y, basta utilizar a propriedade Background Repeat:

background-repeat: valor;

Valores

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

Tradução do artigo original de: CSS Basics.

Abaixo você pode ver as várias maneiras de se usar CSS para estilizar os links da sua página:

• a:link {color: #009900;}
• a:visited {color: #999999;}
• a:hover {color: #333333;}
• a:focus {color: #333333;}
• a:active {color: #009900;}

Agora vamos ver o que cada uma delas significa:

a:link {color: #009900;}

Usado para estilizar os links da página quando não está ocorrendo nenhum evento.

a:visited {color: #999999;}

Usado para estilizar os links da página quando o mesmo já foi visitado.

a:hover {color: #333333;}

Usado para estilizar os links da página quando o usuário coloca o mouse sobre o link.

a:focus {color: #333333;}

Praticamente a mesma função que a:active, mas com uma diferença, está é para usuários que não estão usando o mouse e estão navegando através do teclado, ele tem a função de alterar a cor do link quando o usuário está “tabulando”(usando a tecla tab), para alternar entre os links da página.

a:active {color: #009900;}

Usado para estilizar os links da página enquanto o mesmo é pressionado.

Pseudo classes

Você pode estilizar os links em diferentes partes da sua página utilizando as pseudo classes, por exemplo, você pode ter diferentes cores para um menu e outras cores para os links do conteúdo do seu site:

• #content a:link {color: #009900;}
• #content a:visited {color: #999999;}
• #content a:hover {color: #333333;}
• #content a:focus {color: #333333;}
• #content a:active {color: #009900;}

Com isso, todos os links contidos dentro do ID content terão as condições citadas acima, mas vamos dizer que você tem um menu que quer deixar com as cores dos links diferentes do conteúdo:

• #menu a:link {color: #009900;}
• #menu a:visited {color: #999999;}
• #menu a:hover {color: #333333;}
• #menu a:focus {color: #333333;}
• #menu a:active {color: #009900;}

Com isso, todos os links contidos dentro do ID menu terão as condições citadas acima. Você também poderia utilizar classes ao invés de ID’s.

• a.menu:link {color: #009900;}
• a.menu:visited {color: #999999;}
• a.menu:hover {color: #333333;}
• a.menu:focus {color: #333333;}
• a.menu:active {color: #009900;}

Neste caso, nosso HTML ficaria da seguinte forma:

<a class="menu" href="" title="" rel="">Link aqui</a>

Também pode ser declarado dessa forma:

• .menu a:link {color: #009900;}
• .menu a:visited {color: #999999;}
• .menu a:hover {color: #333333;}
• .menu a:focus {color: #333333;}
• .menu a:active {color: #009900;}

Nosso HTML ficaria assim:

<div class="menu">
<a href="" title="" rel="">Link aqui</a>
</div>

Tradução do artigo original de: CSS Basics.

Font

Com a propriedade font podemos alterar o estilo(style), o peso(weight), o variant(mostrar o texto em maiúsculas), o tamanho(size), o line-height(altura da linha), e a própria propriedade font.

font: italic bold normal small/1.4em Verdana, sans-serif;

o código acima pode ser lido da seguinte maneira: Da esquerda pra direita, o primeiro item deixaria nosso texto em itálico, com um peso bold, o variant normal, um tamanho relativo, depois a altura da linha setada em 1.4em e a font definida como Verdana, ou se não for encontrada no sistema, sans-serif.

Font-family

Aqui é onde definimos uma “família de fontes”. A 2 possíveis valores:

• Nome da Família
• Família Genérica

Se você adicionar um nome da família, é aconselhável também adicionar a família genéria em sua extremidade. Por que isso é priorizado na lista. Assim, se o usuário não tiver o nome o nome da font especificado em font-family, ele usará a mesma família genérica.

font-family: Verdana, sans-serif;

Continuar lendo »

Cores

Você pode ajustar as cores do seu texto da seguinte forma:

cor: valor;

Os valores aceitos são:

• Nome da cor: Exemplo: (black, red…)
• Número Hexadecimal: Exemplo: (#ffffff, #000000)
• Código da cor RGB: Exemplo: ( rgb(255, 0, 0), rgb(0, 0, 0) )

Letter Spacing

Ou espaço entre as letras, pode ser ajustado da seguinte forma, deixando o valor em 0, impede que o texto justifique. Ele também aceita valores negativos.

letter-spacing: valor;

Valores aceitos:

• normal
• comprimento

Continuar lendo »

Padding é a distância do elemento entre a borda e o seu conteúdo. As regras para margem também se aplicam ao padding, excepcionalmente o valor “auto” e valores negativos, que não podem ser declarados:

padding-top: valor;
padding-right: valor;
padding-bottom: valor;
padding-left: valor;

Você também pode declarar esses valores para padding em uma única propriedade:

padding: 10px 10px 10px 10px;

Se você for declarar o padding como acima, ele segue a seguinte ordem:

• top
• right
• bottom
• left

Declarando apenas um valor, ele é ajustado para todos os lados:

padding: 10px;

Declarando apenas 2 ou 3 valores, funcionaria da seguinte forma:

padding: 10px 10px; Aqui o primeiro valor ajusta o padding para top e bottom e o segundo valor para left e right.

padding: 10px 10px 10px; Aqui o primeiro valor ajusta o padding para top, o segundo para left e right e o terceiro para bottom.

Como você pode reparar no exemplo abaixo, a div container tem um padding de 20px:

#container {
    width:760px;
    margin:0 auto;
    padding:20px;
    border:1px solid #000;
    background:#FFF;
}

Isso colocaria o conteúdo de container a 20px de sua borda.

Tradução do artigo original de: CSS Basics.

A propriedade margem declara a margem entre um elemento do HTML e os elementos em torno dela. A propriedade margem pode ser ajustada para o alto, direita, abaixo e a esquerda:

margin-top: valor definido pelo usuário ou auto;
margin-right: valor definido pelo usuário ou auto;
margin-bottom: valor definido pelo usuário ou auto;
margin-left: valor definido pelo usuário ou auto;

Você tem a escolha de 3 valores para a propriedade margem, que são as seguintes:

• Comprimento: em pixels
• Porcentagem
• Auto

Continuar lendo »

Spans são similares as divisões, a não ser que sejam um elemento in-line ou um elemento de bloco. Nenhuma quebra de linha é criada quando um span é declarado. Você pode por exemplo usar span para estilizar áreas específicas do seu texto, como você pode ver no exemplo abaixo:

<span class="italico">Esse texto irá ficar em itálico</span>

O CSS fica da seguinte forma:

.italico { font-style:italic; }

Tradução do artigo original de: CSS Basics.

As Divs(divisões), são elementos em níveis de bloco do (x)HTML usados para definir seções de um arquivo (x)HTML. Uma divisão pode conter todas as peças que compõem sua página, incluíndo divisões adicionais, imagens, texto.

Por exemplo, você define uma divisão dentro de um arquivo (x)HTML colocando o seguinte código dentro das tags <body></body>:

<div>
Aqui vai o conteúdo do site
</div>

E na hora de aplicar algum estilo você deve prosseguir da seguinte forma, o HTML fica assim:

<div id="container">
Aqui vai o conteúdo do site
</div>

E aqui um exemplo do CSS:

#container{
  width:760px;
  margin:0 auto;
  padding:15px;
  border:1px solid #666;
  background:#FFF;
}

Tudo dentro dessa divisão será denominado pelo estilo da divisão “container”.

Tradução do artigo original de: CSS Basics.

Os seletores de ID são semelhantes as classes, mas há uma diferença, eles só podem seu usados uma única vez em uma página (x)HTML. Seu uso geralmente é denominado para elementos de disposição da página, que geralmente são usados uma única vez, e os seletores de classe ficam a cargo de estilizar o resto de nossa página.

Vamos pegar como exemplo uma div que contém o nosso site:

<div id="container">
Aqui vai o conteúdo do site
</div>

Como pode ver acima, eu resolvi usar ID para o meu “container” por que eu vou usálo uma única vez em minha página, e é ele quem irá conter todo o meu site. Agora o nosso CSS fica da seguinte forma:

#container {
  width:760px;
  margin:0 auto;
  padding:15px;
  border: 1px solid #666;
  background:#FFF;
}

Como pode reparar os seletores de ID começam com um sinal de #, ao invés de ( . )

Tradução do artigo original de: CSS Basics.

Os seletores de classe permitem que você determine diversos estilos dentro de um mesmo elemento (x)HTML. Ele é similar aos estilos inline. As classes podem seu usadas diversas vezes dentro de um arquivo (x)HTML, diferentemente do ID, que só pode ser usado uma vez, mas isso veremos em um próximo artigo. Para um melhor entendimento vamos a um exemplo, eu gerei uma definição para um parágrafo:

p {
   font-size:1.6em;
   color:#F00;
}

Tudo bem, mas eu quero que uma parte do meu parágrafo fique em verde e negrito, aí é que iremos usar uma classe, então, vamos criar a mesma:

.boldgreen {
  color: #008080;
  font-weight: bold;
}

Para uma melhor compreensão, veja um exemplo em funcionamento. Como você pode reparar, os seletores de classe começam com (.), e quanto ao nome das mesmas, elas ficam ao seu critério.

Tradução do artigo original de: CSS Basics.