Layout, caixa de diálogo estilo construtor

Artigo
08/25/2010

The Layout página de do Construtor de estilo caixa de diálogo possibilita definir layout atributos de página de folha de estilos em cascata (CSS) estilos em cascata.Atributos de layout da página determinam como os elementos serão posicionados no fluxo do fluxo de HTML.Você pode aplicar esses atributos diretamente aos elementos HTML ou adicioná-los a regras de estilo CSS.

Para aplicar atributos de layout diretamente aos elementos HTML em sua página

Abra seu documento HTML no modo de exibição de Design do HTML Designer e use a janela Document estrutura de tópicos para selecionar um elemento para formatar.
clicar Estilo on the Formato menu para em em aberto o Construtor de estilo caixa de diálogo.
clicar Layout no painel esquerdo do Construtor de estilo caixa de diálogo.

The Layout, estilo construtorcaixa de diálogo aparece no painel direito.

Quando aplicar estilos de elementos selecionados no modo de modo de exibição de Design, os atributos de estilo CSS são inserido embutido em marcação HTML para esses elementos.Alterne para o modo de exibição HTML para examinar os novos atributos de estilo inseridos.

Para adicionar o layout de atributos a uma CSS estilo regra definida em uma folha de estilos externo

Abra uma folha de estilos externo existente e coloque o ponto de inserção entre chaves curvas ({}) que seguem o seletor para a regra de estilo desejado.
clicar Criar estilo on the Estilos menu para em em aberto o Construtor de estilo caixa de diálogo.
clicar Layout no painel esquerdo do Construtor de estilo caixa de diálogo.

The Layout, estilo construtorcaixa de diálogo aparece no painel direito.

Observação:
O Estilos menu aparece quando você abre uma folha de estilos CSS externa para edição.Sobre o Estilos menu, the Criar estilo opção fica disponível quando você coloca o ponto de inserção dentro de chaves que seguem o seletor para uma regra de estilo.

Uma classe de estilo CSS definida em uma folha de estilos externas pode ser aplicada a um elemento dentro de <BODY> elemento de uma página da Web (neste caso, incluindo o <BODY> elemento propriamente dito) atribuindo o seletor de estilo CSS sistema autônomo o CLASS propriedade do elemento.

Opções disponível na Layout página de do Construtor de estilocaixa de diálogo incluem o seguinte.

Tarefas

Elementos da Interface do Usuário

Controle de fluxo

Isso definido de atributos de controles do fluxo de elementos dentro do documento HTML.sistema autônomo áreas de visualização adjacentes a Controle de fluxoseletores de são atualizados à medida que você selecionar opções.Os seguintes atributos podem afetar aparência e o desempenho quando páginas são exibidas em navegadores.

Visibilidade
Conjuntos de ambos os oculto (não visível) ou valor visível para a propriedade de visibilidade.selecionar Não conjunto > (nenhum opção escolhida), Oculto, or Visível.Por exemplo, se você escolher Oculto, a seguinte marcação CSS será inserida:

VISIBILITY:hidden

Observação:

Quando o atributo é Não conjunto >, nenhum código é adicionado ao estilo.

Observação:
Quando o atributo é Não conjunto >, nenhum código é adicionado ao estilo.

Exibir
Define o DISPLAY valores de atributo para um elemento. Você pode especificar se um elemento é exibido e se um elemento exibido aparece sistema autônomo um elemento de bloco ou dentro do fluxo linear.selecionar Não conjunto > (nenhum opção escolhida), Não são exibidos, sistema autônomo um elemento de bloco, or sistema autônomo um elemento de fluxo.Normalmente, um elemento de bloco inicia uma nova linha e não pode ser maior do que seu contêiner pai.Por exemplo, um com estilo <H1> elemento dentro de um <BODY> elemento não pode ser maior do que a que contém <BODY> elemento. Normalmente, um elemento embutido não inicia uma nova linha e é dimensionado de acordo com a altura e largura do seu próprio conteúdo.Por exemplo, se você optar por sistema autônomo um elemento de bloco, a seguinte marcação CSS será inserida:

DISPLAY:block

Observação:
Quando o valor do atributo é Não conjunto >, nenhum código é adicionado ao estilo.

Observação:
Visibility e Display propriedades são relacionadas, mas não o mesmo. Ocultar um elemento não reduz a quantidade de time necessário por um navegador para exibir uma página.No entanto, um navegador ignora um elemento que não aparece.Conseqüentemente, um navegador exibirá uma página que contém elementos que não são exibidos mais rapidamente do que se os mesmos elementos foram apenas ocultados.Além disso, quando você dispor texto ao redor de um elemento oculto, o texto aparece ao redor de um espaço vazio.Considere essas dependências quando selecionar as propriedades de layout.

