Grade de cursos

Tutorial avançado do CSS

• Livro de Exercícios CSS
• Introdução ao CSS
• Gramática Básica do CSS
• Gramática Avançada do CSS
• Seletor Derivado CSS
• Seletor ID CSS
• Seletor de Classe CSS
• Criação CSS
• Fundo CSS
• Texto CSS
• Fonte CSS
• Lista CSS

Modelo de caixa CSS

• Visão Geral do Modelo de Caixa CSS
• Margem Interna CSS
• Borda CSS
• Margem Externa CSS
• Fusão de Margens Externas CSS

Posicionamento CSS

• Visão Geral de Posicionamento CSS
• Posicionamento Relativo CSS
• Posicionamento Absoluto CSS
• Flutuamento CSS

Seletores CSS

• Seletor de Elemento CSS
• Agrupamento de Seletores CSS
• Detalhamento do Seletor de Classe CSS
• Detalhamento do Seletor ID CSS
• Detalhamento do Seletor de Atributo CSS
• Seletor de Descendente CSS
• Seletor de Elemento Filho CSS
• Seletor de Irmão Adjacente CSS

Cursos optativos

Recomendação de curso:

• Caixa de Ferramentas CodeW3C.com

As propriedades de texto do CSS definem a aparência do texto.

Através das propriedades de texto, você pode mudar a cor do texto, o espaçamento entre caracteres, alinhar o texto, decorar o texto, recuar o texto, etc.

Recuar texto

Indentar a primeira linha dos parágrafos na página da Web, isso é um efeito de formatação de texto muito usado.

O CSS oferece Propriedade text-indentEssa propriedade facilita a indentação do texto.

Ao usar a propriedade text-indent, a primeira linha de todos os elementos pode ser recuada por uma distância especificada, inclusive negativa.

A propriedade mais comum dessa propriedade é ajustar o recolhimento da primeira linha do parágrafo, as regras a seguir farão com que todas as primeiras linhas dos parágrafos sejam recolhidas em 5 em:

p {recolhimento-texto: 5em;}

notar:Geralmente, pode-se aplicar text-indent a todos os elementos bloco, mas não pode-se aplicar essa propriedade a elementos inline, como imagens, que são elementos substituíveis. No entanto, se um elemento bloco (como um parágrafo) tiver uma imagem na primeira linha, ela se moverá com o resto do texto da linha.

Dica:Se você quiser 'recolher' a primeira linha de um elemento inline, você pode criar esse efeito usando margem-esquerda ou margem externa.

Uso de valores negativos

O text-indent também pode ser configurado como valor negativo. Utilizando essa técnica, é possível alcançar muitos efeitos interessantes, como o 'recolhimento suspenso', onde a primeira linha flutua no lado esquerdo do restante do elemento:

p {recolhimento-texto: -5em;}

No entanto, ao configurar valores negativos para text-indent, tenha cuidado, pois se um parágrafo for configurado com um valor negativo, alguns textos da primeira linha podem ultrapassar a margem esquerda da janela do navegador. Para evitar problemas de exibição, é recomendável configurar uma margem externa ou um pouco de margem interna para o recolhimento negativo:

p {recolhimento-texto: -5em; margem-esquerda: 5em;}

Uso de porcentagens

A propriedade text-indent pode usar todos os tipos de unidades de comprimento, incluindo porcentagens.

Os porcentagens devem ser relativas à largura do elemento pai do recolhimento. Em outras palavras, se o valor de recolhimento for configurado para 20%, a primeira linha do elemento afetado recolará 20% da largura do elemento pai.

No exemplo a seguir, o valor de recolhimento é 20% do elemento pai, ou seja, 100 pixels:

div {largura: 500px;}
p {recolhimento-texto: 20%;}
<div>
<p>isto é um parágrafo</p>
</div>

herança

A propriedade text-indent pode ser herdada, considere as seguintes marcações:

div#outer {largura: 500px;}
div#inner {recolhimento-texto: 10%;}
p {largura: 200px;}
<div id="outer">
<div id="inner">algum texto. algum texto. algum texto.</div>
<p>isto é um parágrafo.</p>
</div>
</div>

Os parágrafos marcados acima também serão recolhidos em 50 pixels, pois este parágrafo herda o valor de recolhimento do elemento div com id 'inner'.

alinhamento horizontal

text-align É uma propriedade básica que afetaLinha de textoMétodos de alinhamento entre eles. Os primeiros três valores são bastante diretos, mas os quartos e quintos são um pouco complexos.

Os valores left, right e center fazem com que o texto dentro do elemento seja alinhado para a esquerda, para a direita e centralizado, respectivamente.

As línguas ocidentais são lidas da esquerda para a direita, então o valor padrão de text-align é left. O texto é alinhado na borda esquerda e tem um borda de dente à direita (conhecido como texto da esquerda para a direita). Para línguas como o hebraico e o árabe, text-align tem o valor padrão right, pois essas línguas são lidas da direita para a esquerda. Surpreendentemente, center faz com que cada linha de texto fique centralizada no elemento.

