 |
|
||||
 Código-Fonte Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
|||||
Você está aqui: CSS ::: Dicas & Truques ::: Margens e Espaçamentos |
||||
Como definir o espaço interno dos elementos HTML usando a propriedade padding do CSSQuantidade de visualizações: 484 vezes |
||||
|
Em várias situações nós precisamos manipular, ou seja, controlar o espaço interno de elementos HTML, tais como DIVs. Isso pode ser feito por meio da propriedade padding do CSS. Lembre-se de que o espaço interno é aquele espaço entre a borda do elemento e o seu conteúdo. Veja uma página HTML e CSS na qual temos um elemento DIV contendo uma frase. Note o uso da propriedade padding para definir o espaço interno da DIV:
Experimente alterar o valor a propriedade padding para ver os resultados que serão obtidos. A propriedade padding aceita de um até quatro valores, correspondente às propriedades individuais padding-top, padding-right, padding-bottom e padding-left. O valor para o espaçamento pode ser fornecido em px, porcentagens, pt, cm e inherit (o elemento herda o espaçamento interno do elemento pai). |
||||
 Link para compartilhar na Internet ou com seus amigos: |
||||
CSS ::: Dicas & Truques ::: Barras de Navegação, Menus e Dropdowns |
||||
Como criar uma barra de menus na horizontal usando CSS e o valor inline-block para a propriedade displayQuantidade de visualizações: 504 vezes |
||||
|
Nesta dica mostrarei como podemos criar uma barra de menus horizontal usando CSS. Para isso cada item de menu será um elemento <li>, contidos dentro de um elemento <ul>. O truque é definir o valor inline-block para a propriedade display de cada elemento <li>. Veja a página HTML e CSS completa para o exemplo:
| ||||
CSS ::: Dicas & Truques ::: Media Queries |
||||
CSS3 - O que são CSS media queries e como usá-las em suas páginas web para criar designs responsivosQuantidade de visualizações: 1487 vezes |
||||
|
Os desenvolvedores web acostumados com o CSS2 com certeza vão se lembrar das media types e como as usávamos, ou ainda usamos, para definir o tipo de mídia para a qual uma determinada folha de estilo será aplicada. Com media types é possível, por exemplo, oferecer estilos diferentes dependendo se o tipo de mídia for all, screen ou print, ou seja, todos os tipos (all), somente tela (screen), ou impressão (print). O CSS3 trouxe ainda mais comodidade por meio das media queries, que, na verdade, são uma extensão das media types. Com as media queries é possível aplicar uma folha de estilo CSS baseado não somente no tipo de mídia, mas também baseado nas características do navegador web, tais como largura e altura do viewport (a área disponível para exibição dos elementos da página web), a largura e altura do dispositivo, sua orientação e resolução, etc. Veja, por exemplo, como podemos aplicar uma imagem de fundo diferente na página HTML dependendo do tamanho da tela:  E aqui o código completo para a página HTML e as definições CSS:
Este exemplo é bem simples, mas dará a você uma idéia de como iniciar hoje o mesmo o uso das media queries em CSS. Note que, se a resolução for no máximo 600px, a página terá como fundo a imagem "vertical.jpg". Se a página for aberta em outras resoluções, a imagem de fundo será "horizontal.jpg". Abra o exemplo no seu navegador e experimente redimensionar a janela. Veja como a imagem de fundo é trocada automaticamente ao atingir a resolução que definimos para o atributo max-width da media query. Esta técnica é muito utilizada quando queremos criar uma página web responsiva, ou seja, com design responsivo. | ||||
CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo |
||||
Como definir uma imagem de fundo que se repete apenas verticalmente usando a propriedade background-repeat do CSSQuantidade de visualizações: 7490 vezes |
||||
|
Nesta dica mostrarei como podemos definir uma imagem de fundo para a página HTML e ajustá-la para repetir apenas verticalmente usando a propriedade background-repeat com o valor repeat-y. Note que, para definir a imagem de fundo, nós usamos a propriedade background-image. Veja o código CSS para o exemplo:
| ||||
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