Visibility e Display propriedades são relacionadas, mas não o mesmo. Ocultar um elemento não reduz a quantidade de time necessário por um navegador para exibir uma página.No entanto, um navegador ignora um elemento que não aparece.Conseqüentemente, um navegador exibirá uma página que contém elementos que não são exibidos mais rapidamente do que se os mesmos elementos foram apenas ocultados.Além disso, quando você dispor texto ao redor de um elemento oculto, o texto aparece ao redor de um espaço vazio.Considere essas dependências quando selecionar as propriedades de layout.

Permitir que o texto fluir
Define atributos que determinam como o texto flutua em torno de um elemento.selecionar Não conjunto > (nenhum opção escolhida), Não permitem o texto dos lados, Para a direita, or Para a esquerda.Por exemplo, se você escolher Para a direita, a seguinte marcação CSS será inserida:

FLOAT:left

Observação:

Quando o atributo é Não conjunto >, nenhum código é adicionado ao estilo.
Permitir que objetos flutuantes
Define os atributos que controle onde os objetos são permitidos para flutuar em uma página.selecionar Não conjunto > (nenhum opção escolhida), Em ambos os lados (objetos podem ser flutuantes à esquerda ou direita da página), Somente à direita (os objetos podem flutuar somente o lado direito da página), Somente à esquerda (os objetos podem flutuar somente o lado esquerdo da página), ou Não permitir (objetos não podem flutuar na página).Por exemplo, se você escolher Somente à direita, a seguinte marcação CSS será inserida:

CLEAR:left

Observação:

Quando o atributo é Não conjunto >, nenhum código é adicionado ao estilo.

Observação:
Quando o atributo é Não conjunto >, nenhum código é adicionado ao estilo.

Observação:
Quando o atributo é Não conjunto >, nenhum código é adicionado ao estilo.

Conteúdo

Estouro
Define os atributos que controle o comportamento de elementos quando elementos contêm mais conteúdo que se ajusta a altura definida e a largura do elemento.selecionar Não conjunto > (nenhum opção escolhida), Use as barras de rolar se necessário (barras de rolar aparecem se conteúdo excede o dimensionar do elemento definido), Sempre usar barras de rolar (barras de rolar sempre aparecem), Conteúdo não é cortado (o elemento se expande para acomodar o conteúdo), ou Conteúdo é cortado (conteúdo que excede o dimensionar do elemento não é exibida).Por exemplo, se você escolher Conteúdo não é cortado, a seguinte marcação CSS será inserida:

OVERFLOW:visible

Observação:

Quando o valor do atributo é Não conjunto >, nenhum código é adicionado ao estilo.

Recorte

Define atributos controlam qual parte retangular de um elemento é exibido.Por exemplo, você pode exibir apenas o canto superior direito de um elemento.Insira valores em um ou mais dos campos (Parte superior, Parte inferior, À esquerda, or À direita) e selecionar uma opção de unidade: px (padrão), pt, PC, mm, cm, em, em, ex, ou %.

Somente elementos com posição absoluta podem ser cortados.Os valores que você especifique se relacionam com os limites de um elemento.Por exemplo, se você conjunto um Top valor de corte de 40px, a parte do elemento que esteja entre 0px (parte superior do elemento) e 40px não estiver visível. Da mesma forma, se você inserir 50 no Parte superior and Parte inferior campos e, em seguida, aceite a opção de unidade padrão, a seguinte marcação CSS é inserida:

CLIP: rect(50px auto 50px auto)

Observação:
Se você atribuir valores a menos de quatro campos de recorte, os campos restantes serão atribuídos a auto valor e os limites não atribuídos não são recortados.

Quebras de página de impressão

O seguinte controle atributos quando ocorrem as quebras de página dentro de elementos usando o estilo.

Antes de
selecionar Não conjunto > (nenhum opção escolhida), Automático, or Forçar uma quebra de página.Por exemplo, se você optar por Forçar uma quebra de página, a seguinte marcação CSS será inserida:

PAGE-BREAK-BEFORE:always
Depois de
selecionar Não conjunto > (nenhum opção escolhida), Automático, or Forçar uma quebra de página.Por exemplo, se você optar por Forçar uma quebra de página, a seguinte marcação CSS será inserida:

PAGE-BREAK-AFTER:always