Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

Versão 1 Próxima »

CSS (Cascading Style Sheet) é a linguagem utilizada para adicionar estilo à um documento HTML e descreve como os elementos HTML devem ser mostrados.

Aba estilos

Criar regra CSS

A área responsável por alterar o CSS de um componente ou um formulário HTML é a aba Estilo (destaque da Figura 1.1), que fica presente no menu lateral do editor de views. Através dessa opção, os códigos ficam salvos no arquivo app.css para qualquer componente utilizar (Figura 1.2.3).



Figura 1.1 - Aba Estilos


  1. Nova regra CSS: abre a aba que contém as propriedades de CSS;
  2. Lista os códigos CSS salvos;
  3. Remover regra: apaga a regra correspondente ao ícone

Arquivo app.css

Ao criar uma regra ou editar uma regra existente, será aberta a aba que contém as propriedades CSS e os seguintes dados são mostrados:


Figura 1.2.1 - Dados e botões da regra CSS


  1. Visualizar no arquivo: abre o arquivo css mostrando a regra CSS correspondente;
  2. Código da regra CSS - ao dá um duplo clique, é possível renomear;
  3. Salvar: salva as alterações feitas para a regra CSS - o botão só aparece após uma modificação;
  4. Cancelar: cancela as alterações feitas para a regra CSS;
  5. Remover regra: apaga a regra CSS.


Ao clicar em visualizar no arquivo, o arquivo app.css será aberta na área de edição (Figura 1.2.2). Esse arquivo se encontra no diretório css, tanto em mobile quanto em web:

  • Códigos Fonte / Principal / Códigos Fonte Mobile / www / css, se for visualização por categoria, ou src / main / mobileapp / www / css, se for visualização por pasta;
  • Códigos Fonte / Principal / Códigos Fonte Web / css, se for visualização por categoria, ou src / main / webapp / css, se for visualização por pasta.

Figura 1.2.2 - arquivo app.css

Visualização básica x avançada

Por padrão, o modo de exibição dessa aba está no básico (1 da Figura 2) mas é possível trocar para o avançado (2 da Figura 2), que transforma a aba para o modo de editor textual e o usuário pode adicionar as propriedades da maneira que ele deseja.


Figura 1.3 - Modo de visualização

Propriedades CSS

Estilo de exibição

O estilo de exibição engloba as propriedades referentes ao plano de fundo (background), borda (border), raio (border-radius), opacidade (opacity), exibir (display) e overflow.

Plano de fundo

O plano de fundo abriga as propriedades background-image e background-color:

  • Background-image: ao clicar no botão Imagem (1 da Figura 2.1), será aberta uma janela que contém todas as imagens existentes no projeto e ao selecioná-la, o endereço será exibido no campo abaixo (2 da Figura 2.1);


Figura 2.1 - Adicionando imagem ao plano de fundo


  • Background-color: ao clicar no botão de cor (destaque da Figura 2.2), será aberta um modal que conterá a paleta de cores:


Figura 2.2 - Adicionando cor ao plano de fundo


  1. Ao clicar sobre alguma parte da área colorida, será selecionado a cor em destaque e que será mostrado o valor RGB, hexadecimal ou HSL (3 da Figura 2.2);
  2. Deslizando o slider, é possível fazer a alteração da cor;
  3. Informa o valor RGB, hexadecimal ou HSL da cor selecionada;
  4. Altera a visualização de RGB para hexadecimal, de hexadecimal para HSL e de HSL para RGB;
  5. Informa o valor em hexadecimal da cor selecionada no fim.

Borda

Adiciona a propriedade border e permite selecionar qual lado da borda (1 a 4 da Figura 2.3), o estilo da borda (5 da Figura 2.3), o valor da borda selecionada em pixel (6 da Figura 2.3) e a cor (7 da Figura 2.3).


Figura 2.3 - Adicionando borda


  1. Ao clicar, seleciona a borda superior (border-top);
  2. Ao clicar, seleciona a borda esquerda (border-left);
  3. Ao clicar, seleciona a borda inferior (border-bottom);
  4. Ao clicar, seleciona a borda direita (border-right);
  5. Seleciona o tipo de borda, podendo ser none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit;
  6. Define o valor em pixel na(s) borda(s) selecionada(s);
  7. Abre a paleta de cores para adicionar cor a(s) borda(s) selecionada(s).

Raio

Adiciona a propriedade border-radius, onde arredonda a borda conforme a quantidade de pixels. Assim como a borda, ela permite selecionar qual lado terá o arredondamento (1 a 4 da Figura 2.4) e a quantidade de pixels que vai ser utilizada (5 da Figura 2.4):