Dica:Para centralizar elementos de bloco ou de tabela, é necessário definir adequadamente as margens externas esquerda e direita desses elementos.

text-align:center e <CENTER>

Você pode pensar que text-align:center e o elemento <CENTER> servem à mesma função, mas na verdade eles são muito diferentes.

<CENTER> Não afeta apenas o texto, mas também centraliza todo o elemento. text-align não controla o alinhamento do elemento, mas apenas afeta o conteúdo interno. O elemento não se move de um parágrafo para outro, apenas o texto é afetado.

justify

O último atributo de alinhamento horizontal é justify.

No alinhamento justificado do texto, os extremos esquerdo e direito das linhas de texto ficam na borda interna do elemento pai. Em seguida, ajusta-se o espaçamento entre as palavras e as letras, para que a comprimento de cada linha seja exatamente igual. Talvez você já tenha notado que o texto justificado é muito comum na área de impressão.

Deve ser notado que a extensão do alinhamento justificado do texto, para preencher o espaço entre os limites esquerdo e direito do elemento pai, é determinada pelo agente de usuário (não pelo CSS). Para obter mais detalhes, consulte Página de referência da propriedade CSS text-align.

Espaçamento de caractere

Propriedade word-spacingPode alterar o espaçamento padrão entre as palavras (palavras). Seu valor padrão normal é o mesmo que o valor definido como 0.

A propriedade word-spacing aceita um valor de comprimento positivo ou negativo. Se for fornecido um valor de comprimento positivo, o espaçamento entre as palavras aumentará. Definir um valor negativo para word-spacing o aproximará:

p.espalhado {word-spacing: 30px;}
p.tenso {word-spacing: -0.5em;}
<p class="espalhado">
Este é um parágrafo. O espaçamento entre as palavras será aumentado.
</p>
<p class="tight">
Este é um parágrafo. O espaçamento entre as palavras será reduzido.
</p>

Exemplo TIY: Aumentar ou diminuir o espaçamento entre palavras (espaçamento entre palavras)

Nota:Para entender melhor a definição do CSS para "palavra" (word), acesse Página de referência da propriedade word-spacing do CSS.

espaçamento entre letras

propriedade letter-spacingA diferença em relação à word-spacing está no fato de que o espaçamento entre letras modifica o espaçamento entre caracteres ou letras.

Como a propriedade word-spacing, os valores válidos para letter-spacing incluem todos os tipos de comprimento. A palavra-chave padrão é normal (o que é equivalente a letter-spacing:0). O valor de comprimento introduzido aumenta ou diminui o espaçamento entre os caracteres ou letras em uma quantidade especificada:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

Exemplo TIY: Especificar o espaçamento entre caracteres (espaçamento entre letras)

conversão de caracteres

propriedade text-transformTratamento da capitalização do texto. Essa propriedade tem 4 valores:

• none
• uppercase
• lowercase
• capitalize

O valor padrão none não faz nenhuma modificação no texto, mantendo a capitalização original do documento de origem. Como o nome sugere, uppercase e lowercase convertem o texto para maiúsculas e minúsculas, respectivamente. Por fim, capitalize capitaliza a primeira letra de cada palavra.

Como uma propriedade, text-transform pode não ser muito importante, mas se você decidir, de repente, transformar todos os elementos h1 em maiúsculas, essa propriedade é muito útil. Não é necessário modificar o conteúdo de todos os elementos h1 separadamente, basta usar text-transform para realizar essa modificação:

h1 {text-transform: uppercase}

O uso de text-transform tem dois benefícios. Primeiro, é necessário escrever uma regra simples para realizar essa modificação, sem modificar o elemento h1 em si. Em segundo lugar, se você decidir voltar a todas as capitalizações originais no futuro, a modificação pode ser feita mais facilmente.

Exemplo TIY: Controle a capitalização das letras do texto

decoração de texto

A seguir, discutimos text-decoration propriedadeIsso é uma propriedade muito interessante que oferece muitos comportamentos muito interessantes.

A propriedade text-decoration tem 5 valores:

• none
• underline
• overline
• line-through
• blink

Surpresa, underline adiciona sublinhado ao elemento, como o elemento U no HTML. Overline faz o contrário, desenhando uma sobrelinha no topo do texto. O valor line-through desenha uma linha贯穿 no meio do texto, equivalente aos elementos S e strike no HTML. Blink fará o texto piscar, semelhante ao marcador blink suportado pelo Netscape, que foi criticado.

O valor none desativa todas as decorações aplicadas a um elemento. Normalmente, o texto sem decoração é o estilo padrão, mas nem sempre é assim. Por exemplo, os links têm sublinhado por padrão. Se você desejar remover o sublinhado do hiperlink, você pode usar o seguinte CSS para fazer isso:

a {text-decoration: none;}

notar:Se explicitamente usar essa regra para remover o sublinhado do link, a única diferença visual entre o âncora e o texto normal será a cor (pelo menos é assim pelo padrão, mas não pode ser garantido que a cor certamente terá diferença).

