Usar estilos para seus controles cria uma vantagem significativa: uma modificação realizada em um estilo WEBDEV ou CSS é aplicada automaticamente a todos os controles que usam esse estilo.

Descobrindo estilos

Antes de usar os estilos, vamos ver seu suporte de aplicação: os controles.

Um controle: vários elementos

Cada controle WEBDEV inclui vários elementos.

Vamos considerar o controle de edição, por exemplo. Este controle inclui três elementos:
- a legenda.
- a área de entrada.
- uma área adicional contendo a legenda e a área de entrada.

Como os estilos são aplicados ao controle de edição? O modo de aplicação de estilos depende do tipo de estilo usado (WEBDEV ou CSS).
- Os estilos CSS no WEBDEV serão aplicados aos elementos de controle .
  Para o controle de edição, um estilo CSS específico pode ser aplicado à legenda do controle de edição ou à área de entrada.
- Os estilos WEBDEV serão aplicados a todo o controle .
  Um estilo WEBDEV inclui vários estilos CSS.
  Por exemplo, no controle de edição, o estilo WEBDEV contém:
  - O estilo CSS da legenda,
  - O estilo CSS para a área de entrada,
  - As diferentes opções de estilo para a área global de controle.

Descobrindo os estilos por meio de um exemplo

Para descobrir os estilos no WEBDEV, um exemplo simples foi preparado para você:
1. Inicie o WEBDEV 25 se necessário.
2. Exiba a página inicial do WEBDEV se necessário (Ctrl + <).
3. Na janela inicial, clique em "Tutorial" e selecione "Estilos (Resposta)".
4. Abra a página "PAGE_Styles" no editor.
5. Exiba a janela de descrição do controle de edição "Nome" (exiba o menu pop-up do controle e selecione "Descrição").
6. Selecione a guia "Estilo". Esta guia é usada para definir as características de estilo de controle.
7. A seguinte janela é exibida:

Esta janela permite gerenciar os estilos CSS (seção 1 da janela) e os estilos WEBDEV (seção 2 da janela) para o controle. Vamos dar uma olhada nos recursos desta janela.

Selecionando o estilo CSS de um controle

Para selecionar os estilos CSS de um controle:
1. Na guia "Estilo" da janela de descrição do controle, na caixa de combinação "Elemento", selecione o elemento com o estilo desejado.
  
  Observação: Todos os elementos marcados como "(CSS)" podem usar um estilo CSS diretamente: tudo o que você precisa fazer é selecionar seu nome.
2. A caixa de combinação "Estilo CSS" é usada para escolher o estilo CSS do elemento: este estilo será aplicado ao elemento.

Editando o estilo CSS de um controle

Para criar ou editar um estilo CSS:
1. Na guia "Estilo" da janela de descrição do controle, clique em "..." ao lado da caixa de combinação "Estilo CSS".
2. A janela para edição dos estilos CSS é aberta.
3. Esta janela permite criar ou modificar todos os estilos CSS do projeto.

Vamos estudar esta janela. Esta janela inclui 2 seções:
- Seção 1. O status do controle ao qual o estilo será aplicado: normal, rollover, ativo, ...
- Seção 2. As propriedades CSS associadas ao status selecionado. Cada propriedade CSS pode ser modificada para cada status.

Vamos verificar as características do estilo CSS denominado "MyCustomStyle_InputArea":
1. Selecione o estilo "MyCustomStyle_InputArea" na caixa de combinação da seção 1, se necessário.
2. Selecione o status "Normal" (o primeiro status da seção 1).
3. Clique na guia "Plano de fundo": a cor do plano de fundo é branco.
4. Selecione o status "Editar" (o 4º status da seção 1).
5. Na guia "Plano de fundo", a cor de fundo da área de entrada é amarelo pastel. O estilo CSS contém o estilo de cada um dos estados .
6. Feche a janela de descrição do estilo CSS.

A guia "Estilo" encontrada na janela de descrição do controle é exibida novamente. Na seção inferior da janela, você tem a capacidade de acessar rapidamente os elementos de estilo que são modificados com frequência:
- Fonte,
- Tamanho,
- Negrito, Itálico, Sublinhado, Riscado,
- Alinhamento vertical e horizontal,
- Cor de fundo.


	Cuidado	Essas opções são usadas para substituir rapidamente o estilo CSS do controle atual. Neste caso, as modificações realizadas nestas opções não serão aplicadas aos demais controles que utilizam este estilo CSS. O link "Mais opções" é usado para substituir todas as outras propriedades de estilo CSS.

Vamos agora descobrir os estilos WEBDEV.

Os estilos WEBDEV

Um estilo WEBDEV inclui vários estilos CSS. Por exemplo, no controle de edição, o estilo WEBDEV contém:

O estilo CSS da legenda,
O estilo CSS para a área de entrada,
As diferentes opções de estilo para a área global de controle.

Para gerenciar os estilos WEBDEV, use o painel exibido à direita da guia "Estilo" de controle:
O nome do estilo WEBDEV é exibido na parte superior desta janela. Você pode:
- Escolha um estilo existente,
- Adicione o estilo do controle atual à folha de estilo do projeto.
  Esta opção permite que você reutilize este estilo em outros controles de projeto.
- Dissocie esse controle.
  Esta opção evita que futuras modificações de estilo sejam aplicadas a este controle. Esta opção não é recomendada: recomendamos que você use substituições de estilo.

A skin do projeto define um estilo WEBDEV para cada tipo de controle. Este estilo WEBDEV pode ser usado "como está" ou pode ser modificado em alguns elementos de controle. Por exemplo, para especificar que a legenda deve estar em negrito em um controle de edição (e apenas neste), você deve:

Selecione o elemento "Legenda (CSS)" na área inferior da guia "Estilo".
Selecione "Negrito" na área inferior.

Esta modificação não irá dissociar o estilo WEBDEV do controle: a propriedade Bold será anulada em relação ao estilo inicial.

Portanto, se o estilo inicial for modificado (para alterar a cor de fundo, por exemplo), esta modificação será aplicada a este controle, mantendo a substituição.

Páginas

terça-feira, 27 de outubro de 2020

DICAS 3161 -WEBDEV TUTORIAL 95 - 09-11-2020-10_00Hrs-Licao 7.1 - Styles Estilos - PARTE A

https://youtu.be/kogyCi8AnLQ

Esse Video Ao Vivo vai estrear as 10:00 do dia 09/11/2020-

Nenhum comentário:

Postar um comentário