Sky CSS Tools

As folhas de estilo são parte essencial da criação de páginas para a internet. Já há bastante tempo que as tags do HTML que formatavam texto foram deixadas de lado, favorecendo o estilo externo. Além de permitir ajustes durante a criação do site, as folhas de estilo também facilitam – e muito – o redesenho de páginas.

Porém, como a criação desses folhas de estilo é normalmente feita através de códigos, não é raro encontrar estilos mal-formatados, ou mesmo que não funcionam. Para resolver isso, o Sky CSS Tools permite a criação das folhas de estilo sem codificar nada, através de uma interface visual.

Na coluna da esquerda, algumas das entidades do CSS – também conhecidas por Selectors – estão listadas. No seu arquivo, caso seja necessário usar alguma entidade que não esteja presente, basta nomeá-la no campo logo abaixo da lista e acionar o botão Add. Se alguma entidade existente não for utilizada no seu site, basta apagá-la da lista através do botão Remove.

À direita da lista de entidades, um campo de botões coloca a seu alcance as propriedades de cada entidade. Ao acionar cada um deles, o painel logo abaixo dos botões revela as diversas características e os valores relativos a cada propriedade. Todos os campos desse painel são acompanhados de dicas sobre a utilização de cada característica. Dentre as características que podem ser alteradas estão:

• Tipografia (Font): tamanho, cor, família, distorções, espaçamentos, capitalização

• Texto (Text): decoração, alinhamento, capitalização, indentação, espacejamento, entreletras
• Cor/Fundo (Color/B.G.): cor de fundo e de frente, repetição de imagem de fundo, fixação da imagem de fundo, posição
• Listas (List): posição, estilo, imagem de estilo
• Posicionamento (Placement): posição, distâncias, flutuação, alinhamento vertical
• Visibilidade (Display): cursor, visualização, visibilidade, Z-index, excesso de texto, margem, recorte
• Margem (Margins): margens padrão, esquerda, direita, inferior e superior
• Enchimento (Padding): enchimentos padrão, esquerdo, direito, inferior e superior
• Dimensão (Dimensions): larguras padrão, máxima e mínima, alturas padrão, máxima e mínima
• Bordas (Borders): estilos, largura e cor
• Tabelas (Tables): renderização de bordas, espaçamento, lado de legenda, células vazias, cabeçalhos persistentes, layout de tabela

O último botão do campo direito – CSS Code – irá entregar o código CSS que você compôs. Todas as entidades listadas, e as propriedades definidas para cada uma delas, estarão já formatadas na sintaxe correta para uma visualização precisa do estilo quando relacionado ao HTML do seu site.