Chega de teoria, vamos trabalhar. Vamos criar um controle de edição e modificar seus estilos na página "PAGE_Styles" do projeto "Styles".
Observação: Usaremos um controle de edição, mas o princípio de manipulação de estilos pode ser aplicado a todos os controles disponíveis no WEBDEV.

Para criar o controle de edição:
1. No painel "Criação", no grupo "Controles usuais", clique em .
2. Clique onde deseja criar o controle na página.

Este controle está associado a um estilo WEBDEV (é o estilo WEBDEV padrão definido no skin escolhido ao criar o projeto).

Três métodos podem ser usados para selecionar o estilo WEBDEV de um controle:
- Por meio da guia "Estilo" encontrada na descrição de controle do controle (como já visto).
- Através do painel "Modificação" da faixa de opções: é exibida uma prévia dos diferentes estilos WEBDEV disponíveis para o controle.
- Exibindo o menu pop-up de controle e selecionando "Escolha um estilo WEBDEV".

Este último método será utilizado para associar o controle recém-criado ao estilo "EDT_Custom". Este estilo é usado por todos os outros controles de página.
1. Selecione o controle que acabou de ser criado.
2. Exiba o menu de contexto de controle e selecione "Escolha um estilo WEBDEV".
3. Na janela que aparece, selecione o estilo "Personalizado".
4. Valide a janela para seleção de estilo. A cor da legenda de controle muda: o estilo é aplicado.

Salve a página (Ctrl + S) e execute o teste de página ( entre os botões de acesso rápido).
1. A página é exibida no navegador.
2. Insira a entrada no novo controle de edição: a área de entrada é colorida em amarelo.
3. Feche o navegador.

Substituindo um estilo CSS para um controle

Agora vamos modificar o estilo da área de entrada encontrada no controle:
1. Abra a janela de descrição do controle criado.
2. Na guia "Estilo", escolha o elemento "Área de entrada (CSS)".
3. Clique no link "Mais substituições" para substituir o CSS deste elemento.
4. Selecione o status “Editar”.
5. Na guia "Plano de fundo", altere a cor do plano de fundo. Escolha uma cor roxa, por exemplo.
6. Validar. No painel de estilos WEBDEV, o link (canto superior direito) indica "1 substituição".
7. Ao clicar nele, você pode ver que a cor de fundo da área interna editável foi substituída.
8. Valide a janela de descrição do controle.

Salve a página (Ctrl + S) e execute o teste de página ( entre os botões de acesso rápido).
1. A página é exibida no navegador.
2. Mova o cursor de um controle para outro: a cor de fundo é amarela para todos os controles, exceto para o controle que acabou de ser criado.
3. Feche o navegador.

Modificando um estilo CSS para todos os controles

Agora vamos modificar o estilo CSS da área de entrada para alterar a cor do texto. Esta modificação será realizada para todos os controles de edição da página.
1. Exibe a janela de descrição do controle criado (Alt + Enter).
2. Na guia "Estilo", escolha o elemento "Área de entrada (CSS)".
3. Clique no botão [...] à direita do nome do estilo CSS. A janela para editar o estilo CSS é exibida.
4. Selecione o status "Normal".
5. Na guia "Texto", altere a cor. Escolha uma cor verde, por exemplo.
6. Valide a seguir valide a janela de descrição do controle.

Salve a página (Ctrl + S) e execute o teste de página ( entre os botões de acesso rápido).
1. A página é exibida no navegador.
2. Digite o texto nos diferentes controles de edição da página: o texto é exibido com a nova cor selecionada. Esta modificação foi levada em conta inclusive no controle que foi criado anteriormente e cujo estilo foi sobrescrito.
3. Feche o navegador.

Estilos e rich text

Quanto à aparência, você também pode definir rich text nos elementos!

O rich text permite que você use estilos diferentes para as diferentes palavras na legenda de controle. Portanto, para a legenda de um controle de edição, você pode definir que parte da legenda usará a cor padrão, enquanto outra parte usará uma cor diferente.

Vamos dar um exemplo simples: adicionar um asterisco vermelho para especificar que um controle é obrigatório.

Em nosso exemplo:
1. Selecione o controle de edição "Nome".
2. Pressione a tecla ESPAÇO ou ENTER no teclado.
3. O texto da legenda se torna editável.
4. Adicione uma estrela no final da legenda.
5. Selecione esta estrela.
6. No painel "Texto", no grupo "Fonte":
  - Clique no botão para trocar a estrela em expoente.
  - Mude a cor do texto para vermelho com o botão.
7. Saia do modo de edição (tecla Esc).
8. O asterisco vermelho aparece na legenda do controle.

Páginas

quarta-feira, 28 de outubro de 2020

DICAS 3162 -WEBDEV TUTORIAL 96 - 10-11-2020-10_00Hrs-Licao 7.1 - Styles Exemplos - PARTE B - FINAL

https://youtu.be/NjENgYgkwL8

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

ASSUNTOS

ACHEI TOP ESSAS DUAS AULAS DE CSS, MAS NO FINAL
DA AULA, MOSTRANDO COMO COLOCAR ESTRELA NO TEXTO
COMO OBRIGATORIO, FOI TOP DEMAIS