Home » Tecnologia
CSS - Cascating Style Sheet - Folha de estilos em cascata
Tutorial de CSS - Cascating Style Sheet - Folha de estilos em cascata
Gostou? Recomende:
Veremos neste tutorial um passo-a-passo de CSS com o objetivo de mostrar de forma clara e completa as principais propriedade e como eles podem ser usadas para criar sites atraentes e bem formatados. CSS é uma sigla de Cascating Style Sheet, ou Folha de estilos em cascata que nada mais é do que uma linguagem de marcação de textos em forma de estilos e aplicáveis a documentos HTML.
Num passado não muito distante o HTML era responsável pela estruturação e formatação ao mesmo tempo, hoje porém este trabalho deve ser dividido entre HTML e CSS . O CSS pode e deve ser usado para criar toda a formatação do seu site. Siga a seguinte regra: estruturação do documento deve ser feito com HTML, como a criação das tags e formatação deve ser feito em CSS.
Para orientar melhor você, separei o tutorial por assunto, desta forma será possível fazer um estudo sistemático dos diversos recursos que o CSS nos proporciona.
Font-family
A propriedade font-family do CSS é usada para determinar a fonte que será usada para a formatação de um texto em HTML. O termo é família de fonte é usado para indicar que podemos usar mais de uma fonte na definição de uma regra CSS.
Este conceito é importante pois com ele poderemos trabalhar com prevenção à uma possível substituição de fonte e com isto aplicar as fontes corretas.
Veja o exemplo abaixo:
font-family: arial, verdana, helvetica, sans-serif;
A fonte escolhida foi a Arial, porém, se o usuário não tiver a fonte Arial instalada, então ele passará a considerar a segunda opção, Verdana e assim por diante.
O último termo desta lista é o sans-serif, que quer dizer sem-serifa, ou seja, se nenhuma das fonte indicadas forem encontradas, então a substituição será feita por uma outra fonte, desde que seja sem serifa.
Posso usar qualquer fonte?
O ideal é usar fontes mais comuns, já que a chance delas existirem na maior parte do micros dos usuários é muito maior. As fontes mais usadas para textos na web são: Verdana, Arial, Helvetica, Tahoma, Geogia, etc.
Usando as fontes citadas acima e também o conceito do font-family, dificilmente você terá problemas com defomatação de textos no seu site ou blog.
Esta propriedade poderá ser aplicada em qualquer tag de texto do HTML, como p, h1, h2, h3, span, a, li, entre outras.
Espaçamento entre letras
Espaçamento entre letras em CSS é algo importante para uma boa diagramação do seu texto no site. Normalmente um texto com espaçamento adequado entre as letras torna a leitura mais agradável e menos cansativa.
A propriedade letter-spacing do CSS é usada para criar o espaçamento entre letras, mas é necessário fazer um bom planejamento, bem como alguns testes para certificar do valor ideal para o espaçamento.
A tela do computador não é o melhor lugar para fazermos leitura, normalmente ela causa mais cansaço e um pouco de fadiga, principalmente se o ambiente não estiver com uma iluminação adequada, por isto temos que projetar textos adequados a fim de traduzir na melhor experiência possível para o usuário.
Vamos ver alguns exemplos de textos com diferentes espaçamentos entre letras e comparar qual a melhor opção.
Texto sem espaçamento entre as letras
Texto com espaçamento de 1 pixel entre letras
Texto com espaçamento de -1 pixel entre letras
Tamanho da letra
Um fator importante a ser considerado é o tamanho da letra, pois o valor do espaçamento dependerá também do tamanho do corpo do seu texto.
A propriedade font-size é usada para indicar o tamanho da letra(fonte) em CSS. Este tamanho poderá ser especificado em várias unidades de medidas.
O bom planejamento do site é de vital importância para que a propriedade font-size seja aplicada corretamente e sem desperdício, isto é, não é necessário ficar aplicando o tamanho da letra em todas as tags de texto.
As medidas possíveis para o font-size são:
- xx-small (equivale a 9px)
- x-small (equivale a 10px)
- small (equivale a 13px)
- medium (equivale a 16px)
- large (equivale a 18px)
- x-large (equivale a 24px)
- xx-large (equivale a 32px)
- smaller (equivale a 13px)
- larger (equivale a 18px)
É possível ainda usar valores personalizados para determinar o tamanho da letra, estes valores poderão estar em diversas unidades de medidas.
Unidade relativa
pixel (px)
A largura em pixel é proporcional ao dispositivo que estamos usando, monitor, telão, tela de um dispositivo móvel, etc
ems (em)
Determina a quantidade de vezes que se deve aumentar o tamanho da letra em relação ao tamanho do elemento pai. Por exemplo:
body{
font-size:20px;
}
h1{
1.5em;
}
O tamanho da fonte no h1 será de 30px, pois ele está aumentando 1 vez e meia o tamanho da letra do elemento pai que aqui no nosso exemplo é a tag body.
Porcentagem (%)
Determina que o tamanho da letra será feita em um percentual em relação ao elemento pai. Vejamos abaixo um exemplo prático.
p{
font-size:20px;
}
span{
200%;
}
O tamanho da letra no span será de 40px, pois ele está 200% acima do tamanho da fonte do elemento pai que aqui no nosso exemplo é a tag p.
Unidade absoluta
- points - pontos (pt)
- in (in)
- centímetros (cm)
- milímetros (mm)
- picas (pc)
Estas medidas não são muito comuns para uso em web e sua aplicação é mais comuns para mídias impressas, como jornais, revistas, outdoor, entre outros.
Estilos de fonte
As propriedades font-style, font-weight e font-variant são usadas em CSS para aplicar estilos de formatação, carga de negrito e variação, respectivamente.
Com excessão do font-variant, o font-style e font-weight é bastante usado ou pelo menos deveria ser. Veremos abaixo as definições e exemplos destas propriedades do CSS.
Font-style
A propriedade font-style é usada para aplicar estilo de formatação, como o itálico e o obliquo por exemplo.
Veja o exemplo abaixo:
h1{
font-style: italic;
}
h2{
font-style: oblique;
}
h3{
font-style: none;
}
h1 ficará com fonte itálica, h2 com fonte obliqua e h3 terá a formatação removida
Font-weight
A propriedade font-weight é usada para aplicar negrito e para determinar a intensidade da cor. Os valores possíveis são: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 e 900.
PS: neste escala de 100 a 900, o 400 é o mesmo que normal e 700 o mesmo que bold. Veja alguns exemplos:
h1{
font-weight: normal;
}
h2{
font-weight: bold;
}
Font-variant
A propriedade font-variant quando especificada vai colocar todo o texto em maiúsculo, mas com um tamanho reduzido em relação ao maiúsculo tradicional. Veja alguns exemplos:
h1{
font-variant: normal;
}
h2{
font-variant: small-caps;
}
Cor da letra
A propriedade color é usada para determinar a cor do texto em CSS, deve ser aplicada em tags de textos como h1...h6, p, strong, span, em, a, entre outros.
A cor do texto é de fundamental importância para dar vida à páginas, equilibrio, contrastes, entre outras. A propriedade color pode ser usada de três formas diferentes. Vamos a elas:
RGB
RGB é uma abreviação das cores compostas por Red(vermelho), Green(verde) e Blue(azul) [ver: http://pt.wikipedia.org/wiki/RGB]. Este sistema de cores é conhecido como aditivo, ou seja, projeção de luz como os monitores e datashows, por exemplo.
Em CSS o RGB poderá ser usado apontando os três valores que irão variar de 0 a 255, como no exemplo a seguir:
h1{
color: rgb(0,0,255);
}
Nome da cor
A outra forma de usar o color é indicando o nome da cor que deseja aplicar, neste caso o nome da cor deverá ser informada em inglês: red para vermelho, black para preto, yellow para amarelo e assim por diante. Veja um exemplo:
h2{
color: red;
}
Hexadecimal
Podemos usar o color também na sua forma hexadecimal e este tem sido o modelo mais adequado para a web. Os editores de HTML geralmente adotam este formato como sendo o padrão de formatação de cores. Veja um exemplo:
h3{
color: #ffff00;
}
Para compreender melhor o sistema hexadecimal acesse esta referência na Wikipédia.
Identação do texto
Quando editamos o texto de um livro, revista, jornal, carta ou outra redação qualquer, é comum trabalharmos com indentação ou um espaço na primeira linha do texto. A indentação é largamente usada na área editorial e nas redações, contudo na internet parece que o pessoal simplesmente aboliu este recurso. Muito pouco se vê de textos indentado na web, por que será?
Para criar uma indentação de um texto em CSS, usamos a propriedade text-indent como no exemplo abaixo:
HTML
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemplo de indentação ou espaço na primeira linha</title>
<link href="imgs/teste.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
Lorem ipsum veri apeirian elaboraret sed in, mea eu dolor dissentias. Est hinc essent aliquam ut. Eu vim alia fuisset. Duis facilisi dignissim at duo, no pro assum harum vocent. Elit sensibus inimicus te ius, cu primis albucius sea, erroribus adolescens mea in.
</div>
</body>
</html>
CSS
body{
font-family: Arial, Helvetica, sans-serif;
}
#box{
text-indent: 50px;
width: 400px;
text-align: center;
}
Resultado
Espaçamento entre palavras
O espaçamento entre palavras é um recurso de edição de textos que poderá ajudar muito os leitores do seu texto, livros, revistas e jornais empregam de alguma forma o espaçamento entre palavras.
O Espaçamento entre palavras em CSS é feito pela propriedade word-spacing quem contem apenas dois valores possível: normal ou um valor geralmente em pixel para determinar a distância ou o espaçamento entre as palavras.
Quando lemos um texto na tela do computador é necessário levarmos em conta que em função do brilho, contrastes e outros elementos, o monitor não é um local agradável para a leitura, portanto, é necessário que a edição do texto seja feito de forma a compensar esta falta de conforto gerada pelo monitor.
Vejamos alguns exemplos de textos com diferentes espaçamento entre palavras
Texto sem espaçamento entre as palavras
Texto com espaçamento de 3 pixels entre palavras
Texto com espaçamento de 8 pixels entre palavras
O CSS é rico em recursos de formatação de texto e assim como o espaçamento entre palavras é necessário considerar também o espaçamento entre letras em CSS e o espaçamento entre linha em CSS.
Fonte Maiúsculas e Minúsculas
A propriedade text-transform é usada para mudar um texto de maiúscula para minúscula ou vice-versa, pode ser usada ainda para aplicar a inicial das palavras em maiúscula.
Letras maiúsculas devem ser usadas em pontos estratégicos do seu documento HTML e nunca no site todo, a menos que o projeto do seu site já tenha previsto isto, caso contrário apenas títulos ou pequenas partes do texto devem ser em letras maiúsculas.
O text-transform deve ser aplicado em tags de textos, como o p, h1, h2, h3, span, a, li entre outros e pode ser usado de quatro formas diferentes, vamos a elas:
h1{
text-transform: uppercase;
}
A tag h1 terá seu conteúdo todo em letras maiúscula, como no exemplo abaixo:
LETRAS MAIÚSCULAS EM CSS COM TEXT-TRANSFORM: UPPERCASE
h2{
text-transform: lowercase;
}
A tag h2 terá seu conteúdo todo em letras minúscula, como no exemplo abaixo:
texto em css com letras minúsculas. propriedade text-transform: lowercase
h3{
text-transform: capitalize;
}
A tag h3 ficará com a inicial maiúscula para todas as palavras, como no exemplo abaixo:
Exemplo De Texto Formatado Com Text-transform: Capitalize
h2{
text-transform: none;
}
Este quarto exemplo deve ser usado apenas para neutralizar um uso anterior do text-transform, ou seja, supondo que exista no início do documento CSS uma formatação com text-transform: uppercase e no final você queira neutralizar esta formatação, então basta usar o text-transform:none.
Decoração do texto
A propriedade text-decoration do CSS permite que apliquemos alguns pequenos efeitos ou literalmente decoração nas tags do nosso documento HTML. Geralmente estes efeitos são aplicados na tag <a> que cria os hyperlinks em HTML e com isto é possível mudar a formatação de link com um efeito sublinhado ou riscado por exemplo.
Os valores possíveis para a propriedade text-decoration são:
- underline - texto sublinhado
- overline - coloca uma linha em cima do texto
- line-trough - texto riscado
- blink - texto piscando (não funciona em todos os browsers)
- none - tira todos os efeitos de decoração
Uma forma prática de entender a aplicação da propriedade text-decoration pode ser vista no exemplo abaixo:
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
a:visited{
text-decoration: overline;
}
Perceba que formatamos a tag <a> do HTML e seus comportamentos ativo e visitado. O primeiro exemplo diz que o comportamento inicial do link é none, ou seja, sem o sublinhado tradicional de links. O segundo exemplo ocorre quando o usuário passar o mouse sobre o link(hover) e neste caso haverá o efeito sublinhado e por último o link ficará com uma linha em cima depois que ele for visitado (comportamento visited).
Veja este outro exemplo:
.preco_de{
text-decoration: line-trough;
}
.preco_por{
text-decoration: none;
}
Este exemplo poderá ser bem aplicado no caso de sites de comércio eletrônico onde é comum encontrarmos promoção do tipo: preco de 10 por 8. Neste caso o valor 10 deveria ser formatado com a classe preco_por, já que esta tem o efeito de riscado(line-trough).
Alinhamento do texto
O alinhamento de textos em CSS é feito com o uso da propriedade text-align, com ela podemos aplicar alinhamento esquerdo, centralizado, direito e justificado.
A propriedade text-align só pode ser aplicado em elementos de blocos e não em textos inline. Os principais elementos de bloco que normalmente usamos o text-align são: td, div, p, h1...h6, li, entre outros.
O alinhamento horizontal de textos em CSS pode ser definido de quatro formas diferentes: esquerdo, centralizado, direito e justificado. Vejamos alguns exemplos:
text-align: left;
Este é o padrão do text-align, ou seja, se esta propriedade for omitida, então será assumido que o alinhamento horizontal do texto do tag será esquerdo.
text-align: center;
Aqui o alinhamento do texto será centralizado. Muito se discute sobre o uso de textos centralizados, para alguns designers isto não é muito recomendado, mas na prática tudo vai depender do contexto em que está sendo aplicado. Penso que para pequenos blocos de texto não há nenhum problema em centralizar o texto, o problema ocorre que você centralizar uma página inteira.
text-align: right;
Aqui o texto está sendo alinhado a direita e se centralizar pode ser problema em alguns casos, alinhar a direita mais ainda. Não se usa alinhar textos a direita exceto em pequenos blocos para chamar a atenção, dar alguns destaque ou fazer pequenas citações.
text-align: justify;
Aqui o texto está sendo justificado. Este tipo de alinhamento ocorre quando o texto se ajusta ou alinha pelas duas margens, direita e esquerda, ainda que tenha que manter um espaçamento desproporcional no meio da linha.
Não é muito aconselhável usar este alinhamento para blocos de textos muito estreito, já que neste caso qualquer palavra que tenha muitos caracteres poderá criar um efeito indesejado na formatação do seu texto.
Principais propriedades do CSS
Abaixo uma lista das principais propriedades do CSS e uma breve explicação do significado de cada uma delas. As propriedades estão agrupadas em fonte, bloco de textos, background, bordas, margens, posicionamento, flutuação e listas.
Propriedades de fonte
font-family: Tipo de fontes (letras).
font-size: Tamanho da letra.
font-weight: Fonte em negrito.
font-variant: Variação do tamanho da letra maiúscula.
font-style: Estilo da letra.
text-transform: Caixa alta, baixa ou primeira letra maiúscula.
text-decoration: Texto com decoração.
color: Cor da letra.
Propriedades de blocos de textos
line-height: Define a altura da linha.
vertical-align: Define o alinhamento vertical.
text-align: Define o alinhamento de textos.
text-indent: Cria capitulares. Aquelas letras grandes no início de textos.
white-space: Define se haverá quebra de do texto nos parágrafos.
word-spacing: Espaçamento entre palavras em CSS.
letter-spacing: Espaçamento entre letras em CSS.
Propriedades de background - plano de fundo
backgound-color: Seta uma cor de fundo para o site, tabelas, divs e outras tags.
backgound-image: Permite colocar uma imagem de fundo do site ou em tags específicas.
backgound-repeat: Define o tipo de repetição de imagens em background.
backgound-attachment: Imagem de fundo fixa ou não.
backgound-position X e Y: Repetição vertical e horizontal.
Propriedades de bordas
border-style: Estilo da borda em CSS.
border-width: Largura da borda em CSS.
border-color: Cor da borda em CSS.
Propriedades de margens externas e internas
padding: Formatação da margem interna.
margin: Formatação da margem externa.
Propriedades de posicionamento
position: Tipo de posicionamento.
z-index: Pilha ou ordem das camadas.
width: Largura de um elemento.
height: Altura de um elemento.
top: Distância em relação à margem superior.
bottom: Distância em relação à margem inferior.
right: Distância em relação à margem direita.
left: Distância em relação à margem esquerda.
Propriedades de layout, flutuação e visualização
visibility: Mostrar ou ocultar um objeto.
display: Tipo de caixa. Bloco, inline, none, etc.
float: Flutuação de um objeto.
clear: Remove marcas de flutuação.
cursor: Tipo de cursor que será mostrado.
overflow: Comportamento do texto quando exceder o espaço disponível.
Propriedades de listas
list-style-type: Tipo de item do marcador.
list-style-image: Define uma imagem como marcador.
list-style-position: Define a posição do marcador.
Participe do Simulado de HTML
Veja também:
Compartilhe com seus amigos:
// Comentários
Nenhum comentário