Sejam bem vindos, esta é a sexta aula de Programação Web em Java, para saber mais sobre o curso, começe em Curso de Programação Web em Java – CPWJ
Na última aula estudamos o que é e como utilizar Css de acordo com o Web Standard. Hoje vamos ver muitas possibilidades de formatação com textos e fontes.
Parâmetros Text
Vamos colocar nosso texto sob controle? Similar à formatação de Parágrafo do Word, vamos começar vendo uma lista de parâmetros que modificam a aparência do texto:
- direction: direção do texto.
Valores: ltr e rtl, respectivamente esquerda para direita e direita para esquerda - line-height: distância entre linhas.
Valores: “normal”, numérico, ou porcentagem - letter-spacing: espaço entre caracteres.
Valores: “normal” e numérico. - text-align: alinhamento texto.
Valores: left, right, center e justify. - text-decoration: Modificadores para “decoração”.
Valores: none (não apresenta decoração), underline (sobrelinha), overline (uma linha acima), line-through (texto riscado) e blink (piscante, use com moderação) - text-indent: identação da primeira linha do bloco.
Valores: numérico e porcentagem. - text-transform: coloca texto em maiúscula ou minúscula.
Valores: none, capitalize (primeira letra maiúscula e restante minúscula), uppercase (maiúscula) e lowercase (minúscula) - white-space: define como o espaço entre as palavras dentro de um bloco é gerenciado.
Valores: “normal” (padrão do xhtml), pre (permite repetir espaços e respeita enter e outros), nowrap (não quebra a linha automaticamente) - word-spacing: aumenta ou diminui o espaço entre palavras.
Valores: “normal” ou numérico.
Exemplos:
p {
text-indent: 20px; /* 20pixels */
}
h1,h2,h3,h4 {
word-spacing: 1.4em; /* 1,4 vezes a largura de uma letra */
letter-spacing: 0.3em; /* metade da largura de uma letra */
text-align: center;
}
Parâmetros Font
- color: Cor da fonte. Veja como definir as cores abaixo em aprofundando.
- font-family: definir uma lista com o nome da fonte utilizado ou um nome de família genérica.
Valores:- nome da fonte. Usar aspas em caso de nomes compostos “lucida console”.
- nome de uma família genérica: serif, sans-serif, cursive,fantasy e monospace.
- font-size: tamanho da fonte
Valores: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, numérico e porcentagem. - font-style: estilos da fonte
Valores: normal, italic, oblique. - font-weight: Define a força do negrito.
Valores: “normal”, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 - font-variant: define as letras em maiúsculo.
Valores: small-caps; - *font: define vários dos elementos acima ao mesmo tempo, veja o exemplo “h1″.
Exemplos:
body {
font-family: courier, serif;
color: black;
}
p {
font-family: arial, "lucida console", sans-serif;
font-weight: bold;
font-style: italic;
font-size: 12px;
}
h1{
font: italic 900 22px arial,"lucida console",sans-serif;
}
Seletores
Até agora nós indicamos que é possível modificar o comportamento de qualquer tag padrão xhtml.
Indicamos exemplos de como modificar todo o conteúdo da página (usando body), os parágrafos (usando p) e os títulos (usando h1, h2, etc).
Porém existem situações que desejamos modificar um único parágrafo, um título apenas da página, ou um grupo de parágrafos. Para executar esta tarefa existem dois parâmetros que podemos incluir nos tags xHtml: id e class.
- id: identificar de um elemento único na página. É como um Rg de um elemento de página, e justamente por isso não pode ser repetido.
<table id="Receitas"> ... </table> <table id="Despesas"> ... </table>
- class: identificador de pertença a um grupo de elementos. É usado para classificar um tag como pertencente a um grupo. Um tag pode ser identificado como parte de um único grupo de elementos.
<p>Parágrafo comum</p> <p class="pergunta">Este é um parágrafo com uma pergunta</p> <p class="resposta">Este é um parágrafo com uma resposta</p> <p class="pergunta">Este é um parágrafo com outra pergunta</p> <p class="resposta">Este é um parágrafo com outra resposta</p>
Uma vez definido a “class” ou “id” é posível aplicar um Css diretamente a eles. Para class use o caracter “.”:
.pergunta {
color: #ccc;
word-spacing: 1.2em;
}
.resposta {
background-color:#ccc;
color: #fff;
}
E para id usamos o caracter “#”:
#receitas {
color:#fff;
background-color:#000;
}
#despesas {
color:#OOO;
background-color:#FFF;
}
Eventualmente o mesmo tag pode ser identificado por um id e fazer parte de um class:
<p id="principal" class="resposta">Esta é a "principal" resposta.</p>
Neste caso os Css de #principal e .resposta serão aplicados, com prioridade para #principal.
Exercícios
- Retomar os exercícios da última aula, aplicando os novos conceitos.
Aprofundando
- Estude como definir qualquer cores nos links: http://erikasarti.net/html/tabela_de_cores_web_safe.htm e http://infowester.com/coreshtml.php
- Faça uso do ambiente de teste do w3cschools em: w3schools.com
Na Sequência
- Blocos, trechos e Diagramação.
Dúvidas? vá para o fórum.

Sempre aqui .. estudando sem para =D
Boa noite Professor
Eu não consegui entender o que significa o parametro “text-indent”, fiz uma breve pesquisa no wikipédia mas continuo sem intender o que significa e pra que serve.
pode me ajudar?
Olá Carlos,
O text-indent permite definir um pequeno espaço à esquerda da primeira linha de cada parágrafo. Lembra do primário: “ponto final, na próxima linha, dois dedinhos parágrafo.”
Professor,fiz o arquivo css e coloquei no html uma referencia mas não deu certo:
Daniel
Lançamento: Discovery construindo a ISS
Este artigo faz parte da cobertura de Tecnoclasta para a missão STS-120 do Ônibus Espacial Discovery.
Mais notícias em:
Assunto Informação Link
Lançamento Discovery construindo a ISS Construção da ISS
Discovery Casco checado, aproximando da ISS Casco checado, aproximando da ISS
Discovery Docagem na Estação Espacial Docagem na estação espacial
Discovery Curiosidades da missão STS-120 Curiosidades da missão
Harmony já instalado na Estação Espacial Harmony já instalado
Foi executado com sucesso o lançamento da Discovery ontem dia 23/10/2007 às 13:38 horário de Brasília. Esta viagem tem como missão a continuidade da construção da Estação Espacial Internacional.
Lançamento da Discovery para a Missão STS-120 em 23/10/2007
Será instalado o módulo Harmony de construção italiana, que será utilizado para interconectar os futuros módulos Japoneses e Europeus à estação. Também será reposicionado um painéis solares para a posição definitiva.
Módulo Harmony: conectando os futuros módulos com a Estação Espacial
Veja o cronograma de atividades na missão STS-120:
Dia Atividade
1 lançamento
2 verificação do escudo de proteção térmica
3 preparação para primeiro EVA
4 instalação do módulo Harmony na Estação
6 preparação para segunda EVA
5 desconecção da estrutura P6 de painéis solares
7 preparação para terceira EVA
8 reconeção da estrutura P6 de painéis solares na sua posição deficitiva
Indique o erro,por favor.
Arquivos html não são aceitos nos comentários. Use email para este caso.
pesquisei um pouco e consegui adicionar,o código estava certo,é que o Chrome não aceita HTML 5 então testei no explorer 9 e deu certo!
MUITO BOA A AULA, APRENDIR MUITO COM ESSA FORMA DE ENSINO. AULA SHOW
Muito bem explicado tudo até o momento…
Excelente curso!!!