HTML 4.1 - Aula 12
Canal Effeccinco
Revisão da Aula Anterior
 Famílias das fontes
 Alteramos a fonte da nossa página
 Modificamos o tamanho da fonte
 Colo...
Conteúdo dessa Aula
 Nessa aula nós vamos nos aprofundar mais nos componentes de linhas e de blocos e usar alguns
comando...
Aumentando o Espaçamento da linha
 Para aumentar o espaçamento da linha no seu CSS é muito simples você deve
utilizar o c...
Modelo de Caixa
 Você já ouviu essa expressão alguma vez, pois é, no html esse modelo de
caixa significa que o CSS vê tod...
Personalizando suas bordas
 Para colocar cor nas suas bordas :
 Border-color: black;
 Para colocar expessura:
 Border-...
Tipos de borda
 Depois de definir o border-style, você pode personalizar ainda mais suas bordas,
veja:
 Solid – borda só...
Colocando cor somente em um lado da
borda
 Você pode criar uma borda e colocar uma cor apenas em um dos seus lados
usando...
Colocando preenchimento na sua tag
 Algumas vezes as bordas criadas, ficam estranhas, pois em cima e em baixo
ficam difer...
Padding
 Você ainda pode personalizar ainda mais sua tag, colocando, mais
espaçamento ainda na esquerda(left), direita(ri...
Adicionando margem a suas tags
 Para deixar todos os textos que você criar na sua página uniformes, o
interessante é você...
Margem
 Assim como o Padding você pode colocar margem esquerda(left),
direita(right), Topo(top) e em baixo(bottom), com o...
Adicionando uma imagem de fundo
 Além da propriedade img do html no CSS nós também temos um comando
aonde você pode adici...
Imagem como plano de fundo
 Além de colocar a imagem ainda existem duas propriedades interessantes.
 Para não repetir a ...
Você sabe o que é ID
 No CSS nós temos como identificar as tags através das Heranças, classes e agora vou
apresentar o ul...
Quer saber mais sobre html?
 Quer ver na prática como funciona esse conteúdo , assista a essa vídeo aula no
youtube:
 ht...
Referências
 Livro: Use a Cabeça HTML, CSS e XHTML, 2º
Edição, Editora Alta Books, Elisabeth Freeman &
Eric Freeman. Capí...
Próximos SlideShares
Carregando em…5
×

Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de fundo,ID

287 visualizações

Publicada em

Curso sobre HTML - Aula 12, nessa aula nós vamos nos aprofundar ainda mais nas CSS dentro da sua página html, para personalizar ainda mais seu site na web (website), primeiro nós vemos como colocar espaçamento entre linhas com o CSS, depois nós vemos como personalizar ainda mais as suas bordas colocando cores, espessura, estilo, depois nós vemos como colocar espaçamento em todos os lados da sua tag, aprendemos como colocar margem para distanciar um parágrafo do outro, como definir uma imagem de fundo para uma tag, e aprendemos as diferenças entre o identificador ID do identificador Class dentro do seu html.

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
287
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de fundo,ID

  1. 1. HTML 4.1 - Aula 12 Canal Effeccinco
  2. 2. Revisão da Aula Anterior  Famílias das fontes  Alteramos a fonte da nossa página  Modificamos o tamanho da fonte  Colocamos, negrito e itálico  E por fim alteramos a cor da fonte
  3. 3. Conteúdo dessa Aula  Nessa aula nós vamos nos aprofundar mais nos componentes de linhas e de blocos e usar alguns comandos no CSS, para deixar nossa página ainda mais elegante.  Você já pensou em diminuir ou aumentar o espaçamento dos seus textos na sua página na web, isso realmente vai deixar seus textos mais simples de serem lidos e o seu público realmente vai gostar disso, vamos ver como é feito essa alteração?
  4. 4. Aumentando o Espaçamento da linha  Para aumentar o espaçamento da linha no seu CSS é muito simples você deve utilizar o comando line-height, veja:  Line-height: 1.6em;  E você já sabe né o em significa vezes, então aqui ele aumenta 1.6 vezes o tamanho da letra do seu parágrafo, esse espaçamento é ótimo pois facilita a leitura para o usuário, além disso você pode usar ele para dar destaque aos seus textos na web, diferenciá-los dos demais.
  5. 5. Modelo de Caixa  Você já ouviu essa expressão alguma vez, pois é, no html esse modelo de caixa significa que o CSS vê todas as suas tags como caixas.  Cada um desses elementos tem a sua área de preenchimento, você colocar uma borda e margem sendo claro sempre opcional.  Como nós já aprendemos a personalizar o nosso conteúdo na aula anterior, como alterar fonte, cor, colocar negrito, itálico, nessa aula eu não vou entrar em muitos detalhes se vocês quiserem saber mais assistam a aula 11 aqui do nosso canal.  Vamos nos aprofundar um pouco mais no estilo da borda:
  6. 6. Personalizando suas bordas  Para colocar cor nas suas bordas :  Border-color: black;  Para colocar expessura:  Border-width: 1px;  Para colocar Estilo nas suas bordas  Border-style: solid;
  7. 7. Tipos de borda  Depois de definir o border-style, você pode personalizar ainda mais suas bordas, veja:  Solid – borda sólida e com linha contínua.  Dotted – parece um monte de pontinhos.  Double – usa duas linhas.  Dashed – parece traços pontilhados em volta da tag.  Groove – parece uma ranhura.  Inset – parece que a tag e funda  Outset – parece que a página ganha volume como se fosse um botão  Ridge – parece algo levantando na página.
  8. 8. Colocando cor somente em um lado da borda  Você pode criar uma borda e colocar uma cor apenas em um dos seus lados usando os comandos:  Border-top-color: black;  Border-right-color: blue;  Border-left-color: red;  Border-bottom-color: White;
  9. 9. Colocando preenchimento na sua tag  Algumas vezes as bordas criadas, ficam estranhas, pois em cima e em baixo ficam diferentes das bordas laterais, ficam muito próximas o que vai deixar seu texto estranho, para preencher esse espaço e deixar mais agradável, nós usamos o código de preenchimento:  Padding : 25 px;
  10. 10. Padding  Você ainda pode personalizar ainda mais sua tag, colocando, mais espaçamento ainda na esquerda(left), direita(right), Topo(top) e em baixo(bottom).  Padding-left: 80px;  Padding-right: 60px;  Padding-top: 20px;  Padding-bottom: 20px;
  11. 11. Adicionando margem a suas tags  Para deixar todos os textos que você criar na sua página uniformes, o interessante é você definir isso em todos os seus parágrafos para isso você pode definir dentro do CSS:  Margin : 30 px;  Isso significa que ele vai aplicar uma margem em todos os lados do seu elemento de 30 pixels.
  12. 12. Margem  Assim como o Padding você pode colocar margem esquerda(left), direita(right), Topo(top) e em baixo(bottom), com os comandos:  Margin-left: 250px;  Margin-right: 200px;  Margin-top: 200px;  Margin-bottom: 100px;
  13. 13. Adicionando uma imagem de fundo  Além da propriedade img do html no CSS nós também temos um comando aonde você pode adicionar imagens como plano de fundo, só que ao invés de inserir a imagem como acontece na tag img aqui você define ela como plano de fundo daquele elemento, então você pode colocar um plano de fundo em um único parágrafo, veja o comando:  Background-image: url(caminho.jpg);  Vc coloca o caminho e define a url aonde deve ser encontrada a sua imagem.
  14. 14. Imagem como plano de fundo  Além de colocar a imagem ainda existem duas propriedades interessantes.  Para não repetir a imagem você usa o comando:  Background-repeat: no-repeat;  Para deixa-la na parte superior esquerda:  Background-position: top left;
  15. 15. Você sabe o que é ID  No CSS nós temos como identificar as tags através das Heranças, classes e agora vou apresentar o ultimo conceito que é o do ID, isso significa que que esse é um código único, um identificador que só vai funcionar para uma tag, exatamente, ele funciona como se fosse o identificador da classe, porém ele só pode ser usado no seu código html apenas uma vez ao contrário da classe aonde você pode usar ela várias vezes, para colocar ele no html você define dessa forma:  <h1 id=“azul”>  Para chamar ele no CSS, é diferente da classe que era com um .(ponto) esse chama-se pelo sustenido #  #azul{  Aqui dentro continua a mesma coisa.  }
  16. 16. Quer saber mais sobre html?  Quer ver na prática como funciona esse conteúdo , assista a essa vídeo aula no youtube:  https://www.youtube.com/watch?v=6S3x8MpFocc  Quer aulas sobre HTML, veja nosso Canal no Youtube, nos assista, curta e compartilhe:  https://www.youtube.com/channel/UC7FWW7I5ZW5T9V7dQnEtD7A/feed  Acesse o nosso Blog, e confira matérias mais completas.  www.effeccinco.wix.com/effeccinco
  17. 17. Referências  Livro: Use a Cabeça HTML, CSS e XHTML, 2º Edição, Editora Alta Books, Elisabeth Freeman & Eric Freeman. Capítulo 1 – Comece a entender o HTML.  SHARMA, Vivek. SHARMA, Rajiv. Desenvolvendo Sites de e-Commerce. São Paulo: Makron Books, 2001, 598 p.

×