Figura 2.4 - Arrendondamento de borda


  1. Ao clicar, seleciona a borda superior (border-top) e aplica o arredondamento de acordo com o valor do pixel;
  2. Ao clicar, seleciona a borda inferior (border-bottom) e aplica o arredondamento de acordo com o valor do pixel;
  3. Ao clicar, seleciona a borda esquerda (border-left) e aplica o arredondamento de acordo com o valor do pixel;
  4. Ao clicar, seleciona a borda direita (border-right) e aplica o arredondamento de acordo com o valor do pixel;
  5. Define a quantidade de pixel na(s) borda(s) selecionada(s).

Geral

A parte geral apresenta as propriedades de opacidade, que determina a opacidade e a transparência de um elemento (1 da Figura 2.5); o modo como esse elemento vai ser mostrado (2 da Figura 2.5) e o overflow (3 e 4 da Figura 2.5), que faz o controle do elemento quando o seu conteúdo é grande para aparecer na área:


Figura 2.5 - Opacidade, exibição e overflow


  1. Opacidade: ao deslizar o slider, seleciona o valor de 0 à 1 e quanto mais alto o valor, mais opaco será o elemento;
  2. Exibir: seleciona a forma como esse elemento será exibido, podendo ser block, inline-block ou nenhum;
  3. OverflowX: define o tipo de controle quando o conteúdo do elemento ultrapassa a sua largura, podendo ser:
    • Vísivel: o conteúdo é renderizado, mesmo que ultrapasse a largura do elemento;
    • Hidden: o conteúdo que ultrapassou o elemento é cortado;
    • Scroll: o conteúdo que ultrapassou o elemento é cortado, mas um scrollbar é adicionado para ver o restante;
    • Auto: similar ao scroll, mas adiciona o scrollbar quando for necessário.
  4. OverflowY: define o tipo de controle quando o conteúdo do elemento ultrapassa a sua altura, podendo ser:
    • Vísivel: o conteúdo é renderizado, mesmo que ultrapasse a altura do elemento;
    • Hidden: o conteúdo que ultrapassou o elemento é cortado;
    • Scroll: o conteúdo que ultrapassou o elemento é cortado, mas um scrollbar é adicionado para ver o restante;
    • Auto: similar ao scroll, mas adiciona o scrollbar quando for necessário.

Posição e espaçamento

Posição e espaçamento engloba as propriedades referentes às dimensões (width e height), à posição (position), à margem (margin) e ao preenchimento (padding).

Dimensões

São definidas as propriedades de largura (width) e altura (height), como também define os seus valores máximos (max-width e max-height) e valores mínimos (min-width e min-height) (Figura 2.6).


Figura 2.6 - Definindo largura e altura

  1. Aplicações referente à largura:
    • Largura: define um valor para a largura do elemento;
    • Máximo: define um valor máximo para a largura do elemento;
    • Mínimo: define um valor mínimo para a largura do elemento.
  2. Aplicações referente à altura:
    • Altura: define um valor para a altura do elemento;
    • Máximo: define um valor máximo para a altura do elemento;
    • Mínimo: define um valor mínimo para a altura do elemento.
  3. Ao clicar sobre o px, abrirá uma caixa de seleção contendo outras unidades de comprimento: %(porcentagem), px (pixel, valor padrão), pt (ponto), cm (centímetro), mm (milímetro), in (polegada), pc (paica), em, ex, ch, rem, vm, vh, vmin e vmax.

Posição

Determina o tipo de posicionamento que o elemento usará como também apresenta as propriedades topo (top), esquerda (left), direita (right) e fundo (bottom) para definir o posicionamento:


Figura 2.7 - Selecionando posicionamento

  1. Posição: seleciona um dos quatros tipos de posicionamento informados, o estático (static), o absoluto (absolute), o fixo (fixed) e o relativo (relative);
  2. Área de visualização dos valores aplicados nas propriedades topo, esquerda, direita e fundo em seus respectivos lugares.
  3. Topo: informa o valor de posicionamento na unidade selecionada da parte superior do elemento;
  4. Esquerda: informa o valor de posicionamento na unidade selecionada do lado esquerdo do elemento;
  5. Direita: informa o valor de posicionamento na unidade selecionada do lado direito do elemento;
  6. Fundo: informa o valor de posicionamento na unidade selecionadada parte inferior do elemento;
  7. Ao clicar sobre o px, abrirá uma caixa de seleção contendo outras unidades de comprimento: %(porcentagem), px (pixel, valor padrão), pt (ponto), cm (centímetro), mm (milímetro), in (polegada), pc (paica), em, ex, ch, rem, vm, vh, vmin e vmax.

