CSS – Fundamentos Básicos

CSS - Fundamentos Básicos
- Lecture 1
  CSS – Tutorial
- Lecture 2
  CSS – Introdução
- Lecture 3
  CSS – Sintaxe
- Lecture 4
  CSS – Unidades de medida
- Lecture 5
  CSS – Cores
- Lecture 6
  CSS – Backgrounds
- Lecture 7
  CSS – Fonts
  30 min
- Lecture 8
  CSS – Text
- Lecture 9
  CSS – Usando imagens
  30 min
- Lecture 10
  CSS – Links
- Lecture 11
  CSS – Tabelas
  30 min
- Lecture 12
  CSS – Bordas
- Lecture 13
  CSS – Listas
  30 min
- Lecture 14
  CSS – Margins
- Lecture 15
  CSS – Paddings
  30 min
- Lecture 16
  CSS – Cursores
  30 min
- Lecture 17
  CSS – barras de rolagem
- Lecture 18
  CSS – Dimensão
  30 min
- Lecture 19
  CSS – Outlines
  30 min

CSS – Fundamentos Básicos

CSS – Usando imagens

As imagens desempenham um papel importante em qualquer página da web. Embora não seja recomendado incluir muitas imagens, ainda é importante usar boas imagens sempre que necessário.

CSS desempenha um bom papel no controle da exibição de imagens. Você pode definir as seguintes propriedades de imagem usando CSS.

A propriedade border é usada para definir a largura da borda de uma imagem.
A propriedade height é usada para definir a altura de uma imagem.
A propriedade width é usada para definir a largura de uma imagem.
A propriedade -moz-opacity é usada para definir a opacidade de uma imagem.

A propriedade da borda da imagem

A propriedade border de uma imagem é usada para definir a largura de uma borda da imagem. Esta propriedade pode ter um valor em comprimento ou em%.

Uma largura de zero pixels significa que não há borda.

Aqui está o exemplo:

<html>
   <head>
   </head>

   <body>
      <img style="border:0px;" src="/css/images/logo.png" />
      <br />
      <img style="border:3px dashed red;" src="/css/images/logo.png" />
   </body>
</html>

A propriedade da altura da imagem

A propriedade height de uma imagem é usada para definir a altura de uma imagem. Esta propriedade pode ter um valor em comprimento ou em%. Ao dar o valor em%, aplica-o em relação à caixa em que a imagem está disponível.

Aqui está um exemplo:

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
   </body>
</html>

A propriedade da largura da imagem

A propriedade de largura de uma imagem é usada para definir a largura de uma imagem. Esta propriedade pode ter um valor em comprimento ou em%. Ao dar o valor em%, aplica-o em relação à caixa em que a imagem está disponível.

Aqui está um exemplo:

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
   </body>
</html>

A propriedade -moz-opacity

A propriedade -moz-opacity de uma imagem é usada para definir a opacidade de uma imagem. Esta propriedade é usada para criar uma imagem transparente no Mozilla. O IE usa filter: alpha (opacity = x) para criar imagens transparentes.

No Mozilla (-moz-opacity: x) x pode ser um valor de 0,0 a 1,0. Um valor mais baixo torna o elemento mais transparente (a mesma coisa vale para a opacidade da sintaxe válida em CSS3: x).

No IE (filtro: alfa (opacidade = x)) x pode ser um valor de 0 a 100. Um valor menor torna o elemento mais transparente.

Aqui está um exemplo:

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
   </body>
</html>

Anterior CSS – Text

Próximo CSS – Links

CSS - Fundamentos Básicos