Como usar o Painel de texto no painel Propriedade CSS do Dreamweaver

O painel Texto Dreamweaver apresenta uma coleção de opções que controlam a exibição do texto em suas páginas. Você pode acessar as opções do painel de texto de rolagem para baixo o painel de propriedade até chegar abaixo das opções de layout, ou clicando no ícone de T na parte superior do painel.

image0.jpg

O painel de texto inclui as seguintes opções de formatação:

  • Cor: Defina a cor do texto. Você pode clicar no selector de cor e escolha uma cor, use o conta-gotas para provar qualquer cor na tela, ou digitar um código de cor hexadecimal no campo de cores. Se você digitar um código de cor hexadecimal, incluir o sinal de início de sustenido (#).

  • Família de fontes: Definir uma família de fontes ou uma série de famílias. Você pode adicionar fontes de seu disco rígido local ou de Adobe Typekit escolhendo Gerenciar fontes na parte inferior da lista drop-down e lançar a caixa de diálogo Gerenciar fontes.

    image1.jpg
  • Estilo de fonte: Digite Normal, Itálico ou oblíquo. No entanto, itálico ou oblíquo são raramente diferente em um navegador web, para ficar com itálico a menos que você tenha um motivo específico para não.

  • Font-Variant: Mude o texto para small caps. Teste seus projetos com cuidado, pois este atributo não é suportado por todos os navegadores.

  • Font-weight: Fazer o texto aparecer em negrito, selecionando Negrito ou Bolder a partir da lista drop-down. Você também pode digitar um número entre 100 e 900 para controlar com mais precisão como negrito o texto aparece. Para remover a formatação em negrito, escolha Normal ou Lighter.

  • Tamanho da fonte: Definir o tamanho do texto. Você pode escolher um tamanho numérico específico ou de um tamanho relativo. opções de tamanho são pixel (px), pontos (pt), pica (pc), porcentagem (%), em, rem, ex, e ch. Pixels, ems, e as percentagens são as opções mais comumente usados ​​para tamanhos de texto.

  • Altura da linha: Especificar a altura da linha em que o texto está colocado. Muito parecido com o tamanho do texto, você pode especificar a altura da linha em uma variedade de maneiras, incluindo pixels, EMS, e porcentagens. É uma boa prática na web para adicionar a altura linha, porque aumentando o espaço em torno de seu texto torna mais fácil de ler na tela do computador.

  • Text-align: alinhar à esquerda, alinhar à direita, centro, ou justificar o seu texto clicando no ícone correspondente. O primeiro ícone, para Inherit, é o padrão. Por exemplo, você pode centralizar o texto no rodapé da sua página web, incluindo definida como Centro na definição de um estilo que se aplicam ao tag na parte inferior da página text-align.

  • Text-decoration: Especificar se o texto está sublinhado, sobrelinhadas, exibido com um tachado ou exibido com theblink efeito. Você também pode escolher Nenhum, que é frequentemente usado para remover o sublinhado de texto vinculado.

  • Text-indent: Especificar o montante que o texto será recuado do lado esquerdo da página, digitando um número em uma das opções de tamanho, como pixels, EMS, ou porcentagens.

Por que tantos tipos de letra?

Você pode ter ouvido que agora você pode usar qualquer fonte que você quer em suas páginas web, graças à mais recente versão do Cascading Style Sheets, CSS3. Esta afirmação é verdadeira, mas com algumas limitações: Você deve ter o direito legal de publicar a fonte, ea fonte deve ser hospedado em um servidor web.

Para ajudar a garantir que o seu texto aparece como você pretende, Dreamweaver inclui coleções de as fontes mais comuns em computadores Windows e Macintosh. Essas fontes são agrupadas em famílias, como

  • Gotham, Helvetica Nue, Helvetica, Arial, sans serif

  • Cambria, Hoefler Text, Libertação Serif, Times, Times New Roman, Times e serif

Você pode criar as suas próprias coleções fonte usando a caixa de diálogo Gerenciar fontes, que é acessível selecionando a opção Gerenciar fontes na parte inferior da lista drop-down font-family no painel de texto no painel CSS Designer.

A seção Text-Sombra do painel de texto

A seção Text-Sombra do painel de Texto fornece ferramentas para adicionar sombras de texto, uma das propriedades mais recentes CSS incluídos na definição CSS3. As opções mais populares são os seguintes:

  • H-sombra: Adicionar uma sombra ao seu texto no eixo horizontal. Primeiro, escolha uma opção de tamanho, e insira um número no campo. Por exemplo, digite 2px, para adicionar uma sombra horizontal, que é de 2 pixels de largura.

  • V-sombra: Adicionar uma sombra ao seu texto no eixo vertical. Primeiro, escolha uma opção de tamanho, e insira um número no campo.

  • Borrão: Controlar a quantidade de borrão na sombra. Quanto maior o número, mais a sombra se espalha para fora, ou turva.

  • Cor: Introduza um código de cor hexadecimal para especificar a cor da sombra, ou usar a conta-gotas para provar qualquer cor na tela.

    image2.jpg

Os recursos na parte inferior do painel de texto, que não são tão comuns quanto as outras opções do painel de texto, são as seguintes:

  • Text-transform: Alterar o caso de seu texto. As opções são Capitalize, Maiúsculas e Minúsculas. Clique no ícone correspondente para definir essa propriedade.

  • Letter-spacing: Define a quantidade de espaço em branco inserida entre as letras. opções de tamanho são pixel (px), pontos (pt), pica (pc), porcentagem (%), em, rem, ex, e ch.

  • Word-spacing: Define a quantidade de espaço em branco inserido entre as palavras. opções de tamanho são pixel (px), pontos (pt), pica (pc), porcentagem (%), em, rem, ex, e ch. (Veja o quadro anterior # 147 Comparando opções de tamanho CSS. # 148-)

  • White-Space: Dizer ao navegador como lidar com quebras de linha e espaços em um bloco de texto. Suas opções são Herdar, Normal, nowrap, Pré, Pré-line, ou pré-wrap. Nowrap é especialmente útil porque evita que os elementos sejam separadas se deve envolver para caber dentro de uma janela do navegador ou outro recipiente.

  • Vertical-align: Alinhar elementos em linha, tais como texto e imagens, em relação aos elementos que os rodeiam. Você pode definir um valor numérico ou escolha da linha de base, Sub, Super, Top, Texto-Top, Médio, inferior e text-bottom.

menu