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.
