Tutorial Intermediário de CSS: Imagens de Background

Existem várias propriedades envolvidas na manipulação de imagens de background.

Felizmente, a propriedade background cuida de todas as outras.

body {
	background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

Esse código une essas propriedades:

• background-color, que nós já vimos antes.
• background-image, que é o endereço da imagem que vai servir de fundo.
• background-repeat, que é como a imagem se repete na página. Pode ser repeat-y (repetindo no eixo y, de cima até embaixo), repeat-x (repetindo no eixo x, lado a lado), repeat (repetindo nos eixos x e y, efeito semelhante a um telhado, por exemplo) ou no-repeat (que mostra apenas uma ocorrência da imagem).
• background-position, que pode ser top (topo), center (centro), bottom (parte inferior), left (esquerda) e right (direita), ou uma combinação de dois desses elementos. Nesse caso, o primeiro indica a posição no eixo horizontal e o segundo a posição no eixo vertical.

Imagens de background podem ser usadas na maioria dos elementos HTML - não apenas pra página inteira (body) e podem ser usados pra efeitos simples mas eficazes, como bordas arredondadas.

É fácil se envolver demais com imagens de background e querer usá-las na página inteira. Algumas pessoas visualmente hiperativas podem acreditar que é uma boa ter uma foto cheia de cores vivas em todo o fundo da página, dando ao usuário o desafio de decifrar o texto no primeiro plano. Isso é um exemplo meio radical, mas o fato é que o texto mais amigável ao usuário, legível, é fonte preta em um fundo simples branco ou fonte branca num fundo preto. Algumas pessoas defendem que um fundo “quase” branco ou “quase” preto é melhor, já que reduz a claridade. Sugiro que você teste essas possibilidades e escolha a que você achar mais adequada ao seu projeto.

O melhor uso pra imagens de background é preencher espaços onde não haja nenhum conteúdo, deixando a página mais visualmente agradável sem atrapalhar o conteúdo.

Páginas Relacionadas

• Próxima Página: Tutorial Avançado de HTML
• Página Anterior: Propriedades Atalho
• Cores (Tutorial Iniciante de CSS)
• Imagens (Tutorial Iniciante de HTML)

Exemplos

• Imagens de background
• Ocorrência única - usando background-repeat
• Bordas Arredondadas 1 - usando imagens de background menores
• Bordas Arredondadas 2 - em caixas de altura e largura variáveis

Referência

• background
• background-image
• background-repeat
• background-position

BlogBlogs Tags: tutorial, css, minicurso

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Tutorial Intermediário de CSS: Propriedades Atalho

Algumas propriedades CSS permitem que uma sequência de valores substituam uma série de propriedades. Elas são representadas por valores separador por espaços.

margin, padding e border-width permitem a você combinar margin-top-width, margin-right-width, margin-bottom-width e etc. na forma

propriedade: top right bottom left;

Então:

p {
	border-top-width: 1px;
	border-right-width: 5px;
	border-bottom-width: 10px;
	border-left-width: 20px;
}

Pode ser resumido como:

p {
	border-width: 1px 5px 10px 20px;
}

border-width, border-color e border-style também podem ser somadas como, por exemplo:

p {
	border: 1px red solid;
}

(Isso também pode ser aplicado a border-top, border-right, etc.)

Ao declarar apenas dois valores (como margin: 1em 10em;), o primeiro valor vai ser o topo e a base, e o segundo valor vai ser a direita e a esquerda. Ao declarar apenas um valor, esse vai ser aplicado em todos os lados.

Propriedades relacionadas a fontes também podem ser unidas com a propriedade font:

p {
	font: italic bold 1em/1.5 courier;
}

(Onde o ‘/1.5′ é o atributo line-height.)

Então, juntando tudo, experimente esse código:

p {
	font: 1em/1.5 "Times New Roman", times, serif;
	padding: 3em 1em;
	border: 1px black solid;
	border-width: 1px 5px 5px 1px;
	border-color: red green blue yellow;
	margin: 1em 5em;
}

Atraente.

Existem bem mais atalhos que esses. E são todos muito, muito úteis. Leia esse guia de abreviações de CSS, mais abrangente que esse texto.

Páginas Relacionadas

• Próxima Página: Imagens de Background
• Página Anterior: Pseudo Classes
• Seletores, Propriedades e Valores (Tutorial Iniciante de CSS)

Referência

• margin
• padding
• border
• font
• background

BlogBlogs Tags: tutorial, minicurso, css

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Tutorial Intermediário de CSS: Pseudo Classes

Pseudo classes são usadas juntos com seletores para especificar um estado do seletor. Elas aparecem na forma seletor:pseudo classe { propriedade: valor; }, com um sinal de dois-pontos separando o seletor e a pseudo classe.

Muitas das pseudo-classes definidas pelo CSS não são suportadas por todos os navegadores, mas existem quatro que podem ser usadas com segurança quando aplicadas à links:

• link indica o estilo de links não-visitados.
• visited indica links que foram visitados.
• active indica um link que está com o foco (por exemplo, quando ele está sendo clicado).
• hover indica um link enquanto o cursor é mantido sobre ele.

a.homemdasneves:link {
	color: blue;
}

a.homemdasneves:visited {
	color: purple;
}

a.homemdasneves:active {
	color: red;
}

a.homemdasneves:hover {
	text-decoration: none;
	color: blue;
	background-color: yellow;
}

Experimente. Crie uma página HTML que use esses estilos. Veja quando cada pseudo classe é usada. Crie uma outra página HTML e um outro arquivo CSS e explore um pouco mais essas classes. Dominar esses estados te ajuda a fazer páginas bem mais legais.

Embora CSS te dê o poder de contornar isto, manter links visitados com cores diferentes de links não-visitados é uma boa prática, já que muitos usuários supõe que isso vai acontecer.

Tradicionalmente, links de texto são azuis se não visitados e violeta se visitados, e ainda existem razões para acreditar que essas cores são as mais eficazes para isso. No entanto, com a crescente popularização do uso do CSS, essas cores estão deixando de ser lugares-comum e o usuário médio não assume mais que links precisam ser azul ou violeta.

Você também devia estar apto a usar a pseudo classe hover com outros elementos além de links. Infelizmente, o Internet Explorer (sempre ele) não suporta esse recurso até a versão 6. Isso é uma tremenda irritação, porque existem um monte de truquezinhos legais que você pode fazer com isso que ficam ótimos em outros navegadores.

Páginas Relacionadas

• Próxima Página: Propriedades Atalho
• Página Anterior: Agrupando e Aninhando
• Seletores, Propriedades e Valores (Tutorial Iniciante de CSS)
• Regras At (Em) - Pseudo classes em mídia paginada.

Exemplos

• Rollovers 1 - links gráficos que mudam quando o cursos passa por eles usando :hover.
• Rollovers 2 - Efeitos mais interativos, usando :active.

BlogBlogs Tags: tutorial, minicurso, css

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Tutorial Intermediário de CSS: Agrupando e Aninhando

Agrupando

Você pode aplicar as mesmas propriedades a vários seletores sem precisar repetí-los. Basta separar os seletores com vírgulas.

Por exemplo, se você tem alguma coisa assim:

h2 {
	color: red;
}

.outraClasse {
	color: red;
}

.maisUmaClasse {
	color: red;
}

Você pode trocar por isso:

h2, .outraClasse, .maisUmaClasse {
	color: red;
}

Aninhando

Se o CSS estiver bem estruturado, não deve existir a necessidade de muitos seletores de classe ou ID. Isso porque você pode especificar propriedades para seletores dentro de outros seletores. Por exemplo:

#topo {
	background-color: #ccc;
	padding: 1em
}

