Definição de propriedades do CSS

Você pode definir as propriedades das regras CSS como fonte do texto, imagem e cor do fundo, propriedades de espaçamento e layout, e a aparência dos elementos de lista. Primeiro crie uma nova regra e defina qualquer uma das propriedades a seguir.

Confira a descrição de algumas das propriedades de tipo CSS que você pode definir.

Define a família de fontes (ou série de famílias) para o estilo. Os navegadores exibem o texto na primeira fonte da série instalada no sistema do usuário. Para fins de compatibilidade com o Internet Explorer, liste uma fonte do Windows primeiro. O atributo de fonte é compatível com ambos os navegadores.

Especifica Normal, Italic ou Oblique como estilo de fonte. A configuração padrão é Normal. O atributo de estilo é compatível com ambos os navegadores.

Define a altura da linha em que o texto é colocado. Esta configuração é tradicionalmente chamada de leading. Selecione Normal para que a altura da linha do tamanho da fonte seja calculada automaticamente ou digite um valor exato e selecione uma unidade de medida. O atributo de altura da linha é compatível com ambos os navegadores.

Adiciona uma sublinha, sobrelinha ou tachado ao texto ou torna o texto intermitente. A configuração padrão é None. A configuração padrão para links é Underline. Quando você define a configuração de link para none, pode remover a sublinha dos links definindo uma classe especial. O atributo de decoração é compatível com ambos os navegadores.

Aplica um valor específico ou relativo de negrito à fonte. Normal equivale a 400; Bold equivale a 700. O atributo de espessura é compatível com ambos os navegadores.

Define a variante de versalete no texto. O Dreamweaver não exibe esse atributo na janela Documento. O atributo de variante é compatível com o Internet Explorer, mas não com o Navigator.

Coloca a primeira letra de cada palavra da seleção em maiúscula ou define o texto para todas maiúsculas ou todas minúsculas. O atributo de maiúsculas ou minúsculas é compatível com ambos os navegadores.

Define a cor do texto. O atributo de cor é compatível com ambos os navegadores.

Define o tamanho do texto. Você pode escolher um tamanho específico selecionando o número e a unidade de medida, ou você pode escolher um tamanho relativo. Pixels impede que os navegadores distorçam o texto. O atributo de tamanho é compatível com ambos os navegadores.

Definir propriedades do fundo de estilo CSS

Você pode aplicar as propriedades de fundo a qualquer elemento em uma página da Web. Por exemplo, crie um estilo que adicione uma cor ou imagem do fundo a qualquer elemento de página, ou seja, atrás do texto, de uma tabela, da página etc. Você também pode definir o posicionamento de uma imagem do fundo.

Confira a descrição de algumas das propriedades de fundo CSS que você pode definir.

Define a imagem de fundo do elemento. O atributo de imagem de fundo é compatível com ambos os navegadores.

Determina se e como a imagem de fundo será repetida. O atributo de repetição é compatível com ambos os navegadores.

• No Repeat exibe uma imagem uma vez, no início do elemento.

• Repeat coloca a imagem lado a lado, horizontalmente ou verticalmente atrás do elemento.

• Repeat‑x e Repeat‑y exibem uma faixa horizontal e vertical de imagens, respectivamente. As imagens são recortadas para que não ultrapassem os limites do elemento.

Nota: use a propriedade de repetição para redefinir a tag de corpo e definir uma imagem do fundo que não se organize lado a lado ou repita.

Determina se a imagem de fundo se manterá fixa na sua posição original ou rolará juntamente com o conteúdo. Observe que alguns navegadores podem tratar a opção Fixa como Rolar. Há suporte para esse atributo no Internet Explorer, mas não no Netscape Navigator.

Especifica a posição inicial da imagem de fundo em relação ao elemento. Este recurso pode ser usado para alinhar uma imagem de fundo ao centro da página, verticalmente (Y) e horizontalmente (X). Se a propriedade de anexo for Fixa, a posição será relativa à janela Documento, e não ao elemento.

Define a cor de fundo do elemento. O atributo de cor de fundo é compatível com ambos os navegadores.

Definir propriedades do bloco de estilo CSS

É possível definir as configurações de espaçamento e alinhamento das tags e propriedades.

Aumenta ou diminui o espaço entre as letras ou caracteres. Para diminuir o espaço entre os caracteres, especifique um valor negativo, por exemplo (-4). As configurações de espaçamento entre letras substitui as configurações de texto justificado. Há suporte para o atributo de espaçamento entre letras no Internet Explorer 4 e posterior, e no Netscape Navigator 6.

Especifica a distância em que a primeira linha de texto será recuada. Um valor negativo pode ser usado para diminuir o recuo, mas a exibição dependerá do navegador. O Dreamweaver exibe esse atributo na janela Documento somente quando a tag é aplicada aos elementos de nível de bloco. O atributo de recuo do texto é compatível com ambos os navegadores.

