 |
|
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: 413 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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Estudos CSS</title>
<style>
.m_div{
margin: 30px;
border: 1px solid black;
/* controla o espaço interno da DIV */
padding: 20px;
}
</style>
</head>
<body>
<div class="m_div">Gosto muito de HTML5</di>
</body>
</html>
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 navegação horizontal com menu dropdown em HTML e CSS - Menu suspenso usando CSSQuantidade de visualizações: 682 vezes |
|
Nesta dica mostrarei como podemos usar uma combinação de várias propriedades CSS para criar um menu suspenso, ou seja, uma barra de navegação contendo links normais e também links que, ao passar o mouse, exibe uma lista de sub-menus. O código apresentado neste exemplo é muito útil para estudantes de HTML e CSS, pois apresenta várias propriedades interessantes para melhorar o visual e a usabilidade de suas páginas web. Entre as propriedades CSS usadas na criação deste menu suspenso nós podemos citar overflow, margin, padding, list-style-type, background-color, display, float, text-align, text-decoration, position, min-width e z-index. Note que coloquei o mínimo de código para fazer a barra de menus funcional. Fique à vontade para acrescentar as formatações que você achar interessante. Veja a página HTML e CSS para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Estudos CSS</title>
<style>
/* estiliza o elemento <ul> */
ul{
background-color: #e0e0e0;
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none;
}
/* aplica estilo aos elementos <li> */
li{
float: left;
}
/* aplica estilo aos links e <li> do sub-menu */
li a, .dropdown_linguagens{
display: inline-block;
text-align: center;
padding: 10px 15px;
text-decoration: none;
}
/* define o display do <li> de linguagens */
li.linguagens{
display: inline-block;
}
/* aplica estilo ao menu de linguagens */
.menus_linguagens{
display: none;
position: absolute;
background-color: #eceff1;
min-width: 160px;
z-index: 1;
}
/* aplica estilo aos links do sub-menu */
.menus_linguagens a {
padding: 10px 15px;
text-decoration: none;
display: block;
text-align: left;
}
/* exibe o sub-menu ao passar o mouse */
.linguagens:hover .menus_linguagens{
display: block;
}
/* aplica uma cor diferente aos menus ao
passar o mouse */
.menus_linguagens a:hover{
background-color: #cfd8dc;
}
</style>
</head>
<body>
<h1>Exemplo de Barra de Navegação com
Menu Dropdown</h1>
<ul>
<li><a href="index.php">Inicial</a></li>
<li class="linguagens">
<a href="javascript:void(0)" class="dropdown_linguagens">
Linguagens</a>
<div class="menus_linguagens">
<a href="java.php">Java</a>
<a href="python.php">Python</a>
<a href="ruby.php">Ruby</a>
<a href="delphi.php">Delphi</a>
</div>
</li>
</ul>
</body>
</html>
|
CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo |
Apostila CSS - Como definir a cor de fundo de um elemento HTML usando um valor rgbQuantidade de visualizações: 7132 vezes |
|
A propriedade background-color aceita um valor de cor que pode ser informado por meio da função rgb(). Esta função aceita valores de 0 até 255 para a cores vermelho, verde e azul, ou seja Red, Green e Blue. Veja a figura abaixo:  A cor de fundo para esta página for gerada com o seguinte código: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <html> <head> <title>Estudando CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body style="background-color: rgb(201, 20, 58)"> </body> </html> |
CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo |
Exemplos de uso da propriedade background do CSS para definições cores e imagens de fundo em elementos HTMLQuantidade de visualizações: 8867 vezes |
|
Nesta dica mostrarei alguns exemplos muito úteis da propriedade background do CSS para definirmos cores e imagens de fundo para a página HTML e também para os elementos HTML: Exemplo 1: Como definir a cor de fundo para a página HTML usando a propriedade background: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
body {background: #0099CC}
Exemplo 2: Como definir a cor de fundo e a imagem de fundo para a página HTML usando as propriedades background e url: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
body {background: #0099CC url(fundo.gif)}
Exemplo 3: Como definir a cor de fundo, a imagem de fundo para a página HTML e a forma de repetição usando as propriedade background, url e repeat-x: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
body {background: #0099CC url(fundo.gif)
repeat-x}
Exemplo 4: Como definir a cor de fundo, a imagem de fundo para a página HTML, a forma de repetição e como fixar a imagem de fundo usando as propriedade background, url, repeat-x e fixed: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
body {background: #0099CC url(fundo.gif) repeat-x
fixed}
Exemplo 5: Como definir a cor de fundo, a imagem de fundo para a página HTML, sem repetição, fixa e posições inicias usando as propriedade background, url, repeat-x e fixed: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
body {background: #0099CC url(fundo.gif) no-repeat
fixed 40 60}
|
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Viscosidade dinâmica A viscosidade dinâmica é uma substância dada em função do aumento das tensões de cisalhamento aplicadas à substância. A proporção em que o fluido se deforma em função do tempo é chamada de: A) velocidade do fluido. B) viscosidade do fluido. C) taxa de deformação do fluido. D) densidade do fluido. E) força aplicada ao fluido. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Instalações prediais de águas pluviais Normalmente, o projeto de calha é feito em duas etapas: primeiramente, estima-se o escoamento superficial a partir do método racional e, em sequência, consulta-se uma calha com capacidade hidráulica satisfatória. Em alguns casos, o projetista deve estar apto a calcular a seção necessária, fazendo, assim, a aplicação dos conhecimentos obtidos. Uma calha em aço galvanizado com coeficiente de rugosidade n = 0,011 deverá ser instalada com declividade 0,5%. Sabendo que a seção adotada é retangular com base de 10cm e altura de 20cm, qual a capacidade hidráulica dessa calha em L/s? A) 132,45L/s. B) 165,25L/s. C) 150,40L/s. D) 180,61L/s. E) 194,27L/s. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Python |
Analise o seguinte código Pythonletras = ['ab', 'cd'] for i in range(0, 2): letras.append(letras[i].upper()) print(letras) Qual é o resultado de sua execução? A) ['ab', 'cd'] B) ['AB', 'CD'] C) ['AB', 'CD', 'AB', 'CD'] D) ['ab', 'cd', 'AB', 'CD'] Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Instalações prediais de combate a incêndio A aspersão de água por meio de chuveiros automáticos é uma técnica eficiente para combater o princípio de incêndio. A norma NBR 10897, que estabelece os parâmetros mínimos para o projeto e a instalação de sistemas de proteção contra incêndio por chuveiros automáticos, classifica os sistemas de chuveiros automáticos em quatro tipos básicos. Analise os tipos de sistemas de chuveiros automáticos listados a seguir e associe-os com as suas respectivas características: 1) Sistema de ação prévia 2) Sistema de tubo seco 3) Sistema de dilúvio 4) Sistema de tubo molhado ( ) É indicado para locais em que não há risco de congelamento da água na tubulação. ( ) É caracterizado pelo tempo prolongado entre a abertura do chuveiro automático e a descarga de água. ( ) Demanda um sistema suplementar de detecção, que deve ser instalado na mesma área dos chuveiros automáticos. ( ) Os chuveiros ficam abertos e funcionam apenas quando a água entra na tubulação após o acionamento de uma válvula. Assinale a alternativa que apresenta a sequência correta: A) 1, 2, 3, 4. B) 4, 3, 2, 1. C) 3, 2, 1, 4. D) 2, 3, 4, 1. E) 4, 2, 1, 3. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fundações |
| Questões de Concurso Engenharia Civil - Fundações COPEL - No estudo do subsolo para projeto de fundações, o número de golpes dados com um peso padrão, caindo em queda livre, de uma altura constante, necessários para a penetração de um amostrador padrão à profundidade de 30cm é denominado: A) Índice coesivo. B) Índice SPT. C) Carga morta. D) Índice de resistência à penetração. E) Carga aparente. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
Códigos 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 |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