Margem

Adiciona a propriedade margin e permite selecionar qual lado do elemento ela será aplicada (Figura 2.8):


Figura 2.8 - Definindo margin


  1. Ao clicar, seleciona a margem superior (margin-top);
  2. Ao clicar, seleciona a margem esquerda (margin-left);
  3. Ao clicar, seleciona a margem inferior (margin-bottom);
  4. Ao clicar, seleciona a margem direita (margin-right);
  5. Define a quantidade de pixel na(s) margem(ns) selecionada(s).

Preenchimento

Adiciona a propriedade padding e permite selecionar qual lado do elemento ela será aplicada (Figura 2.9):


Figura 2.9 - Adicionando padding


  1. Ao clicar, seleciona a parte superior do elemento para preenchimento (padding-top);
  2. Ao clicar, seleciona a parte superior do elemento para preenchimento (padding-left);
  3. Ao clicar, seleciona a parte superior do elemento para preenchimento (padding-bottom);
  4. Ao clicar, seleciona a parte superior do elemento para preenchimento (padding-right);
  5. Define a quantidade de pixel para o preenchimento na(s) parte(s) selecionada(s).

Fonte e texto

Engloba as opções referentes fontes e alinhamento, como descritos abaixo (Figura 2.10):


Figura 2.10 - Configurando o conteúdo do elemento


  1. Fonte: seleciona uma das fontes da lista para o conteúdo do elemento, como Arial, Arial Black, Comic Sans MS, courier new, Georgia, Impact, Lucinda Console, Lucinda Sans Unicode, Palatino Linotype, Tahoma, Times New Roman, Trebuchet MS e Verdana;
  2. Tamanho: define um tamanho para o conteúdo do elemento conforme a unidade de comprimento selecionada;
  3. Ao clicar sobre o px, abrirá uma caixa de seleção contendo outras unidades de comprimento: % (porcentagem), px (pixel, valor padrão), pt (ponto), cm (centímetro), mm (milímetro), in (polegada), pc (paica), em, ex, ch, rem, vm, vh, vmin e vmax;
  4. Cor da fonte: ao clicar no botão de cor, será aberta um modal que conterá a paleta de cores
  5. Espaçamento entre caracteres: define um valor para criar um espaçamento entre os caracteres do conteúdo conforme a unidade de comprimento selecionada;
  6. Espaçamento entre linhas: define um valor para criar um espaçamento entre as linhas do conteúdo conforme a unidade de comprimento selecionada;
  7. Alinhamento: seleciona uma das quatro opções de alinhamento para o conteúdo do elemento, podendo ser justificado (justify), esquerda (left), centro (center) e direita (right);
  8. Estilo de fonte: aplica um estilo para a fonte do conteúdo, podendo ser negrito (bold), itálico (italic) e / ou sublinhado (underline);
  9. Efeito de transformação: aplica um efeito no conteúdo do elemento, podendo ser transformar todos os caracteres em minúsculo (lowercase), deixa no padrão (none) ou transformar todos os caracteres em maiúsculo (uppercase).

Vincular regra CSS ao componente

Ao salvar a regra, a mesma poderá ser utilizada por diversos componentes. Para isso, basta somente clicar na área que apresenta as regras CSS na propriedade Classes CSS que os componentes apresentam na aba de propriedades e selecioná-la(s) (destaque da Figura 3).

Para remover uma regra, clique no ícone de x que corresponde à ela.

Figura 3 - Vinculando regra CSS ao componente

Subaba estilos nos componentes

Os componentes do Cronapp possuem uma subaba chamada Estilos, no qual ela apresenta alguns elementos do componente que podem ser estilizados - tornando assim mais prático a estilização desejada. Esses elementos variam conforme o componente selecionado - ou seja, os elementos apresentados para o componente entrada de texto podem não ser os mesmos do componente caixa de seleção fixa.


Figura 4.1 - Elementos do componente para estilização


Além disso, algo muito importante sobre a estilização através da subaba é que ela é inline - ou seja, a estilização será salva no código HTML e não no arquivo app.css, sendo assim, não será possível fazer a reutilização dela em outros componentes.

Figura 4.2 - Estilização salva no código HTML

Nessa página



  • Sem rótulos