É possível combinar várias decorações em uma regra. Se você desejar que todos os hiperlinks tenham sublinhado e sobrelinhado, a regra será a seguinte:

a:link a:visited {text-decoration: underline overline;}

No entanto, é importante notar que se duas decorações diferentes coincidirem com o mesmo elemento, o valor vencedor substituirá completamente o outro. Considere as seguintes regras:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

Para as regras dadas, todos os elementos h2 com a classe stricken terão apenas uma decoração de linha贯穿, sem sublinhado e sobrelinhado, porque o valor text-decoration substitui em vez de acumular.

tratar espaços em branco

propriedade white-spaceafeta a maneira como o agente de usuário lida com espaços em branco, quebras de linha e caracteres tab no documento de origem.

Ao usar essa propriedade, você pode influenciar a maneira como o navegador lida com espaços em branco entre caracteres e entre linhas de texto. Em certo sentido, o processamento padrão do XHTML de espaços em branco já está concluído: ele combina todos os espaços em branco em um único espaço. Portanto, dada a seguinte marcação, ao ser exibida no navegador da Web, os caracteres entre eles mostrarão apenas um espaço, e as quebras de linha dentro do elemento serão ignoradas:

<p>This     paragraph has    many
    spaces           in it.</p>

Pode-se explicitamente definir esse comportamento padrão com a seguinte declaração:

p {white-space: normal;}

As regras acima dizem ao navegador para lidar com o espaço em branco da maneira normal: descartar espaços em branco adicionais. Se esse valor for fornecido, os caracteres de nova linha (retorno de carro) serão convertidos em espaços em branco e sequências de múltiplos espaços em branco na mesma linha serão convertidas em um único espaço em branco.

Exemplo TIY: white-space: normal

O valor pre

No entanto, se o white-space for definido como pre, o processamento dos espaços em branco no elemento afetado por essa propriedade é diferente, agindo como o elemento pre do XHTML; os espaços em branco não são ignorados.

Se o valor da propriedade white-space for pre, o navegador prestará atenção aos espaços em branco adicionais, até mesmo aos retornos de carro. Neste aspecto e apenas neste, qualquer elemento pode ser equivalente a um elemento pre.

Exemplo TIY: white-space: pre

notar:O teste mostrou que o IE 7 e versões anteriores do navegador não suportam esse valor, portanto, use navegadores não IE para visualizar o exemplo acima.

O valor nowrap

O valor oposto é nowrap, que impede que o texto no elemento se quebre, a menos que seja usado um elemento br. Usar nowrap no CSS é muito semelhante ao usar <td nowrap> no HTML 4 para definir uma célula de tabela que não pode quebrar, mas o valor white-space pode ser aplicado a qualquer elemento.

Exemplo TIY: white-space: nowrap

Os valores pre-wrap e pre-line

O CSS2.1 introduziu os valores pre-wrap e pre-line, que não existiam nas versões anteriores do CSS. Esses valores permitem que os criadores de conteúdo controlem melhor o processamento de espaços em branco.

Se o valor white-space do elemento for pre-wrap, os espaços em branco sequenciais dentro do elemento serão mantidos, mas as linhas de texto serão quebradas normalmente. Se definido para esse valor, os delimitadores de linha do texto original e os delimitadores de linha gerados também serão mantidos. O pre-line é o oposto do pre-wrap, ele combina sequências de espaços em branco como o texto normal, mas mantém os delimitadores de linha.

exemplo TIY: white-space: pre-wrap

exemplo TIY: white-space: pre-line

notar:Testamos os dois exemplos acima nos navegadores IE7 e FireFox2.0, mas o resultado é que os valores pre-wrap e pre-line não receberam um suporte bom.

resumo

A tabela a seguir resume o comportamento da propriedade white-space:

direção do texto

Se você estiver lendo um livro em inglês, você lerá da esquerda para a direita, da cima para baixo, isso é o fluxo de direção do inglês. No entanto, não todos os idiomas são assim. Sabemos que o chinês antigo era lido da direita para a esquerda, claro, incluindo hebraico e árabe, etc. O CSS2 introduziu uma propriedade para descrever sua direcionalidade.

propriedade directionafeta a direção de escrita do texto de bloco, a disposição das colunas da tabela, a direção do preenchimento horizontal do conteúdo dentro da caixa do elemento e a posição da última linha alinhada dos elementos alinhados aos extremos.

Nota:Para elementos inline, apenas quando propriedade unicode-bidiA propriedade direction é aplicada apenas quando definida como embed ou bidi-override.

A propriedade direction tem dois valores: ltr e rtl. Na maioria das vezes, o valor padrão é ltr, mostrando texto da esquerda para a direita. Se o texto for mostrado da direita para a esquerda, deve ser usado o valor rtl.

propriedades de texto do CSS

Caixa de Ferramentas

Manual de Referência CSS

Exemplo CSS

Teste CSS

Tutorial CSS

Links de Patrocinadores