#topo h1 {
	color: #ff0;
}

#topo p {
	color: red;
	font-weight: bold;
}

Faz com que não haja necessidade de mais classes e ID’s se estiver aplicado a um HTML que pareça com esse:

<div id=”top”>

	<h1>Acarajé de Chocolate</h1>

	<p>Essa é minha receita pra fazer acarajé usando só chocolate</p>

	<p>Mmm mm mmmmm</p>

</div>

Isso acontece porque, ao separar seletores com espaços, nós estamos dizendo “h1 dentro do ID topo tem a cor #ff0″ e “p dentro do ID topo é vermelho e está em negrito”.

Isso pode ficar bem complicado (porque pode se extender por mais de dois níveis, como isso dentro disso dentro disso etc.) e pode exigir um pouco de prática.

Páginas Relacionadas

• Próxima Página: Pseudo Classes
• Página Anterior: Seletores classe e ID
• Seletores, Propriedades e Valores (Tutorial Iniciante de CSS)

BlogBlogs Tags: tutorial, minicurso, css

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Tutorial Intermediário de CSS: Seletores Classe e ID

No Tutorial Iniciante de CSS nós analisamos apenas os Seletores HTML - aqueles que representam uma tag HTML.

Você também pode definir seus próprios seletores na forma de seletores classe e ID.

A vantagem dissso é que você pode ter o mesmo elemento, mas apresentá-lo de modos diferentes dependendo de sua classe ou ID.

No CSS, um seletor de classe é um nome precedido por um ponto (.) e um seletor ID é um nome prededido por um sustenido (#).

O CSS fica mais ou menos assim:

#topo {
	background-color: #ccc;
	padding: 1em
}

.intro {
	color: red;
	font-weight: bold;
}

O HTML se liga ao CSS usando os atributos id e class. Pra esse CSS, o HTML pode ser alguma coisa assim:

<div id=”top”>

<h1>Acarajé de Chocolate</h1>

<p>Essa é minha receita pra fazer acarajé usando só chocolate</p>

<p class=”intro”>Mmm mm mmmmm</p>

</div>

Veja que o primeiro parágrafo aparece diferente do segundo, já que no segundo foi aplicada a classe “intro”.

A diferença entre ID e classe é que ID só pode ser usado pra identificar um elemento, enquanto uma classe pode ser usada pra quantos elementos você quiser.

Você também pode aplicar um seletor pra um elemento HTML específico, basta declarar o seletor HTML primeiro. Assim

p.classe { qualquer coisa }

vai ser aplicado apenas a elementos parágrafo (p) que tenham a classe “classe”.

Na hora de criar nomes para suas classes e ID, procurem usar nomes que façam sentido e que representem a função daquele seletor. Evite nomes de classe como “texto-verde”, que representa apresentação. A vantagem do CSS é poder mudar todo o estilo do seu site de forma muito simples. Se você usa nomes assim, você perde flexibilidade. Quando, por exemplo, você quiser mudar o texto pra azul, ao invés de verde, você vai ter que 1)mudar o nome da classe para “texto-azul”, e mudar cada referência no seu HTML, ou 2)fazer com que a classe “texto-verde” mostre um texto azul. Estranho, não? Por isso, a classe “texto-destacado” ou “texto-forte” seria mais adequada.

Páginas Relacionadas

• Próxima página: Agrupando e Aninhando
• Página Anterior: Introdução
• Seletores, Propriedades e Valores (Tutorial Iniciante de CSS)

BlogBlogs Tags: tutorial, minicurso, css

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Tutorial Intermediário de CSS

Como o Tutorial Intermediário de HTML, esse Tutorial Intermediário de CSS não deve ser tão difícil, mas ao invés disso complementar o básico que você viu no Tutorial Iniciante de CSS.

Conteúdo

• Seletores Classe e ID - Faça seus próprios seletores sem precisar daquele plástico grudento de plastificar!
• Agrupando e Aninhando - Propriedades designadas a vários seletores e seletores dentro de seletores.
• Pseudo Classes - Definindo vários estados de um seletor pra links.
• Propriedades Atalho - Várias propriedades, como bordas e margens, que combinam outras propriedades numa só.
• Imagens de Background - Adivinhe.

Páginas Relacionadas

• Próxima Página: Seletores Classe e ID
• Página Anterior: Tags Más
• Tutorial Iniciante de CSS
• Tutorial Avançado de CSS

BlogBlogs Tags: tutorial, minicurso, css

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Esta é a primeira versão da tradução, e não está livre de erros. Se encontrar algum, não deixe de avisar nos comentários! Os links serão atualizados à medida que as aulas foram traduzidas.

Tutorial Iniciante de CSS: Exercício

Lembra do mini-site que você fez no tutorial de html? Você vai criar uma Folha de Estilo (um arquivo CSS) pra esse mini-site, e linkar em todas as páginas. Defina estilos para os cabeçalhos, os páragrafos, as tabelas, etc.

Tente usar todos as propriedades que você viu nesse tutorial. Ponha bordas nas imagens, decore os títulos, deixe espaço nos textos.

Além disso, valorize a legibilidade e use o bom senso. Evite cores berrantes, trabalhe bem os espaços em branco.

Quanto terminar você pode enviar o resultado pro meu email ou hospedar no seu servidor, e não esqueça de avisar através dos comentários pra que eu possa avaliar o que você fez.

Quando se sentir pronto, siga para a próxima parte: html intermediário.

Páginas Relacionadas

• Próxima Página: Tutorial Intermediário de HTML
• Página Anterior: Tutorial Iniciante de CSS: Juntanto Tudo
• Tutorial Iniciante de HTML: Exercícios

Tutorial Iniciante de CSS: Juntando Tudo

Você já deve ter um arquivo HTML como o que foi feito no fim do Tutorial Iniciante de HTML, com a linha que a gente adicionou no começo desse Tutorial Iniciante de CSS, linkando o arquivo HTML ao arquivo CSS.

O código abaixo cobre todas as propriedades CSS desse tutorias. Se você salvar esse código como seu arquivo CSS e olhar o arquivo HTML no navegador, vai entender o que cada propriedade faz e como aplicá-las. O melhor jeito pra aprender de verdade isso tudo é brincar com os arquivos HTML e CSS e ver o que acontece quando você muda alguma coisa. Qualquer dúvida que você tiver, pode entrar em contato comigo.

body {
	font-family: arial, helvetica, sans-serif;
	font-size: 80%;
	color: black;
	background-color: #ffc;
	margin: 1em;
	padding: 0;
}