Especifica o alinhamento vertical do elemento ao qual ele é aplicado. O Dreamweaver exibe esse atributo na janela Documento somente quando é aplicado à tag <img>.

Define como o texto é alinhado no elemento. O atributo de alinhamento de texto é compatível com ambos os navegadores.

Determina como o espaço em branco será tratado no elemento. Selecione entre três opções: Normal diminui o espaço em branco; Pre trata o espaço em branco como se o texto estivesse delimitado por tags pre (ou seja, todo o espaço em branco é respeitado, incluindo espaços, tabulações e retornos); Nowrap especifica que só ocorre uma quebra de linha automática no texto quando uma tag br é encontrada. O Dreamweaver não exibe esse atributo na janela Documento. Há suporte para o atributo de espaço em branco no Netscape Navigator e no Internet Explorer 5.5.

Especifica se um elemento será exibido e, em caso afirmativo, como ele será exibido. None desativa a exibição de um elemento ao qual ele é atribuído.

Define o espaçamento entre palavras. Para definir um valor específico no menu pop-up, selecione Value e digite um valor numérico. No segundo menu pop-up, selecione uma unidade de medida (por exemplo, pixel, points etc.).

Nota: você pode especificar valores negativos, mas a exibição depende do navegador. O Dreamweaver não exibe esse atributo na janela Documento.

Definição de propriedades da caixa de estilo CSS

Use a categoria Caixa da caixa de diálogo Definição de regra CSS para definir as configurações das tags e propriedades que controlam o posicionamento dos elementos na página.

Você pode aplicar as configurações a cada lado de um elemento separadamente quando aplica as configurações de preenchimento e margem, ou usar a configuração Igual para tudo a fim de aplicar a mesma configuração a todos os lados de um elemento.

Especifica o lado pelo qual outros elementos circulam ao redor do elemento flutuado. O elemento flutuado está fixo no lado da flutuação e outros conteúdos circulam ao seu redor, no lado oposto.

Por exemplo, uma imagem flutuada para a direita é fixada à direita e o conteúdo que você adicionar depois flui para a esquerda da imagem.

Para obter mais informações, consulte http://css-tricks.com/all-about-floats/

Especifica os lados de um elemento que não permitem outros elementos flutuantes.

Especifica a quantidade de espaço entre o conteúdo de um elemento e sua borda (ou margem, caso não haja borda). Desmarque a opção Igual para tudo a fim de definir o preenchimento de cada lado do elemento separadamente.

Define as mesmas propriedades de preenchimento para os lados superior, direito, inferior e esquerdo do elemento ao qual elas são aplicadas.

Especifica a quantidade de espaço entre a borda de um elemento (ou o preenchimento, caso não haja borda) e outro elemento. O Dreamweaver exibe esse atributo na janela Documento somente quando aplicado aos elementos de nível de bloco (parágrafos, títulos, listas e etc). Desmarque a opção Igual para tudo a fim de definir a margem de cada lado do elemento separadamente.

Define a largura e altura do elemento.

Definição de propriedades da borda de estilo CSS

Use a categoria Borda da caixa de diálogo Definição de regra CSS a fim de definir configurações, como largura, cor e estilo, para as bordas em torno dos elementos.

Define a espessura da borda do elemento. O atributo de largura é compatível com ambos os navegadores. Desmarque a opção Igual para tudo a fim de definir a largura de borda de cada lado do elemento separadamente.

Define as mesmas propriedades de estilo de borda para os lados superior, direito, inferior e esquerdo do elemento ao qual elas são aplicadas.

Define a cor da borda. Você pode definir a cor de cada lado de modo independente, mas a exibição dependerá do navegador. Desmarque a opção Igual para tudo a fim de definir a cor de borda de cada lado do elemento separadamente.

Define a aparência do estilo da borda. A maneira como o estilo aparecerá depende do navegador. Desmarque a opção Igual para tudo a fim de definir o estilo de borda de cada lado do elemento separadamente.

Definição de propriedades da lista de estilo CSS

A categoria Lista da caixa de diálogo Definição de regra CSS define as configurações de lista, como tamanho e tipo de marcador, para as tags de lista.

Define a aparência dos marcadores ou números. O tipo é compatível em ambos os navegadores.

Define se haverá quebra de linha automática e recuo do texto do item de linha (externo) ou se o texto será deslocado para a margem esquerda (interno).

Permite que você especifique uma imagem personalizada para os marcadores. Clique em Procurar (Windows) ou Escolher (Macintosh) para navegar até uma imagem ou digite o caminho da imagem.

Definição de propriedades do posicionamento de estilo CSS

As propriedades de estilo de posicionamento determinam como o conteúdo relacionado ao estilo CSS selecionado está posicionado na página.