/* Isso é um comentário */

p {
	line-height: 1.5em;
}

h1 {
	color: #ffc;
	background-color: #900;
	font-size: 2em;
	margin: 0;
	margin-bottom: 0.5em;
	padding: 0.25em;
	font-style: italic;
	text-align: center;
	letter-spacing: 0.5em;
	border-bottom-style: solid;
	border-bottom-width: 0.5em;
	border-bottom-color: #c00;
}

h2 {
	color: white;
	background-color: #090;
	font-size: 1.5em;
	margin: 0;
	padding: 0.1em;
	padding-left: 1em;
}

h3 {
	color: #999;
	font-size: 1.25em;
}

img {
	border-style: dashed;
	border-width: 2px;
	border-color: #ccc;
}

a {
	text-decoration: none;
}

strong {
	font-style: italic;
	text-transform: uppercase;
}

li {
	color: #900;
	font-style: italic;
}

table {
	background-color: #ccc;
}

BlogBlogs Tags: +web, css, iniciante, tutorial

Páginas Relacionadas

• Próxima Página: Tutorial Iniciande de CSS: Exercícios
• Página Anterior: Bordas
• Juntando Tudo (Tutorial Iniciante de HTML) - Contém todo o HTML relacionado ao CSS dessa página.

Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Tutorial Iniciante de CSS: Bordas

Pra criar uma borda ao redor de um elemento, tudo que você precisa é dessa propriedae: border-style. Os valores podem ser solid, dotted, dashed, double, groove, ridge, inset e outset.

Veja o efeito de cada valor:

border-width define a espessura da borda, e geralmente aparece em pixels. Existem também as propriedades border-top-width, border-right-width, border-bottom-width e border-left-width. Finalmente, border-color define a cor.

Adicione esse código ao seu arquivo CSS:

h2 {
	border-style: dashed;
	border-width: 3px;
	border-left-width: 10px;
	border-right-width: 10px;
	border-color: red;
}

Isso vai criar uma borda tracejada ao redor de todos os cabeçalhos secundários (os elementos h2) do HTML, que tem espessura superior e inferior de 3 pixels e espessura da borda direita e esquerda de 10 pixels. Essas duas sobrescreveram o valor de 3 pixels de espessura definidos para a borda inteira - quando dois valores podem ser aplicados ao mesmo elemento, o que vale é o último que foi declarado.

Páginas Relacionadas

• Próxima Página: Juntando Tudo
• Página Anterior: Margens e Espaçamento
• Propriedades “Atalho” - Como usar a propriedade border pra definir cor, estilo e espessura da borda de uma vez só (Tutorial Intermediário de CSS)

Exemplos

• Bordas

Referência

• border-style
• border-width
• border-color
• border

BlogBlogs Tags: +web, tutorial, iniciante, css

Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Tutorial Iniciante de CSS: Margens e Espaçamento

margin (margem) e padding (espaçamento) são as duas propriedades mais comuns para espaçar elementos. Margin é um espaço fora do elemento, e padding é um espaço dentro do elemento.

Mude o código CSS para h2 (não mexa no resto) para o seguinte:

h2 {
	font-size: 1.5em;
	background-color: #ccc;
	margin: 1em;
	padding: 3em;
}

Você vai ver que isso deixa um espaço da largura de uma letra ao redor do segundo cabeçalho, e o próprio cabeçalho é “largo” por causa do padding (espaçamento) com a largura de três letras.

Os quatro lados também podem ser modificados individualmente. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom e padding-left são as propriedades que você pode usar pra isso. Margin-top e padding-top definem o espaço acima, *-right definem o espaço a direita, *-bottom definem o espaço abaixo e *-left definem o espaço à esquerda.

O Box Model (Modelo das Caixas)

Margens, padding e bordas (que você vai ver na próxima página) são todos partes do que é conhecido como Box Model (Modelo das Caixas). O Box Model funciona assim: no meio você tem o box (a caixa) do conteúdo (uma imagem ou um texto, por exemplo), ao redor dela você tem o padding (espaço dentro do elemento), ao redor dele você tem a borda e ao redor dela você tem a margem (espaço fora do elemento). Pode ser representado visualmente assim:

Leia esse texto sobre o Box Model que você vai entender melhor.

Você não tem que usar todas essas propriedades, mas é importante lembrar que o modelo de caixa pode ser aplicado a qualquer elemento na página, e que é uma coisa poderosa!

BlogBlogs Tags: +web, tutorial, minicurso, css, iniciante

Páginas Relacionadas

• Próxima Página: Bordas
• Página Anterior: Texto
• Propriedades “Atalhos” - Como usar margin e padding para especificar diferentes valores pra top, right, bottom e left em uma só propriedade (Tutorial intermediário de CSS).

Referência

• margin
• padding

Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.