Deixe qualquer uma das seguintes propriedades vazias caso elas não sejam importantes para o estilo:

Determina como o navegador deve posicionar o elemento selecionado:

• Absolute coloca o conteúdo usando as coordenadas digitadas nas caixas Placement, relativo ao predecessor com posição relativa ou absoluta, ou, se não houver nenhum predecessor com posição relativa ou absoluta, relativo ao canto superior esquerdo da página.

• Relative coloca o bloco de conteúdo usando as coordenadas digitadas nas caixas Placement relativas à posição do bloco no fluxo de texto do documento. Por exemplo, atribuir a um elemento uma posição relativa, e as coordenadas superior e esquerda de 20px deslocará o elemento 20px para a direita e 20px para baixo de sua posição normal no fluxo. Os elementos também podem ser posicionados de forma relativa, com ou sem as coordenadas superior, esquerda, direita ou inferior, a fim de estabelecer um contexto para os filhos com posição absoluta.

• Fixed coloca o conteúdo usando as coordenadas digitadas nas caixas Placement, relativo ao canto superior esquerdo do navegador. O conteúdo permanecerá fixo nesta posição quando o usuário rolar a página.

• Static coloca o conteúdo em seu local no fluxo de texto. Esta é a posição padrão de todos os elementos HTML posicionáveis.

Determina a ordem de empilhamento do conteúdo. Os elementos com um índice z superior aparecem acima dos elementos com um índice z inferior (ou com nenhum índice). Os valores podem ser positivos ou negativos. (Se o conteúdo tiver uma posição absoluta, será mais fácil alterar a ordem de empilhamento usando o painel Elementos PA.)

Determina o que acontecerá se o conteúdo de um contêiner (por exemplo, DIV ou P) ultrapassar seu tamanho. Essas propriedades controlam a expansão da seguinte maneira:

• Visible aumenta o tamanho do contêiner a fim de que todo o seu conteúdo fique visível. O contêiner se expande para baixo e para a direita.

• Hidden mantém o tamanho do contêiner e recorta qualquer conteúdo de modo a ajustá-lo dentro do contêiner. Nenhuma barra de rolagem é fornecida.

• Scroll adiciona barras de rolagem ao contêiner, não importando se o conteúdo ultrapassa ou não o tamanho do contêiner. O fornecimento de barras de rolagem evita a confusão ocasionada pelo aparecimento e desaparecimento das barras de rolagem em um ambiente dinâmico. Esta opção não é exibida na janela Documento.

• Auto faz com que as barras de rolagem apareçam somente quando o conteúdo do contêiner exceder seus limites. Esta opção não é exibida na janela Documento.

Define a parte do conteúdo que está visível. Se você especificar uma região de corte, poderá acessá-la com uma linguagem de script, como JavaScript, e manipular as propriedades para criar efeitos especiais como borrachas. Essas borrachas podem ser configuradas usando o comportamento Alterar propriedade.

Especifica o local e o tamanho do bloco de conteúdo. A maneira como o navegador interpretará o local depende da configuração de tipo. Os valores de tamanho serão substituídos se o conteúdo do bloco de conteúdo exceder o tamanho especificado.

As unidades padrão de local e tamanho são pixels. Você também pode especificar as seguintes unidades: pc (paicas), pt (pontos), in (polegadas), mm (milímetros), cm (centímetros), (ems), (exs) ou % (porcentagem do valor do pai). As abreviações devem seguir o valor, sem espaços: por exemplo, 3mm.

Determina a condição de exibição inicial do conteúdo. Se você não especificar uma propriedade de visibilidade, o conteúdo herdará o valor da tag-mãe, por padrão. A visibilidade padrão da tag body está visível. Selecione uma das seguintes opções de visibilidade:

• Inherit herda a propriedade de visibilidade do pai do conteúdo.

• Visible exibe o conteúdo, independentemente do valor do pai.

• Hidden oculta o conteúdo, independentemente do valor do pai.

Definição de propriedades da extensão de estilo CSS

As propriedades de estilo Extensões incluem filtros, quebra de página e opções de ponteiro.

Altera a imagem de ponteiro quando o ponteiro está sobre o objeto controlado pelo estilo. Selecione a opção desejada no menu pop-up. O Internet Explorer 4.0 e posterior, e o Netscape Navigator 6 oferecem suporte a este atributo.

Aplica efeitos especiais ao objeto controlado pelo estilo, incluindo desfoque e inversão. Selecione um efeito no menu pop-up.

Força uma quebra de página durante a impressão, antes ou após o objeto controlado pelo estilo. Selecione a opção desejada no menu pop-up. Não há suporte para esta opção em nenhum navegador 4.0, mas os navegadores posteriores podem oferecer suporte a ela.